Contents
displayプロパティとは
「display」とはcssプロパティの１つで、要素の表示形式を決めるものになります。
displayには様々な種類があり、種類ごとに要素に与える効果も変わってくるので、数ある中から抜粋して役割と効果を説明していきます。
様々なdisplay
display:block;
display:blockは、ブロック要素のボックスを生成し、要素の前後で改行を生成します。
divやp要素、h1~h6要素などは、既にブロック要素になっているので、改行が生成されます。
- 要素が縦に並ぶ
- 幅と高さを指定できる
- 余白を上下左右に指定できる
display:inline;
display:inlineは、自身の前後に改行を生成しない 1 つ以上のインライン要素ボックスを生成します。
inlineが指定された次の要素は、空間があれば同じ行になります。
spanタグやaタグ、imgタグなどは初期値がinlineとなっています。
- 要素は横に並ぶ
- 幅と高さを指定できない
- 上下の余白を調整できない
- text-alignが指定できる
display:inline-block;
display:inline-blockは、inlineとblockどちらの効果も持っているプロパティになります。
簡単に説明すると、要素の並び方はinlineで、要素の中身はblockのような性質を持ちます。
- 改行が入らず横に並ぶ
- 幅・高さの指定ができる
- 上下左右の余白が指定できる
- text-alignとvertical-alignが指定できる
display:flex;
display:flexとはフレックスボックスと呼ばれており、要素に定義するだけで、その直下の要素が並列になるスタイルです。
[blogcard url=”https://chillblog.org/2022/07/08/displayflex%e3%81%a7%e8%a6%81%e7%b4%a0%e3%82%92%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%81%ab%e3%81%95%e3%81%9b%e3%82%88%e3%81%86%e3%80%90css%e3%80%91/”]- 要素を横並びにできる
display:grid;
display:gridは、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
グリッドは、主要なページ領域や小さなユーザーインターフェイス要素のレイアウトに利用できます。
- 固定・可変のトラックサイズが生成できる
- グリッドを利用してアイテムの配置が可能
- 内容物を保持するための追加のトラックの作成
- 重複内容物の制御
- グリッドコンテナーを生成できる
display:flow-root;
display:flow-rootは、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
- floatの回り込み解除
display:table;
HTML の table要素と同じように動作します。
ブロックレベルボックスを定義します。
- display:table-cellでセルを生成できる
- 表が生成できる
- 行数を増やせる
- 縦の位置を指定できる
- 境界線・幅・余白を指定できる
display:ruby;
display:rubyは、インライン要素のように動作しつつ、そのコンテンツをルビモデルに従ってレイアウトします。
- 文字にルビをつけてくれる
display:none;
要素の表示を無くし、レイアウトに影響を与えなくなります。
- 指定した要素が画面上から消える
- 表示をなくした要素の余白などもすべて消える
- レイアウトに影響がない
- 子要素まで影響する
