CSSは怖くない!CSSの役割と使い方

ハム氏
HTMLとセットでCSSってやつも勉強しないといけないって聞いたんだけど、CSSってなんなの?
 
なっちゃそ
cssはHTMLで書かれたコンテンツに装飾をしていくため言語だよ。
 
 
ハム氏
へー、それも詳しく教えてくれるの?
 
なっちゃそ
そうだね、頑張って解説するね。
 
 

CSSとは

 
HTMLで書かれたコンテンツに装飾をするための言語です。
 
一般的なwebサイトを見ると文字に色がついていたり、ボタンがあったりしますよね?
 
あれらの装飾はすべてCSSによって指定された値によってできています。
 
CSSはHTMLのファイル上に直接書き込むこともできるのですが、基本的にはHTMLファイルとは別にスタイルシート(style.css)というファイルを作ってその内容を呼び出すという方法をとります
 
 
 

CSSの基礎

 

CSSの基礎:CSSの書き方

 CSSの書き方は
 
 ①スタイルシートに書く方法
 
 ②HTMLファイルのスタイルタグの間に書く方法
 
 ③HTMLのタグの中に書き込む方法
 
 がありますが、基本的には①の方法でスタイルを当てていくことになります。
 
 なので今回は①のスタイルシートに書く方法についてがっつり、②③のHTMLファイルに書く方法をさらっと解説していこうと思います。
 
 スタイルシートでCSSを書く際にはセレクタプロパティの3要素が必要になります。
 
 
 
 セレクタにはタグ名やタグにつけられたclass名やid名(後で説明するよ)が入り、これらはCSSにHTMLのどこをスタイリングするのかを指定するために記述します。
 
 
 プロパティはセレクタの次の中カッコの中に書かれる何をスタイリングするのかを指定する部分。
 例えば、height(高さ)やcolor(文字色)みたいな指定したい要素ですね。
 
 はどのようなスタイリングをするか、どのくらい見た目を変えるかを指定する部分です。
 基本的にはheightに対して100pxとか、colorに対してredといったまさに値が入ります。
 
 
 
 さらにCSSの書き方には
 
 ・プロパティと値は中カッコで囲む
 
 ・プロパティと値の間にはコロンを入れる
 
 ・値の後ろにはセミコロンを入れる(連続して何個も指定しない場合はいらないけど入れる癖をつけた方がいいよ)
 
 というルールがあります。
 
なっちゃそ
これらは最初のうちはややこしいかもしれないけれど慣れると無意識レベルでできるようないなるからそこまで心配いらないよ。

 ただどれか欠けるとCSSは効かなくなるので頭には入れておいてね。

 

CSSの基礎:classとidについて

 
 
ハム氏
セレクタに書くclass名とかid名ってなに?
 
なっちゃそ
例えば、bodyタグみたいにファイルに1個しか存在しないようなタグなら、セレクタにタグ名(この場合はbody)を入力すれば良いのだけれど、divタグみたいにファイルに何個も存在してるようなタグはどこのdivにスタイルを当てたら良いかわかるように、class名とかid名という形でタグに名前をつけるんだよ。
 
 
ハム氏
なるほどー、じゃあclassとidの違いはなに?
 
なっちゃそ
それも含めてclassとidについて解説していくね。
 
 
 classとidの役割
 
HTMLに書かれた文書をCSSで装飾する際にはセレクタでどの部分を装飾したいかを指定する必要があります。
bodyタグ、headerタグのようにファイルに1つしか存在していないタグであればセレクタにタグ名を書けば指定することができます。
 
また、ファイル内に2つ以上あるタグの場合でもすべてのpタグやすべてのaタグに適応させたい装飾であればタグ名で指定する方法をとることができます。
 
ですが、ファイル内に2つ以上あるタグで1箇所にだけ適応させたい場合はタグ名で指定することは難しくなります。
 
 
そこで、タグに名前をつけてその名前をセレクタに指定して呼び出すという方法をとります。このときつける名前がclass名・id名と呼ばれるものになるわけです。
 
 

classとidの違いってなに? 

idとclassには
 
・id名は1つのファイルに1回しか使うことができない
 
・class名は何回使ってもOK
 
という決まりがあります。
 
なので同じスタイルを使いまわしたい場合はclassを使用するのが一般的です。
 
 

classとidの名前のつけ方

 
class名もid名もどのタグにもつけることができて、名前も自分で決めることができます。
 
名前をつけるときに守った方がいいルールとしては
 
・class/id名は日本語で書かない(英数字で構成する)
 
・class/id名は数字からスタートしないものにする
 
・後から見てもわかるように、要素と関連性がある名前にする
 
の3つが挙げられますかね。
 
3つ目に関しては、Webサイトは一度デザインしたサイトを別の人が改修する可能性があるので第三者がみても関連があってわかりやすい方がいいです。
 

id/classを使ってCSSを書いてみよう

ではでは、実際にCSSを書いてみましょう。

今回は下のHTMLの見出しとリンクにCSSで装飾をしてみましょう。

 

今回は見出しが赤い50pxの文字になり、リンクが青いボタンになるようにCSSを指定しました。

 

これをブラウザで表示するとこんな感じになります。

※画像はイメージです。

基本的にWebデザインをしていく中で実現したいデザインが出てきたら調べて試してを繰り返すことでだんだんどの指定でどんな見た目が出来上がるのかがわかってきます。

だから最初にオブジェクトの作り方を覚える必要はないですよ。徐々にレパートリーを増やしていけばOK!

よく使うプロパティを紹介するよ

 

さて、次はよく使うプロパティの名前と機能を紹介します。

プロパティにもたくさんの種類がありますが、実際にWebサイトを作りながら少しづつ覚えていくようにしてくださいね。

 

要素のレイアウトに使用するプロパティ

height

要素の高さを指定するプロパティ

 

width

 

要素の幅を指定するプロパティ

margin

要素の外側の余白を指定するプロパティ

padding

要素の内側の余白を指定するプロパティ

 

paddingとmarginの違いについて詳しく書いてる記事はこちら

要素に余白を作るCSS、paddingとmarginの違いと使い方を徹底解説

2018.04.24

 

position

要素の位置を指定するためにの配置方法について相対的か絶対的かを指定するプロパティ

top

positionに従って要素を配置する際に、上辺からの距離を指定するプロパティ

bottom

positionに従って要素を配置する際に、下辺からの距離を指定するプロパティ

right

positionに従って要素を配置する際に、右辺からの距離を指定するプロパティ

left

positionに従って要素を配置する際に、左辺からの距離を指定するプロパティ

display

要素の表示の仕方を指定するプロパティ

float

要素を右または左へ寄せて配置するプロパティ

 

テキストをスタイリングするためのプロパティ

color

文字の色を指定するプロパティ

font-size

文字のサイズを指定するプロパティ

text-aline

要素の横位置の揃え方を左揃え・中央揃え・右揃えから選び指定するプロパティ

line-height

行の高さを指定するプロパティ

font-weight

文字の太さを指定するプロパティ

font-family

文字フォントの種類を指定するプロパティ

なっちゃそ
もちろんまだまだありますが、それはまた別の機会に紹介していきますね。

まとめ

いかがでしたか?

スタイルシートを見ると一切日本語が書いてなくて一貫性が無いように見えるCSSですが、

どれもどの要素の・何を・どのようにするかを指定しているだけです。

複雑に見える装飾も一つ一つのCSSの指定でできているので、少しずつ自分の好みのデザインの実現方法を探していってくださいね。

 

ではでは。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です