この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
Gridレイアウトの fr について
fr はfraction（分数、割合）の略で、Gridレイアウトで利用可能な余白スペースを、指定した割合で分配するための非常に便利な単位です。flex-grow の考え方に似ています。
-
grid-template-columns: 1fr 1fr 1fr;- 利用可能なスペースを3等分し、それぞれの列に1つずつ割り当てる
-
grid-template-columns: 200px 1fr;- 1列目に
200pxを確保し、残りのスペースを全て2列目に割り当てる
- 1列目に
-
grid-template-columns: 1fr 2fr;- 利用可能なスペースを3つに分け、1つを1列目に、2つを2列目に割り当てる
- 2列目は常に1列目の2倍の幅になる
fr 単位を使うことで、calc() のような計算をせずとも、柔軟でレスポンシブなレイアウトを簡単に作ることができます。
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0053</title>
</head>
<body style="display: flex; flex-direction: column; min-height: 100vh;">
<header style="display: flex; justify-content: space-between; align-items: center;">
<div>
<a href="/">
<img src="img/logo.png" alt="フロントエンド1000本ノック">
</a>
</div>
<nav>
<ul style="display: flex; list-style: none; gap: 20px;">
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div style="display: grid; grid-template-columns: 150px 1fr 150px;">
<aside>
ここにサイドバー
</aside>
<main>
ここにメインコンテンツ
</main>
<aside>
ここにサイドバー
</aside>
</div>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>