main の 内部 領域について box 関連
まず boxedの 背景色を background:#0000ff; 青 にします。 つぎに roundbox の 内部の 色を Moccasin #ffe4b5; にします、また区別のた め leftmain と main の 背景を background:#ffffff; 白に しておきます。 roundbox の ４隅を 見ると 円形の 部分 四角の内部に 円があり それを 四等 分 した 形が 見えると 思います つまり この形状を 四隅に 配置 すれば 四隅 が 角の 取れた 領域として 表示 される 事になる理由です。 今回は其画像を 大きくして 色が 赤 の もので 表示 しました。
現在の ファイルは 1007top.html と 1007top.css です。
さて boxの 領域に移りましょう 今回は 主に b1, b2, b3, b4 です これを 強調してみ ましょう。 まず b1 です。色で 区別 するよりは 今回の 趣旨から 考えて b4 の 左側を 飾るものとして 文字 b1 で 表す事に しました。つぎは b2 ですこ れも 同様な考えで 右側を 飾るものとして 文字 b2 で 表す事に しました。 次に b3 ですこれも 同様に 文字 b3 で 表示します。さて 残りの b6 を 表示 させてみます、これも 同様に 文字 b6 で 表示します。そうすると b4.b5 の 領域が b1,b2,b3,b6 で 囲まれた 様に なります。 最後に その 外部の box を 処理します、背景を 文字 box の 図形で 表示 しました この 方法を 使用すれ ば b4,b5 の 周りを 縁どる事が 可能に なります。アクセントに box の上部と 下部に border-top:10px solid #999999; 灰色の系統 と border-bottom:10px solid #ff0000; 赤色で 追加してみました。
ここは b4 の 領域です
ここは box b5 の エリアです。見ての とおり 文字数に より 下 の 方向に 縦方向の 長さが 変化 するため b4 と b5 の 縦方向の 長さは 同 一には なりません。
これで 漸く 終わりになります。アクセントを 少し 追加しました
boxed の 上部に
border-top:10px solid #ffaaaa; を 付記footer の部分に
border-bottom:10px solid #3399ff;を 付記 してみました この様に 表紙が 構
成されて いる事が わかると 思います。後は 微調整を する必要が 有ります。
但し あんまり 凝った 方法で 作成しても UA (ブラウザ)が 対応していないも
のも 多いので まあ 適当に 処理ということに なります。これで 此の項目は終
了です。上部の Home を クリックして 始めの 所へ 戻って 下さい。
にゃんたろう 拝！