コーディング【初心者でもわかる】web制作で使われる画像3種類。[.gif]と[.jpg]と[.png]の違い
Web制作で使うGIF・JPEG・PNGの特徴を比較します。容量、色数、透過などの違いを確認し、画像の用途に合わせて形式を選ぶためのポイントを紹介します。
新着記事
コーディング
コーディング【初心者でもわかる】cssでよく使われる単位は「px, %, vw, vh」のこの4種類！
CSSで使うpx・%・vw・vhの違いを解説します。それぞれのサイズの基準や使用例、指定するときの注意点を整理し、場面に応じた単位選びに役立てます。
コーディング【初心者でもわかる】clearfixって結局何してるの？わかりやすく解説します。
floatによる回り込みとclearfixの役割を解説します。記事・サイドバー・フッターの配置例で、レイアウトが崩れる理由と回り込みを解除する仕組みを確認できます。
コーディング【初心者でもわかる】グラデーションをつかって、コップに好きなジュースを注ぐ方法
linear-gradientを使って、コップに飲み物が入ったような背景を作る方法を紹介します。色と境界位置を指定し、ジュースの種類や量を変えるサンプルを解説します。
コーディング【初心者でもわかる】擬似要素（::before、::after）って何？サンドイッチを使って説明
CSSの疑似要素::beforeと::afterの基本を解説します。サンドイッチを作る例を通して、要素の前後に文字や画像を加える方法を紹介します。
テクニック【初心者向け】画像名の付け方わかるかな？（全5問）
Web制作で使う画像ファイル名の付け方を、5問のクイズで確認します。文字や記号の選び方、連番の付け方など、ファイルを扱いやすくする命名のポイントを紹介します。
コーディング【初心者でもわかる】画像などの要素を横並びにする3つの方法を、ナイフとフォークでやってみる
画像などの要素を横並びにする3つの方法を紹介します。ナイフとフォークの画像を使い、HTMLの配置やflexboxなど、それぞれの並べ方をサンプルで確認できます。
ツール【初心者向け】1pxのズレもなくコーディングするための便利ツール
デザイン画像と実装画面を重ねて確認できるPerfectPixelを紹介します。透過率や位置を調整しながら、コーディングの細かなズレを見つける使い方を解説します。
コーディング【初心者でもわかる】calc()を使ってロールケーキをキッチリ3等分にする方法
CSSのcalc()で要素の幅を計算し、均等に3分割する方法を解説します。ロールケーキの背景画像を例に、計算式を使ったサイズ指定と配置を紹介します。
コーディング【初心者でもわかる】いちょう切り。part2（2×2に並べた要素に隙間を作る-flexbox編-）
flexboxで2列2行に並べた要素の間に隙間を作る方法を紹介します。オレンジの画像を使った前編の続きとして、横方向と縦方向の余白を調整します。