HTML+CSSでのレイアウトが格段にやりやすくなるFlexbox、策定から長い年月が経ち主要ブラウザで安心して使えるようになってきた。
今回はこのFlexboxを実際のサイト作成を行いながら使ってみよう。
今回作成するサイトはこちら
FlexSampleSite
まずはflexboxの基本的な使い方を学ぶために960pxの固定幅サイトを題材とした。
さっそく作っていこう。
まずは以下の素材をダウンロード
次に以下のようなフォルダ構成でFlexSampleフォルダをデスクトップに作成する。
index.htmlを以下のようにマークアップ
○index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>FlexboxLesson</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Menu1</a></li>
<li><a href="">Menu2</a></li>
<li><a href="">Menu3</a></li>
<li><a href="">Menu4</a></li>
</ul>
</nav>
<div role="main">
<section id="information">
<h2>Information</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div id="infoBox">
<section class="info">
<h3>info1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate<a href="">more...</a></p>
</section>
<section class="info">
<h3>info2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur<a href="">more...</a></p>
</section>
<section class="info">
<h3>info3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <a href="">more...</a></p>
</section>
</div>
</section>
<section id="blog">
<h2>Blog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div id="blogBox">
<div class="blogItem">
<img src="images/atom.png" alt="atom">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,dolor sit amet, consectetur adipisicing elit,</p>
<a href="">more...</a>
</div>
<div class="blogItem">
<img src="images/html.png" alt="html">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,dolor sit amet, consectetur adipisicing elit,dolor sit amet, consectetur adipisicing</p>
<a href="">more...</a>
</div>
<div class="blogItem">
<img src="images/java.png" alt="java">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,dolor sit amet, consectetur adipisicing elit,</p>
<a href="">more...</a>
</div>
<div class="blogItem">
<img src="images/vs.png" alt="vs">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,dolor sit amet, consectetur adipisicing elit,dolor sit amet, consectetur </p>
<a href="">more...</a>
</div>
</div>
</section>
</div>
<footer>
©Joytas.net
</footer>
</div>
</body>
</html>
長いように見えるがほとんどがLorem(ダミーテキスト)だ。
続いてmain.cssを作成する。
○main.css
body{
color:#333;
}
.container{
width:960px;
margin:0 auto;
}
header{
height:250px;
background-image:url(../images/header_bg.png);
background-size:cover;
}
header h1{
font-size:80px;
text-align: center;
line-height: 250px;
}
nav ul{
padding:5px 30px;
background:#666;
/*親要素にdisplay:flex*/
display: flex;
/*並べる方向*/
/* flex-direction: column; */
/*配置*/
justify-content:flex-end;
}
nav ul li a{
display: block;
padding:5px 10px;
border-radius: 5px;
background:#999;
color:white;
text-decoration: none;
margin:5px 10px;
border:1px solid #333;
}
/*属性セレクタ*/
div[role="main"]{
background:#eee;
padding:30px 30px 70px;
}
h2{
text-align: center;
font-size:30px;
margin-top:30px;
}
/*隣接セレクタ(h2の次にあるp)*/
h2 + p{
text-align: center;
margin-bottom:20px;
}
#infoBox{
display: flex;
}
#infoBox .info{
position:relative;
border-radius:5px;
border:1px solid #333;
margin:20px 10px;
background:white;
min-width:220px;
/*幅を指定したい場合*/
/* flex-basis:30%; */
/*縦方向の配置*/
/* align-self:center; */
}
#infoBox .info h3{
padding:5px 20px;
background:#666;
color:#eee;
}
#infoBox .info p{
padding:10px 20px 30px;
}
#infoBox .info p a{
position:absolute;
bottom:10px;
right:15px;
}
#blogBox{
display: flex;
/*要素が端までいったら折り返す*/
flex-wrap:wrap;
justify-content:space-between;
}
.blogItem{
position: relative;
display: flex;
/*縦方向の配置*/
align-items: flex-start;
/*flexitemの幅指定*/
flex-basis:43%;
border:1px solid #333;
border-radius:5px;
padding:16px 16px 30px;
margin:10px;
background:white;
}
/*直下の子要素指定*/
.blogItem > a{
position: absolute;
bottom:10px;
right:20px;
}
/*偶数番目のblogItem*/
.blogItem:nth-child(even){
/*配置を行方向逆順*/
flex-direction: row-reverse;
}
.blogItem img{
width:130px;
}
.blogItem:nth-child(odd) img{
margin-right:10px;
}
.blogItem:nth-child(even) img{
margin-left:10px;
}
footer{
text-align: center;
padding:10px 0;
background:#666;
color:white;
}
以前はブロック要素を思い通りに並べるのは非常にテクニカルだった。
このflexbox、学習コストもそこそこ高いが得られる恩恵はとてつもなく大きい。
しっかり練習することをおすすめする。
コメント