HTML/CSS入門 Gridで重なりを表現してみよう
CSS Gridを使って要素の重なりを表現してみます。
以下のような感じです。
少しわかりづらいですが、ピンクの要素の下部に黒の要素が重なっています。ピンクが画像、その画像の説明が入ります。
完成形は以下です。
参考にHTMLとCSSを載せておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>grid001</title>
</head>
<body>
<div class="container">
<img class="picture" src="img/tamibuz.png" width="500" height="350">
<div class="desctiption">
たみぼうずの自画像。
いつも口空いていることを指摘される。<br/>
マラソンは60代男性の平均と同じペース。<br />
フロントエンドのエンジニア。<br />
トマトが好き。
</div>
</div>
</body>
</html>
.container{
display: grid;
align-items: end;
width: 500px;
height: 350px;
border: 5px solid lightgreen;
border-radius: 4px;
}
.picture {
grid-row: 1/3;
grid-column: 1/2;
}
.desctiption {
grid-row: 2/3;
grid-column: 1/2;
background: #000;
opacity: 0.4;
color: #FFF;
}
ディスカッション
コメント一覧
まだ、コメントがありません