学科 CSS基礎⑤

2022.08.04
  1. 前回の復習
        1. L4.2.9 要素の配置方法
      1. L6.4 疑似クラス系セレクタ
          1. L6.4.1 link 疑似クラス（未訪問リンクスタイル）
          2. L6.4.2 visited 疑似クラス（訪問済リンクスタイル）
          3. L6.4.3 hover 疑似クラス（オンカーソルスタイル）
          4. L6.4.4 active 疑似クラス（アクティブスタイル）
          5. L6.4.5 first-child/last-child 疑似クラス（先頭・最終の子要素指定）
          6. L6.4.6 nth-child 疑似クラス（n 番目の子要素指定）
        1. L6.4.7 nth-of-type 疑似クラス（同一のセレクタを持つn 番目の子要素指定）
          1. L6.4.8 not 疑似クラス（指定値以外の要素指定）
        2. L6.5 疑似要素系セレクタ
          1. L6.5.1 first-letter 疑似要素（要素の1文字目を指定）
          2. L6.5.2 first-line 疑似要素（要素の1行目を指定）
          3. L6.5.3 before/after 疑似要素（要素の直前・直後にコンテンツの挿入）
  2. 本日の訓練内容
        1. A3.2 BOX モデル
        2. A3.3 margin の相殺
        3. A3.4 はみ出した領域の表示
        4. A3.5 文字の折り返し
          1. （1） 説明
        5. A3.6 フォントサイズの単位
          1. （1）説明
        6. A3.7 画像の配置
          1. （1）説明
      1. Lesson-10 CSS アニメーションで動かしましょう
        1. L10.1 はじめに
          1. L10.1.1 概要
        2. L10.2 transition （適用対象と時間）
          1. L10.2.1 transition 関連プロパティ
          2. L10.2.2 transition-property（変化の適用対象）
          3. L10.2.3 transition-duration（変化の時間）
        3. L10.3 transform\（変化する形態）
        4. L10.4 @keyframes（動きの制御規則）
        5. L10.5 animation（アニメーション実施）
          1. L10.5.1 animation 関連プロパティ
          2. L10.5.2 animation-name（アニメーション名指定）
          3. L10.5.3 animation-duration（変化の時間）
          4. L10.5.4 animation-timing-function（変化の仕方）
          5. L10.5.5 animation-delay（変化の遅延時間）
          6. L10.5.6 animation-iteration-count（繰り返し回数）
          7. L10.5.7 animation-direction（再生方向）
          8. L10.5.8 animation-fill-mode（開始前・終了後スタイル）
          9. L10.5.9 animation-play-state（再生・停止）
          10. L10.5.10 animation（アニメーション実施一括指定）
    1. メモ
  3. 学科 CSS基礎⑦
    1. -本日のアジェンダ-
    2. 本日のテーマ
    3. はみ出した領域の表示について
      1. 参考サイト
    4. 文字の折り返しについて
      1. 参考サイト
    5. テキストの回り込みについて
      1. 参考サイト
    6. 本日の課題①
    7. 本日の課題②

前回の復習

CSS でデザインを始める前に | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
...
html-css.hamaya2020.com
L4.2.9 要素の配置方法

L6.4 疑似クラス系セレクタ

L6.4.1 link 疑似クラス（未訪問リンクスタイル）
セレクタ:link { プロパティ名: 値; }
L6.4.2 visited 疑似クラス（訪問済リンクスタイル）
セレクタ:visited { プロパティ名: 値; }
L6.4.3 hover 疑似クラス（オンカーソルスタイル）
セレクタ:hover { プロパティ名: 値; }
L6.4.4 active 疑似クラス（アクティブスタイル）
セレクタ:active { プロパティ名: 値; }
L6.4.5 first-child/last-child 疑似クラス（先頭・最終の子要素指定）
セレクタ:first-child { プロパティ名: 値; }
セレクタ:last-child {プロパティ名: 値; }
L6.4.6 nth-child 疑似クラス（n 番目の子要素指定）
セレクタ:nth-nth-child(n) { プロパティ名: 値; }
L6.4.7 nth-of-type 疑似クラス（同一のセレクタを持つn 番目の子要素指定）
L6.4.8 not 疑似クラス（指定値以外の要素指定）
セレクタ:not(x) { プロパティ名: 値; }
L6.5 疑似要素系セレクタ
L6.5.1 first-letter 疑似要素（要素の1文字目を指定）
セレクタ::first-letter { プロパティ名: 値; }
L6.5.2 first-line 疑似要素（要素の1行目を指定）
セレクタ::first-line { プロパティ名: 値; }
L6.5.3 before/after 疑似要素（要素の直前・直後にコンテンツの挿入）
セレクタ::before { プロパティ: 値; }
せれくた::after { プロパティ: 値; }

本日の訓練内容

知恵袋（Tips） | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
...
html-css.hamaya2020.com
A3.2 BOX モデル
A3.3 margin の相殺
A3.4 はみ出した領域の表示
A3.5 文字の折り返し
（1） 説明
  • word-break:
    文章の改行方法について
    • normal:
      単語の途中で改行しない。日本語は表示範囲に合わせて改行する（初期値）。
    • break-all:
      表示範囲に合わせて改行する。
    • keep-all:
      単語の切れ目で改行する。
  • word-wrap:
    単語の途中で改行するか
    • normal:
      単語の途中で改行しない（初期値）。
    • break-word:
      単語の途中でも改行する。
  • white-space:
    コード中の半角スペース・タブ・改行をどう扱うか
    • normal:
      1つの半角スペースとして表示し、表示範囲に合わせて改行する（初期値）
    • pre:
      そのまま表示する。
    • nowrap:
      1つの半角スペースとして表示し、表示範囲に合わせて改行しない。
