こんばんは、 今日はWEBデザインで必須のCSSの備忘録です。CSS（Cascading Style Sheets）は、カスケーディング・スタイル・シートと呼ばれウェブページのスタイルを指定するための言語になります。
HTMLとCSSを組み合わせて使用することで細かくスタイルやデザインを指定することができ、ほぼ全てのウェブページで使用されている言語です。
HTMLで見出しタグ、テーブルタグ、リンクなどの構造を記述します。CSSは、それらをどうやって装飾していくかの言語になります。
はじめてのCSS作成
CSSは①直接HTMLファイルにCSSを書き込む方法と②HTMLファイルからCSSファイルを読み込む方法があります。②のHTMLファイルからCSSファイルを読み込んで使用するのが一般的ですが、理解を深めるためにまずは①直接CSSを書き込む方法で始めます。
HTMLページ
まずは ①直接HTMLページにCSSを書き込む方法 からご紹介します。
HTMLに直接書き込むと言ってもどこに書き込んで何を書けばよいか解りません。まずは下記のHTMLコードのみで記述したコードを見てみてください。htmlのコードは前回の記事を参考にします。
[blogcard url=”https://nw-engineer.work/html”]
HTMLコード
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>
<a href=”https://google.com”>Googleのページ</a><br>
<a href=”https://yahoo.co.jp”>yahooのページ</a><br>
<a href=”https://youtube.com”>youtubeのページ</a><br>
</body>
</html>
上記がHTMLタグのみで記述したページの外観になります。何となく味気なく近代的なWEBページの外観ではありません。昔のWEBページはデザインもそこそこでこんな感じでした。
①CSSをHTMLコード内に直接記述する
それでは、CSSのコードを記述していきましょう。HTML内に記述する場合は<head>タグと</head>タグの間にコードを記述していきます。CSSを記述する<style>タグの部分はオレンジ色の部分です。
CSSで下記のデザインを変更しています。
- ・h1タグのデザイン
- ・aタグのリンクした時のデザイン
CSSを記述したHTMLコード例
<html>
<head>
<title>はじめてのHTML</title>
<style type=”text/css”>
h1 {
color: #6677aa; /*文字色*/
border: solid 3px #3344cc; /*線色*/
padding: 0.5em; /*文字周りの余白*/
border-radius: 1em; /*角丸*/
}
a {color:blue;}
a:hover {color:#fff; background:#00c;} /*カーソル選択中の色*/
a:active {color:#ff0;} /*クリック中のリンクの色*/
</style>
</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>
<a href=”https://google.com”>Googleのページ</a></br>
<a href=”https://yahoo.co.jp”>yahooのページ</a></br>
<a href=”https://youtube.com”>youtubeのページ</a></br>
</body>
</html>
ちょっとCSSを記述するだけでデザインが大きく変わります。CSSでないと丸みを帯びた見出しタグやリンクを合わせた時の色を変えることは難しいです。
CSSを駆使してオシャレなWEBページを作成していきましょう！
② HTMLからCSSファイルを読み込む方法
引き続き ②HTMLからCSSファイルを読み込む方法 です。この方法はHTMLファイルとCSSファイルを2つのファイルを作成します。
まずは、HTMLファイルのコードです。CSSファイルを読み込むためにはHTMLファイルの<head>タグの間に <link rel=”stylesheet” type=”text/css” href=”CSSファイル名”>を記述します。下記のようなコードになります。
HTMLコード
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”csstest.css”>
<title>はじめてのHTML</title>
</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>
<a href=”https://google.com”>Googleのページ</a><br>
<a href=”https://yahoo.co.jp”>yahooのページ</a><br>
<a href=”https://youtube.com”>youtubeのページ</a><br>
</body>
</html>
HTMLファイルにCSSファイルを読み込むコードを記述したらCSSファイルを作成します。
①メモ帳に下記のCSSのコードをコピーします。
h1 {
color: #337aaa; /文字色/
border: solid 3px #1124ec; /線の色/
padding: 1em; /文字周りの余白/
border-radius: 2em; /角丸/
}
a {color:green;}
a:hover {color:#fff; background:#0cc;} /カーソル選択中の色/
a:active {color:#cc0} /クリック中のリンクの色/
②名前を付けて保存の際に、ファイル名は***.css すべてのファイルで保存します。
③下記のようなファイルが作成されます。
④HTMLファイルを開いてみてCSSのデザインが反映されていれば連携が完了されていることを確認できます。
CSSファイルのデザインが反映されない場合は下記を確認してみてください。
- CSSのファイル名を確認
- CSSのファイルパスを確認(HTMLと同じフォルダが良い)
- HTMLコードの記述を確認
はじめてのCSS まとめ
デザインを変更したい場合はCSSファイルのみを変更すれば色やスタイルなどのデザイン部分のみ変更出来てとても便利です。
一般的には、②HTMLからCSSファイルを読み込む方法が汎用的に使用されています。それではー！
良ければ過去記事も見てみてください↓
