【WordPress/CSS】画像を格子状の表にする！アニメーション付きのCSSグリッド

2020.05.23

この記事は約7分で読めます。

画像を格子状（表）にするためのソースコードについて解説します。

具体的には、上記のような「ポートフォリオ制作実績」みたいな感じのものになります。

今回はHTMLとCSSを使って画像を格子状に表示するだけでなく、WordPressに貼り付けるソースコードも載せておきます。

（ほぼ同じですが。）

あらかじめ自分がWebサイトやホームページに表示したい画像を9枚選んでおきましょう。

とりあえずテストしたいだけの場合は、手順が面倒なので同じ画像の羅列でも良いでしょう。

1 【WordPress/CSS】画像を格子状の表にする！アニメーション付きのCSSグリッド
2 HTML内にCSSグリッドソースコードをコピペする方法
3 CSSグリッドソースコードをコピペする方法
4 まとめ

【WordPress/CSS】画像を格子状の表にする！アニメーション付きのCSSグリッド

まず、HTMLのソースコードをプログラミングしていきましょう。

以下のソースコードを記述してみましょう。

<div class="wrapper grid">
    <!---div以下　<div class="item">〜</div>　を9つコピペして下に続けて書きましょう。-->
        <div class="item">
            <a href="(リンク先のURLを記述・指定する)"><img src="（WordPressのメディアにある画像のリンクを記述・指定する）" class="anime" alt=""></a>
        </div>

注意：<div class=”item”>〜</div>は自分が増やしたい分だけ書きましょう。

このかたまりを1つ書くと1個の画像、9つ書くと9個の画像になります。

HTML内にCSSグリッドソースコードをコピペする方法

次に、CSSを記述します。

CSSを記述することによって、格子状のデザインを自由に変更・編集することができます。

WordPressの投稿記事ページや、左メニューのテーマエディターのheader.phpに貼る場合は、<style type=”text/css”></style>で挟みましょう。

HTMLの場合は<head></head>内にCSSをプログラミングします。

<style type="text/css">
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3%;
}
.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 3%;
  margin-bottom: 150px;
}
@-webkit-keyframes anime {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes anime {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.anime {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.anime:hover, .anime:focus, .anime:active {
  -webkit-animation-name: anime;
  animation-name: anime;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
</style>

なおanime以降の要素を付け足すと、アニメーションつきでグリッドを表示することができます。

表の画像を強調したい場合はつけてみてください。

特に必要ないWebサイトやホームページの場合はanime要素以降は省いてください。

CSSグリッドソースコードをコピペする方法

追加CSSやstyle.cssに記述する場合はこちらを貼ります。<style type=”text/css”></style>はとり除きましょう。

.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3%;
}
.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 3%;
  margin-bottom: 150px;
}
@-webkit-keyframes anime {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes anime {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.anime {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.anime:hover, .anime:focus, .anime:active {
  -webkit-animation-name: anime;
  animation-name: anime;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

まとめ

なお、これ以外にももっと幅広いカスタマイズや編集をしたい場合は、WebデザインのLIGのプログラミングスクールがおすすめです。

さっそく上部のグリッドより上のボタンリンクから辿ってみてください。

IT企業を志望している就活生や大学生、未経験の方もぜひ応用してみてくださいね。