新入社員ここでは、IT系企業の新入社員向けにHTMLを解説しています。デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。略で、見出しや段落などWebページの構造部分を担当する言語です。Sheets」の略で、色や大きさなどHTMLの修飾部分を担当する仕様です。後々まで使えるようなHTMLとCSSの雛形を作成しましょう。先に実行例をブラウザで見てみます。<!--これはコメントなのでブラウザには表示されません。type="text/css"/><title>このタイトルはブラウザのタブに表示されます</title></head><body>本文はここに書きます<!--これはコメントなのでブラウザには表示されません。green;}テキストエディタでソースを書いていきます。上記のソースコードを入力(またはコピー&ペースト)してください。最初にHTMLの基本をみていきます。html>は、文書がHTML5で作成されたものであることを宣言するための文です。HTMLには基本的に開始タグ、終了タグがあります。開始タグは<html>終了タグは</html>のように違いは“/”が入るか入らないかです。タグには以下のような意味があります。属性名=“属性値”>内容</要素名>なお、属性は以下のように複数設定することもできます。属性名2=“属性値2”>内容</要素名>属性の間はスペースで区切ります。<head>内には、サーチエンジン向けのキーワードや説明、文書のタイトル利用するスタイルシートなどその文書に関する情報を記述します。charset="UTF-8">今回は文字コードのみを設定しています。文字コードはインターネット上で標準的な文字コードであるUTF-8にしています。(テキストエディタで保存する際の文字コードもUTF-8を選んでくださいね)例えばここで文字コードを「UTF8」のように間違えて設定すると日本語の場合文字化けが起こる可能性があります。次にスタイルシートを設定します。type="text/css"/>適用させたいスタイルシートは<link>のhref属性の属性値で指定します。今回は、HTMLファイルを同じファイルにcssという名前のフォルダを作り、その中に“mystyle.css”を作っています。rel属性、type属性は決まり文句です。CSSの記述ルールCSSを記述するにはこう書きます。値;}「:」と「;」を書き忘れないように気をつけてください。プロパティは以下のように;で区切って複数設定することもできます。※最後の;は省略できます「どのセレクタのどのプロパティをどの値にするか」と日本語の順番に読めば理解しやすいと思います。今回は<body>の内容をグリーンにしています。次にこのページのタイトルを設定します。タイトルはひな形の<titile>部分に書いていきます。今回は説明のため、<title>このタイトルはブラウザのタブに表示されます</title>1<title>このタイトルはブラウザのタブに表示されます</title>としました。bodyタグ内にコンテンツ本体を書く<body>内に文字などを書くと、画面に表示されます。今回は下記のように書いています。</body>123<body>本文はここに書きます</body>以降では、この雛形を使ってHTMLを学んでいきます。人間も体(body)は外から見えますが、頭(head)の中は外からは見えません。HTMLも同じと覚えてください。コメントには将来の自分自身や他者へのメッセージを書いておきます。コメントはブラウザの通常の表示では見えません。ソースコードを表示する(グーグルクロームならページ上で右クリックして「ページのソースを表示(V)を選択」)と見えてしまいますので、読まれて困ることは書かないようにしましょう。以上、今回は「HTMLの雛形」を作りました。次回は、「見出し、ヘッダー、フッター」を学びます。確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。