ドットインストール 詳解CSS 基礎文法編-3 【初心者がつまずきやすい！複雑な要素の配置】
ドットインストールまとめ記事、前回に引き続き「詳解CSS 基礎文法編」を扱います。
全3回で完結。完結編です。
↓先に第2回目の記事の復習をされることをおすすめします↓
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
- プログラミングをこれからやろうと思っているが難しそうで手が出ないと感じている方
- プログラミングの基礎学習を始めて数週間~1ヶ月の方
- ドットインストールを使ってプログラミング学習をしている方
→復習用に本記事をご活用ください！レッスン項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
また、基礎文法編のまとめが完結したら記事内に登場する技術を使ったWEBサイトを作って公開します。
そういった情報を見逃したくない方はぜひ読者登録してお待ちください！
【marginの相殺】
・上の要素にmargin-bottom(①)下の要素にmargin-top(②)を配置
・垂直方向のmarginが重なるとmarginは合計にならず、小さい方を打ち消して大きい方の値が優先される。これをmarginの相殺という。
box1(オレンジ)の下に20px,box3(赤)の上に10pxのmarginを設定するとmarginは合計して30pxではなく大きい方が優先されて20pxとなる
【display】
①inline
通常縦に配置されるblock要素を左から詰めて配置する(inline要素にする)
②inline-block
inline要素はサイズ指定が無効…③
サイズ指定して左詰にする場合に用いる
④none
要素を表示しないことができる
box3をbox要素からinline要素に変換。するとwidthとheightの設定が反映されず、コンテンツ("box3")の幅に設定される
【position】
①static
通常通り要素を配置した時の位置
②relative
staticの位置を基準とし④のように方向+pxを指定して動かした位置に配置
③fixed
ウィンドウの左上を基準とし②同様方向+pxを指定して動かした位置に配置。スクロールしても固定される
box2が画面左上を基準に上下左右に30pxずつ離れたところに固定される。fixedとは「固定される」という意味
【絶対配置】
・position:absolute;…①
親要素がstaticかstatic以外かで配置が変わる
ここで親要素box2のpositionはrelativeとstaticでないが(②)このとき親要素を基準に③で指定した方向とpx分だけ動く。
※-5pxとは指定した方向とは逆方向に5pxの意
relativeに設定した親要素box2を基準にする。top,rightから-5px動くので結果5pxずつbox2からはみ出た形になる。
【親要素のpositionがstaticの場合】
画面全体を基準に指定した方向から指定px分だけ動いた位置に配置される
この時position:fixed;と異なり、スクロールに合わせて動くことはない
親要素box2をstaticにしたのでrectクラスは画面の左上を基準に動く
【z-index】
重なり合う要素の順番を指定する。数字が大きい方が上にくる。画像ではbox1~box3に順に3,2,1とつけている。
特に指定しなければ文書上で後に書かれたものが上にくる
本来はbox3>box2>box1の順で重なるが、z-indexを指定することでbox1>box2>box3の順に変更
【box-sizing】
①box-sizingを用いるとborder(③)やpaddingを含めてwidthやheightを指定することができる。ここでは、box2にbox-sizing: border-box;を用いているのでborderを含めて同じサイズ(②)で揃えることができる
フチ付きのボックスのサイズを整える際に役立つ
【calc】
プロパティの値に計算式を与える
①ではbox1(左揃え)、box2(中央揃え・②)、box3(右揃え・③)の3つについて20pxの間隔を保ちながらブラウザの幅と一緒に幅を変化させている
※四則演算記号は+,-,*,/の順に加減乗除で前後に半角スペースをあける
①ブラウザ全体の幅(100%)から40pxを引いて3で割った幅という条件に合う形で3つのboxの幅が変動する。ここで3つのボックスがそれぞれ中央揃え、右揃えになっていることにより40pxの振り分けは画像のようにボックス間に20pxずつになる
【影】
・box-shadow
ボックスに影をつける
数値2つで上下左右の大きさ、rgbaで色を指定…①
3つ目の数値で影のぼかし具合を指定…③
4つ目の数値で影の拡大率を指定…④
・text-shadow
同様にテキストに影をつける
ただし4つ目の数値は指定できない
box1の影(①)よりbox2の影(③)の方がややぼかしがかかっている。またbox2の影よりbox3の影(④)の方が引き伸ばされている
【背景のスタイリング】
①image
url()で背景に画像を指定
②size: cover;
背景を縦横比を維持したままウィンドウサイズに合わせて伸縮させる
③position
②の伸縮の起点。無ければ左上が起点になる
④background
一括指定。positionとsizeは”/“でまとめる
headerの背景に画像を設定(④)。伝えたい内容を象徴するような画像を配置してWEBページを印象付けたい
【float】
・通常の配置から外して要素を指定方向に寄せる…①
・floatさせた要素の後に続く要素は本来上に詰められるが、clearプロパティでfloatさせた要素より下に配置…②
・floatとclearの方向は同一にする…③
※clearはblock要素にしか適用できない
いままでは画像とテキストは縦に並べるしかなかったがこれで画像とテキストを横に並べることができる。テキストが横に長くなりすぎないので読みやすくなる利点もある。
【復習】
今回はドットインストール「詳解CSS 基礎文法編」の#23~#33を扱いました。
記憶に定着するように簡単に復習しておきます。
ちょっと多いですが、全て独立した内容なので1つ1つ使えるようになっていきたいものです。
✅marginが重なる時は大きい方が優先される(marginの相殺)
✅displayプロパティを使って要素の並びを整える。box(縦)inlie(左詰)inline-block(左詰で、widthやheightを反映させる)
✅positionを使って特定の要素を固定したり一部の要素だけ動かして強調することができる
✅z-indexを使って自由な順番で要素を重ねることができる
✅box-sizingを使って装飾ありのboxと装飾なしのboxを綺麗に並べることができる
✅calcを使うことで複雑な余白の設定をすることができる
✅box-shadow,text-shadowで影をつけることができる
✅background-imageで背景画像を設定
✅floatを使ってテキストと画像を横に並列することができる
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【#ブログ更新】
— 28日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月3日
ドットインストール「詳解CSS 基礎文法編」の続きです！
前回記事と併せて基礎学習の復習にお役立てください👍#プログラミング初心者 #プログラミング初心者と繋がりたい #ブログ初心者 #ブログ初心者と繋がりたいhttps://t.co/SPXp5eHW1d
