ギャラリーレイアウトの書き方
タイトルなどを書き換えて、段落を1つ追加する
画像とキャプションのセットを追加する
ギャラリーレイアウトを完成させる
☆HTML5
base-fair.html
...
<article>
<h1>......</h1>
<p>......</p>
<div class="gallery_box">
<figure>
<img src="images/gallery_photo1.jpg" alt="">
<figcaption>......</figcaption> <!-- figcaptionはimgの前に置いても、後に置いても、どちらでも構いません。書いた前後通りに表示されます。 -->
</figure>
<figure>
<img src="images/gallery_photo2.jpg" alt="">
<figcaption>......</figcaption>
</figure>
<figure>
<img src="images/gallery_photo3.jpg" alt="">
<figcaption>......</figcaption>
</figure>
</div>
<div class="gallery_box">
<figure>
<img src="images/gallery_photo4.jpg" alt="">
<figcaption>......</figcaption>
</figure>
<figure>
<img src="images/gallery_photo5.jpg" alt="">
<figcaption>......</figcaption>
</figure>
<figure>
<img src="images/gallery_photo6.jpg" alt="">
<figcaption>......</figcaption>
</figure>
</div>
</article>
...
☆CSS3
2.figureの親要素に、フロートを解除するCSSを設定する。
base-fair.css
/* すべての<figure>にフロートを適用して横に並べる ここから↓ */
.gallery_box {
overflow: hidden;
}
/* .gallery_box figureの書いた後に書き足す。figureの親要素に、フロートを解除するCSSを設定する。② */
1.最初の書き出しはここから始める。fugureにfloatプロパティ、widthプロパティを指定する。
base-fair.css
.gallery_box figure {
margin: 0 0 15px 15px;
width: 180px;
float: left;
}
/* 最初はここから書く① */
3.レイアウトの崩れを解消する。最初のfigureにマッチするCSSを記述する
base-fair.css
.gallery_box figure:first-child {
margin-left: 0;
}
/* レイアウトの崩れを解消するために書き足す。③ */
4.最初のdiv class="gallaery_box"に上マージンを設定する。
base-fair.css
.gallery_box:first-of-type {
margin-top: 30px;
}
/* 最初の<div class="gallery_box">に上マージンを設定する。④ */
/* すべての<figure>にフロートを適用して横に並べる ここまで↑ */
...
☆CSS 全貌 上のCSSと同じ内容
base-fair.css
...
/* すべての<figure>にフロートを適用して横に並べる ここから↓ */
.gallery_box {
overflow: hidden;
}
.gallery_box figure {
margin: 0 0 15px 15px;
width: 180px;
float: left;
}
.gallery_box figure:first-child {
margin-left: 0;
}
.gallery_box:first-of-type {
margin-top: 30px;
}
/* すべての<figure>にフロートを適用して横に並べる ここまで↑ */
...
☆詳細度
・タグのstyle属性に書かれたCSSルール......1000点
・IDセレクター1個につき......100点
・タイプセレクター、疑似要素※1個につき......1点
・全称セレクター......0点
※::after、::beforeなどコロン(:)が2つ付くセレクターのこと。clearfixテクニックなどで使う。「フロートを解除する他の方法」で使う。