Weblasts

cssとは?

webサイト制作と聞くとHTMLやら、CSSやら聞きなれない単語が飛び交います
ここでは「CSS」について簡単にまとめています

CSS(Cascading style sheets)

HTMLの装飾・レイアウトするために用いられる言語になります。
色を変えたり大きさを変えたりアニメーションさせたり様々な装飾をすることができます

CSSの記述ルール

CSSにも、HTML同様記述のルールや用語はあります CSSは、基本的に以下のように記述し、どの部分の何をどう変更するかをそれぞれ記述する事で、ページの見栄えを変更できる。

CSS

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

/*同じ場所に複数の記述を指定することもできる。*/
セレクタ{
  プロパティ①:値;
  プロパティ②:値;
}

CSSの用語

CSSを使う場合日常生活ではあまり使わない用語を多用します。
大変ですが覚えましょう

セレクタ

どの部分を変更するかの記述。
例えば「h1」や「p」など、どのタグに対して適応させるかを指定できる。

プロパティ

セレクタで指定した部分の「何」を「どんな風に」変更させるのかを指定する。
「何を」に該当する部分を「プロパティ」
「どんな風に」に該当する部分を「値」と呼び、それぞれを:(コロン)で区切り、行の終わり毎に;(セミコロン)を記述することで、実際に見た目を変更させる。
例えば、「color:red;」と書けば、指定したセレクタの文字色を赤色に変更する命令になる。

半角スペース・改行・tab

HTMLと同様、CSSでも半角スペース・改行・tabは、基本的に意味のあるものとして認識されない。
そのため、こちらも見やすいようにインデントを入れることができる。
自分でわかりやすいコードを書くことを心がけよう。

逆にCSSには、余計なものが入れられないです。全角スペース一つでも、正常に動かなくなってしまうので注意しましょう。

コメント

HTMLと同様、CSSでもコメントを使うことができる。
「/*ここにコメント*/」という形で「/」と「*(アスタリスク)」で囲むことで、その部分をコメントにすることができる。
メモ書きや、一時的に機能を外したい時などに利用しよう。

CSS

body{
    background-color : #F00;
    /*background-image : url(images/dog.jpg);*/
}

cssファイルの読み込み方

cssの記述方法はいくつかありますが、基本的にはHTMLと別にcssファイルを作り、読み込むのが一般的です。
HTMLにcssファイルを読み込むにはlinkタグを使って読み込んでいきます。

linkタグ

linkタグは、リンクする外部リソースを指定する際に使用します。
外部リソースとは、例えば、HTMLファイル、CSSファイル、RSSファイルなど、現在の文書ファイルに関連している外部ファイルのこと。
linkタグは、head要素の中に記述します。閉じタグはありません。

HTML

<link href="cssファイルまでのパス" rel="stylesheet" media="all">

Recommend Post