レシピサイトをつくる(style.css)

2024.07.15

参考書：『HTML&CSSとWebデザイン-実践編』
参考サイト：CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 – coliss

ここまでで大体のhtmlが出力されたので、CSSスタイルを当てていきます。

before/after

全体のコード

style.scss

/* ------------
   テンプレート
---------------*/
html,body {
  height: 100%; /* フッターが浮くのを防ぐ1/3 */
}
body {
  background-image: url(./img/onigiri78.png);
  background-size: 500px; 
  background-repeat: repeat;
  font-family: "メイリオ", YuGothic, "游ゴシック", "Noto Sans JP", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;

  /* フッターが浮くのを防ぐ2/3 */
  display: flex;
  flex-direction: column;

  &.home {
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
  }
}
img {
  max-width: 100%;
  height: 100%;
  vertical-align:top; /* デフォルトの下部の余白(vertical-align: baseline;)をリセット */
}
.container {
  max-width: 800px;
  margin: auto;
  padding: 0 5vw;
  flex: 1; /* フッターが浮くのを防ぐ3/3 */
  width: 80%;
}


/* ------------
   タグクラウド
---------------*/
a.tag-cloud-link {
  border: 1px solid #333;
  padding: 5px;
  border-radius: 30px;
}
ul.wp-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
}

/* ------------
   メインコンテンツ
---------------*/
ul.recipes-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}


/* ------------
   フッター
---------------*/
.main-menu-container { // <div>
  background-color: #fff;
}
.footer-menu-wrapper, .main-menu-wrapper { // <ul>
  display: flex;
  list-style: none;
  justify-content: center;
}
.site-name { // <div>
  text-align: center;
}

解説

リセットCSS

https://unpkg.com/ress@5.0.2/dist/ress.min.css　を使用

<body>

背景画像の設定
フォントの設定
リンクの下線やリストの黒ポチを必要に応じて削除

<div class=”container”>

.container {
  max-width: 800px;
  margin: auto;
  padding: 0 5vw;
  flex: 1; /* フッターが浮くのを防ぐ3/3 */
  width: 80%;
}

最大幅の設定
左右のpaddingを設定

主に幅関連の制御をしています。

gridレイアウト

記事一覧は数が多い＆アイテムの幅を統一したいのでgridを使います。

/* 親要素 */
ul.recipes-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

frexレイアウト

タグ一覧も数は多いですが、文字数によって幅が変わるためgridは不向きなので、flexを使います。

/* 親要素 */
ul.wp-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
}

メインメニュー、フッターメニューは並べても1行のみ(一次元)なのでflexを使います。

/* ------------
   フッター
---------------*/
.main-menu-container { // <div>
  background-color: #fff;
}
.footer-menu-wrapper, .main-menu-wrapper { // <ul>
  display: flex;
  list-style: none;
  justify-content: center;
}
.site-name { // <div>
  text-align: center;
}