Progate HTML & CSS コース 上級編, Flexbox編

Progate

上級編

  • メディアクエリ: @media (条件) { .... } 指定された条件が当てはまるときにのみ {} 内のCSSが適用される。
@media (max-width: 1000px) { /* 幅が1000px以下の時適用される条件 */
  h1 {
    color:blue;
  }
}
  • プロパティを box-sizing: border-box; とすると, border外縁の幅が width になる。(指定しない場合は, width に padding は含まれない)
* { /*通常は全要素に一括指定する*/
  box-sizing:border-box;
}

<head>
    <meta charset="utf-8">
    <!-- viewportを設定しないとメディアクエリが正しく機能しない -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hoge</title>
    <!-- スタイルシートの読み込みはviewportの設定より下に書く -->
    <link rel="stylesheet" href="stylesheet.css"> <!-- 共通設定 -->
    <link rel="stylesheet" href="responsive.css"> <!-- メディア依存設定 -->
</head>
  • 親要素の高さは子要素を包む高さ
    • ただし、子要素が全てfloatの時、親要素の高さは0となる
    • そこで, 親要素の子として <div class="clear"></div> を持たせ, 以下のcssを追加する。
.clear {
  clear:left;
}

  • プロパティを max-width:1170px; とすると, それ以上の画面幅でも表示は1170pxとなる。

  • プロパティを display:none; とすると, その要素は非表示となる。

  • さらに display:block; で上書きすると, 非表示要素が表示されるようになる。

Flexbox編

  • 要素を簡単に並べられる css のレイアウトモジュール

  • 親要素:

    • display: flex; : 子要素を横並びにする
    • flex-wrap: wrap; : 子要素のサイズに応じて折り返す
    • flex-direction: column; : 子要素を上から下へ並べる
      • margin: 0 auto; , width:75% などと共に使用
  • 子要素:
    • flex:auto; : 親要素の幅に合わせて伸長したい各要素に指定
      • width:50%;(この%以上の最小値になる), flex-wrap: wrap; などと共に使用