CSSの基礎知識まとめ|書き方や名称、セレクタの指定方法など

  • 0
  • 0
  • 0
  • 28

css01
Webサイトを作成したり運営するならぜひ知っておきたい、CSSの基礎知識をまとめておきます。基本的なことを知っていると後々応用が効くようになるので、ぜひ覚えておきたいところです。

  • HTMLとCSSの関係
  • CSSでは「改行、半角スペース、タブ」は自由に使用できる
  • CSSの3つの書き方
  • CSSファイルでコメントアウトする方法
  • CSSの各部分の名称
  • セレクタの指定方法
  • タグと要素の違い




HTMLとCSSの関係

現在のWebサイトは、HTML(文章の構造)とCSS(見た目)によって構成されています。

見た目の制御をCSSファイルとして外部に設置することで、Webサイトのデザインやメンテナンスが非常にしやすくなりました。

HTMLのデータを軽くし、それと共にさまざまな端末でのサイト表示最適化も可能にするHTML+CSSというWebサイトの構成は、今後も広く利用されていくことになりそうです。




CSSでは「改行、半角スペース、タブ」は自由に使用できる

.sample {color: red;}
.sample 		{    color  :      red;      }
.sample {
color: red;
}

上記の3つは、CSSではすべて同じ「文字を赤くする」という意味で機能します。このように、CSSを編集するときには自由に改行や半角スペースを使用してOKです。

ただ、プログラムの実行には影響しませんが、いつも同じように書いておいた方が間違えにくいので、一定の書き方をする習慣を身につけましょう。




CSSの3つの書き方

  1. インラインに書く
  2. headタグ内のstyleタグに書く
  3. 外部のCSSファイルに書く

CSSの書き方は上記の3つ。この中で推奨されるのは3番です。他の2つはHTMLファイル内に直接書くので、外部にデータを置くというCSSのメリットが失われてしまいます。

CSSの表示をちょっとテストする場合などは1や2でも構いませんが、常に使用する記述方法としてはあまり用いられません。

それぞれの書き方を順番に説明しておきます。



1.インラインに書く

HTMLタグの中に、「半角スペース」「style=””」と続けて「””」の間にCSSを記述します。

<span style="color: red;">文字を赤くします</span>

<表示結果>
文字を赤くします




2.headタグ内のstyleタグに書く

<head></head>タグの中に、<style></style>タグを設置して、その中にCSSを記述します。

<HTMLファイル>
<head>
 <style>
  span {color: red;}
 </style>
</head>

<span>文字を赤くします</span>




3.外部のCSSファイルに書く

HTMLファイルには記述せず、外部のCSSファイルに記述します。HTMLの<head></head>タグ内で、読み込むCSSファイルを指定する必要があります。

<CSSファイル>
span {color: red;}

<HTMLファイル>
<head>
 <link rel="stylesheet" href="CSSファイル名">
</head>

<span>文字を赤くします</span>




CSSファイルでコメントアウトする方法

コメントアウトとは、プログラムソース中にコメントを書き込むことを言います。

/* コメントが書ける */

/*
複数の行でもコメントが書ける
複数の行でもコメントが書ける
複数の行でもコメントが書ける
*/

「/*」から「*/」部分までは、プログラムが実行されなくなります。一時的にCSSを実行したくない場合、ソースをコメントアウトして様子を見たりもできます。

※閉じタグ「*/」の直前が全角文字だとコメントアウトが成立しないので、半角スペースを入れるようにしておきましょう。




CSSの各部分の名称

セレクタ {プロパティ: 値;}

  • セレクタ:CSSを適用する対象
  • プロパティ:どのようなデザイン、効果を適用させるか
  • 値:変化の大きさや度合い、種類を指定する

例.
.sample { color: red; }

#test { font-size: 20px; }

span { background-color: green; padding: 20px; }

p { 
	    border-color: red; 
	    border-width: 10px;
	    border-style: solid;
}

プロパティと値はセットになっていて、続けて書いていくことができます。
(前述の通り、改行や半角スペースは自由に使用してOK)




セレクタの指定方法

  • HTMLタグ(要素)をそのまま指定する
  • class指定をする
  • id指定をする

例.
<HTMLタグ(要素)のspanをそのまま指定する>
span { color: red; }

<span>文字を赤くする</span>


sampleというclassを作って指定する>
.sample { color: red; }

<span class="sample">文字を赤くする</span>


testというidを作って指定する>
#test { color: red; }

<span id="test">文字を赤くする</span>

class指定は、セレクタの最初の文字が「.」になります。class指定はHTML1ページ中に何度も繰り返して指定できます。

id指定は、セレクタの最初の文字が「#」になります。id指定はHTML1ページ中に1度しか使用できません。




他にもセレクタを組み合わせて使うことで様々な指定方法が出来ます。ちょっと難しいかもしれませんが、いろんな指定方法があるんだなーと思っておきましょう。

*(アスタリスク)
すべてのセレクタを指定する
a,b
並列に指定する 複数のセレクタを一気に指定できる
a b
aよりも下の階層のbというセレクタを全て指定する つまり孫要素以下もすべて指定する
a > b
aのひとつ下の階層(子要素)のみbというセレクタを指定する 孫要素以下は含まない
a + b
aの直後のbというセレクタを指定する 間になにか挟まると通じない
ab
aかつb p要素でかつclass指定などの使い方をする


タグと要素の違い

  • タグ:<p>、</p>
  • 要素:<p>こんにちは</p>

タグというのは文字通りタグ自身のこと。<p>や</p>のことを示します。
要素というのは、タグと、タグで囲まれた範囲すべてを示します。

CSSを学ぶ場合は「要素」という言い方で正しく覚えたほうが良いのですが、最初のうちは同じような物だと思っておけばOKかと思います。




あとがき

これらの基礎知識があるだけでも、だいぶCSSに対しての敷居が下がると思います。ちょっとずつ勉強していきましょう。



  • 0
  • 0
  • 0
  • 28




コメントを残す

コメントは承認制です。日本語が含まれない投稿は無視されます。(スパム対策)

サブコンテンツ

このページの先頭へ