「自分のサイトやブログのデザインをちょっとアレンジしてみたい」という人向けに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を記述する場所は3種類あります。
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つ目のプロパティを記述するだけで、複数の装飾をすることが出来ます。
セレクタ{プロパティ1:値1; プロパティ2:値2;}
複数のセレクタに対して同じプロパティを設定したいときは
セレクタを「,」で区切って記述することで、セレクタをまとめることが出来ます。
セレクタ1,セレクタ2{プロパティ1:値1; プロパティ2:値2;}
基本的なセレクタ5種類を紹介
セレクタは全部で5種類です。
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の直後に続くpを青色に変更)
より細かいデザインをするために使う特別なセレクタ「classセレクタ」と「idセレクタ」
cssを記述するときに使う基本的なセレクタは、先ほど紹介した5種類です。
しかしこの5種類だけでは細かいデザイン指定が出来ません。
より細かく要素を指定するために使うのが「classセレクタ」と「idセレクタ」です。
HTMLのタグに任意の名前をつけることで、要素を細かく分類することができ、細かいデザインもしやすくなります。
便利なので使う機会が多いですね。
classセレクタ
HTMLタグに任意の名前を付けて使います。
1ページ中に何回でも同じclass名を使うことができ、いくつかの要素に同じ装飾をするときに使います。
※class名は半角英数字で、頭文字に数字は使えません
<HTML>
<タグ名 class=”class名”>
<css>
.class名{プロパティ:値;}
idセレクタ
HTMLタグに任意の名前を付けて使います。
1ページ中に1回しか使えません。唯一の要素を指定するときに使います。
※id名は半角英数字で、頭文字に数字は使えません
<HTML>
<タグ名 id=”id名”>
<css>
#id名{プロパティ:値;}
最後に
今回はcssの基本とセレクタについてまとめてみました。
cssが何となく分かればいいと思います。
セレクタ(要素の指定方法)についていろいろと書きましたが、とりあえず覚えておきたいのが
- セレクタ{プロパティ:値;}または<タグ名 style=”プロパティ:値; ”>(←この形)
- HTMLのタグ名がセレクタになる
- 細か要素を指定したいときはHTMLタグにclass、idセレクタで勝手に名前を付けてから指定してあげる
です。
あとは実際にどうやって要素を装飾したり動かすのかですが、これが「プロパティ」の部分になります。
「自分のサイトやブログをちょっとだけアレンジしたい」くらいの人は、プロパティを覚える必要はないと思います。検索すればすぐに出てくるし、コピペで簡単に出来ます。
自分のサイトやブログのどの部分にcssを埋め込めばいいのかが分かればOKです。