【初級トレ】CSSを読み込んでみよう

HTML CSS

トレーニング2回目はCSSを読み込んでHTMLページに装飾を加えてみます。WEBサイト制作においてHTMLとCSSは必ず使うので必須スキルです。このページに書いてあることは完全にマスターできるように頑張りましょう。

一度理解すればそんなに難しい事ではありません。HTMLとCSSで難しいのは複雑なレイアウトを実現するときです。複雑なレイアウトは知識と経験が必要ですが、基本は非常にシンプルなものになります。

前回の続きですので、もしトレーニング第1回目を読んでいない方は下記ページを参照してください。

【初級トレ】簡単なHTMLページを作ってみよう

CSSがよく分からない人はスタイルシートについてのページを参照してください。

【CSS】スタイルシートとは

CSSファイルを作ろう

テキストエディタで新規作成

テキストエディタで新規ファイルを作成しましょう。ファイル名は「style.css」にしてindex.htmlと同じHTMLフォルダに保存します。HTMLファイルと同様に文字コードをUTF-8（BOM無し）で保存します。

style.cssの先頭に@charset "utf-8";を記述することで文字コードがUTF-8であることを指定できるのですが今回はindex.htmlに既にUTF-8の宣言がしてあるので省略して何も書かない空の状態で保存してください。

CSSファイルはこれで完成です。

index.htmlにCSSファイルを読み込もう

前回作成したindex.htmlを開きましょう。<head></head>の中にCSSを読み込むタグを記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>練習用サイト</title>
    <link rel="stylesheet"  href="./style.css" />
  </head>
  <body>
    <!--  ▼ここからHTMLタグを記述▼ -->
	<h1>練習用サイトを作ります</h1>
	<p>このページは初めて作るシンプルなHTMLファイルです。</p>
    <!--  ▲HTMLタグはここまで▲ -->
  </body>
</html>

<link rel="stylesheet" href="./style.css"/>これがCSSを読み込むタグです。href=""と書かれた部分が読み込みたいCSSのURLになります。./○○と書かれているのは相対パスと呼ばれる書き方で、「index.htmlからみて同じ階層の」という意味があります。もし../style.cssと書くと上の階層フォルダにあるCSSを読み込みます。/だけだとルート指定なので一番上の階層を指定します。もしcssというフォルダを作ってその中にCSSファイルをまとめたい時はhref="./css/style.css"と記述します。

/ のルート指定はローカル環境では機能しないので注意してください。例えばMACならfile:///Users/＊＊＊/のようになってしまいます。ローカルサーバーアプリを使用するか実際のサーバーであればドメインから〜という指定になります。

これでindex.htmlにstyle.cssを読み込んだので準備が整いました！

次は実際にCSSにプロパティを記述してHTMLに装飾を当てましょう。

CSSを編集しよう

index.htmlに書いてあるタグは<h1>タグと<p>タグだけです。この2つにCSSを指定します。

h1{}

p{}

style.cssに上記のテキストを記述してください。これでindex.htmlに書いてある<h1>タグと<p>タグへCSSを当てる準備が整いました。CSSではこのようにタグ名{}とすることで特定のタグにCSSを当てることができます。

CSSプロパティを記述する

次はメインであるCSSプロパティを記述します。

h1{
	padding: 16px;
	margin: 0 0 2em;
	color: red;
	text-align: center;
	border: 1px solid red;
}

p{
	max-width: 800px;
	padding: 16px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.7;
	background: #e3e3e3;
}

style.cssに上記のテキストを記述してください。プロパティの意味が解らなくても大丈夫です。記述して保存したらブラウザで確認してみましょう。