HTML/CSS入門 Gridを使って色々つくってみよう

2020年7月14日

Gridを使うとレイアウトが楽しくなります。

今日は以下のようなレイアウトを作成してみました。

まずはGridでレイアウトをつくる

Gridでレイアウトを作成しましょう。

以下のように、縦３マス横３マスのGridにしました。

HTMLとCSSは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="003.css">
    <title>grid002</title>
</head>
<body>
    <div class="content">
        <h1 class="tami">TAMI BOUZ</h1>
        <h1 class="hito">HITO CHAN</h1>
        <div class="g1"></div>
        <div class="p1"></div>
        <div class="g2"></div>
        <div class="p2"></div>
    </div>
</body>
</html>

.content {
    width: 960px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    margin-top: 200px;
}
.tami {
    grid-area: 2/1/3/2;
    color: lightgreen;
    text-align: left;
}
.hito {
    grid-area: 2/3/3/4;
    color: lightpink;
    text-align: right;
}
.g1 {
    grid-area: 1/1/2/3;
    background: lightgreen;
}
.p1 {
    grid-area: 3/2/4/4;
    background: lightpink;
}

傾けたいときはtransform:rotateを使う

要素を傾ける場合は、transform:rotateを使いましょう。

先ほどのCSSの.contentに追加するだけです。

.content {
    width: 960px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    margin-top: 200px;
　　transform: rotate(15deg); 
}

Gridを使うと柔軟なレイアウトが可能になるので是非色々試してみてください。