nyantarou and css 簡単な表紙の解説

全体像

まずこれを見て下さい表紙の参考このようなものの概略の説明というより備忘録です

最初に body の部分を白色にしたのを見てみましょう、これからいくつかの部分の構成にて表紙の部分が成り立ってるのがわかるとおもいます。body の部分を色 #ffffff; 白にした場合を見ると
5011w650h843-top-all.png ; 66604:::67k 表紙の全体圖枠を含める
5012w647h705-topcut.png ; 43479:::44k 表紙の全体圖枠無し
ファイル圖の容量がかなり大きいが構わなければ見て下さい

toptitle として background: transparent; 背景透明
文字色 color:#3333ff; 等にて表示している
html では <h1 id="toptitle">Nyan and OS </h1>
css では
#toptitle {
background: transparent;
color:#3333ff;
margin:0;
padding-bottom:3px;
text-align:center;
font-size: 92%;
font-style: italic;
}
の部分である、”Nyan and OS” の文字が並んでいるのがわかるでしょう

通常の状態では body の背景

background:#99ffcc url(../005_png/1012w1h1col99ffcc.png);

としているこれはもし画像が無ければ背景色 #99ffcc で対応する様に指定している。
（参考までに；画像の無い場合の色の指定には #99ffcc; の様に ; セミコロンを忘れないこと試験する場合の注意点但し単独の色のみ指定する場合であってその場合後ろの部分を削除した時に、よくセミコロンも一緒に削除する場合があるということで、その様な事にならないようにということです。代替の指定では上記で可能である。）

background:#99ffcc url(../005_png/1012w1h1col99ffcc.png);
background:#99ffcc;

どちらかで指定するということです。

さて最初に見たものを画像にしたものを見てみよう
5013w650h843-top-normal.png ; 66390 :::67k 表紙の全体圖通常の状態
で見る事が可能、かなり大きい容量である。

これらから表紙の例としてもう少し部分を見て行きましょう

headarea の領域

次の領域は headarea であるこの場合圖は３個配置してある１個は左側に２個は右側に配置しているまず基本は css 側で
#headareafig{
float: left;
width: 24%;
margin: 0;
}
としてある右側のものは
.headareapbimg {
float:right;
margin:0 2px 0 0;
padding:0
background: transparent;
}
としている html 側では
<div id="headareafig">
</div>
と class="headareapbimg"
で指定している又下部に以下の様なもので次の menu 領域の上部のラインを指定している
border-bottom: 1px solid #aaaaaa;

これで圖と表題の部分は配置出来た事になります。

menu の領域

次の領域は menu である
5014w633h36menubgwhite.png ; 843 menu表紙の領域

このものは背景を白にしてみたものであるつまり,この部分は背景に画像を配置してありその画像は下部と上部の色に変化を設けてある数色の変化をつけている。
これは menu の下部の棒も表示するためである。
外枠の右側は
border-right:1px solid #aaaaaa;
で一番右側に縦棒またリンクさせてる個々の部分には左側に縦棒を設けてある
border-left:1px solid #aaaaaa;
従って良く見ると左側の棒と一番右側の棒の長さが異なっている。
唯一つの UA のみであれば調整してもう少し長さを揃える事が出来るが、そうすると他の UA で好ましくない状態になるのでほどほどにしておく

ここで menu 領域の周りの枠というか棒というかの表示は最上部は #headarea の下部で指定
右側の一番右端は
.menu の border-right:1px solid #aaaaaa; で指定
途中の個々の左側および一番左側は
.menu a,の border-left:1px solid #aaaaaa; で指定
下部は背景の 1025w300h57img-menubg.png で指定している
此処までで body headarea menu の部分の概略はいいでせう
他には menu a:hover 云々で色々変化を持たせています
****************************************************
menu 部分の背景を見てみましょう

menu 背景

要するに縦方向に色の変化を持たせたものを使用しています、実物の方が大きく作成してあり背景として使用される場合は結果的に縦方向は圧縮されて幅方向は拡大されて使用する事になります。

main の領域

