訓練37日目　学科 HTML/CSS基礎⑤

本日のアジェンダ

1限目
学科 HTML/CSS基礎⑤
CSSの記述・検証ツールの活用

2限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて

3限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて

4限目
学科 HTML/CSS基礎⑤
Webページ制作実践

5限目
学科 HTML/CSS基礎⑤
本日の講義のまとめ

本日のテーマ

CSSのプロパティを理解しましょう

本日のレポート

Chrome検証ツールについて

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、
Chrome の検証ツールの使用が有効です。

また、スマートフォンやタブレットでの表示型式を確認することもできます。

CSSのボックス・モデル

HTMLのすべての要素は「箱（ボックス）」で構成されているというのが、CSSの基本的な概念。
このボックスには、以下の4つの層（順に外から内へ）があり、要素のサイズや配置を決定する。

構成説明
margin（マージン）要素の外側の余白。
他の要素との間隔を調整。
border（ボーダー）要素の枠線。
デザインや区切りの目的で使う。
padding（パディング）枠線と中身の内側の余白。
背景色はここまで含まれる。
content（コンテント）要素の中身（テキストや画像）。
幅や高さはここに適用される。

バックグランド系プロパティ【background-】

CSSの「バックグラウンド系プロパティ」は、背景色や背景画像の設定に使うプロパティ群です。

  • -color （背景色）
    • 背景色の範囲は「コンテンツ＋パディング＋ボーダー」の領域が対象になります。

  • -attachment （背景画像の位置）
    • 背景画像をスクロールするかどうかを指定します。
      • fixed：背景画像の位置が固定されスクロールしても動かなくなります。
      • scroll：スクロールすると背景画像も移動します。

  • -image （背景画像のファイル）
    • 背景画像は、body タグだけでなく、p タグ、div タグ、span タグなどの要素にも使用できます。

  • -repeat （背景画像の繰り返し）

  • background （背景の一括指定）
    • 上記4項目（color,attachment,image,repeat）を順不同でスペースで区切って指定します。

  • -size （背景画像のサイズ）
    • 背景画像のサイズは、以下の値で指定します。
      • contain：縦横比は保持して背景領域に収まるサイズになるように背景画像を拡大縮小します。
      • cover：縦横比は保持して背景領域を完全に覆うサイズになるように背景画像を拡大縮小します。
      • 幅・高さ：背景画像の幅と高さをスペースで区切って指定します。
      • パーセンテージ：背景画像の幅と高さ（パーセンテージ）をスペースで区切って指定します。

  • -position （背景画像の表示開始位置）

テキスト系プロパティ【text-】

CSSの「テキスト系プロパティ」は、テキストの見た目・整列・装飾・折り返しなどを制御するためのプロパティ群です。

  • color （文字の色）

  • opacity（透明度）
    透明度は、0（完全に透明）～1（完全に不透明）の範囲で指定します。
    背景だけを透過したい時には使えない。文字透過したくない時はbackgroundの色で透明度を指定する。

  • -align （文字の配置）
    ブロック要素内の文字の配置位置や均等割付を指定します。
    • start（初期値）,end,left,right,center,justify（均等割り付け）など。

  • -decoration-color （文字飾りの色）
  • -decoration-line （文字飾りの表示位置）
  • -decoration-style （文字飾りの線種）
  • -decoration-thickness （文字飾りの線の太さ）
    ※safariでは表示されない文字飾りもあるため要注意
    • solid（初期値）,double（二重線）,dotted（点線）,dashed（破線）,wavy（波線）など

  • -decoration （文字の飾りの一括指定）
    上記4項目（color,line,style,thickness）を順不同でスペースで区切って指定します。

  • -shadow （文字の影）
    文字に対して 1 つまたは複数の影を指定します。

フォント系プロパティ【font-】