A3.6 フォントサイズの単位
（1）説明
  • フォントの大きさと行間は、fofont-size プロパティとline-height プロパティで制御される。
  • font-size プロパティとline-height プロパティの差分は、半分ずつ上下に割り振られる（line-heigt プロパティで指定された行間の上下中央にfont-size プロパティで指定された文字の上下中央が重なる）。
  • フォントサイズを指定する単位は複数存在する。
  • 各単位は、フォントサイズだけでなくwidth プロパティなどの領域を示すプロパティでも使用可能である。
A3.7 画像の配置
（1）説明
  • 画像を並べて表示する場合に縦方向や横方向の隙間が発生することがある。
  • 縦方向の隙間と横方向の隙間では発生する原因が異なる。
  • vertical-align プロパティを使用するときは、img タグに対してスタイルを指定する。
<img src="image1"><br>
<img src="image2">

画像を縦方向に並べたときに発生する隙間は、vertical-align プロパティの初期値がbaseline に設定されていることによるもの。

vertical-align: bottom; を指定して解消する（top, middleでも可）。

この操作で消えない場合は、line-height: 1.0em; を併せて指定する。

グリッドレイアウトを活用しましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
...
html-css.hamaya2020.com

Lesson-10 CSS アニメーションで動かしましょう

L10.1 はじめに

transition とtransform をメインに、他を拡張機能として使用していく。

L10.1.1 概要
  • CSS アニメーションを実現するためには、transition, transform, @keyframe/animation プロパティを使用する。
  • CSS アニメーションには以下の分類のプロパティがある。
    • transition
      アニメーションの変化の適用対象と時間を指定する。
    • transform
      アニメーションの変化する形態（移動、回転、伸縮、傾斜）を指定する。
    • @keyframe
      アニメーションの開始から終了までの動きの制御規則を指定する。
    • animation
      アニメーションの実施（@keyframe の適用）を指定する。
L10.2 transition （適用対象と時間）
L10.2.1 transition 関連プロパティ
  • transition-property プロパティ
    変化の適用対象を指定する。
  • transition-duration プロパティ
    変化の開始から終了までの時間を指定する。
  • transition-delay プロパティ
    変化が開始するまでの遅延時間を指定する。
  • transition-timing-function プロパティ
    変化の仕方を指定する。
  • transition プロパティ
    transition 関連プロパティを一括で指定する。
L10.2.2 transition-property（変化の適用対象）
transition-property: 変化の適用対象;

変化の適用対象

  • all（初期値）
    transition が適用できるすべてのプロパティを指定する。
  • 特定のプロパティ
    指定したプロパティだけを対象とする。
transition-property: background-color;

background-color のみを対象にする場合。

L10.2.3 transition-duration（変化の時間）
transition-duration 変化の時間;
L10.3 transform\（変化する形態）
L10.4 @keyframes（動きの制御規則）
L10.5 animation（アニメーション実施）
L10.5.1 animation 関連プロパティ
L10.5.2 animation-name（アニメーション名指定）
animation-name: アニメーション名;
L10.5.3 animation-duration（変化の時間）
animation-duration: 変化の時間;
L10.5.4 animation-timing-function（変化の仕方）
  • ease（初期値）
    開始時と終了時は緩やかに変化する。
steps(ステップ数, ディレクション)
L10.5.5 animation-delay（変化の遅延時間）
animation-delay: 変化の遅延時間;
L10.5.6 animation-iteration-count（繰り返し回数）
animation-iteration-count: 繰り返し回数;
L10.5.7 animation-direction（再生方向）
animation-direction: 再生方向;
L10.5.8 animation-fill-mode（開始前・終了後スタイル）
animation-fill-mode: 開始前・終了後スタイル;
L10.5.9 animation-play-state（再生・停止）
animation-play-state: 再生・停止;
L10.5.10 animation（アニメーション実施一括指定）
animation: 名前 変化の時間 変化の仕方 開始時間の遅延 繰り返し 再生方向 開始後のスタイル 再生・停止;
animation: kei01 1s liner 1s infinite alternate both running;

メモ

学科 CSS基礎⑦ | DEAUアカデミー WEBデザイナー養成科（短時間）A教室
samplesdl.me

学科 CSS基礎⑦

投稿日: 2022-08-12 作成者: master

-本日のアジェンダ-

1限目
学科 CSS基礎⑦
はみ出した領域の表示について

2限目
学科 CSS基礎⑦
文字の折り返しについて

3限目
学科 CSS基礎⑦
テキストの回り込みについて

4限目
学科 CSS基礎⑦
CSSのまとめ

5限目
学科 CSS基礎⑦
過去の訓練の復習

本日のテーマ

文書レイアウトを制御しましょう

はみ出した領域の表示について

  • overflowプロパティ

overflowは、これまでのタグでも注意は必要でしたが、特に気を付ける事としてブラウザ依存する（ブラウザ毎にデザインが異なる）という点に注意しましょう。

サンプルファイル（ overflow見本）

参考サイト

文字の折り返しについて

  • overflow-wrap（文章が領域の端に来た時に、単語の途中で改行するかどうかの設定）
  • word-break（長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定）

参考サイト

テキストの回り込みについて

  • floatプロパティ
  • shape-outsideプロパティ

参考サイト

本日の課題①

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

本日の課題②

過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。