ブログデザイン備忘録 ～ はてなブログテーマの自作5

　Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。前回PC版のおおまかなデザインは作成したが、レスポンシブなどレイアウト(配置・幅など)を切り替える上で、それぞれのクラス・IDの範囲がわかりやすくなるように境界線を設定した。（完成時は取り除く）

atatat.hatenablog.com

境界や表示範囲に関するところのみのCSSと境界表示の設定について以下に示す。

globalheaser-containerははてなブログの一番上のヘッダーのことで黄色の実線で境界を表示。

#globalheader-container {
    border: solid 2px yellow;
}

containerはブログ全体の表示領域、太いダッシュ線の青で表示。なお幅は$lgは1200pxに設定しているが、優先順位を上げる!importantを入れないと幅が変わらない。

#container {
    width:$lg !important;
    border: dashed 5px blue;
}

container-innerはブログ全体の表示領域の1つ内側の領域でオレンジの実線で表示。

#container-inner{
border: solid 4px orange;
width:$lg;
margin-top:-2.5em;
}

#blog-titleはブログのタイトル領域で赤の実線で境界を設定。

#blog-title {
    border: solid 2px red;
    width:$lg;
    height:$lg*0.15;
}

content-innerは記事の部分とサイドバーの部分を足し合わせた領域で、赤の実線で境界を設定。

#content-inner {
    border: solid 2px red;
    box-sizing: border-box;
}

wrapperは記事の部分よりも少し広い領域で、ライムの実線で表示。幅は!importantにより優先順位を上げている。

#wrapper {
   border: solid 2px lime;
   width:0.7*$lg !important;
}

mainはwrapperの内側にくる記事の領域だが、wrapperと同じ幅に設定している。境界の表示は実線の黒としている。

#main{
   border: solid 2px black;
   width:0.7*$lg;
   box-sizing: border-box;
}

box2はサイドメニューの領域で境界の表示はダッシュ線のマゼンタでを使用している。

#box2 {
   border: dashed 2px magenta;
}

#footerはフッター領域で実線の青で表示している。

#footer {
    border: solid 2px blue;
    width:100%;
}

境界を設定すると以下のようにデザイン上に表示される。