LoginSignup
1

More than 3 years have passed since last update.

HTML5/CSS3 ギャラリーレイアウトの書き方 詳細度(CSS優先順位)について

Posted at

ギャラリーレイアウトの書き方

タイトルなどを書き換えて、段落を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テクニックなどで使う。「フロートを解除する他の方法」で使う。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1