テクニック【初心者向け】画像名の付け方わかるかな？（全5問）
Web制作で使う画像ファイル名の付け方を、5問のクイズで確認します。文字や記号の選び方、連番の付け方など、ファイルを扱いやすくする命名のポイントを紹介します。
タグ: HTML
テクニック
コーディング【初心者でもわかる】画像などの要素を横並びにする3つの方法を、ナイフとフォークでやってみる
画像などの要素を横並びにする3つの方法を紹介します。ナイフとフォークの画像を使い、HTMLの配置やflexboxなど、それぞれの並べ方をサンプルで確認できます。
ツール【初心者向け】1pxのズレもなくコーディングするための便利ツール
デザイン画像と実装画面を重ねて確認できるPerfectPixelを紹介します。透過率や位置を調整しながら、コーディングの細かなズレを見つける使い方を解説します。
コーディング【初心者でもわかる】calc()を使ってロールケーキをキッチリ3等分にする方法
CSSのcalc()で要素の幅を計算し、均等に3分割する方法を解説します。ロールケーキの背景画像を例に、計算式を使ったサイズ指定と配置を紹介します。
コーディング【初心者でもわかる】いちょう切り。part2（2×2に並べた要素に隙間を作る-flexbox編-）
flexboxで2列2行に並べた要素の間に隙間を作る方法を紹介します。オレンジの画像を使った前編の続きとして、横方向と縦方向の余白を調整します。
コーディング【初心者でもわかる】いちょう切り。part1（4つの要素を2×2に並べる方法-flexbox編-）
flexboxで4つの要素を2列2行に並べる方法を解説します。4分割したオレンジの画像を例に、親要素の幅と折り返しを設定する手順を紹介します。
コーディング【初心者でもわかる】border-radiusで長方形の左右を丸くして、エクレアを作る
border-radiusで長方形の左右を丸くする方法を解説します。エクレアの画像を使い、50%指定との違いや、直線部分を残して角を丸めるコツを紹介します。
コーディング【初心者でもわかる】border-radiusで円を作る方法。一緒にホールケーキを作ろう!
CSSのborder-radiusで正方形を円にする方法を紹介します。ケーキの画像を使ったサンプルを通して、角丸の指定方法と正円を作るためのポイントを解説します。
コーディング【初心者でもわかる】position: absolute;で上下中央に配置する方法をチキンラーメンを使って解説！
position: absoluteとtransformを使い、要素を上下左右中央に配置する方法を解説します。ラーメンと卵の画像を重ねる例で、位置指定の仕組みと調整のコツを紹介します。
コーディング【初心者でもわかる】CSSのセレクタ3種類の書き方（隣接セレクタ・間接セレクタ・直下セレクタ）
CSSの隣接・間接・直下セレクタの違いと書き方を解説します。HTMLの親子関係や兄弟関係に合わせて、狙った要素にスタイルを適用する方法をサンプルで確認できます。