ホームページ初心者

レイアウトやデザインに必須!CSSの基礎を学ぶ

投稿日:

HTMLの基礎を理解すると、次に気になるのがCSSですね。
HTMLだけではデザインやレイアウトを変更させることができません。
その部分を担当するのがCSSです。

CSSはHTMLよりもつまずきやすいところが多く、一回はまると1時間も2時間も抜け出せないといったことが多々あります。

しかし、それは上辺の知識だけになっていて、基本を理解していなことが大きな理由です。

まずはCSSの基本構造からみていきましょう。

CSSの基本構造

CSSは「セレクタ」「プロパティー」「値」の3つで構成されています。それ以上でもそれ以下でもありません。

「セレクタ」でどの要素に対してCSSをあてるのかを示し、「プロパティー」でどういったCSSをあてるのかを示します。

例を見てみましょう。

p{
   font-size:20px;
}

この場合、pタグに対して「フォントサイズを20pxにする」という指定を行っていることになります。

「p」がセレクタ、「font-size」がプロパティー、「20px」が値です。

つまり基本構造は次のようになります。

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

セレクタの例

p{
   font-size:20px;
}

これは先ほどの例でもありましたが、基本中の基本です。

この場合すべてのpタグに反映されてしまいますが、一部だけに反映したいときがありますよね?
そのときには、その一部だけに反映させるようなセレクタにしなければなりません。

#hoge p{
   font-size:20px;
}

これは子孫セレクタと言って、id名が「hoge」の要素な中にあるpタグにCSSをあてることになります。

まとめ

いかがでしたでしょうか。
今回はCSSの基本構造を見ていきましたが、ここが一番重要な部分になります。
これが理解できれば、あとはセレクタの指定方法やプロパティーを覚えたり、その都度検索するだけになります。

投げ出したくなることもあるかもしれませんが、諦めずに頑張っていきましょう。

-ホームページ初心者

Copyright© レンサバヒカQ , 2019 AllRights Reserved Powered by AFFINGER4.