「自分のサイトやブログのデザインをちょっとアレンジしてみたい」という人向けにcssについて簡単にまとてみました。
まずはcssの特徴を見てから、記述方法を見ていきたいと思います。
cssとHTMLの関係性
cssはHTMLと組み合わせることで初めて効果を発揮します。
cssとHTMLの特徴
- HTML・・・タグを使って文章に意味づけをする（文章を構造化）
→コンピュータが「このwebページはどんな内容なのか？」を理解しやすいように、文章の構造をタグで伝えてあげる。
- css・・・webページのデザインを指定する（文字の色やサイズ、ページ全体のレイアウトなど）
→人間（webページ訪問者）が見やすいページ作りを意識して、文字の色やサイズなどページ全体のデザインを作っていく。
HTMLでタグにより丁寧に意味づけされた文章は、コンピュータにとってはとても分かりやすい文章です。
しかし、それだけでは人間（webページ訪問者）にとって淡々と文章が書いてあるだけで読みづらいページとなってしまいます。
人間にも分かりやすいようにwebページをデザインするのがcssです。
cssとHTMLを分けて使うことによるメリット
実はHTMLのタグだけでも簡単な文章の装飾はできますが、あまり推奨されていません。
文章の構造を決めるHTMLとデザインを決めるcssに分けることによるメリットを紹介します。
コンピュータにとって分かりやすいコーディング
もともと文章をコンピュータにも分かりやすいように構造化する言語として登場したのがHTMLでした。
しかしwebページに凝ったデザインが求められるようになり、デザインを最重視してタグの意味にそぐわないコーディングが行われるようになってしまいました。
この状況を打破するために、文章の構造を決めるHTMLとデザインを決めるcssに分けたという背景があります。
2つをはっきり分けることは、コンピュータと人間の両者にとって分かりやすいサイト作りになるのです。
webページのユーザビリティの向上
webページはPCやスマートフォン、タブレットなど様々なデバイスを通して見られます。
それぞれ画面のサイズが全く違うので、すべて同じデザインというわけにはいきません。
それぞれのデバイスに合ったサイト作り（ユーザビリティを意識したサイト作り）は現代のweb制作の重要なテーマです。
1つのHTMLに対して複数のcssを使いデバイスごとのデザインを作ることで、ユーザビリティの向上が期待できます。
cssの記述場所
それでは実際の記述方法を見ていきたいと思います。
cssを記述する場所は３種類あります。
1、インラインスタイル
HTMLのタグ内に直接する方法。
<タグ名 style=”プロパティ:値;”>
2、ドキュメントレベルスタイルシート
HTMLのヘッダ部分に記述する方法
<head> <style type=”text/css”> スタイル記述 </style> </head>
3、外部スタイルシート
HTMLファイル以外にcssファイルを作成し読み込む方法。
<head> <link rel=”stylesheet” type=”text/css” href=”cssファイルのパス”> </head> 外部のcssファイルにスタイル記述
「セレクタ」と「プロパティ」
cssを記述するときに理解しておかなければならないのが「セレクタ」と「プロパティ」。
それぞれの意味はこうです。
- セレクタ・・・スタイルを適用する範囲を指定するためのもの
- プロパティ・・・どのようにスタイルを変更するかを指定するもの
簡単に言うと、「セレクタによってスタイルを変更する箇所を指定」し「プロパティによってスタイルを指定」するという流れ。
次に紹介する”記述方法”を見ることでよりイメージがしやすくなると思いますよ。
css記述方法の基本
cssのスタイルの記述は以下の通りです。
セレクタ{プロパティ:値;}
例）p{color:blue;}
例は、「pタグで囲まれた文字を青色にする」という意味です。
- セレクタで装飾したい部分のタグを指定します。
- プロパティで装飾内容を記述します。
１つのセレクタに対して複数のプロパティを設定したいときは
１つ目のプロパティの後に２つ目のプロパティを記述するだけで、複数の装飾をすることが出来ます。
セレクタ{プロパティ1:値1; プロパティ2:値2;}
複数のセレクタに対して同じプロパティを設定したいときは
セレクタを「,」で区切って記述することで、セレクタをまとめることが出来ます。
セレクタ1,セレクタ２{プロパティ1:値1; プロパティ2:値2;}
基本的なセレクタ５種類を紹介
セレクタは全部で５種類です。
1.タイプセレクタ
「HTMLのタグ＝セレクタ」としたものをタイプセレクタといいます。
cssを記述するうえでの基本となります。
例）p{color:blue;}（pを青色に変更）
2.子孫セレクタ
「～タグの中にある～タグ」を指定するときに子孫セレクタを使います。
例）div p{color:blue;}（divの中のpを青色に変更）
3.子供セレクタ
「～タグ内直下の～タグ」を指定するときに子供セレクタを使います。
例）div＞p{color:blue;}（div直下のpを青色に変更）
4.全称セレクタ
すべての要素に一括でスタイルを設定することが出来ます。
例）＊{color:blue;}（すべての要素の色を青色に変更）
5.隣接セレクタ
「～タグの直後の～タグ」を指定するときに使います。
例）div+p{color:blue;}（divの直後に続くｐを青色に変更）
より細かいデザインをするために使う特別なセレクタ「classセレクタ」と「idセレクタ」
cssを記述するときに使う基本的なセレクタは、先ほど紹介した５種類です。
しかしこの５種類だけでは細かいデザイン指定が出来ません。
より細かく要素を指定するために使うのが「classセレクタ」と「idセレクタ」です。
HTMLのタグに任意の名前をつけることで、要素を細かく分類することができ、細かいデザインもしやすくなります。
便利なので使う機会が多いですね。
classセレクタ
HTMLタグに任意の名前を付けて使います。
１ページ中に何回でも同じclass名を使うことができ、いくつかの要素に同じ装飾をするときに使います。
※class名は半角英数字で、頭文字に数字は使えません
＜HTML＞
<タグ名 class=”class名”>
＜css＞
.class名{プロパティ:値;}
idセレクタ
HTMLタグに任意の名前を付けて使います。
１ページ中に１回しか使えません。唯一の要素を指定するときに使います。
※id名は半角英数字で、頭文字に数字は使えません
＜HTML＞
<タグ名 id=”id名”>
＜css＞
#id名{プロパティ:値;}
最後に
今回はcssの基本とセレクタについてまとめてみました。
cssが何となく分かればいいと思います。
セレクタ（要素の指定方法）についていろいろと書きましたが、とりあえず覚えておきたいのが
- セレクタ{プロパティ:値;}または<タグ名 style=”プロパティ:値; ”>（←この形）
- HTMLのタグ名がセレクタになる
- 細か要素を指定したいときはHTMLタグにclass、idセレクタで勝手に名前を付けてから指定してあげる
です。
あとは実際にどうやって要素を装飾したり動かすのかですが、これが「プロパティ」の部分になります。
「自分のサイトやブログをちょっとだけアレンジしたい」くらいの人は、プロパティを覚える必要はないと思います。検索すればすぐに出てくるし、コピペで簡単に出来ます。
自分のサイトやブログのどの部分にcssを埋め込めばいいのかが分かればOKです。
