コーディングの備忘録です。
まずは「インライン要素」と「ブロック要素」について。
インライン要素とブロック要素
実はこれは古い概念らしく、「インライン要素」と「ブロック要素」という概念はなくなってたんですね(※)！？
代わりに導入されたのが、「カテゴリ」と「コンテンツモデル」という概念。
またややこしくなってる？？※HTML5で廃止となりました。
カテゴリとコンテンツモデル
カテゴリとコンテンツモデルとは、簡単に言うと、自分がどんなカテゴリや要素の子になれるのか、はたまた自分がどんなカテゴリや要素の子を持つことができるのか、が定められているということです。
なるほど、確かにコーディングの学習始めのころは、hタグやpタグの中にdivって入れられるのかな、といったような疑問を感じることはあります。
結構大事な概念ですが、ないがしろにしがちでもあります。ずっと気になってはいたけれど、なんとなく感覚で使っている部分でした。
さて、「カテゴリ」と「コンテンツモデル」ですが、7つのカテゴリと、さらに詳細な分類の定義もあります。
インライン要素とブロック要素
概念が廃止されたと書いておきながらですが、コーディングする際にはやはり需要な部分だと思っているのでまとめます。
htmlは大きくブロック要素とインライン要素に分類できます。
・ブロック要素：改行されて縦に並ぶ
例）h1,h2～,p,div,ol,ul,liなど
ブロック要素は、親要素の幅まで広がります。なので横並びにならず改行され縦に並びます。
・インライン要素：改行されずに横に並ぶ
例）a,span,img,br,input,strong,buttonなど
imgがインライン要素というのは、ちょっと意外な感じもします。
インライン要素は、親要素の幅いっぱいには広がらず、コンテンツの大きさで幅が決まります。なので要素が横に並びます。
また、インライン要素の特徴として、左右にmarginをつけることはできますが、上下にmarginをつけることができません。
paddingは上下左右に設定することができます。
displayプロパティ
ブロック要素とインライン要素の大きな違いとして、改行するしないがありますが、これはタグ自体の特徴ではなく、実はdisplayプロパティの値で決ままります。
hタグやpタグには、dislay:blockが指定されているので、ブロック要素の性質が与えられているということなのです。
displayは要素の表示方法を指定するプロパティです。
displayプロパティの値で表示が変わるわけですが、displayには、blockの他inline-blockやnoneを指定することができます。
flexの使い方
つづいてflexについて。よく使うプロパディです。
特に、justyf-content：space-betweenとか、center、align-items:centerはほんとによく使います。
これだけでも支障なくデザインは出来てしまうのですが、他にも値は色々あって使えたら便利そうです。
というわけで、この機会にまとめます。
フレックスボックスの基本
フレックスボックスは、要素の並べ方を簡単にしかも柔軟に制御することのできるcssのレイアウトモジュールです。
親要素であるフレックスコンテナと、アイテムとセットで使用します。
親要素にdisplay: flex;を指定することで、子要素の並べ方を指定することができるようになります。
指定された親要素直下の子要素はflexアイテムとして、レイアウトをコントロールすることができるようになります。
親要素のプロパティ
・並べる方向を指定するflex-direction
・折り返しを指定するflex-wrap
・水平方向の配置justify-content
/*justify-contentを使うことで、カラムを自由にレイアウトできます。主なプロパティは次のとおり。
メディアクエリでレイアウトを組み換えできます。*/
justify-content：flex-start ・・・初期値、行の開始位置に揃える
justify-content：flex-end ・・・行末に揃える
justify-content：center ・・・中央に揃える
justify-content：space-between ・・・均等に揃える（両端は間隔を開けない）
justify-content：space-around ・・・均等にそろえる（両端も間隔を開ける）・垂直方向の配置align-items
align-items：strech ・・・高さをそろえる（初期値）
align-items：flex-start ・・・上に揃える
align-items：flex-end ・・・下に揃える
align-items：center ・・・中央に揃える子要素のプロパティ
・order:1、order:2、order:3、とすることで、表示順を変えられる
・flex-basis・・・子要素の幅を指定する。pxや%などの単位をつけて数値指定できる、初期値はauto。
・flex-grow ・・・指定した子要素が他の子要素に比べどのくらい伸びるか比率で指定する。初期値0。
・flex-shrink ・・・flex-growの逆。指定した子要素が他の子要素に比べどのくらい縮むか比率で指定する。
・align-self・・・垂直方向の揃え
・flex・・・一括指定できる
