CSS Flexbox&インタラクティブWebの作成

デフォルトのflexboxレイアウトの使用

display : flex対の小包箱の親要素を使用すればよい.
では、箱は基本的に横に並んでいます.

<div class="flex-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.flex-container {
  display : flex;
}
.box {
  width : 100px;
  height : 100px;
  background : grey;
  margin : 5px;
}

一般的なflexboxの詳細プロパティ

.flex-container {
  display : flex;
  justify-content : center;  /* 좌우 방향의 정렬 */
  align-items : center;  /* 상하 방향의 정렬 */
  flex-direction : column; /* flexbox의 방향 */
  flex-wrap : wrap;  /* 넘치는 요소 wrap 처리 */
}
.box {
  flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 */
}

Modern Webで使用する単位の整理

.box {
  width : 16px; /* 기본 px 단위 */
  width : 1.5rem; /* html태그의 폰트사이즈의 1.5배 */
  width : 2em; /* 상위요소 폰트사이즈의 2배 */
  width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */
  width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */
}

反応式Webを作成する場合、headタグに含める必要がある内容

以下の内容が含まれている場合にのみ、モバイルデバイス上できれいなレイアウトを作成できます.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<下記を参照>
Webサイトの初期スケールレベルまたは幅を指定するには、name="viewport"のプロパティを指定します.width=device-widthは、モバイルデバイスの実際の幅でレンダリングされることを意味するdlekである.
現在、スマートフォンの横解像度が1920 pxを超える携帯電話が多く、これを見るだけでは1920 pxに相当するページを表示できないのではないでしょうか.
このため,ユーザが実際に接続する際に,スマートフォンデバイスの実際の幅に応じてレンダリングを行うように命令する部分と考えられる.initial-scale=1このセクションは、接続時のスクリーンスケールレベル設定です.

Media queryの使用

CSSファイルの下部に次の内容を書きます.内部定義CSSは、必要な幅に達した場合にのみ適用されます.

@media screen and (max-width : 992px) {
  .box {
    font-size : 40px;
  }
}
 
@media screen and (max-width : 768px) {
  .box {
    font-size : 30px;
  }
}

BootstrapおすすめのBreakpoint?
Media queryは、必要に応じて寸法を入力するよりも、移動/平板レイアウトの基準点(ブレークポイント)を事前に設定したほうがいい.
Bootstrapライブラリで推奨されるブレークポイントサイズは1200 px/992 px/768 px/5766 pxです.

ノート...