Zenn
🎃

作って学ぶHTML+CSSグリッドレイアウトのFA版

2024/11/19に公開
CSS
tech

この本を読み進めているのだが使っている画像が自前のものやHeroIconのSVGなので、パスを記述するときいちいちGithubからソースコードを見ないといけない。何度も書くのは面倒なのでFont Awesomeを使って書いているのでメモ
注意点としてはFont AwesomeによりCSSのdisplayプロパティの値が書き換えられてしまうので、CDNの読み込みを初めに行い、後から実際に書き込むのCSSファイルを読み込んでいる。

p231 アイコン付きリンクを縦並び

ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
		<link rel="stylesheet" href="../assets/reset.css" />
		<link rel="stylesheet" href="../assets/base.css" />
		<link rel="stylesheet" href="style.css" />
	</head>
	<body class="padding-small">
		<ul class="menu-vertical">
			<li><a href="" class="fa-solid fa-house   with-icon-vertical">Home</a></li>
			<li><a href="" class="fa-solid fa-map  with-icon-vertical current">Map</a></li>
			<li><a href="" class="fa-solid fa-location-dot  with-icon-vertical">Location</a></li>
			<li><a href="" class="fa-solid fa-heart with-icon-vertical">Reputation</a></li>
		</ul>
		<script src="../assets/base.js"></script>
	</body>
</html>
style.css
.menu-vertical {
  display: grid;
  gap: 16px;
  align-content: start;

  & a {
    padding: 8px 12px;
    border-radius: 8px;

    &.current {
      background-color: darkgrey;
    }
    &.hover {
      background-color: darkkhaki;
    }
  }
}

  .with-icon-vertical {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-flow: column;
    gap: 16px;
    align-items: center;
  }

p231 アイコン付きリンクを横並び

ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
		<link rel="stylesheet" href="../assets/reset.css" />
		<link rel="stylesheet" href="../assets/base.css" />
		<link rel="stylesheet" href="style.css" />
	</head>
	<body class="padding-small">
		<ul class="menu-horizontal">
			<li><a href="" class="fa-solid fa-house   with-icon-horizontal">Home</a></li>
			<li><a href="" class="fa-solid fa-map  with-icon-horizontal current">Map</a></li>
			<li><a href="" class="fa-solid fa-location-dot  with-icon-horizontal">Location</a></li>
			<li><a href="" class="fa-solid fa-heart with-icon-horizontal">Reputation</a></li>
		</ul>
		
		<script src="../assets/base.js"></script>
	</body>
</html>
style.css
.menu-horizontal {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 2px;
  justify-content: start;

  & a {
    padding: 8px 12px;
    border-radius: 8px;

    &.current {
      background-color: darkgrey;
    }
    &.hover {
      background-color: darkkhaki;
    }
  }
}

  .with-icon-horizontal {
    display: grid;
    gap: 16px;
    justify-items: center;
  }

p232

ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
		<link rel="stylesheet" href="../assets/reset.css" />
		<link rel="stylesheet" href="../assets/base.css" />
		<link rel="stylesheet" href="style.css" />
	</head>
	<body class="padding-small">
		

		<form class="search-01">
			<label for="search" class="sr-only">検索</label>
			<input type="search" id="search" placeholder="Search">
			<button type="submit" aria-label="検索する" class="btn-icon-black">
				<i class="fa-solid fa-magnifying-glass"></i>
			</button>
		</form>

		<script src="../assets/base.js"></script>
	</body>
</html>
style.css
.search-01 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

p233 入力欄の中にアイコンボタンを入れる

アイコンと入力欄のカラムの開始位置を共に1にすることでアイコンと入力欄を重ねて表示している。

ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
		<link rel="stylesheet" href="../assets/reset.css" />
		<link rel="stylesheet" href="../assets/base.css" />
		<link rel="stylesheet" href="style.css" />
	</head>
	<body class="padding-small">
		

		<form class="search-01">
			<label for="search" class="sr-only">検索</label>
			<input type="search" id="search" placeholder="Search">
			<button type="submit" aria-label="検索する" class="btn-icon-black">
				<i class="fa-solid fa-magnifying-glass"></i>
			</button>
		</form>
		<script src="../assets/base.js"></script>
	</body>
</html>
style.css
.search-01 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;

  > button {
    grid-column: 1;
    grid-row: 1;
  }

  > input  {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-left: 48px;
  }
}

Discussion