SWAGGER NEWS

今日から気に入ったデザインのWebサイトを調べていこうと思います。
記念すべき第一号はSWAGGERのNEWSページ。デザインは大人っぽくきれいな感じで、とてもシンプルですが使いやすそうでもあります。

 http://www.choiceisyours.jp/swagger/news/

それでは全体の構造から
#container
    #header
    #main
        #stage
            #categiryTitle
            #cast
                #blogLeft
                #blogRight
                    .blogEntry
                        .entryTitle
                        .entryBody
                        .entryFooter
    #footer

全体のwidthは900pxに左右paddingで36px、実際の幅は828px。

タイトルは30pxぐらい、カテゴリータイトルは20pxぐらい、ブログタイトルは27pxぐらい。

それではcssへ。
#container {
margin: 0 auto;
position: relative;
width: 900px;
#header, #main, #footer {
float: left;
position: relative;
width: 900px;
}
#blogLeft {
float: left;
position: relative;
width: 215px;
}
#blogRight {
float: left;
position: relative;
width: 613px;
 }
blogLeftの中身は<sapn class="title">でNEWS,ARCHIVE, CATEGORYとそれぞれの<ul><li>となる。
.title {  
border-left: 4px solid #FF0000;  
display: block; font-size: 12px; 
font-weight: bold; 
height: 18px; 
line-height: 18px; 
margin: 10px 0; 
overflow: hidden;  
text-indent: 10px; 
width: 152px;
 }
blogRightは複数のクラスを使ってそれぞれ細かく設定。

.blogEntry { 

border: 1px solid #DDDDDD;

float: left;  

margin: 0 0 20px;  

padding: 16px 20px 20px;  

position: relative; 

width: 571px;

}

.entryTitle { 

border-left: 4px solid #FF0000;  

display: block; 

float: left;  

font-size: 20px; 

height: 20px; 

line-height: 20px; 

position: relative;  

text-indent: 10px;  

width: 571px;

}

.entryBody { 

border-top: 1px solid #DDDDDD;  

display: block;  

float: left;  

margin: 15px 0 0;  

padding: 15px 0 0; 

position: relative;  

width: 571px;

}

.entryFooter { 

border-top: 1px dotted #DDDDDD;  

display: block; 

float: left;  

margin: 15px 0 0;  

padding: 10px 0 0; 

position: relative;  

width: 571px;

}

こういうシンプルなサイトっていいですね。