インスタグラム風タイル表示

完成目標はこちら！

複数のものを並べて表示したい時に、おすすめなレイアウトです！

手順

1. galleryクラスを作る

今回、

• 1枚ずつのカード → cardクラス
• カード全体 → galleryクラス

と名付けます。

まずは、index.htmlを開きます。タイル表示を表示したい位置に、以下のコードを書いてみましょう！

<div class="gallery">    <div class="card">
    </div>    <div class="card">
    </div></div>

この時、<div class="card"></div>で囲まれた内容が、1枚のカードに表示されます。

カードは何枚あってもOKです！

書きたいものが増えて、カードを増やしたいときには、<div class="card"></div>のセットを書き足していきましょう！

2. カードの中身を書く

試しに、カードの中身を書いてみましょう！内容は、まずは画像・タイトルでいきます。

カードの中に、画像をいれる imgタグ、 タイトルを入れる h1タグを書きます。

<div class="card">     <img src="https://cdn.glitch.global11633e3e-f1a4-43f8-92eb-4e0f9818543e/kyoto.jpgv=1646111585954" alt="kyoto" border="0" />     <h3>タイトル</h3></div>

画像の表示は、Campでやった方法を参考にしてみてください！

3. カードをデザインする

style.cssを開きます。

(Glitchのサンプルコードが書かれている場合には、全て消してOK)

以下のコードをコピーして貼り付け

/* カード全体の配置 */.gallery{  display: flex;  flex-wrap: wrap;}/* カード1枚のデザイン */.card {  width: 45%;  /* 余白 */  padding: 20px;  margin: 20px;  background-color: /* 好きな色にしよう */;  /* 枠線 */  border: 0.5px solid /* 好きな色にしよう */;  /* 角の曲がり具合 */  border-radius: 5px;  /* 文字のいろ */  color: #666666;  /* 配置 */  text-align: center;  align-items: center}/* カードの中の画像の大きさを指定 */.card img {  width: 90%;  height: 400px;}
/* カード全体のデザイン */.card h3{  margin: 12px 0;}

4. カスタマイズ

自分の表現したい内容に合わせて、カードの中身やデザインをカスタマイズしてみましょう！

• カードを増やしてみよう！
• カードの中身を増やしたり、減らしたりしよう！
• カードのデザインを変えよう！
  • 間隔
  • 横並び vs 縦１列
  • 中央そろえ vs 左そろえ

完成！

その他、CSSはいろんなことができます！例えば...

• 写真と文字の分量を変える
• 枠線のデザイン
• 文字の間隔を広げる
• タイトルのデザイン などなど...

ぜひいろいろ調べて試してみてください！！