WEB 第九回
| 前回やった内容 | 今回の内容 |
| ・DIVボックスをつくる ・DIVボックスに名前をつける ・DIVボックスのCSSルールを作成する ・DIVボックスのCSSをデザインする (余白／マージン／ボーダー=境界線)
| ・画像を設置する ・画像にID名をつける ・画像のCSSルールを作成する ・画像のCSSをデザインする
(フロート＝画像にテキストを回り込ませる)
↓
回り込みに付随するCSS設定の編集・修正方法を習得
|
Lesson-3 画像にテキストを回り込ませる
●STEP:01画像にID名をつけてフロートの設定をする
１)前回保存したデータを開く
２)画像にID名「figure」をつける
３)新規CSSルールのアイコンをクリック
４)セレクタ名を「#figure」とする
５)カテゴリ[ボックス]の[フロート]を「左」に設定する
６)すべてを保存
問題点が発生：画像がボックスからはみ出してしまう！？→どうしたら修正できるか→STEP:2
●STEP:02 回り込みの解除を設定する
１)著作権表示 <address>~</address>の新規CSSルールを作成
２)カテゴリの[ボックス]の[クリア]を「左」に設定する
これで著作権表示 <address>~</address>の行から回り込み設定が無効になるので
画像がボックスからはみ出さなくなる。
３)正しく修正できているかどうかブラウザで確認
●STEP:03 画像と回り込んだテキストの間隔を調整する
問題点：画像と回り込んだテキストがくっついている。
１)CSSスタイルのパネルの#figureをダブルクリックし#figureを再編集
２)カテゴリ[ボックス]の[マージン]の[すべて同一]のチェックを外し、[右]の項目に「1ems」と設定する
※em単位
詳細参考サイト
「em」はfont-sizeプロパティの値を1とする大きさで、文字サイズの大きさを1として考えます。
ページのフォントサイズを変更した時に同時にこの単位で設定した場所も文字のサイズに比例してサイズ変更されます。
ページのフォントサイズを変更した時に同時にこの単位で設定した場所も文字のサイズに比例してサイズ変更されます。
●STEP:04 ボックスを作成して画像とテキストをまとめる
１)ボックスに入れる部分を選択
２)DIVボックスを作成→[挿入]の項目に[選択範囲の周囲で折り返し]になっているか確認
３)DIVボックスに[figbox]という名前をつける
●STEP:05 ボックスの余白とボーダーを設定する
１)DIVボックス(=#figbox)の新規CSSルールを作成する
２)セレクタ名を「#figbox」に修正
３)カテゴリ[ボックス]の[余白]を「すべて同一」の12ピクセルに設定する
４)カテゴリ[ボーダー]の設定を[実線/2ピクセル／グレー#666666]にする。
問題点発生：画像がボックスからはみ出してしまう！？→
５)回り込み設定を無効にしている 著作権表示 <address>~</address>の行をボックスの中に入れる事で修正
回り込みの指定の間違いや、レイアウトサイズのズレが生じると、
カラム落ちやレイアウト崩れがおきます。
cssルールの指定は正確にできるように習得しましょう。
(例)---メニューのdivボックス(黄)と本文のdivボックス(赤)の横幅の合計が
緑のdivボックスの横幅より大きいためにおきるカラム落ち
見た目には入りそうなサイズに見えるが、余白(境界線の内側のスキマ)を考えると横幅が足りない
※idとclassの違い
詳細参考サイトclassは 複数の要素に適応するパターンの名前 | idはその要素固有の名前。 | |
| CSS | span.red { color: #ff0000; } | p#footer01{ border-top: 1px solid #000; } |
| HTML | <p> 東野圭吾の作品は昨年 <span class="red">ドラマ化</span> されたもの や <span class="red">映画化</span> されたものがあります。 <p> | <p id="footer01"> ここまで <p> |
| 表示結果 | 東野圭吾の作品は昨年ドラマ化 されたもの や 映画化されたものがあります。 |