求職者支援訓練12月19日開講Webサイト制作科 白描

求職者支援訓練12月19日開講Webサイト制作科補足メモ Web白描

02/13 復習 - レスポンシブWebデザイン

モバイルファーストでレスポンシブに

モバイルファーストで記述
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>モバイルファーストで記述</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="page-header">
  <div class="box boxA">A</div>
</header>
<main class="main-content">
  <div class="box boxB">B</div>
  <div class="box boxC">C</div>
  <div class="box boxD">D</div>
  <div class="box boxE">E</div>
  <div class="box boxF">F</div>
  <div class="box boxG">G</div>
  <div class="box boxH">H</div>
  <div class="box boxI">I</div>
</main>
<footer class="page-footer">
  <div class="box boxJ">J</div>
  <div class="box boxK">K</div>
</footer>
</body>
</html>
  • スマートフォンでは、天地の空き0,左右と各boxの下が20px空きになるよう指定する
  • PCのときに以下のように表示するように指定する
  • 文字指定は不要

f:id:web-0220:20200210003333j:plain

2カラムレイアウト

f:id:web-0220:20200211232335j:plain

f:id:web-0220:20200211232530j:plain

@charset "UTF-8";

/* reset
---------------------------------- */
html,body,h1,h2,p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
img {
  width: 100%;
  vertical-align: bottom;
}

/* body
---------------------------------- */
body {
  background: #fafae3;
  color: #333;
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* layout
---------------------------------- */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 4%;
}
.page-header {
  background: #5a442a;
}
  .page-header h1 {
    color: #fff;
    font-size: 24px;
    font-family: 'Noto Serif JP', serif;
    text-align: center;
  }
  .sub-title {
    margin-left: 10px;
    font-size: 16px;
    font-weight: normal;
  }
.main-content h2 {
  margin-bottom: 16px;
  font-size: 20px;
  font-family: 'Noto Serif JP', serif;
}
  .month {
    font-size: 26px;
  }
.content img {
  margin-bottom: 16px;
}
.content p {
  margin-bottom: 24px;
  line-height: 1.6;
}
.page-footer {
  padding-bottom: 30px;
  background: #000;
  color: #fff;
  text-align: center;
}
  
  
@media only screen and (min-width: 768px) {
  
  .container {
    padding: 24px 4%;
  }
  .page-header h1 {
    font-size: 32px;
    text-align: left;
  }
    .sub-title {
      font-size: 18px;
    }
  .content,.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .wrapper {
    flex-direction: row-reverse;
  }
    .content img {
      max-width: 50%;
      margin-bottom: 30px;
    }
    .content p {
      width: 47.9%;
    }
  .main-content h2 {
    margin-bottom: 20px;
    font-size: 24px;
  }
  .month {
    font-size: 36px;
  }

}
1カラムレイアウト

f:id:web-0220:20200211234841j:plain

f:id:web-0220:20200125171507p:plain

Responsive Web Design
HOME
ITEM
ABOUT
INFO


Flexible box のコンセプト
flex レイアウトを定義するねらいは、アイテムの幅や高さを、任意のディスプレイデバイスで使用できる領域を最適に埋めるように変更する能力です。
flex コンテナはアイテムを、使用可能な空き領域を埋めるように引き延ばしたり、はみ出さないように縮めたりします。
flexbox レイアウトのアルゴリズムは、垂直方向に偏向した (vertically-biased) block レイアウトや水平方向に偏向した (vertically-biased) inline レイアウトとは対照的に、方向について独断的ではありません (direction-agnostic)。

MDN web doc「CSS flexible box の利用」引用

Flexible box の用語
flexible の議論では水平/inline 軸や垂直/block 軸といった用語から解放される一方で、モデルを適切に説明するための新たな用語が必要になります。
これは row 方向の flex-direction を持つ flex container であり、flex item は要素のテキストフローの方向 (この場合は左から右) によって確立した記述様式に従って、main axis にまたがってお互いに水平方向に続くということです。

flex アイテムで考慮すべき事柄
flex コンテナの直接の子要素になっているテキストは、無名の flex アイテムに包まれています。しかし、ホワイトスペースのみを含む無名の flex アイテムはレンダリングされません。これは、display: none が指定されたような状態です。
flex コンテナの子要素で絶対的に配置したものは、静的な位置が flex コンテナの main start 側の content-box の隅に対して決められるように配置されます。

Copyright (c) Responsive web design