グリッドレイアウト

グリッドレイアウトを極める 6

2021年11月19日

グリッドレイアウトの実践

下書きとしてグリッドレイアウトを起こす。サイズの値は次の段階で調整する。

グリッドレイアウトを元にデザインに対応させてサイズを調整する。実践用の画像やテキストを入れ込んでデザインに対応させる。

<div id="container">
  <div id="itemA"></div>
  <div id="itemB"></div>
  <div id="page-title">
  <h1>Led Zeppelin</h1>
  </div>
  <figure id="full">
    <picture>
      <img src="images/layout.jpg" alt="James Patrick Page">
    </picture>
    <figcaption>
      <span><small>Foto:</small></span><small> James Patrick Page</small>
    </figcaption>
  </figure>
  <div id="info-box">
    <h2>Jimmy Page</h2>
    <p>ジミー・ペイジはヤードバーズを経てレッド・ツェッペリン結成。1980年、ジョン・ボーナムの死去により活動を停止した。ハードロック、ヘヴィメタルの代表格であり、ギタリスト兼リーダー、プロデューサーだった。「ローリング・ストーン誌の選ぶ歴史上最も偉大な100人のギタリスト」で、2011年は第3位。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
  </div> 
  <div id="itemF"></div> 
</div>

以下 CSS は@media (orientation: landscape) and (min-width:1024px) {}に納まる内容の一部である。文字の掲載がある場合は、ブレークポイントを設定して文字の納まる枠#info-boxのサイズ調整が必要になる。その枠の高さについてはmax-height: 340px;を使ってみた。

#container {
  display: grid;
  grid-template-rows: 20px 150px 300px 670px;
  grid-template-columns: 2% 50% 25% 21% 2%;
  margin: 0;
  padding: 0;
}
#info-box {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  background: #fecb2f;
  color: #fff;
  z-index:1;
  margin-top: -10vw;
  padding: 0 16px;
  box-shadow:
       inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(255,255,255),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
  max-height: 340px;
}
figure img {
  display: block;
  width: 100%;
  object-fit: cover;
  padding: 0;
  margin: 0;
}
#itemF {
  grid-row: 1 / 3;
  grid-column: 5 / 6;
  /*background: tomato;
  color: #fff;*/
}

#container h1 {
  grid-column: 2;
  /*color: #333;*/
  color: tomato;
  font-size: 5vw;
  text-shadow: 3px 3px 1px #d3d3d3;
}
#info-box>h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 3vw;
  line-height: .95;
  margin-bottom: 10px;
  margin-top: 10px; 
  color: #333;
  text-shadow: 3px 3px 1px #dd8f00;
  text-align: center;
}
.info-box p {
  font-size:16px;
  font-weight: 400;
  color: #333;
  padding-bottom: 16px;
}