グリッドレイアウトのタイル風ボックス（タイトル、説明、画像含む）スマホ対応サンプルコード

カスタマイズ サンプルコード

グリッドレイアウトのタイル風ボックス（タイトル、説明、画像含む）スマホ対応サンプルコード

タイル風ボックスをこれまで画像で作っていたけれど CSSで作成できますか？

早速チャレンジ♪下記のサンプルのような感じになりました。

特徴などをアピールしたい時に使える レスポンシブ対応のリンクボックスです。

スマホサイト対応のグリッドレイアウト

▼サンプル

PCのときは4列でスマホのときは2列表示になります。
アイコンはFont Awesomeを利用しています。

O-DAN

海外画像
一気に横断検索
写真AC

無料写真素材
たくさんあります
シルエットAC

シルエット素材
たくさんあります
PAKUTASO

高画質で
面白い写真 多い

下記のようにFont Awesomeのアイコンではなく画像を配置することも可能です。

O-DAN

海外画像
一気に横断検索
写真AC

無料写真素材
たくさんあります
シルエットAC

シルエット素材
たくさんあります
PAKUTASO

高画質で
面白い写真 多い

もちろんリンクを外して利用することもできますし、増やすことも可能です。

サンプルの画像はLineIconsのアイコンを利用させて頂いています。
横幅45px以上の画像を別途用意お願いします。

サンプルコードの紹介

Font Awesomeは環境にあわせて初期設定が必要な場合があります。

HTMLコード（Font Awesomeのアイコン時）
<div class="grid-container mcpc24">
<a href="https://o-dan.net/ja/" target="_blank" rel="noopener noreferrer">
<div class="grid-box"><h5>O-DAN</h5><hr><p>海外画像<br>一気に横断検索</p>
<div class="fontai"><i class="fas fa-globe-asia"></i></div></div>
</a>

<a href="https://www.photo-ac.com/" target="_blank" rel="noopener noreferrer">
<div class="grid-box"><h5>写真AC</h5><hr><p>無料写真素材<br>たくさんあります</p>
<div class="fontai"><i class="fas fa-images"></i></div></div>
</a>
<a href="https://www.silhouette-ac.com/" target="_blank" rel="noopener noreferrer">
<div class="grid-box"><h5>シルエットAC</h5><hr><p>シルエット素材<br>たくさんあります</p>
<div class="fontai"><i class="fas fa-user"></i></div></div>
</a>
<a href="https://www.pakutaso.com/" target="_blank" rel="noopener noreferrer">
<div class="grid-box"><h5>PAKUTASO</h5><hr><p>高画質で<br>面白い写真 多い</p>
<div class="fontai"><i class="fas fa-cat"></i></div>
</div>
</a>

</div>

画像URLは環境に合わせていれて下さい。

HTMLコード（画像のアイコン時）
<div class="grid-container mcpc24">
<a href="https://o-dan.net/ja/" target="_blank" rel="noopener noreferrer">
<div class="grid-box"><h5>O-DAN</h5><hr><p>海外画像<br>一気に横断検索</p>
<div class="fontai"><img src="https://blog.web-lifes.net/wp-content/uploads/sozai/world.jpg" alt=""></div></div>
</a>

<a href="https://www.photo-ac.com/" target="_blank" rel="noopener noreferrer">
<div class="grid-box"><h5>写真AC</h5><hr><p>無料写真素材<br>たくさんあります</p>
<div class="fontai"><img src="https://blog.web-lifes.net/wp-content/uploads/sozai/gallery.png" alt=""></div></div>
</a>
<a href="https://www.silhouette-ac.com/" target="_blank" rel="noopener noreferrer">
<div class="grid-box"><h5>シルエットAC</h5><hr><p>シルエット素材<br>たくさんあります</p>
<div class="fontai"><img src="https://blog.web-lifes.net/wp-content/uploads/sozai/files.png" alt=""></div></div>
</a>
<a href="https://www.pakutaso.com/" target="_blank" rel="noopener noreferrer">
<div class="grid-box"><h5>PAKUTASO</h5><hr><p>高画質で<br>面白い写真 多い</p>
<div class="fontai"><img src="https://blog.web-lifes.net/wp-content/uploads/sozai/bulb.png" alt=""></div>
</div>
</a>

</div>
CSSコード（両者共通）
.grid-container {
  display: grid;
  grid-gap: 10px;
}

.grid-container .grid-box {

height: 150px;
    width: 150px;
    padding: 5px;
    margin: 0.5em 0;
    color: #666;
    background: #FFF;
    border: solid 3px #00B1C3;
    border-radius: 7px;
    text-align: center;
}

.grid-container .grid-box p{
    margin-top: -1px;
    margin-bottom: -5px;
    font-size: 0.9em;
    line-height: 1.4em;
    font-weight: bold;
}
   
.grid-container .grid-box img{
max-width: 55px;
    height: auto;
    margin-top: 7px;
} 


.grid-container .grid-box hr{
    height: 2px;
    background-color: #00B1C3;
    border: none;
    }

.grid-container a{
        text-decoration: none;
    }
    

.mcpc24 {
  grid-template-columns: 1fr 1fr;
}
    .grid-box h5{font-size:1.2em;
        color: #00B1C3;
        font-weight: bold;
	margin-top: 0px;
	margin-bottom: -5px}

@media(min-width : 580px){
.mcpc24 {
  grid-template-columns: 1fr 1fr  1fr 1fr;
}
}

.height1 {
height:230px;
overflow: scroll;}

.fontai{
font-size: 2.5em;
    color: darkslategrey;}

装飾について

アイコン探し

アイコンの色変更

好きな色や はやりのWEB配色、気になる色のカラーコードを取得し変更してください。

枠線や本文もお好みにあわせてどうぞ♪

おすすめ編集ソフト

私はPhotoScape Xのwindows版をよく利用しています。

-カスタマイズ, サンプルコード
-,