css記述の基本「セレクタ」について。web専門学校で学んだcssの基本

cssの基本 web制作

「自分のサイトやブログのデザインをちょっとアレンジしてみたい」という人向けにcssについて簡単にまとてみました。

まずはcssの特徴を見てから、記述方法を見ていきたいと思います。

スポンサーリンク

cssとHTMLの関係性

cssはHTMLと組み合わせることで初めて効果を発揮します。

HTMLを独学で学ぶ!web専門学校で学んだHTMLの基本まとめ
ここではweb専門学校で最初に学んだ、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. セレクタで装飾したい部分のタグを指定します。
  2. プロパティで装飾内容を記述します。

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です。