自主学習1-2「CSSファイルを作ってHTMLを装飾してみよう」

前回 「自主学習1-1」を終え、今回はCSSについて学習します。

CSSとは?

CSS
  • Cascading Style Sheets(カスケーディング スタイル シート)の頭文字。
  • webサイトのデザインやレイアウトなどの「見た目」を指定することができる。
  • 現行のHTML5ではフォントの色や大きさを指定するfontタグが廃止され、CSSで指定することが基本となっている。

CSSの記述方法は3通り

  • htmlのヘッダ内にstylタグを使用して記述
  • htmlのインラインにタグの属性としてstyleを記述
  • 外部ファイルに記述
point!!

一般的には外部ファイルに記述する方法が良いとされる。(後からの修正がしやすい、ファイル内を見やすくするなどの理由)

ゴミコ
HTMLファイルに直接書き込むより、別ファイルに記述しようってことだね。

実際に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>
ゴミコ
前回覚えたH1タグ(見出し)、pタグ(改行)、ulタグ(リスト)、aタグ(リンク)を使用したよ。
ついでにimgタグのsrc属性に画像のパス(ファイルの保管場所)を指定してイラストを挿入してみたよ。

2.新しいCSSファイルを作成しよう

テキストエディタで新しいCSSファイル「 style.css 」を作成します。

参考1-2-1

New Fileでファイル名style.cssを指定してファイルを作成します。

3.まずは文字コードUTF-8を記述しよう

point!!

CSSファイルを作成したら設定値を書き始める前に、まずHTMLファイルの文字コードを記述します。headタグ内にあるmetaタグのcharset属性に文字コードを指定しましょう。文字コードにはいくつか種類がありますが、最近のHTMLファイルやCSSファイルでは「UTF-8」という文字コードで書かれることが多いです。

UTF-8…世界中の言語や記号を表すことができます。日本語では、ひらがな、カタカナ、漢字などを表すことが可能です。ただし世界中の文字を網羅しているわけではありません。

よって今回のファイルもUTF-8で文字コードを指定しています。ファイルを保存する際の文字コードも「UTF-8」になります。

文字コードについて詳しく知りたい方はコチラ
ゴミコ
このUTF-8の記述はHTMLにも必須なので、先程のHTMLファイルにもコードを追記するよ。(4行目に追記)
<!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ファイルをブラウザで表示させると以下のようになります。

参考1-2-2
ゴミコ
この昔ながらのホームページ感、少し懐かしいわ。

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>
relとhrefについて
rel

linkタグのrel属性には読み込むファイルの内容を記述します。これはファイル名のことではなく、他人がコードを読んだ際にも意味が分かるよう、中身の内容を記述しておきます。

href

href は rel で読み込むファイルがどこに置いてあるのかを指定します。同一フォルダ内にCSSファイルが置いてある場合は ./ と記述します。(ファイル名だけでもOK)

ゴミコ
あと一息でCSSファイルの完成よ!
point!! これらの作業が完了したらファイルを忘れずに保存します。 保存はこまめに、忘れずに。ショートカットキー(ctrl+s)を使ってバシバシ保存していきましょう。

2.HTMLファイルをブラウザで表示させ、CSSが反映されているか確認しよう

HTMLファイルをダブルクリックで開き、ブラウザに表示させて確認してみましょう。

参考1-2-3
ゴミコ
出来てる出来てる!!

CSSで指定した背景色や黒色の下線の装飾がHTMLに反映されました。

自主学習1-2について、講師の評価

引き続き頑張ってください。

まずは学習が習慣になると良いですね。CSSセレクタや文字コード、相対パスや絶対パスについては今後も頻繁に出てきます。

一度にすべて理解することは難しいので、いろいろなWebサイトや書籍を参考にして、イメージを掴めるように学習していきましょう。

byゴミリョ

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村