CSS displayプロパティ

displayプロパティとは

HTML要素の表示方法を設定するために使用される。
具体的には、要素をブロック要素、インライン要素、フレックスボックス、
グリッドコンテナ、テーブル要素、などに変更することができる🙆🏻‍♀️

ブロックレベル要素

• ブロックレベル要素は、要素を1つのかたまり（ブロック）として扱う要素
• Webブラウザ上では前後に改行が入り、縦に積み上がって表示される
• 代表的なブロックレベル要素には、div要素、header要素、nav要素、h1要素～h6要素、p要素、ul要素、ol要素など
• 横に空きがあっても入り込めず、縦並びになる

インライン要素

• インライン要素は、ブロックレベル要素内やテキスト内に挿入される要素
• テキストと同じレベルで扱われ、前後に改行は入らない
• 代表的なインライン要素には、strong要素、img要素、span要素、a要素など
• インライン要素に分類される要素は、ブロックレベル要素よりも圧倒的に少ない
• 横並びになる

ブロックレベル要素・インライン要素を使うときの注意点

• ブロックレベル要素内には、ブロックレベル要素やインライン要素を配置できる
• インライン要素内には、インライン要素しか配置できない（ブロックレベル要素は配置できない）

インラインブロック要素

• インラインブロック要素は、インライン要素とブロックレベル要素の利点を持っている要素
• 並び方はインライン要素と同様に横に並ぶ
• 中身はブロックレベル要素と同様に幅（width）や高さ（height）、余白（paddingやmargin）の指定ができる
• ただし、最初からインラインブロック要素を設定できる要素はない
• インラインブロック要素にするには、displayの値として設定する必要がある

インラインブロック要素で横に並べるときの注意点

• インラインブロック要素を指定すると、Flexboxを使わずに要素を横に並べられる
• ただし、要素間に不要な隙間ができてしまう
• インラインブロック要素がテキストの一部として認識されてしまうことが原因
• の隙間をなくすには、親要素のfont-sizeを「0」に設定する

中央揃えの方法

中央揃えは、要素によって方法が異なる！

左右の中央揃え

ブロックレベル要素

• Flexboxで指定（上下余白を0px、左右余白を自動的に等間隔）

インライン要素

• text-align: center; を指定

text-align

1. テキストの中央揃え
   中央揃えにしたいテキストの親要素にあたるブロック要素に、
   text-align: center;を設定

2. 画像の中央揃え
   画像のimgタグはインライン要素なので、テキストと同じ扱い
   親要素に、text-align: center; を設定

3. ブロックレベル要素の中央揃え
   画像のimgタグはインライン要素なので、テキストと同じ扱い
   親要素に、text-align: center; を設定

上下の中央揃え

上下の中央揃えは、Flexboxやtext-alignプロパティでは指定できない

line-height

• 上下の中央揃えは、line-heightで数値を指定
• 「行の高さ」＝「親要素の高さ」にして中央揃え
• 中央揃えしたいテキストに line-height: ◯◯px; のように行の高さを指定
• ここで指定した値と、親要素である「上下中央に配置したいボックスの高さ」を同じ値にする
• 文字の位置は、「行の高さの中央」になるので、上下中央揃えとなり、font-sizeから余った分が上下余白になる

---

ここら辺こんがらがってて
CSS当てたのになんで効かない？ってなること多かったから
もう一度整理！
Gitとかもややこしくていちいち時間かかるから一回まとめよう、、
せっかちだから進めないとイライラしちゃう〜〜
平日は時間限られてるから土日できるだけ進めておきたい
自信つけるためにも頑張ろう💪🏻