まっかっか～さんのページ

内容にはあまり手を付けません。
崩れたページ、可読性の低いページが大好物ですｗ
グズグズなページがあったら教えてくださいです。。。

さんぷるこーど

ヘッダ(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;
">

• div 1つ目
• リストを入れてみる。
• 高さを揃えなくていい場合は、heightはあえて指定しない

• div 2つ目
• ２つ並べる場合、親divのpaddingは削っておく。
• 中身のサイズを考える前に、親のスタイルを確認しないとあかんのです。。。
• 親のwidthをきっちり使いたい場合、厳密にサイズを測るか、%指定かだよねぇ。。。

• div 3つ目
• ２つづつ並べる想定だけど、上のやつらが高さあべこべな時はこうなります。

子div 4つ目。　こいつだけ float してない。

上の float してるやつの定義はこんなん

<!-- 
幅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;
">

？？？なんかおかしいでござる。

floatで崩壊してるのってmこのパターンが多い希ガス

div float並べ 再び。

ここは親div。分かりやすいようにborder濃いめにしています。背景色も変えておくです。

通常は float:left; で並べるのが、表示順とコードの並びが同じなので分かりやすい。

親divはこんな定義（右側突き抜けるんで、わざと改行してます。）

<div style="width: 640px; 
             border: 1px solid #444; 
             background-color: #faa; 
             padding: 0; 
             margin-bottom: 20px;
">

• div 1つ目
• リストを入れてみる。
• 高さを揃えなくていい場合は、heightはあえて指定しない

• div 2つ目
• ２つ並べる場合、親divのpaddingは削っておく。
• 中身のサイズを考える前に、親のスタイルを確認しないとあかんのです。。。
• 親のwidthをきっちり使いたい場合、厳密にサイズを測るか、%指定かだよねぇ。。。

• div 3つ目
• ２つづつ並べる想定だけど、上のやつらが高さあべこべな時はこうなります。

おまじない。

子div 4つ目。　こいつだけ float してない。

上の float してるやつの定義はこんなん

<!-- 
幅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指定が違うだけ。

• div 1つ目
• リストを入れてみる。
• 高さを揃えなくていい場合は、heightはあえて指定しない

• div 2つ目
• ２つ並べる場合、親divのpaddingは削っておく。
• 中身のサイズを考える前に、親のスタイルを確認しないとあかんのです。。。
• 親のwidthをきっちり使いたい場合、厳密にサイズを測るか、%指定かだよねぇ。。。

• div 3つ目
• ２つづつ並べる想定だけど、上のやつらが高さあべこべな時はこうなります。

こんな感じで、右側から順番に入っていく訳です。使いどころは、記事の右側に表を置いて、左側に本文を並べていくような配置にしたい場合、なんかですかね。R-9Aとかの記事や、ヤン・ウェンリー提督の生地なんかではガッツリ使われてます。

ただ、Rの系譜あたりで顕著でしたが、clearfix系(class "clearfix" は定義されてないから、style="clear:both;"としとく。)のブロックを適宜挟まないと、表題(h3とかh4)に被ってしまって、見た目が悪くなります。

Rの系譜は本文も div で囲って周り込み無しで整形。ヤン提督の方は clear:both; のstyleがついた空div追加で回り込みに配慮。 標準型戦艦(銀河帝国)と 標準型戦艦(自由惑星同盟)も空div追加ですな。

子div 4つ目。　今回はこいつもfloat中〜

float:right; で位置を動かす場合、右に来るブロックを先に記述してから、本文を記述してきます。この文も４つ目のdivの後に記述しています。

基本的に回り込まれるモノを先に記述する。と覚えておけば、いろいろと把握しやすいはず。。。です。というわけで、だいたい、floatはこんなもんで一回終わらせます。

もう一回おまじない。

気が向いたらサンプル増やしてくです。