Jump tp･･･ クラス/ ナビ/ 段組み/ 余白/ 区切り線/

cont1 h2

文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる　文章を入れる

　　　　　.cont2 {　....　height: 90vh; /*コンテナの高さを画面の90％に*/
　　　　　　　　　margin 15px 　　　}
　　　　　.container1 {　....　overflow: hidden; /*画像imgが大きすぎる部分は非表示にする*/
　　　　　　　　　　　　margin 20px 　　　}

検索

一つの要素に複数のclass属性を指定するには

----------- HTML ----------------------

要素を横並びにするには

親要素にdisplay:flex; を指定する

----------- HTML ----------------------

ナビゲーション

料理

家族

樹木

つれづれ

趣味

ホームページ

---

4段組と2段組のレイアウト

以下の画像は、画面サイズに応じて段数が変化します。大画面または中画面で見た場合は4段組、小画面で見た場合は2段組で画像が表示されます。

---

margin padding border

要素の中身1　背景色灰　のみ　マージン（外部余白）がないのでボーダーに接している

要素の中身２　背景色青　マージン（外部余白）30ｐｘ　青帯の外側に30ｐｘ

要素の中身３　背景色橙　パディング（内部余白）20ｐｘ　文字の周囲に20ｐｘ　　マージン０なので上の要素に接している

---

区切り線

html　　 <hr class="cp_hr07" /> 　中央にマークが入る区切り線
　cssは　　.cp_hr07 .cp_hr07::after

---

As THe Mood Strikes
blog:jk3tjn気の向くまま