ＨＴＭＬ＆ＣＳＳ初級編４～コンテンツ作りで完成、プログラムとページの全体図

開成中学の生徒がプログラミング言語を創って表彰されてる時に、大人が単なる初級記事を書くのも微妙だけど、小市民は我が道を歩むとしよう♪

学習アプリ「Ｐｒｏｇａｔｅ」のＨＴＭＬ＆ＣＳＳ初級編がようやく終了。全く消化不良のまま、丁寧な誘導に従って、目標のページが完成した。上がアプリの図。下は私が自分で書き直したプログラムをブラウザ（ＩＥ）で開いた様子。微妙に違うのは、ブラウザの種類や設定の問題か。大見出しの活字と送信ボタンのデザインが違う。

なお、これまで書いた関連記事３本は、以下の通り。

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

　ＨＴＭＬ＆ＣＳＳ初級編２

　ＨＴＭＬ初級編３～ＣＳＳ、メモ帳で簡単作成

　　　　☆　　　　　☆　　　　　☆

さて、今回最後に作るのはメインの内容で、ページ中央のカラー画像と、すぐ下の入力フォームの箇所だ。作る箇所全体のｈｔｍｌファイルはこんな感じになる。

時間に追われて急いで入力したら、数ヶ所間違えてて、間違い探しで余計に時間を使うハメになってしまった。タグのカギカッコが１個不足、二重引用符が１個多過ぎ、英単語の綴りの間違い。反省しよう。

作る箇所全体のＣＳＳファイル（スタイルシート）は下の通り。

　　　　☆　　　　　☆　　　　　☆

まず上半分の画像の箇所、「学べるレッスン」のエリアの入力。同じパターンが４回続くから、始めの２回だけ見る。改行を入れて見やすくした。

最初に、「section-title」（セクション・タイトル）で小見出しを入力。次に「contents-item」（コンテンツ・アイテム）として、４つの画像の保存場所を「img src」タグで指定、画像の下の名前はｐタグで入力。画像の場所は、プロゲートがアマゾン・ウェブ・サービス（ａｗｓ）で確保してるものだ。場所の入力が長くて面倒だから、当初は２ヶ所も間違えてた。

ＣＳＳファイルは次の通り。ｈｔｍｌの各要素には、ｂｏｒｄｅｒ(ボーダー：初期状態では表示されない枠線)が取り囲んでて、その内側の余白領域がｐａｄｄｉｎｇ（パディング：枠と要素の間に挿入する空きスペース）、外側の余白がｍａｒｇｉｎ（マージン）。こうした構成をボックスモデルと呼ぶ。

　　　　☆　　　　　☆　　　　　☆

続いて、下半分の入力フォームの箇所、お問い合わせのエリアの入力。下がｈｔｍｌファイルの該当箇所。一番下のｄｉｖタグは、「ｍａｉｎ」部分全体の締めくくりで、その下はもう「ｆｏｏｔｅｒ」（末尾）に変わる。

ｉｍｐｕｔ（入力）とかｔｅｘｔａｒｅａ（テキスト入力箇所）のタグは非常に簡単だけど、送信ボタンの指示が分かりにくい。ｃｌａｓｓの指定を省いて、単に「input type・・・」と簡略化してもいいようだ。

ＣＳＳファイルは下の通り。余白や枠の指定が面倒に見えるけど、慣れの問題か。同レベルの操作なら、普段のブログ記事作りや画像処理で普通にやってることではある。

　　　　☆　　　　　☆　　　　　☆

今回作った箇所だけ改めて表示しとこう。こういった話を知ってしまうと、自分のブログ記事の入力をアレンジしたくなるけど、「生兵法はケガのもと」。実力と自信を付けるまでは自重しよう。

今後、自分ひとりでこのプログラムを再現できるように復習する予定。ではまた。。☆彡

　　　　　　　（計　１３４４字）