CSSでレイアウトを整える

CSSを記述して、Webページの見た目を自由にカスタマイズします。

CSSとは

前回、HTMLを記述して改行や見出し、文字の色などを変更して装飾をする方法を学習しました。
ですが、HTMLタグのみですっきりした今風のWebページを作るのは効率が悪く、自由度も低いです。
そこで使用するのが、 CSSです。
CSSとは、ウェブページのデザインやレイアウトなどの見栄えを変えていくためのコンピュータ言語です。CSSは「スタイルシート」とも呼ばれます。

CSSを使わずにWebページを作るとどうなるか

CSSがないとき

HTMLだけで作られたelectro-cuteのトップページです。単調でバランスが悪く安っぽいデザインになってしまいました。
CSSがないとき

CSSがあるとき

CSSを使ってデザインを整えるとこうなります。
このように、CSSを使うとWebページの見栄えを自分の好きなようにカスタマイズできるのです。
スクリーンショット 2017-09-26 14.36.14

CSSでできること

例えば、こう記述すると文字の色を変更することができます。
HTML

<p>これは例文です。</p>

ブラウザでの表示


これは例文です。


HTMLにこれだけの記述しかないと、文字は黒色で表示されますが、
CSS

p {
  color: orange
}

ブラウザでの表示


これは例文です。


CSSにこのような記述を追加すると、 <p> タグで記述された部分は特に指定がない限りオレンジ色で表示されます。
加えて、文字も大きくしてみましょう。先程のCSSに、 font-size: 18px という記述を追加します。
すると、
CSS

p {
  color: orange;
  font-size: 18px
}

ブラウザでの表示


これは例文です。


文字が大きくなりました。
このようにCSSでは色や大きさを変えるなど様々なデザイン設定をすることができます。

CSSを記述する場所

CSSを記述する方法は3パターンあります。

  • CSSファイルを作って読み込む
  • HTMLファイルに直接記述して <style> タグで括る
  • HTMLタグに書き込む

CSSを書く場所は3パターンに分けることができます。それぞれメリット・デメリットがあり、うまく使い分けていく必要があります。
今回はよく使われるCSSファイルを用意して読み込む方法を解説します。

CSSファイルの作成・読み込み

まずはCSSファイルを作成します。メモ帳などのテキストエディタを開き、
style.css
という名前で、記述したCSSを反映させたいHTMLファイルと同じ場所に保存してください。
そして、HTMLファイルに、CSSファイルのある場所を指定します。
前回作成したHTMLファイルをテキストエディタで開き、
<head> ~ </head> の間に

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

と記述するとCSSの内容を記述したHTMLに反映することができるようになります。
では、CSSに以下のコードを貼り付けて保存してください。

body {
    color: gray
}

そして、HTMLファイルを開いてみてください。
本文の文字がグレーになったのがわかると思います。

CSSを記述する

記述したCSSをざっくり解説すると、
HTML上の <body> タグ内にある color (文字色) を gray にする ということになります。
それぞれ、

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

という名前があります。

セレクタ

セレクタでは、 どの部分のデザインを変えるのか を指定します。
ここにはHTMLのタグ名、class名やid名を記述します。
例えば、 h1 {~} と記述したら h1タグ内のデザインを変えるという指定になります。

プロパティ

プロパティでは セレクタで指定された部分の何を変えるのか を決めます。
色を変えるのか、線をひくのか、あるいは余白を調整するのか、ということを指定します。
例えば、 color と記述したら文字色を変える指定、 background と記述したら背景色を変える指定になります。

値では どのように見た目を変えるのか を決めます。
プロパティで色を変えると指定されていた場合、何色にするかの部分の指定をここで行います。

CSSのプロパティ一覧

こちらにたくさん書かれているので、こちらを参照してください。
www.htmq.com/style/
基本的なHTML、CSSの記述について理解できたところで、
次回からはより実践的な話に入っていきます。

カテゴリー: WEB DESIGN 2018-2019 パーマリンク