cssの基本。cssとは何か。 - プログラミング学習ノート

f:id:endoakak:20200725103912j:plain

この記事ではcssの基本についてまとめていきます。

cssって何？

cssの役割はHTMLを装飾し、webページの見た目を作ることです。HTMLでwebページに記載する情報を記述しただけでは、なんとも味気ないページになってしまいます。そこでcssを適用することで、見た目も綺麗なページを作ることができます。

HTMLにcssを適用するためには、HTMLのhead要素内で、cssを読み込む必要があります。以下のように、link要素を用いて、rel="stylesheet", href="cssファイルの場所"というように指定します。cssファイルには拡張子「.css」をつけます。

<head>
  <link rel="stylesheet" href="style.css">
</head>

cssの記述方法を見ていきます。cssは以下のように記述していきます。この例では、h1要素の文字が青色に変わります。

h1 { 
  color: blue;
}

h1の部分はセレクタと呼ばれます。これは、HTMLのどの部分に適用するのかを表しています。この場合、h1要素に適用されます。

colorの部分はプロパティと呼ばれます。何を変えるのかを表しています。colorプロパティは文字の色を変えるときに使います。

blueの部分では値を指定します。プロパティで指定したものを、どう変えるのかを示します。この例で言えば、文字の色を青に変えるということになります。

値の後ろにはセミコロン「;」が必要なので忘れないよう注意が必要です。

HTMLの要素には、class属性を指定することができます。classは要素につける名前のようなものです。cssでセレクタとしてp要素を指定すると、その内容は全てのp要素に適用されてしまいますが、classを用いることで目的の要素にのみcssを適用できます。

例えばHTMLにおいて、次のようにclassを指定します。

<p class="text-A">テキストA</P>
<p class="text-B">テキストB</p>

cssのセレクタにp要素を指定すると、その内容はこれらのテキストの両方に適用されますが、セレクタに「.text-A」と指定することで、テキストAのみにcssを適用することができます。

代表的なプロパティの例をいくつか紹介します。

文字の大きさを指定します。単位はpxを用いるのが一般的です。

p {
  font-size: 16px;
}

要素の高さを指定します。単位はpxもしくは%を使用します。%の場合、親要素に対する割合となります。

header {
  height: 100px;
}

要素の横幅を指定します。height同様、pxもしくは%を使用します。

.class {
  width: 50%;
}