ここでは、IT系企業の新入社員向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
Webブラウザで見られるファイルを作るだけでしたら簡単です。以下の3ステップでできます。
- サクラエディタのようなテキストエディタを用意して、表示させたい文章を入力してください。
- ファイルを保存するときに「index.html」と名前を付けて保存してください。
- index.htmlをgoogle Chromeなどのブラウザで開くと書いた文字が見えますね。
※ちなみにこの「index.html」をウェルカムページといいます。ウェルカムページは、ディレクトリだけを指定してアクセスしてきた場合に表示するページです。
弊社のURLを例にとると「https://saycon.co.jp/」でアクセスした場合でも「https://saycon.co.jp/index.html」として解釈される特別なファイル名です。
しかし、この方法は本来のWebページを作成する方法ではありません。
Webページの見かけに騙されずに、真の姿を見てみましょう。
例えば、ブラウザのこの画面で、右クリックしてコンテキストメニューから「ソースを表示」といった意味のメニューを選択してみて下さい。
タグ＜＞で囲まれた多くの文字列が現れると思います。
これがWebページの真の姿です。
Webブラウザによって解析されて今までご覧いただいたようなグラフィカルなページが生成されるのです。
以下では正しいWebページ作成の方法、HTMLとCSSファイルの書き方を学んでいきます。
HTMLの雛形を作成する
HTMLは、「HyperText Markup Language」 の略で、見出しや段落などWebページの構造部分を担当する言語です。
CSSは、「Cascading Style Sheets」の略で、色や大きさなどHTMLの修飾部分を担当する仕様です。
まずは、後々まで使えるようなHTMLとCSSの雛形を作成しましょう。
先に実行例をブラウザで見てみます。
＜アウトプット＞
＜HTMLのソースコード＞
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="css/mystyle.css" rel="stylesheet" type="text/css"/> <title>このタイトルはブラウザのタブに表示されます</title> </head> <body> 本文はここに書きます <!--これはコメントなのでブラウザには表示されません。--> </body> </html> |
＜CSSのソースコード＞
|
1 2 3 |
body { background-color: green; } |
テキストエディタでソースを書いていきます。
上記のソースコードを入力（またはコピー＆ペースト）してください。
まず、最初にHTMLの基本をみていきます。
<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言するための文です。
HTMLには基本的に開始タグ、終了タグがあります。
開始タグは<html>
終了タグは</html>
のように違いは“/”が入るか入らないかです。
タグには以下のような意味があります。
＜要素名 属性名=“属性値”＞内容＜/要素名＞
上記の例では、「lang=”ja”」となっています。
langage「言語」がja（Japanese）となっていますね。
この言語指定はなくても大概うまく表示されますが、ブラウザの自動読み上げや自動翻訳機能を使うためには親切な表記です。
なお、属性は以下のように複数設定することもできます。
＜要素名 属性名１=“属性値１” 属性名２=“属性値２”＞内容＜/要素名＞
属性の間はスペースで区切ります。
<head>内には、サーチエンジン向けのキーワードや説明、文書のタイトル利用するスタイルシートなど
その文書に関する情報を記述します。
|
1 |
<meta charset="UTF-8"> |
今回は文字コードのみを設定しています。
文字コードはインターネット上で標準的な文字コードであるUTF-8にしています。
（テキストエディタで保存する際の文字コードもUTF-8を選んでくださいね）
例えばここで文字コードを「UTF8」のように間違えて設定すると日本語の場合文字化けが起こる可能性があります。
スタイルシートの設定
次にスタイルシートを設定します。
|
1 |
<link href="css/mystyle.css" rel="stylesheet" type="text/css"/> |
適用させたいスタイルシートは<link>のhref属性の属性値で指定します。
今回は、HTMLファイルを同じファイルにcssという名前のフォルダを作り、その中に“mystyle.css”を作っています。
rel属性、type属性は決まり文句です。
CSSの記述ルール
CSSを記述するにはこう書きます。
セレクタ {プロパティ: 値}
コロン「:」は「⁼」と同じ意味です。
なお、プロパティは以下のように；で区切って複数設定することもできます。
セレクタ {プロパティ１: 値１; プロパティ２: 値２}
※最後の;は省略できます
「どのセレクタのどのプロパティをどの値にするか」と日本語の順番に読めば理解しやすいと思います。
今回は<body>の内容をグリーンにしています。
タイトルの設定
次にこのページのタイトルを設定します。
タイトルはひな形の<titile>部分に書いていきます。
今回は説明のため、
|
1 |
<title>このタイトルはブラウザのタブに表示されます</title> |
としました。
bodyタグ内にコンテンツ本体を書く
<body>内に文字などを書くと、画面に表示されます。
今回は下記のように書いています。
|
1 2 3 |
<body> 本文はここに書きます </body> |
以降では、この雛形を使ってHTMLを学んでいきます。
人間も体（body）は外から見えますが、頭（head）の中は外からは見えません。
HTMLも同じと覚えてください。
(実は<head>内の内容も表示されてしまうのですが… 正体不明な出力があったら<head>内も疑ってください)
コメントはブラウザには表示されない
HTMLのコメントは<!– と –> に囲まれた部分です。
コメントには将来の自分自身や他者へのメッセージを書いておきます。
コメントはブラウザの通常の表示では見えません。
ただし、ソースコードを表示する（グーグルクロームならページ上で右クリックして「ページのソースを表示（V）を選択」）と見えてしまいますので、読まれて困ることは書かないようにしましょう。
以上、今回は「HTMLの雛形」を作りました。
次回は、「見出しで文章を構造化する方法」を学びます。
【今回の復習Youtube】
