内容にはあまり手を付けません。
崩れたページ、可読性の低いページが大好物ですｗ
グズグズなページがあったら教えてくださいです。。。
さんぷるこーど
ヘッダ(h?)
<h1>h1がここで効いたら困るのです。"<h1>タグは利用できません。"て怒られます。</h1>
→h1はw3c書式仕様上、ページのタイトル。g◯◯gleさんの最近の見解はしらんけど。
h2
h3
h4
h5
div float並べ
ここは親div。分かりやすいようにborder濃いめにしています。背景色も変えておくです。
通常は float:left; で並べるのが、表示順とコードの並びが同じなので分かりやすい。
親divはこんな定義（右側突き抜けるんで、わざと改行してます。）
<div style="width: 640px; border: 1px solid #444; background-color: #faa; padding: 0; margin-bottom: 20px; ">
<!-- 幅298pxの根拠 1,描画エリアサイズ(幅) 親divの幅から、 親divのpadding-left ＋ 親divのpadding-right を引く。 ＝ 640px + 0 ＝ 640px 2,２つ並べたいので、1の値を2で割る ＝ 320px 3,2の値から、 子divのmargin-left ＋ 子divのmargin-right ＋ 子divのborder-left ＋ 子divのborder-right を引く ＝ 320 - (10 + 10 + 1 + 1) ＝ 320 - 22 ＝ 298px --> <div style="width: 298px; margin: 10px; background-color: #aaf; float: left; border:1px solid #000; ">
div float並べ 再び。
ここは親div。分かりやすいようにborder濃いめにしています。背景色も変えておくです。
通常は float:left; で並べるのが、表示順とコードの並びが同じなので分かりやすい。
親divはこんな定義（右側突き抜けるんで、わざと改行してます。）
<div style="width: 640px; border: 1px solid #444; background-color: #faa; padding: 0; margin-bottom: 20px; ">
おまじない。
<!-- 幅298pxの根拠 1,描画エリアサイズ(幅) 親divの幅から、 親divのpadding-left ＋ 親divのpadding-right を引く。 ＝ 640px + 0 ＝ 640px 2,２つ並べたいので、1の値を2で割る ＝ 320px 3,2の値から、 子divのmargin-left ＋ 子divのmargin-right ＋ 子divのborder-left ＋ 子divのborder-right を引く ＝ 320 - (10 + 10 + 1 + 1) ＝ 320 - 22 ＝ 298px --> <div style="width: 298px; margin: 10px; background-color: #aaf; float: left; border:1px solid #000; ">
4つ目の前にこの手のおまじない入れておくと、float した後の書式崩れ回避。
<div style="clear: both;"></div>
上では「おなじない」って入れたけど、手抜きですが空divするのも一応あり。
div float並べ 今度はfloat right。
ここは親div。分かりやすいようにborder濃いめにしています。背景色も変えておくです。
今回は float:right; で並べてみる。エディタ上は、上と同じ表記順で、styleのfloat指定が違うだけ。
こんな感じで、右側から順番に入っていく訳です。使いどころは、記事の右側に表を置いて、左側に本文を並べていくような配置にしたい場合、なんかですかね。R-9Aとかの記事や、ヤン・ウェンリー提督の生地なんかではガッツリ使われてます。
ただ、Rの系譜あたりで顕著でしたが、clearfix系(class "clearfix" は定義されてないから、style="clear:both;"としとく。)のブロックを適宜挟まないと、表題(h3とかh4)に被ってしまって、見た目が悪くなります。
Rの系譜は本文も div で囲って周り込み無しで整形。ヤン提督の方は clear:both; のstyleがついた空div追加で回り込みに配慮。 標準型戦艦(銀河帝国)と 標準型戦艦(自由惑星同盟)も空div追加ですな。
float:right; で位置を動かす場合、右に来るブロックを先に記述してから、本文を記述してきます。この文も４つ目のdivの後に記述しています。
基本的に回り込まれるモノを先に記述する。と覚えておけば、いろいろと把握しやすいはず。。。です。というわけで、だいたい、floatはこんなもんで一回終わらせます。
もう一回おまじない。
気が向いたらサンプル増やしてくです。
- 3
- 0pt
