画像を少しだけタイル状にするデザイン

HTML

<div class="main-visual">
<figure class="itemA"><img src="images/cloud.JPG" alt="画像" /></figure>
<figure class="itemB"><img src="images/sakura.JPG" alt="画像" /></figure>
<figure class="itemC"><img src="images/yama.jpg" alt="画像" /></figure>
</div>

main-visualで3つのfigureを囲んでいます｡また､figreにそれぞれ､クラスを付けます｡これがないとダメです｡被らないようにしましょう｡

また､画像のパスも気を付けてください｡実際の環境によって､パスが変わります｡

SCSS

.main-visual{
display: grid;
grid-template-columns: 1fr.5fr;
grid-template-areas:

"A B B"
"A C C"
;
}

.itemA{
grid-area: A;
border: 2px solid #fff;
;
img{
height: 100%;
object-fit: cover;
}
}

.itemB{
grid-area:B;
border: 2px solid #fff;
}

.itemC{
grid-area: C;
border: 2px solid #fff;
}

それぞれに､grid-areaを書きます｡そのあと､main-visualに以下の内容で書きます｡上のコードから抜粋しています｡

.main-visual{
display: grid;
grid-template-columns: 1fr.5fr;
grid-template-areas:

"A B B"
"A C C"
;
}

display:gridを書き､grid-template-columnsで幅を指定します｡あとは､grid-template-areasで画像の置き場所を書きます｡この例で言うと､Aの画像､隣はBBと並べる｡

Aを縦長にするので､再びAにし､その隣をCCにします｡これらは､gride-areaで付けた記号です｡

手書きで整理するといい

少々複雑ですが､手書きでレイアウトを書くといいでしょう｡頭が整理されます｡僕は簡単に手書きします｡

これをするメリットは画像をオシャレにできますね｡

ただ､難点は画像が増えたり､減ったりすると管理が大変｡キッチリとデザインが固まっていたら使っていいでしょう｡

CSSでもここまで出来る｡画像を印象的に見せたい場合は､取り組んでください｡

さいごに

オシャレなタイル型レイアウト｡個性があっていいですね｡慣れると簡単なのでお試しあれ｡バックアップを取ってからにしましょう｡