main に移りましょう背景色を background:#3333ff; に変えてみたもので見てみると

5015w638h508main-bgcol3333ff.png ; 30252 ::: 30k main表紙の領域

の様になりますその内部に全体として

.pad {
padding:2%;
}

を設けてあります
ここから main の内部は大まかに
#leftmain と #rightarea に分けています
これから #leftmain の内部に移るのですが
内部は大まかに
.boxed
.roundbox
.box
.b1
.b2
.b3
.b4
.b5
.b6
まず
.boxed ですが今回は内部に roundbox を含んでいるのみなので
特に注目する点は無いと考えます

roundbox の領域

次は今回の主題の .roundbox です

<div class="roundbox">

<div class="roundtop"><span></span></div>

CSS 領域 ***********************
.roundtop {
height:15px;
background: url(../005_png/1022w15h15img-grtopr.png) no-repeat top right;
}
.roundtop span {
background: url(../005_png/1021w15h15img-grtopl.png) no-repeat top left;
display:block;
height:15px;
width:15px;
}

.roundbottom {
height:15px;
padding:0; margin:0;
background: url(../005_png/1024w15h15img-grbotr.png) no-repeat bottom right;
}
.roundbottom span {
background: url(../005_png/1023w15h15img-grbotl.png) no-repeat bottom left;
display:block;
height:15px;
width:15px;
}
CSS 領域 ***********************
<div class="roundbottom"><span></span></div>
</div>

今回の主題の .roundbox ですが上記の条件と一部内部の処理する場合
<br /> 改行を入れないとうまく表示出来ない場合がある
又４隅は圖、画像が其々必要で今回は４個必要この例では
png を使用してるが一部の UA ではうまく見えないので
gif jpg 何ぞにした方が良いと思われる

box の領域

次は .box の領域です
まず一番外側を boxで指定します
上部と下部および内部の２個の領域の真中の部分を
指定してあります
まず見ていきましょう
5016w462h190box.png ; 7799::: box の領域

の様に上部下部の色を変えて表示また今回は背景として中央の部分に画像で表示する所を他の色１色で指定した

b1 の領域

.b1 を見てみよう趣旨は左側の縁取りをするためなので今回は
border-left:3px solid #ff00ff;
で見てみると

5017w76h188-b1.png ；2423::: b1 の領域

もし background で処理すると box の内部を塗りつぶす様になって不都合の為今回は border-left:3px solid #ff00ff; で対応している

b2 の領域

.b2 を見てみよう

5018w220h190-b2.png；1843::: b2 の領域

こちらは右側であり
border-right:3px solid #00ffff;
にて対応している

.b3, .b6 は今回具体的な対応はしていない要するに其々上部と下部の中央部分を表示してある

したがって

box     box-上部
                   b3- 中央-上部


b1 ： 左側         box-中央         b2；右側 


                   b6- 中央-下部
box     box-下部

の様に周りを囲んだ内部に b4 と b5 が設置されていると考えれば良い

rightarea の領域

rightarea は
#rightarea
width:25%;
とにしてある

#leftmain {
float:left;
width:70%;

合わせて１００％にすると不具合が発生するので抑えてあるコントロールを多くすると色々障害が出てくる様であるこれは妥協の値の一例である

footer の領域

次は footer
#footer

background: #ffcccc;
で指定してある

5019w636h66-footer.png ；4821::: footer の領域

下部に border-bottom:1px solid #ffff00; を指定してある残りの文字列は body の部分に表示されるものである

個々の部分についてもう少しみる、まず roundbox について、これは４隅を別の図形で囲む事で成立させています roundboxを見てみましょう。

どうでしたか、少なくとも round box を作成する事は出来るようになったと思います。取り敢えずはこのくらいにしておきましょう。表紙の参考としてはこれくらいで終わります後は練習あるのみです。当然にゃんたろうはこのようなもの最初から作れるわけはありません。web ネットワークの世界の皆様に感謝感謝感謝です。拝！

top=>nyan & linux=>html&css=>here

nyantarou and css 簡単な 表紙の 解説

全体像