12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSSで要素を配置する基本テクニック8種類をサンプル付きで紹介します

Posted at

概要

MDNのCSS レイアウト入門を参考に、CSSレイアウトの基本のテクニックの概要を自分なりにまとめました。それぞれの項目について詳しく知りたい場合は、各項目の冒頭に記載してあるリンク(MDNのCSS レイアウトの各章)を参照してください。

「CSSレイアウト」とは

ビューポートや互いを基準にしてボックスを適切な場所に配置する方法

CSS レイアウトより

例えば、「赤い四角を画面の右半分に、青い四角を画面の左半分に配置する」「画像の右側に文章を配置し、それを1セットとして縦並びに配置する」などがCSSレイアウトということになります。四角を赤くしたり、画像や文字のサイズを整えるのは、「レイアウト」の範囲外です。

通常フロー

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Normal_Flow
ブラウザがデフォルトでHTMLページをレイアウトする方法です。
特にスタイルを設定していない状態を指します。

See the Pen KKpKaaZ by mmkcoins (@mmkcoins) on CodePen.

displayプロパティ

https://developer.mozilla.org/ja/docs/Web/CSS/display
要素が通常フローでどのように振る舞うかを変更するプロパティです(block, inlineなど)。
またはdisplay値によってオンにされるレイアウト方法全体を指します(flexなど)。
任意の要素に設定できます。

  • ブロック要素(block): 縦並び
  • インライン要素(inline): 横並び

See the Pen mdJdRmV by mmkcoins (@mmkcoins) on CodePen.

フレックスボックス

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
Flexible Box Layout Moduleの略です。
子項目にflexプロパティ(向き、要素の大きさなど)を追加できます。

See the Pen eYNYgRL by mmkcoins (@mmkcoins) on CodePen.

グリッド

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Grids
行と列に物を並べる(2次元)用に設計されています。
子項目にプロパティを設定しなくても自動で配置されます。開始ラインや終了ラインを設定することで柔軟に配置できます。

See the Pen eYNYgjb by mmkcoins (@mmkcoins) on CodePen.

フロート

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Floats
設定すると、要素が左または右に移動し、通常フローから除かれます。
また、フロート項目を囲んでいるコンテンツが周囲に浮き(回り込み)ます。

See the Pen zYGYNVg by mmkcoins (@mmkcoins) on CodePen.

位置指定(positionプロパティ)

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Positioning
通常フローの時に要素が配置されていた場所から、別の場所に移動できます。

静的位置指定 (Static Positioning)

デフォルトです。特別な位置指定がありません。

相対位置指定 (Relative Positioning)

通常フロー内の位置に相対的に移動できます。

絶対位置指定 (Absolute Positioning)

ページの通常のレイアウトフローから完全に外れます。
<html>の端に相対的な位置に固定できます。

固定位置指定 (Fixed Positioning)

ブラウザのビューポート基準で要素を固定します。

粘着位置指定 (Sticky Positioning)

ビューポートからオフセットにぶつかるまではstaticの、それ以降はfixedの挙動をします。
割と最近できたプロパティです。

See the Pen RwPwpbp by mmkcoins (@mmkcoins) on CodePen.

表レイアウト

表をスタイルするための機能です。
display: table-cell;のような書き方をすると表レイアウトになります。
表以外のレイアウトにも使えるようです(表レイアウトでページレイアウトを行っていた時代もあった、らしい)。

See the Pen rNVNyaE by mmkcoins (@mmkcoins) on CodePen.

段組みレイアウト

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
新聞のように複数列にレイアウトする方法です。

See the Pen RwPwpWg by mmkcoins (@mmkcoins) on CodePen.

12
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?