はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。

CSSファイルを見やすく整頓！！

トモ・リーン
ふー！
しゃばの空気は、久しぶりね・・・。
ケンジ
とりあえず、ネコサイトは作り終わったけど、今度は何を教えてくれるの？
トモ・リーン
作り終わった！？
うっくっくっくっく・・・・・・。
まだ、最後の仕上げが終わってないわよ。
ケンジ
っ！！
なん・・・だと？
トモ・リーン
あのCSSは「きれいに整理整頓」が出来てないのよ！！
ケンジ
なにぃぃいいい！
ケンジ
ってゆーか、それは意味があることなの？
トモ・リーン
あるわよ〜。
CSSファイルを整頓するとこんな利点が！！
  1. 何を書いているのか分かりやすくなるので、手直しが楽
  2. 作った本人以外にも理解しやすくなる（数ヶ月後の自分の為にもなる）
  3. ミスが出た場合、整理することで原因が発見出来ることがある
超地味ですが、結構重要なことです。
社会人の責任です！！！
ケンジ
そうか・・・！
早速、整理整頓させていただくぜ！！
トモ・リーン
うん、うん！
ケンジ
で、どうやればいいの？
前までのfileNoごとのコメントは外したけど。
トモ・リーン
まずは、どこのパーツなのか大体でいいのでコメントを書くのよ。
今回のCSSファイルでサンプルを作ったので見てみて。
パーツごとにコメントを入れたCSSファイルを見る
トモ・リーン
あと、CSSは色々な書き方があって単純化出来るところがあるわ。
そこも整理するのよ。
今回はこっそりは整理しながら書いていたので余りそんなところは無いのだけど、DWの機能で書きっぱなしだとズルズル長い記述になりがちなので、そういった記述が無いかも確認が必要ね。
margin, padding

marginとpaddingは以下のように記述することができます。
※以下marginのみの記述例になりますがpaddingも同じように記述できます。

すべての方向の値が同じ場合
/* まとめる前 */
.sample{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
} /* まとめた後 */
.sample{
margin:10px;
}

このように１行でまとめることが出来ます。

topとbottom、rightとleftが同じ値の場合
/* まとめる前 */
.sample{
margin-top:10px;
margin-right:auto;
margin-bottom:10px;
margin-left:auto;
} /* まとめた後 */
.sample{
margin:10px auto;
}

このように１行でまとめることが出来ます。

topとbottomは違うけど、rightとleftは同じ場合
/* まとめる前 */
.sample{
margin-top:10px;
margin-right:auto;
margin-bottom:15px;
margin-left:auto;
} /* まとめた後 */
.sample{
margin:10px auto 15px;
}

このように１行でまとめることが出来ます。

すべての方向の値が違う場合
/* まとめる前 */
.sample{
margin-top:10px;
margin-right:5px;
margin-bottom:15px;
margin-left:20px;
} /* まとめた後 */
.sample{
margin:10px 5px 15px 20px;
}

このように１行でまとめることが出来ます。

トモ・リーン
最後のすべての方向の値が違うときの数値の入れ方の関係は、時計回り順に記述すると考えると覚えやすいわよ！
boder
すべての方向のboderの設定が同じ場合
/* まとめる前 */
.sample{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
} /* まとめた後 */
.sample{
border: 1px solid #000000;
}

このように１行でまとめることが出来ます。
線の幅、線の種類、線の色の順番はこの通りでは無くても大丈夫です。

すべての方向のboderの設定が違う場合
/* まとめる前 */
.sample{
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
border-top-color: #EEEEEE;
border-right-color: #333333;
border-bottom-color: #000000;
border-left-color: #FFFFFF;
} /* まとめた後 */
.sample{
border-top: 1px solid #EEEEEE;
border-right: 2px dashed #333333;
border-bottom: 3px double #000000;
border-left: 4p dottedx #FFFFFF;
}

このように各方向ごとにまとめることが出来ます。
線の幅、線の種類、線の色の順番はこの通りでは無くても大丈夫です。

ケンジ
boderはまとめた方が圧倒的に見やすいね！
background
背景設定が盛り沢山な場合
/* まとめる前 */
.sample{
background-attachment: fixed;
background-color: #00CC00;
background-image: url(img/sample.png);
background-repeat: repeat-x;
background-position: 15px 100px;
} /* まとめた後 */
.sample{
background: fixed #00CC00 url(img/sample.png) repeat-x 15px 100px;
}

