ＨＴＭＬ＆ＣＳＳ初級編２～プログラミング学習アプリ Ｐｒｏｇａｔｅ

１年４ヶ月ぶりの挑戦となる、ＨＴＭＬ＆ＣＳＳ初級編の学習。要するに、ウチみたいなブログも含めて、サイト表示の元になってる記述を学ぶわけだ。どう書けば、どう見えるか。こう見せるためには、どう書けばいいか・・・ｅｔｃ。例によって、親切丁寧で見やすいアプリ「Ｐｒｏｇａｔｅ」が教科書。

ちょっと前、ＪＡＶＡ初級編の記事を２本書いてるけど、ＨＴＭＬやＣＳＳの書き方はほとんど忘れてたから、昨夜は思い出すだけで終了♪　ようやく今夜、締切時間前に執筆し始めたわけ。

ちなみに、この記事のここまでの入力がどうなってるのか、管理画面の「通常エディタ」というタブで見てみると、上の通り。ｐ、＜　＞、ｓｐａｎとかの文字・記号が目立ってる。他には、ｆｏｎｔ－ｓｉｚｅ（文字のサイズ）とか、ｃｏｌｏｒ（色）とか。

上図に出てるのは、私の個人的な入力だけ。たまに、上図の画面を直接いじることもある（エラーの修正とか）。これ以外に、ブログのシステムが元々用意してる原型みたいなものもあって、初めてこの記事が表示されるわけだ。

なお、過去の関連記事３本は次の通り。

　プログラミング学習アプリ「Ｐｒｏｇａｔｅ」～ＨＴＭＬ＆ＣＳＳ初級編

　Ｐｒｏｇａｔｅ２～Ｊａｖａ初級編

　Ｊａｖａ初級編２～Ｐｒｏｇａｔｅ３　　

　　　　☆　　　　　☆　　　　　☆

さて、前回のＨＴＭＬ（HyperText Markup Language）記事から目指してるのは、上のようなページの作成。見るだけなら何ともないけど、自分で作ろうとすると、大変さを思い知らされる。文字の大きさ・間隔、色、図、全体的なレイアウト（上・中・下段の３分割）など。ＨＴＭＬとＣＳＳの書き方の答をいきなり全部書くと、結構長いし、分かりにくい。

そこでまず、遥かに簡単なページを自分で作ってみよう。下は、Ｗｉｎｄｏｗｓ１０付属の「メモ帳」アプリで私が作った、テキストファイル。

わざと、１行空けとか右への文字ズラシとか使わず、単純に書き並べてる。というか、そうした見やすさのための作業は無くてもちゃんと表示されることを、確認したかったわけ。

まず一番上の行が、最新版のＨＴＭＬ５を使うという宣言らしい。その下全体は、＜ｈｔｍｌ＞タグと＜／ｈｔｍｌ＞で挟まれた部分。変なトラブルが怖いから、わざと全角文字を使用。

で、その間には、まずｈｅａｄ（ヘッド：ブラウザで開いた時のタブの名前）があって、次に＜ｂｏｄｙ＞タグと＜／ｂｏｄｙ＞で挟んだ本文がある。ｈ１で大見出し用の文字、ｈ２で小見出し用の文字を指定。その後は、＜ｐ＞と＜／ｐ＞で挟んで、各段落の文を書くだけ。このｐに時々、変なエラーが生じてしまうから、試行錯誤の独学で修正してるのだ。

先ほどのテキストファイルを、ｈｔｍｌファイルとして保存し直して、ブラウザ（ＩＥ）で開いた様子が上図。タブの名前（タイトル）、大見出し、小見出し、本文２段落、ちゃんと構成できてる。ただ、味気ないから、ｈｔｍｌファイルを複雑にして、ｃｓｓ（cascading style sheet）ファイルで色を付けたりして、見栄えを良くして行く。

　　　　　☆　　　　　☆　　　　　☆

では、Ｐｒｏｇａｔｅに戻って、前のキレイなページを作って行こう。上はｈｔｍｌファイルの最初。ｈｅａｄの中で、文字コード「ｕｔｆ－８」を指定した後、別にｃｓｓファイル（ｓｔｙｌｅｓｈｅｅｔ）も利用するという宣言がある。そのｃｓｓファイルを特定する名前が、ｓｔｙｌｅｓｈｅｅｔ．ｃｓｓ。二重引用符の有無や使い分けは、まだよく分からない。

続いて、ｂｏｄｙ（本文）の最初の部分。ｄｉｖ　ｃｌａｓｓのタグで、ページ上部のｈｅａｄｅｒ（ヘッダー：薄い緑の細長いエリア）を作成。さらにその中で、ｈｅａｄｅｒ－ｌｏｇｏ（ヘッダーロゴ）とｈｅａｄｅｒ－ｌｉｓｔ（ヘッダーリスト）を分ける。リストの箇条書きは、＜ｕｌ＞タグと＜ｌｉ＞タグの組合せ。「入れ子」状に組み合わさった複雑な構造。　　　

さらに、ｂｏｄｙ（本文）の中央をさらに３分割。ｃｏｐｙ－ｃｏｎｔａｉｎｅｒ（コピーコンテナー：見出し）の２行と、ｃｏｎｔｅｎｔｓ（コンテンツ：後で付ける画像）と、ｃｏｎｔａｃｔ－ｆｏｒｍ（コンタクト・フォーム：お問い合わせ）。ちなみに色が変わってる部分は、私がアドバイスの文章を消した箇所。

細かい話だけど、ＨＥＬＬＯ　ＷＯＲＬＤという大見出しの右側の＜ｓｐａｎ＞タグは、文末のピリオド（点）だけ色を変えるための準備だ。文の一部分だけ操作する時に使うタグらしい。まあ、基礎の理論がよく分からないまま、前からたまにいじってた♪

そして上が、ｂｏｄｙ（本文）の最後、ｆｏｏｔｅｒ（フッター：文末）。ｈｅａｄｅｒと同様、ここでもロゴとリストを分けてる。これだけ見ると、ｈｅａｄｅｒとｆｏｏｔｅｒはそっくりだけど、ｃｓｓファイルでの味付けの仕方が違うのだ。背景色とか、リストの配置とか。

　　　　☆　　　　　☆　　　　　☆

さて、ここまでアプリの画面を使って来たから、ｈｔｍｌの全体を自分でメモ帳に書き直してみた。一発で、間違いなしに入力成功（たぶん♪）。１行空けや文字ずらしも入れて、ちょっと見やすくしてみた。

で、これをｈｔｍｌファイルで保存し直して、ブラウザで開くと、文字化け！(^^ゞ　どこも間違えてないけどな・・と思ってよく見ると、日本語の部分だけ表示がおかしい。

ブラウザのエンコードは、Ｕｎｉｃｏｄｅ（ｕｔｆ－８）で正しそうだけど、試しに「日本語（自動選択）」をクリックすると、表示成功☆

ちなみに、ブラウザのエンコードは、「日本語（シフトＪＩＳ）」に変わってた。ｕｔｆ－８を指定したのに、何でかね？　まあ、とりあえず、ｈｔｍｌファイルの作成は成功としとこう♪

長くなったので、味付けを担当するｃｓｓファイルについては、また後ほど。それでは今日はこの辺で。。☆彡

　　　　　　(計　２３８３字)