33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

CSSとは?

本日の教材動画はこちら 

 ついにCSSのお勉強に突入です。今回はCSSとはなんぞや?という概念的なものからみていきましょう。

CSSの役割>について

HTMLでページの構造(ここに文字、ここで改行して、リンクはこれで...などなど)を決めるために書いていましたが、CSSはページの見た目を決めるために書かれます。つまりページのデザイン性を高めるために書くものですね!

CSSの構造>について

CSSは「1.どこの」「2.何を」「3.どうするか」 という3点セットの情報で記載します。例えば「h1の文字の大きさを50px」にしたい場合は、「h1の(どこの)」「文字の大きさ(何を)を」「50pxにする(どうするか)」という構造になります。

CSSの書き方>について

ではCSSはどこに記載すればいいのか?下記の3つの方法があるようです。

1. style属性を利用してタグの中に直接書く(あまり使わないほうがいい方法) 

2. HTMLファイルのheadタグの中に、styleタグで囲んで書く(よくみる手法)

3. 外部ファイルに記載してそれをページに読み込ませる(おすすめ!)

 

3の外部ファイル読み込みがおすすめな理由はずばり、サイト全体を1つのCSSファイルでメンテナンスできて便利だから!!2のheadタグの中に書き込む方法もよく見ますが、この場合ページを増やすたびに毎回記述する必要があり、全ページのデザインを変えたい場合などは全ページの記述を手直しする必要があります。

 

その点外部ファイルで管理してしまえば、デザインを変えたい場合は外部ファイルの中身を変更するだけで済み、外部ファイルを参照するよう設定していた場合はこれだけで全ページのデザインが変わります。つまり外部ファイル1つだけでデザインの管理ができ、かつサイトのデザイン統一ができるわけですね!

 

私はいままで2番の手法しか知らなかったんですが、確かに3番なら管理がめっちゃ楽そうですよね。是非とも覚えて帰りたいですな…。