ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング