スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Home ＞ HTML&CSS講座 ＞ 装飾的なCSSギャラリー

装飾的なCSSギャラリー

投稿日：2014年11月14日

このチュートリアルでは装飾的なCSSギャラリーを紹介します。


Step1：はじめに

かなり前になりますが、<span>タグをひとつ追加で使って、装飾的なイメージギャラリーを作成するチュートリアル</a>を書きました。
その時はspanタグを加えるのにjQueryを使いましたが、あまりユーザーフレンドリーではありませんでした。
今日はJavascriptを使わない、より良い方法をご紹介します。
:beforeや:afterの疑似要素を使えば同じ結果が得られるのです。
:before要素はあまり使われませんが、追加の要素やコンテンツを加えるのにとても役に立ちます。
ここで習得して、使ってみましょう。
Step2：基本スタイル

HTML

下記は<ul>リストでマークアップしたサンプルのイメージギャラリーです。

<ul class="gallery clip">
　<li><img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image"></li>
　<li><img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image"></li>
　<li><img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image"></li>
</ul>

CSS

下記はギャラリーの基本となるスタイルです。
.gallery a 要素にrelativeのpositionのプロパティを加えることが重要です。

.gallery {
　　margin: 0 0 25px;
　　text-align: center;
}
.gallery li {
　　display: inline-block;
　　margin: 5px;
　　list-style: none;
}
.gallery a {
　　position: relative;
　　display: inline-block;
}





Step3：:before要素

a:before疑似要素に30×60pxのコンテナのペーパークリップの背景画像を指定します。
CSSルールのcontentのプロパティが空になっていることに注目してください。
この空のcontentプロパティが無ければコンテナは表示されません。

:before要素

.clip a:before {
　　position: absolute;
　　content: ' ';
　　top: -5px; left: -4px;
　　width: 30px;
　　height: 60px;
　　background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;
}


Step4：アートフレーム

この技を使って、色んなグラフィック要素を上に重ねることが可能です。
この例では背景画像をアートフレームのグラフィックに変更し、サイズと位置を調整しました。

アートフレーム

.frame a:before {
　　position: absolute;
　　content: ' ';
　　top: -22px;
　　left: -23px;
　　width: 216px;
　　height: 166px;
　　background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;
}


Step5：HTML5ギャラリー

HTML5のマークアップを使って、さらに高度なギャラリーを作成してみましょう。 下記の例では、画像を<figure>タグで、画像のキャプションを<figcaption>タグで囲んでいます。

HTML5ギャラリー

<ul class="gallery tape">
　<li>
　　<figure>
　　　<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg" alt="image">
　　　<figcaption>Image Caption</figcaption>
　　</figure>
　</li>
　<li>
　　<figure>
　　　<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg" alt="image">
　　　<figcaption>Image Caption</figcaption>
　　</figure>
　</li>
　<li>
　　<figure>
　　　<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg" alt="image">
　　　<figcaption>Image Caption</figcaption>
　　</figure>
　</li>
</ul>

CSS

CSSには2つの:before要素を加えました。
ひとつは<figure>要素に、もうひとつは

  • 要素です。
    overlay.png（マスク画像）はfigure:before要素に適用され、テープのグラフィックはa:before要素に適用されます。

    CSS

    .tape li {
    　　width: 170px;
    　　padding: 5px;
    　　margin: 15px 10px;
    　　border: solid 1px #cac09f;
    　　background: #fdf8e4;
    　　text-align: center;
    　　box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
    }
    .tape figure {
    　　position: relative;
    　　margin: 0;
    }
    .tape a:before {
    　　position: absolute;
    　　content: ' ';
    　　top: 0;
    　　left: 0;
    　　width: 100%;
    　　height: 100%;
    　　background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/overlay.png) no-repeat;
    }
    .tape figcaption {
    　　font: 100%/120% Handlee, Arial, Helvetica, sans-serif;
    　　color: #787568;
    }
    .tape a:before {
    　　position: absolute;
    　　z-index: 2;
    　　content: ' ';
    　　top: -12px;
    　　left: 50%;
    　　width: 115px;
    　　height: 32px;
    　　margin-left: -57px;
    　　background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/tape.png) no-repeat;
    }


    Step6：CSS3 変形

    このギャラリーでは、コルク模様の背景をギャラリーに加え、transformプロパティで、画像を回転させています。

    .transform {
    　　background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/cork-bg.png);
    　　padding: 25px;
    　　border-radius: 10px;
    　　box-shadow: inset 0 1px 5px rgba(0,0,0,.4);
    }
    .transform li {
    　　border: none;
    }


    Step7：Nth-of-Type

    画像の回転をランダムでもっと自然な感じに見せるために、nth-of-typeを使用して、異なる回転角度を適用しました。

    Nth-of-Type

    .transform li:nth-of-type(4n+1) {
    　　-webkit-transform: rotate(2deg);
    }
    .transform li:nth-of-type(2n) {
    　　-webkit-transform: rotate(-1deg);
    }
    .transform li:nth-of-type(4n+3) {
    　　-webkit-transform: rotate(2deg);
    }


    Step8：アップデート

    ギャラリーのデモとCSSをアップデートしたので、画像はリンクされています。
    また、:before要素がタグに追加されています。



    引用:Web Design Library　　著者：webdesignerwall　　翻訳：幕澤



    スポンサードリンク

    • コメント

    ランダム記事5件

    2014年10月の人気記事ランキング