前回 「自主学習1-1」を終え、今回はCSSについて学習します。
contents
CSSとは？
- Cascading Style Sheets（カスケーディング スタイル シート）の頭文字。
- webサイトのデザインやレイアウトなどの「見た目」を指定することができる。
- 現行のHTML5ではフォントの色や大きさを指定するfontタグが廃止され、CSSで指定することが基本となっている。
CSSの記述方法は3通り
- htmlのヘッダ内にstylタグを使用して記述
- htmlのインラインにタグの属性としてstyleを記述
- 外部ファイルに記述
一般的には外部ファイルに記述する方法が良いとされる。（後からの修正がしやすい、ファイル内を見やすくするなどの理由）
実際にCSSファイルを作成してみよう
1.ホームページ本体のHTMLファイルを用意しよう
前回の自主学習でコピペにより作成したHTMLファイルですが、こちらを自分なりにエディタで加筆してみました。このオリジナルのHTMLファイルをCSSで装飾していきたいと思います。
<!DOCTYPE html>
<html>
<head>
<title>ゴミコの自己紹介</title>
</head>
<body>
<img src="gomiko-aicon.png"with="400" height="500">
<h1>ゴミコ</h1>
<p>無職</p>
<ul>
<li>学歴なし</li>
<li>スキルなし</li>
</ul>
<a href="https://hanesoft.com/archives/1">プログラミング学習日記</a>
</body>
</html>ついでにimgタグのsrc属性に画像のパス（ファイルの保管場所）を指定してイラストを挿入してみたよ。
2.新しいCSSファイルを作成しよう
テキストエディタで新しいCSSファイル「 style.css 」を作成します。
New Fileでファイル名style.cssを指定してファイルを作成します。
3.まずは文字コードUTF-8を記述しよう
point!!CSSファイルを作成したら設定値を書き始める前に、まずHTMLファイルの文字コードを記述します。headタグ内にあるmetaタグのcharset属性に文字コードを指定しましょう。文字コードにはいくつか種類がありますが、最近のHTMLファイルやCSSファイルでは「UTF-8」という文字コードで書かれることが多いです。
UTF-8…世界中の言語や記号を表すことができます。日本語では、ひらがな、カタカナ、漢字などを表すことが可能です。ただし世界中の文字を網羅しているわけではありません。
よって今回のファイルもUTF-8で文字コードを指定しています。ファイルを保存する際の文字コードも「UTF-8」になります。
文字コードについて詳しく知りたい方はコチラfa-arrow-circle-right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ゴミコの自己紹介</title>
</head>
<body>
<img src="gomiko-aicon.png"with="400" height="500">
<h1>ゴミコ</h1>
<p>無職</p>
<ul>
<li>学歴なし</li>
<li>スキルなし</li>
</ul>
<a href="https://hanesoft.com/archives/1">プログラミング学習日記</a>
</body>
</html>このHTMLファイルをブラウザで表示させると以下のようになります。
4.CSSファイルに記述してみよう
CSSファイルでは、装飾したい箇所のHTMLタグを指定してそれぞれ記述していきます。
@charset="UTF-8";
body {color: midnightblue;background-color: powderblue}
h1{
border-bottom:solid 2px black;
border-width: thick;
font-size: 30px
}
p{
border-bottom:solid 2px black;
border-width: thick;
font-size: 15px
}
ul{
border-bottom:solid 2px black;
border-width: thick;
font-size: 15px
}
a{
border-bottom:solid 2px black;
border-width: thick;
font-size: 15px
}まずHTMLファイルで使用したタグを記述し（緑色の部分）、その後ろに｛｝中カッコを記述します。カッコ内に「先頭で指定したタグをどのように装飾したいのか？」を記述します。
※bodyはタグではありませんが、タグ以外の本体部分にも装飾を施すことが出来ます。
どのように装飾したいのか？については、「HTMLクイックリファレンス」こちらのサイトを参考にして記述しました。
参照：スタイルシートリファレンス
HTMLファイルからCSSファイルを読み込もう
1.HTMLファイルのheadタグ内にlinkタグを記述しよう
HTMLファイルのheadタグ内に、外部CSS（今作成したstyle.css）を読み込むためのlinkタグを追記します。（5行目に追記）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
<title>ゴミコの自己紹介</title>
</head>
<body>
<img src="gomiko-aicon.png"with="400" height="500">
<h1>ゴミコ</h1>
<p>無職</p>
<ul>
<li>学歴なし</li>
<li>スキルなし</li>
</ul>
<a href="https://hanesoft.com/archives/1">プログラミング学習日記</a>
</body>
</html>linkタグのrel属性には読み込むファイルの内容を記述します。これはファイル名のことではなく、他人がコードを読んだ際にも意味が分かるよう、中身の内容を記述しておきます。
hrefhref は rel で読み込むファイルがどこに置いてあるのかを指定します。同一フォルダ内にCSSファイルが置いてある場合は ./ と記述します。（ファイル名だけでもＯＫ）
2.HTMLファイルをブラウザで表示させ、CSSが反映されているか確認しよう
HTMLファイルをダブルクリックで開き、ブラウザに表示させて確認してみましょう。
CSSで指定した背景色や黒色の下線の装飾がHTMLに反映されました。
自主学習1-2について、講師の評価
引き続き頑張ってください。
まずは学習が習慣になると良いですね。CSSセレクタや文字コード、相対パスや絶対パスについては今後も頻繁に出てきます。
一度にすべて理解することは難しいので、いろいろなWebサイトや書籍を参考にして、イメージを掴めるように学習していきましょう。
byゴミリョ
次回の記事
