初回は、CSSで貼った背景の上で
好きな位置に文字を置く方法！
こんな感じの
今回はHTML固定のCSSチャレンジの内容を使うので、CSSのみの方法を書きます。
クラス分けは
＜div class='content1'>
＜h2>枝葉の工夫＜/h2>
＜p>枝や葉っぱを…＜/p>＜br>
＜p>計算してみると…＜/p>
＜/div>
になってます。
背景はp要素に入れてます。
まずは画像が切れないようにwidth heightの設定。今回のように文章より広い範囲の画像を使うときにこれは基本ですね。
そしてここからが勘違いしやすい。
まずp要素をmargin－topで20pxほど下げます。
次に横幅の設定。
この例の場合横幅は全部で960px、背景サイズは横幅ぴったりにしてあるので960pxです。
しかしwidth:960px;だと、背景は全てうつるけど文章も横幅960pxになるので背景に収まりません。
なのでまずは文字の左側位置の調整。
文字位置はpaddingで調整します。marginで調整すると一番外の完全な空白を生成するので画像まで移動してしまいます。
padding-leftで、今回は75px右にずらします。その時点では横幅960pxの文章がそのまま右に移動するので960＋75pxで大元からはみ出しています。
なので増やした分だけwidthを減らします。（今回は75px）
！ーーー画像はコンテンツとpaddingの部分まで表示され、文字はコンテンツの部分だけにしか表示されないので、
文字の周りに画像を表示させたいなら、paddingを大きくさせれば良いです。画像の中の文字を小さい範囲にとどめたい時はwidthを減らしてpaddingを増やすといいです。ーーー！
話しを戻すと現時点では、左のpaddingが75px、widthは960－７５pxですので、
合計960pxぴったりです。なので画像は左右ぴったり表示されていますが文字が右端まで到達しています。
なので右に画像を残しつつ、文字を入れたくないので、
padding-rightを空けたい分、 そしてその分widthを減らします。
padding-left＋width＋padding-right＝画像が表示される横幅
と覚えると良いです。そして背景も合わせてコンテンツ全体を移動したい時はmarginで動かします。
まとめ
横幅960pxの場合
1. padding＋width＝９６０pxになるようにする。
2. paddingは画像が表示される範囲。画像サイズと同じ値にするのが基本。
3. widthは画像と文字が表示される範囲。文字を画像上で狭い範囲に表示させたい場合はwidthの値を減らす。その分paddingを増やす。
4. marginは両方セットでの移動に使う。
日記難しいなぁ(/ω＼)