背景の場合は、「色のみ」「背景イメージのみ」などの設定の場合や、背景画像を利用してロールオーバをさせる場合、まとめると不都合が出る場合が有るのもあります※ので、必ずしもまとめなくてもいいです。
※設定しないプロパティ部分にはデフォルトの値が入るためです。

ケンジ
ふむふむ。確認したぜ！
今のCSSももうちょっと整理できそうだから、まとめてみたぜ！
サイドのメニュー部分はまとめると、ロールオーバにならなくなったからまとめなかったぜ！
まとめてみたCSS
トモ・リーン
う〜〜ん！さらに見やすくなったわね。
おかしな記述も見つけやすくなるから「CSSの挙動がおかしいけど、原因が分からない」って時はとりあえずCSSファイルを整理してみるのもオススメよ！
ケンジ
う〜〜〜ん、このCSSを見てたらちゃんと組めてるけど、後々困りそうなところを見つけたよ。
トモ・リーン
どこどこ？
ケンジ
ここ、ここ！
97行目 /*サイドメニュー：略歴*/
/*-----------------------------------------*/
dl {
width: 150px;
padding: 0px;
margin: 55px 0px 65px 13px;
}
dt {
font-size: 100%;
background: url(img/info-title.gif) no-repeat top #000000;
color: #FFFFFF;
padding: 3px 7px;
}
dd {
font-size: 80%;
margin: 0px;
border: 1px dashed #000000;
border-top: none;
padding: 3px 5px 170px 5px;
background: url(img/info-photo.jpg) center bottom no-repeat;
} サイドナビの「みったん・詳細」の部分なんだけど、このままだと他のページでも「dl」をコンテンツの部分などで使うと、「みったん・詳細」用のスタイルが利いておかしくなるよね？
トモ・リーン
うん、うん。
そこも、ついでに直して置いた方がいいわね。
97行目の「dl・dt・ddの頭に#siteMenu(半角スペース)」と付けるとメニュー部分以外のdlには利かなくなるわよ。
ケンジ
よ〜し、直したぜ！！他にも似たような部分があったから、ついでにやったぜ。
92行目などの書き方を直したCSS
トモ・リーン
あとここも、重複している部分があるので短く出来るわよ。
52行目 #siteMenu a#Mprofile {
background-image: url(img/menu1_o.gif);
background-repeat: no-repeat;
text-indent: -9999px;
overflow:hidden;
width: 157px;
height: 36px;
display: block;
}
#siteMenu a#Mblog {
background-image: url(img/menu2_o.gif);
background-repeat: no-repeat;
text-indent: -9999px;
overflow:hidden;
width: 157px;
height: 36px;
display: block;
}
#siteMenu a#Mdv {
background-image: url(img/menu3_o.gif);
background-repeat: no-repeat;
text-indent: -9999px;
overflow:hidden;
width: 157px;
height: 36px;
display: block;
}
#siteMenu a#Mphoto {
background-image: url(img/menu4_o.gif);
background-repeat: no-repeat;
text-indent: -9999px;
overflow:hidden;
width: 157px;
height: 36px;
display: block;
}
#siteMenu a#Mcontact {
background-image: url(img/menu5_o.gif);
background-repeat: no-repeat;
text-indent: -9999px;
overflow:hidden;
width: 157px;
height: 36px;
display: block;
} 強調している部分の記述が、みんな同じよね。
かぶっている部分はまとめ書きが出来るわよ。
ケンジ
なんだか分かりそうだから、やってみるぜ！
51行目 #siteMenu li a {
background-repeat: no-repeat;
text-indent: -9999px;
overflow:hidden;
width: 157px;
height: 36px;
display: block;
}
#siteMenu a#Mprofile {
background-image: url(img/menu1_o.gif);
}
#siteMenu a#Mblog {
background-image: url(img/menu2_o.gif);
}
#siteMenu a#Mdv {
background-image: url(img/menu3_o.gif);
}
#siteMenu a#Mphoto {
background-image: url(img/menu4_o.gif);
}
#siteMenu a#Mcontact {
background-image: url(img/menu5_o.gif);
} どや〜〜〜〜！！
記述が短くなった実際のCSS そのCSSを参照しているHTML
ケンジ
ここのメニューはまとめると、多少サイズとか変わった場合に簡単に修正できそうでいいね！
トモ・リーン
そうね。
次はブラウザチェックに便利なFireFoxの機能拡張の紹介をします。
シーユーネクストウィーク、バイバーイ！！
今回のポイント！
社会人の掟は身だしなみと、CSSファイルの整理整頓です！
誰に見られても恥ずかしくないように、キチンとしましょう。
みんなのために、自分の為に！！