ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

1. HTMLの雛形を作成する

HTMLは、HyperText Markup Language の略で、Webページの構造部分を担当する言語です。

CSSは、Cascading Style Sheetsの略で、HTMLの修飾部分を担当する仕様です。

まずは、後々まで使えるようなHTMLとCSSの雛形を作成しましょう。

先に実行例をブラウザで見てみます。

<アウトプットイメージ>

ブラウザで見てみる

<HTMLのソースコード>
<CSSのソースコード>

テキストエディタでソースを書いていきます。

上記のソースコードを入力(またはコピー&ペースト)してください。

まず、最初にHTMLの基本をみていきます。

<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言するための文です。

HTMLには基本的に開始タグ、終了タグがあります。

開始タグは<html>

終了タグは</html>

のように違いは“/”が入るか入らないかです。

タグには以下のような意味があります。

<要素名 属性名=“属性値”>内容</要素名>

なお、属性は以下のように複数設定することもできます。

<要素名 属性名1=“属性値1” 属性名2=“属性値2”>内容</要素名>

属性の間はスペースで区切ります。

<head>内には、サーチエンジン向けのキーワードや説明、文書のタイトル利用するスタイルシートなど
その文書に関する情報を記述します。

今回は文字コードのみを設定しています。

文字コードはインターネット上で標準的な文字コードであるUTF-8にしています。

(テキストエディタで保存する際の文字コードもUTF-8を選んでくださいね)

例えばここで文字コードを「UTF8」のように間違えて設定すると文字化けが起こります。

スタイルシートの設定

次にスタイルシートを設定します。

適用させたいスタイルシートは<link>のhref属性の属性値で指定します。

今回は、HTMLファイルを同じファイルにcssという名前のフォルダを作り、その中に“mystyle.css”を作っています。

rel属性、type属性は決まり文句です。

CSSの記述ルール

CSSを記述するにはこう書きます。

セレクタ {プロパティ: 値;}

「:」と「;」を書き忘れないように気をつけてください。

なお、プロパティは以下のように;で区切って複数設定することもできます。

セレクタ {プロパティ1: 値1; プロパティ2: 値2}

「どのセレクタのどのプロパティをどの値にするか」と日本語の順番に読めば理解できるでしょう。

今回は<body>の内容をグリーンにしています。

(最後の;は省略できます)

タイトルの設定

次にこのページのタイトルを設定します。

タイトルはひな形の<titile>部分に書いていきます。

今回は説明のため、

としました。

bodyタグ内にコンテンツ本体を書く

<body>内に文字などを書くと、画面に表示されます。

今回は下記のように書いています。

以降では、この雛形を使ってHTMLを学んでいきます。

人間も体(body)は外から見えますが、頭(head)の中は外からは見えません。

HTMLも同じと覚えてください。

(実は<head>内の内容も表示されてしまうのですが… 正体不明な出力があったら<head>内も疑ってください)

コメントはブラウザには表示されない

HTMLのコメントは<!– と –> に囲まれた部分です。

コメントには自分や他者へのメッセージを書いておきます。

ただし、ソースコードを表示すると見えてしまいますので、読まれて困ることは書かないようにしましょう。

以上、「HTMLの雛形」を作りました。

 

次回は、「見出し、ヘッダー、フッター」を学びます。