前回はグリッドレイアウトをやったので、今回ははフレックスをやってみた。
ソースについて
ソースは前回のものを変更しました。
前回のリンクはこちら→ナビゲーションバーをグリッドレイアウトにしてみた
ソース
flex_practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フレックスレイアウト 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header>
<nav>
<ul id="nav_bar">
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
<li><a href="#">ナビ6</a></li>
</ul>
</nav>
</header>
<!-- ここから変更点 -->
<main>
<article class="clearfix">←clearfixを書くことで、次の要素の領域に侵入しないようにしている
<div id="main_img1">
<img src="sample.png" alt="sample1">
</div>
<p>
フロートサンプル1
</p>
</article>
<article class="clearfix">
<div id="main_img2">
<img src="sample.png" alt="sample2">
</div>
<p>
フロートサンプル2
</p>
</article>
<article>
<p>
フロートなし
</p>
</article>
</main>
<!-- ここまで変更点 -->
<footer>
<div id="foot1">
<h3>フッターサンプル1</h3>
<ul>
<li><a href="#">フッター1</a></li>
<li><a href="#">フッター2</a></li>
<li><a href="#">フッター3</a></li>
</ul>
</div>
</footer>
</body>
</html>
base.css
/* ページ全体 */
body {
width: 600px;
margin-left: auto;
margin-right: auto;
}
/* 共通部分 */
a:link, a:visited {
color: #0086e9;
}
a:hover {
color: #f0f;
}
/*フロートしたら必ず指定*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
/* ヘッダー */
header {
text-align: center;
}
# nav_bar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
margin: 0;
padding: 0;
}
# nav_bar li {
list-style: none;
margin: 0;
padding: 0;
border: solid 1px;
background: #f3f3f3;
}
# nav_bar a {
text-decoration: none;
margin: 0;
padding: 0;
}
/* メイン */
# main_img1 {
float: left;/*画像を左に配置*/
}
# main_img2 {
float: right;/*画像を右に配置*/
}
/* フッター */
footer {
background: #f3f3f3;
}
# foot1 {
margin-top: 10px;
margin-left: 10px;
padding: 0;
}
# foot1 h3 {
margin: 0;
padding: 0;
}
# foot1 ul {
margin: 0;
padding-top: 0;
padding-left: 10px;
}
# foot1 li {
list-style: none;
padding: 0;
}
# foot1 a {
text-decoration: none;
margin: 0;
padding: 0;
}
clearfix
cssで以下のコードがある。
フロートを適用している要素で、これを指定しないとどうなるか。
.clearfix:after {
content: "";
display: block;
clear: both;
}
以下のように配置がおかしくなり、不自然なレイアウトになる。
では、指定してあげるとどうなるか。
以下のようになる。
先程の画像が違って、配置がおかしくない。
フロートを適用している要素に、clearfixを適用することで、画像の配置が不自然になるのを防いでいる。
おわりに
まだまだHTMLの理解は浅いが、本を一通り読んでみた感じとしては、グリッドレイアウトやフロートレイアウトが大事だと感じた。
使いこなすことで、様々なデザインを実現できると感じた。