トレーニング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.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
に上記のテキストを記述してください。プロパティの意味が解らなくても大丈夫です。記述して保存したらブラウザで確認してみましょう。
このように表示されていたら成功です。
CSSが反映されていないindex.html
と見比べると見た目が変わっていると思います。これがCSSの力です。
今回記述したCSSプロパティは非常にシンプルなものです。しかし、このシンプルな記述をいくつも繰り返してWEBサイトを豪華に仕上げていきます。
どんなに凄いWEBサイトでも第1回とこの回のトレーニング内容と変わりません。タグを書いてCSSを書く。凄いと思うようなWEBサイトは沢山のCSSプロパティを創意工夫して反映させているだけです。
CSSの書き方ルール
CSSはセレクタ名{プロパティ:値}
という書き方になっています。セレクタ名というのはタグなど反映させたい要素です。
詳しくは下記ページを参照してください。
セレクタの指定方法は数多くあります。詳しく知りたい方は下記ページを参照してください。
最後に
正直な話し、トレーニングの第1回「簡単なHTMLページを作ってみよう」と今回の「CSSを読み込んでみよう」がWEBページの基礎であり全てでもあります。後はHTMLタグの種類を覚えて、CSSプロパティを覚えて色々と組み合わせるだけです。
もしWEBサイトを作れるようになりたいのならトレーニング第1回とこの回で書いていることを完全に理解できるように繰り返し作ってみてください。
以降のトレーニングもWEBページ作りの基礎的ことを進めていきますが、HTMLやCSSの書き方ではなく使い方のコツのような話しになっていきます。
次は簡単なメニューを作ってみようと思います。お疲れさまでした。