本日の講義内容

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

本日の課題②

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

カテゴリー: 学科　CSS基礎

感想

今日は一週間ぶりの授業で、久しぶりにCSSについて勉強しました。一週間ぶりでったので少し不安でしたが、前回の範囲を復習したときに何となく自分なりにタグの意味などを理解していたので、最初の頃よりもCSSについてわかるようになってきているなと思いました。今回の授業では、画像の範囲指定やアニメーションについて勉強しました。今後WEBサイトを作っていく中で、自分が考えているサイトを作れるように、しっかりと今まで勉強した内容を復習しつつ制作していきたいと思います！