スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&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件

    2016年5月の人気記事ランキング