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

スポンサーリンク
この記事は約7分で読めます。

現役エンジニアがおすすめするプログラミングスクール！

自宅で学べるオンラインのプログラミングスクール【TechAcademy】

TechAcademyはオンライン完結型の受講タイプです。20以上の豊富なコースから好きなものを選択して学習できます。

メンターも質問にきちんと応じてくれて、第13回 日本e-Learning大賞、プログラミング教育特別部門賞ともに受賞しています。

Webアプリ、Webデザインのみならず、ブロックチェーンやデータサイエンス、動画作成のコースなど幅広いです。


無料相談はこちら！


Webデザインスクール「デジタルハリウッド STUDIO by LIG」

Web制作会社（株式会社LIG）が運営するスクールなので、より専門的なWebデザイン技術を身につけることが可能です。コンサルタントによる厚い転職支援もあるので、Webデザイナーとしての就職ができます。

未経験でも6ヶ月でWebデザイナーになれます。


無料相談はこちら！


テックキャンプ デザイナー転職（旧：【TECH::EXPERT】デザインスクール）

エンジニア転職に向いています。案件が獲得できなかった際は、全額返金保証してくれます。

家にいながら仕事がしたい、副業で収入をあげたい方向けです。


無料相談はこちら！


SkillHacks(スキルハックス) オンラインプログラミングスクール

ハッカソンや開発コンテストで優勝経験ありの実力派エンジニアからWebアプリケーションの開発手法のすべてを学べます。


無料相談はこちら！

ポートフォリオ制作実績

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

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

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

（ほぼ同じですが。）

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

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

 

スポンサーリンク

【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企業を志望している就活生や大学生、未経験の方もぜひ応用してみてくださいね。

 

 

 

 

タイトルとURLをコピーしました