学科 CSS基礎⑦

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

• overflowプロパティ

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

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

参考サイト

• overflow－CSSリファレンス – HTMLクイックリファレンス
• 【CSS】overflowの使い方：hiddenやscrollの違いは？
• 【CSS】overflow徹底攻略！scrollやhiddenなどの使い方も解説

文字の折り返しについて

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

参考サイト

• 改行を自動で！CSSで文字列を折り返しする方法【初心者向け】
• 【CSS】自動で文字を折り返し表示させる！？
• 【CSS】 テキストを折り返す方法！自動で改行・レスポンシブにも対応

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

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

参考サイト

• 画像に対してテキストを回り込ませる
• CSS：画像の形に合わせてテキストを回り込ませる方法【shape-outside】
• CSS Shapesでテキストを回り込ませるレイアウトを表現

本日の課題①

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

本日の課題②

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