初心者向けHTML5+CSS3 その1
産まれてはじめてHTML+CSSを書く人向けです。
全体の流れは以下のようになっています。
2.HTML5をとりあえず書く
3.CSS3で装飾してみる
これだけです。
1.準備
準備といってもたいしたことはありません。2つです。
まず、拡張子というものが表示されるようにWindowsの設定を変更します。
拡張子とは「zip」「rar」「html」「exe」などのことでファイルのあとにくっついて「index.html」などと表記されます。
初期設定ではこれが非表示になっていることがあります。
「コントロールパネル」→「フォルダーオプション」→上のタブの「表示」
詳細設定の中にたくさんの項目がありますが、下から3つ目の「登録されている拡張子は表示しない」のチェックを外して「適用」→「OK」と押しましょう。
これで拡張子が表示されるようになりました。
続いて、HTMLはWindowsにはじめから入っているメモ帳で書くことができるのですが、とても便利なフリーソフトがあるのでそれを用意しましょう。
今回は「TeraPad（テラパッド）」というフリーのテキストエディタを使用しています。
たくさんの便利な機能がついているのですが、何も設定しなくてもHTMLやCSSを書けば文字を色分けしてくれます。これがどれほど便利なことかはすぐにわかります。
こちらの公式サイトよりインストーラ付き最新版をダウンロードします。
インストール時に設定などを変える必要は特に無いのでNEXTをどんどん押してインストールしましょう。特に「デスクトップにショートカットを作る」の項目ははじめからチェックが入っていますが、チェックを外さないようにします。
ショートカットはあると後々もの凄く便利です。
インストールが完了したら実行してみましょう。
2.HTMLをとりあえず書く
では早速HTMLを書いてみましょう。一度書いてみて、そこから覚えていきましょう。
気をつける点は一つ、タグは半角で書くということです。
先ほど起動したTeraPadに次のように記入していきましょう。
<>で囲まれている英語、これがタグと呼ばれるものです。
もちろん全て半角です。
<html> <head> </head> <body> </body> </html>
TeraPadに書いてみると、以下のようになります。
[EOF]というのはタグではなく、ここが終わりという表示ですので気にしないようにしましょう。
気になるならTeraPadの設定から消すことも可能です。
これを一度保存します。
「ファイル」から「名前をつけて保存」を選び、今回は「test.html」と名前をつけてデスクトップに保存しましょう。
こんなアイコンがデスクトップにできましたか？
上の画像は私の使っているブラウザがGoogleCromeなのでこのアイコンですが、InternetExploreやFireFoxなどでそれぞれ変わります。見た目が違っても同じファイルですので気にする必要はありません。
「ブラウザ？」という方のために補足すると、インターネットエクスプローラやグーグルクロームのことで、ネット上のサイトを見るためのソフトです。つまり、このページをあなたが見ているということは何かのブラウザで見ているということになります。
htmlで保存するとTeraPad内の文字に色がつきます。
拡張子が.htmlのファイルを編集するときに色分けがされる仕組みになっているからです。
「Test.htmlを閉じてしまって開き方が分からない！」という人はいませんか？
デスクトップのtest.htmlファイルを左クリックで掴んで、TeraPadのショートカットの上で離せば自動で開きます。
ショートカットはこれができるから便利です。
続いて4、5行目の
<body>
</body>
の間を改行して1段開けて文字を打ち込んでみましょう。
例では「あいうえお」と入れてみましたがなんでも構いません。
そして、フロッピーの形をしているアイコンを押して上書き保存をします。
デスクトップのtest.htmlをダブルクリックしてみましょう。
どのブラウザを使っていようとダブルクリックで実行されるという点は同じです。
どうでしょうか？ ブラウザ上に先ほど書いた「あいうえお」が表示されたでしょうか。
アドレスバーの「file:///C:/Users/自分のパソコンの名前/Desktop/test.html」はこのファイルがデスクトップにあることを示しています。
ここで一度振り返りましょう。
<head> …中身は実際には表示されませんが、重要な情報を書き込む場所です。
<body> …この中身が実際にブラウザに表示されます。
これらのタグは2個セットになっています。
開始と終わりを指示するためで、終わりのタグには</html>のように/が入ります。
全体を見ると<html></html>のタグの中に<head></head>タグと<body></body>タグが入っていることがわかるでしょうか？
このような構造を「入れ子」と呼びます。
イメージとしてはこのような状態です。
<head></head>内は実際には表示されませんが、作成したサイトのおおまかな説明やキーワードを書いて検索されやすくしたり、このあと使用するCSSのための記述を書く箇所になります。
入れ子の構造は本格的にCSSを使用する際には多用します。
今回はシンプル第一なので使用しません。
3.CSSで装飾してみる
ではCSSを書いてみましょう。
CSSとは「カスケーディング・スタイル・シート」の略で、通常はスタイルシートと呼ばれます。
スタイルシートに書き込むものをプロパティと呼びます。HTMLでいうタグと同じように考えて下さい。
書き方には3種類あります。
1. htmlファイルの<head></head>内に書く
2. タグの中にひとつひとつ書く
3. 別のファイルに書いて、htmlファイル内に読み込む
99％のサイトは3の方法で書かれているのですが、今回は基本ということで1の方法で書いてみましょう。
2のことは忘れてあげて下さい。
<head></head>の間に以下の記述を入れます。
3行目のstyleとtypeの間には半角のスペースが入りますのでご注意を。
<html> <head> <style type="text/css"> <!-- --> </style> </head> <body> あいうえお </body> </html>
これでCSSプロパティを書き込む場所ができました。（ここでいう5行目のこと）
では文字の大きさを指定するプロパティを書いてみましょう。
body{font-size:200%;}
これはHTMLの「<body></body>タグの中の文字のサイズを2倍にする」という意味です。
{}や:;に注意して半角で書き込みましょう。
<html>
<head>
<style type="text/css">
<!--
body{font-size:200%;}
-->
</style>
</head>
<body>
あいうえお
</body>
</html>
test.htmlに書き込んだら上書き保存をすることを忘れないようにしましょう。
上書き保存をしないと当然反映されません。
何かを書いたら上書き保存するクセをつけることをオススメします。
そして、デスクトップのtest.htmlをダブルクリックしてみると……どうでしょうか？
このように大きく表示されていたでしょうか？
もしも残っているなら、その文字は小さいままなはずです。
CSSを記入した後ならリロード（再読込）を行うことでCSSの内容が反映されます。
リロードはキーボードのF5キーで行います。
上の方に並ぶFのついたキー、この中のF5と書かれたキーがリロード用のファンクションキーと呼ばれるものです。
「あいうえお」が書かれたブラウザを見ながらF5を押してみて下さい。
記述が正しければリロードで文字が大きくなったはずです。
リロードはこの先何度も使用する重要なキーなので覚えておきましょう！
HTMLやCSSの記述は半角で行うと繰り返し書いてきました。
全角がうっかり混ざってしまうと正しく読み取れず、HTMLタグやCSSプロパティが正しく表示されないからです。
特に今回は「はじめてHTMLとCSSを書いてみる」というコンセプトでしたので間違いがないように全て左詰めで書きました。
このままでは記述内容が増えていくと見づらくて仕方ありません。
でも大丈夫、いい方法があります。
「タグの外側にある半角スペースは読み込まれない」のです。
半角のスペースであればどれだけ挿入しても、また、改行しても問題ありません。
下のように整理してみました。自分が見やすいように変更して構いません。
最後に、CSSをいくつか追加して終わりにしましょう。
body{font-size:200%;}
に背景色の変更と、文字の色変更を加えてみます。
背景色変更 background-color:;
文字色変更 color:;
これがそれぞれのCSSプロパティです。背景を黒、文字を白にしてみます。
色の記述方法は後に詳しく説明しますが、ここでは「black」と「white」と記述します。
background-color:black;
color:white;
さて、これらを追加するとこのようになります。
body{font-size:200%;background-color:black;color:white;}
色分けされているからマシですが、ものすごく見づらいですよね。
CSSプロパティでも半角スペースを入れることができます。
連続した文字列の中以外ならどこでも自由に入れることができます。
body { font-size: 200%; background-color: black; color: white;}
bodyの後ろ、各プロパティの前、:;の中にそれぞれ一マスだけ半角スペースを入れてみました。
でも、スペースがOKならこうした方が見やすいでしょう。
body {
font-size: 200%;
background-color: black;
color: white;
}
CSSを実用レベルで使用しはじめるとプロパティは10個くらい平気で使います。
今のうちに整理して記述するクセをつけてしまいましょう。
必ず役に立つ時が来ます。
このように書けましたか？
上書き保存してブラウザで確かめてみましょう。
このように表示されていればOKです。
初歩的な部分でしたが理解できたでしょうか？
次回は、もう少し難しく掘り下げていきます。
- 2012年07月31日
- HTML・PHP・CSS
