学科 CSS基礎⑦

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

  • overflowプロパティ

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

サンプルファイル( overflow見本)

参考サイト

文字の折り返しについて

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

参考サイト

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

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

参考サイト

本日の課題①

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

本日の課題②

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