CSSでデザインしてみる

はじめに

CSSはHTMLの要素に対してデザインを行う役目をします。
主に、色や大きさ、配置などをつけたりします。

【実践】CSSには書き方が３種類ある

HTMLの要素にデザインを加える方法にはやり方が３種類あります。

①HTMLタグに埋め込む
②HTMLファイル内に埋め込む
③CSSファイルに記述

これらの違いはデザインを適用する優先順位が変わります。
①の方法が一番優先され、次に②、一番優先されないのがCSSファイルに記述した③のものです。
ただし、綺麗な書き方を目指すために、できる限りHTMLタグに埋め込む書き方はやめることを推奨します。
実際のSESの現場では別のファイルで管理した方が見やすいので、③のやり方が主流です。

では、先ほどのカリキュラムでindex.htmlに記述した「これはh1です」を赤くしてみます。

それぞれの書き方を1つずつ見ていきましょう。

❶ HTMLタグに埋め込む方法

この方法では「h1」タグに「style」属性を追加します。
色を指定する場合は「color」で色に指定をします。

<h1 style="color:red;">これはh1です</h1>

❷ HTMLファイル内に埋め込む方法

index.htmlの上の方に <head>.....</head> という記述があります。
前回のカリキュラムで、文字コードの設定などが行われているところと説明した部分です。
この部分に「style」タグを追加します。

そしてその「style」タグの中に以下の記述をします。

<style> h1 { color: red; } </style>

「h1」は ”どこの場所” をデザインするか
「color」は ”何を”
「red」は ”どうするのか” を表しています。
こちらもブラウザ上でちゃんと文字が赤になっていることを確認してみましょう。

❸ CSSファイルに記述する方法（※今後はこのやり方を覚えて欲しいです）

index.htmlと同じディレクトリ内に「style.css」というファイルを作成してください。
※ディレクトリとはフォルダのこと

CSSは「Cascading Style Sheets (カスケーディングスタイルシート)」の略で、htmlで作成されたタブをデザインするものです。
まずはVSCodeの黒い画面の一番右下のアルファベットのところを「CSS」に指定してください。
そして作成したstyle.cssに以下の記述をします。
※htmlではhtml:5でtabボタンを押すなどを行いましたがここでは以下の内容を記述するだけでOKです。

h1 {
    color: red;
}

次にindex.htmlのタグ内に「link」タグがあるのでこの中に追加で記述を加えます。

「href」属性にindex.htmlをデザインするためのCSSファイルを書きます。
今回はstyle.cssを作成したのでこちらを記入します。
するとstyle.cssに記述したデザインを読み込んでくれます。

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

ここまで出来たら「index.html」をブラウザで表示してみましょう。
赤色で文字が表示されたでしょうか？

【実践】カラーコードで色を変える

上記の例では「red」と直接色の名前を記述しましたね。
使用できる色は16進数のカラーコードで色を指定します。
主要な色であえば「red」のように指定できますが通常は「#0000FF」のようにコードを記述します。

先ほどのCSSを書き変えると下のようになりますね。

h1 { 
    color: #0000FF;
}

このカラーコードは青色を表しているので確認をすると青色になります。
カラーコードについてここでは深く説明しないので興味のある方は調べてみてください。

【実践】CSSのコメント

HTMLと同じくCSSにもコメントを残すことができます。
CSSの場合は「/* */」で囲まれた部分がコメントになります。
文章を書くときは半角スペースを空けてからコメントするとコードが綺麗ですね。

やり方はHTMLと同じく、コメントアウトしたい範囲を指定し以下のキーを押す。

mac:　<commandボタン>　＋　/
Windows:　<ctrlボタン>　＋　/

「これはコメントです」という文字を囲んでみましょう。

/* これはコメントです */
h1 { 
    color: #0000FF;
}

htmlファイルとCSSファイルについて

CSSファイルはあくまでも呼ばれたhtmlのデザインだけを行います。
そのため、ブラウザで表示するのはhtmlのファイルだけで大丈夫です。

CSSを書くときの注意点

CSSを記述する際はインデントといって字下げに気をつけましょう。

・h1の次は半角スペース
・波カッコで改行
・インデント（字下げ）をする　※tabキーを押す
・colorの後は「コロン」、最後は「セミコロン」で改行
・波カッコを閉じる