👻
【CSS】3段組みのレイアウトの方法＆上達のコツ
yahooのようなトップページを作成する時に使うテクニックです
画像ダウンロード
imgフォルダを作成、その中にbanner1.jpgを格納
banner1.jpg
以下のHTMLを記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3段組のレイアウト</title>
<style>
</style>
</head>
<body>
<h1>Shinyokohama News</h1>
<div>
<nav>
<ul>
<li>ショッピング</li>
<li>フリマ</li>
<li>トラベル</li>
</ul>
</nav>
<article>
<ul>
<li>名前に「虎」のついた名前が急増中</li>
<li>ダンス甲子園秘話</li>
<li>コアラを絶滅危惧種に指定</li>
</ul>
</article>
<aside>
<img src="img/banner1.jpg">
</aside>
</div>
</body>
</html>
ブラウザで開く
以下のようになっています
横並び
横並びにしていくには、以下の2つの手順が必要です
1．親要素である<div>にdisplay:flexを記述
2．<nav>、<article>、<aside>それぞれに幅を指定(nav+article+aside=100％になるように)
flex-basis：初期の寸法を指定できる。flexアイテムのみに有効。
例）flex-basis: 60%; ←親の幅に対して60％の幅をとる
※幅の指定方法はいろいろある
上記1．を行ったところ(分かりやすいように背景色もつけました)
div {
display: flex;
}
nav {
background-color: #87ceeb;
}
article {
background-color: #fffacd;
}
上記2．を行ったところ
div {
display: flex;
}
nav {
background-color: #87ceeb;
flex-basis: 20%;
}
article {
background-color: #fffacd;
flex-basis: 60%;
}
aside {
flex-basis: 20%;
}
あとは、「Shinyokohama News」のレイアウトは、文字を中央揃えにするだけです!
上達のコツ
CSSはいっぺんに記述するのではなく、1つ書いたらブラウザで確認するということを繰り返すことをおすすめします！
Udemyで講座を公開中！
X(旧Twitter)
Zenn 本
Youtube
Discussion