schedule2022.11.11

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

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

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

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

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

このように表示されていたら成功です。

CSSが反映されていないindex.htmlと見比べると見た目が変わっていると思います。これがCSSの力です。

今回記述したCSSプロパティは非常にシンプルなものです。しかし、このシンプルな記述をいくつも繰り返してWEBサイトを豪華に仕上げていきます。

どんなに凄いWEBサイトでも第1回とこの回のトレーニング内容と変わりません。タグを書いてCSSを書く。凄いと思うようなWEBサイトは沢山のCSSプロパティを創意工夫して反映させているだけです。

CSSの書き方ルール

CSSはセレクタ名{プロパティ:値}という書き方になっています。セレクタ名というのはタグなど反映させたい要素です。

詳しくは下記ページを参照してください。

セレクタの指定方法は数多くあります。詳しく知りたい方は下記ページを参照してください。

最後に

正直な話し、トレーニングの第1回「簡単なHTMLページを作ってみよう」と今回の「CSSを読み込んでみよう」がWEBページの基礎であり全てでもあります。後はHTMLタグの種類を覚えて、CSSプロパティを覚えて色々と組み合わせるだけです。

もしWEBサイトを作れるようになりたいのならトレーニング第1回とこの回で書いていることを完全に理解できるように繰り返し作ってみてください。

以降のトレーニングもWEBページ作りの基礎的ことを進めていきますが、HTMLやCSSの書き方ではなく使い方のコツのような話しになっていきます。

次は簡単なメニューを作ってみようと思います。お疲れさまでした。