CSSの記述に関する基本的な説明をします。HTMLタグへ付ける名前との連携も必要なのでHTMLタグと合わせて説明します。
CSSの読み込み方を知りたい場合は下記のページを参照してください。
目次
CSSファイルの先頭に文字コードを記述
WEBに関わるテキストファイルは全て文字コードが重要になります。この文字コードとは一体何かというと、国ごとに使う文字が違うからコードで管理されているというだけです。日本語に対応していない文字コードを設定してテキストを書くと文字化けします。この文字コードはサーバーでも設定されています。
難しいことは考えなくていいです。文字コードはUTF-8を使うということだけ覚えましょう。UTF-8は全世界共通のコードです。国内で10年くらい前は２〜３種くらいの文字コードを人それぞれバラバラに設定していました。今は世界的にUTF-8に統一しようという流れになっています。
我々がCSSで気をつけるべきことはテキストエディタの文字コードをUTF-8（BOM無し）にしてCSSファイルの1行目に「@charset "utf-8";」を書くだけで大丈夫です。
ちなみにUTF-8の宣言は必須ではありません。HTML側やサーバーでutf-8になってれば勝手にutf-8になります。
CSSの書き方
CSSはセレクタを指定して、そのCSSプロパティを変更することができます。その記述方法はセレクタ名 { プロパティ:値 }と書くように決められています。このセレクタ名とは簡単に言えば<p>のようなHTMLタグです。プロパティは背景色や文字色を変えるためのキーワードになります。値はプロパティによって書き方が変わってきます。
わかりにくいので簡単なCSSを紹介します。
p{
font-size:10px;
}
これは<p>タグの文字サイズを10pxにしなさいという命令になります。
p{
color:red;
}
この場合は<p>タグの文字色を赤にしなさいという命令です。
{}内には複数のプロパティを一気に書くことができます。
p{
font-size:10px;
color:red;
}
このようにCSSの記述ルール自体は単純です。難しいのは各CSSプロパティの組み合わせや、CSSプロパティ自体がどんなものがあるのか覚えることです。
セレクタ名について
先程セレクタとはHTMLタグと言いましたが、厳密には複雑な指定方法があります。代表的なセレクタ名の指定方法としてHTMLタグに付けられた名前を指定します。まずはこの指定方法をマスターしましょう。
HTMLタグには好きな名前を付けることが可能です。主に２つあり、ID名とCLASS名があります。HTMLタグにこれらの名前を付ける場合は下記のように記述します。
<p id="wrap" class="normal-text">こんにちわ</p>
| ID名 | ・id=""とタグに書き込む・CSSでは #ID名{プロパティ}と書く・ページ内に１つしか存在してはならないユニークな名前 ・アンカーリンクの座標になる ・JavaScriptで使うときにちょっと早い |
| CLASS名 | ・class=""とタグに書き込む・ class="item item-red"と半角スペースで複数記述可能・CSSでは .CLASS名{プロパティ}と書く・ページ内にいくつ存在してもいい |
どちらも数字から始まる名前は付けられません。大文字／小文字は別として判断されますが、大文字で始まる名前を付けることはできません。また、- と _ は使えますが記号を使うこともできません。
ID名とCLASS名の使い分けは今後の課題になると思います。慣れるまではヘッダー部分などの大枠だけにID名名を使い、その他は全てCLASS名でコーディングするのが良いと思います。ぶっちゃけますと全てCLASS名でも問題ありません。もし会社にお勤めの方は会社のルールに従うのが良いでしょう。
CSSファイルでこのID名とCLASS名を指定する場合は下記のように記述します。
/* ID名の指定 */
#header{
width:100%;
}
/* CLASS名の指定 */
.entryList{
background:red;
}
記述ルールを決めよう
CSSはサイトが完成する頃には大量の文字数になります。だいたい５万文字くらいは普通に書くことになるでしょう。それくらいになるとCSSファイルの中はスクロールするのも大変になります。ちょっとCSSを修正したい時に該当する場所を探すのも手間になっていきます。そこで重要なのがCSSの記述ルールです。
しかし記述ルールは特に決まっていません！！
ID名やCLASS名の名付けかたも自由です！
基本的に勤め先の仕様書に合わせたり、WEBサイト改修案件なら元のサイトの記述ルールに合わせます。避けなければならないのは、違う書き方が混在することです。
一般的に使われるCSSの記述ルール
自由と言われても指標がいると思うので、よく言われる基本的なルールをご紹介。
/*=======================================
main style
=======================================*/
/* コメントアウトで区切る */
p{
color: red;
font-size: 16px;
}
/* コメントアウトで区切る */
div{
background:red;
margin: 24px auto;
padding:8px;
}
/*コメント*/のようにCSSではコメントを残すことが可能です。このコメントを利用してHTMLのどこのCSSなのか区切ります。
そして{}は改行してCSSプロパティはTABで余白を開けます。書いてあるCSSプロパティはABCの順で記載します。
僕が決めているCSSルールの紹介
上に書いたCSSルールだとページが縦に助長になりますし、なによりCSSプロパティがABC順だと直感的にわかりません。ですので僕は下記のようにいつも書いています。
div{padding:8px;margin:24px auto;background:red;}
div p{color:red;font-size:16px;}
p span{font-weight:bold;}
ひとつひとつを1行で書くようにしています。そして半角スペースなども一切書きません。入れ子のセレクタの場合はTABで余白を増やして書きます。
そしてCSSプロパティの記述順序は「サイズ／押出系／文字系／ブロック系／ポジション系／それ以外」と決めています。これに慣れると文字色だけ変えたいときは直感的に行の中間あたりに書けば〜となります。
サンプルにとあるサイトで記述したWordPressのコメントタグのCSSを紹介します。初見は見にくいと思いますが慣れると作業しやすいです。
/* comment */
#review{padding:64px 0 40px;margin:60px 0;background:#F5F5F5;}
#comments{max-width:640px;margin:0 auto;}
.post-commentTitle{padding:16px 20px 16px;margin:0 0 .6em;font-size:3.6rem;line-height:1.2;font-weight:100;border-top:2px solid #333;border-bottom:8px solid #333;}
.post-commentTitle-sub{padding:40px 0 0;margin:40px 0 32px;font-size:2.4rem;border-top:4px solid #999;}
.comment-respond{font-size:1.6rem;}
.comments-area{padding:0;}
.comments-title{}
.comment-list{max-height:140px;margin:0 0 40px;line-height:1.4;overflow:hidden;}/**/
.comment-list.open{max-height:100%;}
.comment-list .comment{margin:0 0 32px;}
.comment-meta{margin:8px 0 0;font-size:1.3rem;text-align:right;}
.comment-author{margin:0 8px 0 0;color:green;display:inline-block;}
.comment-metadata{color:#666;display:inline-block;}
.comment .text{padding:16px;font-size:1.6rem;line-height:1.4;background:#fff;border-radius:12px;}
.comment .text p{margin-bottom:1em;}
.comment .text p:last-child{margin-bottom:0;}
.comment .text p > a{text-decoration:underline;}
#comment-acrdion-tgle{margin:0 0 -40px;background:#F5F5F5;box-shadow:0 -6px 12px #F5F5F5;text-align:center;position:relative;top:-40px;}
.comment-tgl{color:#00BFB8;font-size:1.8rem;font-weight:600;cursor:pointer;display:inline-block;}
.comment-tgl.kill{display:none;}
.comment-tgl:hover{color:#000;}
.comment-tgl .icon{font-size:6rem;top:-12px;}
.comment-form{}
.comment-form label{display:none!important;}
.comment-form input#author{height:32px;line-height:32px;padding:0 8px;border:1px solid #d4d0ba;border-radius:4px;}
.comment-form .logged-in-as{}
.comment-form-comment{}
.comment-form-comment label{margin:0 0 10px;font-size:24px;font-weight:bold;display:block;}
.comment-form-comment textarea{width:100%;height:80px;padding:8px;font-size:16px;line-height:1.6;border:1px solid #d4d0ba;border-radius:12px;display:block;}
.comment-form-comment textarea{min-height:240px;}
.comment-form-comment textarea:focus{outline:none;}
.form-name{margin:16px 0 0;font-weight:600;font-size:1.6rem;}
.form-submit{margin:40px 0 0;text-align:center;overflow:hidden;}
.form-submit .submit{width:80%;padding:16px 40px;color:#fff;font-size:2.4rem;font-weight:bold;background:#00BFB8;border-radius:4px;}
.form-submit .submit:hover{background:#4BCBC6;cursor:pointer;}
ただのコメント欄だけのCSSですが、もしこれを改行して書いているとそれだけでスクロールが大変になります。HTMLページはパーツごとにこれくらいのテキスト量があるので色々工夫してコーディングしましょう。
