ステップ アップ テクニック

CSSでデザインを変えてみよう-CSSの概要

ブログにオリジナリティを出したり、サイト制作をする上で重要になってくるスタイルシート(CSS)。CSSをなんとなく使っているという方も多いのでは?ここではCSS実践テクニックの導入として、概要を簡単に解説します!

スタイルシート(CSS)とは

CSSとは、色・サイズ・レイアウトなどの表示スタイルをまとめたシートです。
HTMLにCSSを適用させる事で、複数のページのデザインを統一することができます。

CSSの書き方

  • セレクタ{属性;値;}
  • セレクタ・・・・変えたい対象

    属性・・・・・・スタイルの設定内容

    ・・・・・・・具体的な値

  • 例) p{color:#000000;}

CSSのかけ方

セレクタ(変える対象)の指定には、HTMLタグに直接かける書き方とその他に、classとidを使った書き方があります。

p{color:#000000;}

HTMLタグ<p></p>要素の色を黒(#000000)に指定する

.sample{color:#000000;}

.(ピリオド) + class名(任意の名前を設定)
class「sample」要素の色を黒(#000000)に指定する

#sample{color:#000000;}

#(シャープ) + id名(任意の名前を設定)
id「sample」要素の色を黒(#000000)に指定する

#sample01 .sample{color:#000000;}

id「sample01」の中のclass「sample」の要素の色を黒(#000000)に指定する

#sample01 .sample p{color:#000000;}

id「sample01」の中のclass「sample」の「p」要素の色を黒(#000000)に指定する

HTMLにCSSを適用させる

スタイルシートには、HTMLへの適用方法が3種類あります。

1
HTMLファイルとは別にCSSの設定のみ記述したファイルを用意し、
そのファイルをHTMLファイルとリンクさせ適用させます

▼CSS(外部ファイル abc.css)

▼HTMLソース

2
HTMLファイルへまとめて記述して(head内)適用させます

▼HTMLソース

3
タグにstyle属性を追加して適用させます

▼HTMLソース

概要を理解したら、実践テクニックに進みましょう!