CSSの「フォント系プロパティ」は、文字の見た目（フォントファミリー・サイズ・スタイルなど）を指定するために使います。

  • -family （フォントの種類）
    • フォントの種類を指定します。
      1. 指定コードを記述する
        例：厳密にゴシック体を指定する場合の指定コード
        <style>p { font-family: “Hiragino Sans W3”, “Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;}</style>
      2. webフォント（Googleフォント等）を使用する

  • -size （フォントのサイズ）
  • -weight （フォントの太さ）
  • -style （フォントのスタイル）※イタリック体や斜体など

  • line-height （行の高さ）
    • フォントの大きさと行間は、font-size プロパティと line-height プロパティで制御します。
      font-size プロパティと line-height プロパティの差分は、半分づつ上下に割り当てられます。

  • font （フォント一括指定）
    • 上記5項目（family,size,weight,style,height）を順不同でスペースで区切って指定します。

  • white-space （空白・改行の表示方法）

  • word-wrap （単語の途中での改行方法）

  • word-break （テキストや単語の改行方法）

  • tab-size （タブ文字の表示幅指定）

リスト系プロパティ【list-】

CSSの「リスト系プロパティ」は、ul や ol などのリスト要素の見た目をカスタマイズするためのプロパティ群です。

  • -style-type （リストマーカーの種類）
  • -style-image （リストマーカーの画像）
  • -style-position （リストマーカーの位置）
  • -style （リストマーカーの一括指定）

レイアウト系プロパティ

CSSの「レイアウト系プロパティ」は、要素をどこに、どのように配置するかを制御するプロパティ群です。

width【幅】

  • width （内容の幅）
    • 多くのCSSリセットやフレームワークでは、全要素に box-sizing: border-box を指定している。
      この場合、width で指定した値が「content + padding + border」の合計になるように調整される。

  • max-width （幅の最大値）
    • 要素の幅が広くなりすぎないように、最大値を制限するプロパティです。
    • 画面を見る際に余計に目線を横に振らなくて良いように設定したほうが良い。

  • min-width （幅の最小値）
    • 会社のロゴなど既定のサイズより小さくなってはいけない時などに設定。

height【高さ】　※内容に応じて高さが変わるのが自然なため、あまり設定しない

  • height （内容の高さ）
  • max-height （高さの最大値）
  • min-height （高さの最小値）

float/clear【回り込み／回り込み解除】　※今はFlexboxやGridが主流

  • float （回り込み）
    • 要素を左または右に寄せて、その隣に他の要素を回り込ませる。
    • 箱を横並びにして、右寄せ・左寄せで配置する。

  • clear （回り込みを解除）
    • フロートされた要素の回り込みを解除して、その下に要素を配置する
      • both：左右の回り込みを解除します。

その他

  • display （要素の表示方法）
    • 要素のレイアウトの形式（並び方）を決めるプロパティ
      • flex：block 属性の Flex コンテナを指定します。（例）display: flex;
      • grid：block 属性の Grid コンテナを指定します。

  • overflow （ボックスからあふれた内容の処理方法）
    • 中の要素がはみ出したとき、どう見せるかを決めるプロパティ
      • auto：はみ出したときだけスクロールバーを表示

フレックスレイアウト

Flexbox は「並べる・揃える・広げる・縮める」をかんたんに制御できる、超便利なレイアウト方法。
フレックスレイアウトのメリットは「① CSSがシンプルな記述で済む、② 垂直方向の位置を柔軟に調整できる、
③ CSSだけで並び順や折り返しを簡単に調整できる」などがあります。

パディング系プロパティ【padding-】

CSSの「パディング系プロパティ」は、要素の内側の余白を調整するために使います。
外側のマージン（margin）と混同しやすいですが、パディングはコンテンツと境界（ボーダー）の間のスペースです。

  • -top/-bottom/-left/-right （パディング上下左右）

  • padding プロパティ（パディング一括指定）
    • 上記4項目を一括指定。「上」と「右」と「下」と「左」の順で指定します。

マージン系プロパティ【margin-】

CSSの「マージン系プロパティ」は、要素の外側の余白（＝外側のスペース）を設定するために使います。

  • -top/-bottom/-left/-right （マージン上下左右）

  • margin プロパティ（マージン一括措定）
    • 上記4項目を一括指定。「上」と「右」と「下」と「左」の順で指定します。

  • マージンの相殺
  • マイナスマージン
  • ボックスの中央配置
  • ボックスの右端配置

感想

今日はよく使われるものを中心に、CSSのプロパティについて学んだ。
正直まったく頭に入っていないので、明日実際に記述しながら今日の内容を振り返って頭に入れていきたい…


タイトルとURLをコピーしました