ＨＴＭＬ初級編３～ＣＳＳ（カスケード・スタイル・シート）、メモ帳で簡単作成

遂に、２日連続でプログラミング記事を書くまでになってしまった。正直言うと、単に前日の記事が途中までしか書けなかったということ♪　時間の制約もあるし、１本の記事が長くなってしまう。

今、目指してるのは、上のようなページの作成。学習アプリ「Ｐｒｏｇａｔｅ」の課題だ。前日の記事で作ったのは、ｈｔｍｌファイルの途中まで。下は、メモ帳で私が書いたプログラム。

長くて複雑に見えるけど、実際に入力してみると意外と早かった。１行あたりの字数が少ないし、型にハマった入力だからか。アルファベットや記号の入力を、ＰＣが学習してくれればもっと速くなるのに、なぜか今のところ学習してくれない。後で調べてみよう。

上のメモ帳プログラムをｈｔｍｌファイルとして保存して、ブラウザで開くと、日本語だけ文字化けしてしまう。そこで、ブラウザのエンコードで日本語（自動選択）を選ぶと、下のように正しく表示された。この後、色付け、全体のレイアウト、細かい配置などを、ｃｓｓファイルで味付けしていく。Ｗｉｎｄｏｗｓ１０付属アクセサリー、「メモ帳」アプリを再び使用。

　　　　　☆　　　　　☆　　　　　☆

先に、私が作った完成図を掲載しとこう。学習アプリで分割表示されてる画面を、１つにまとめて自分で入力したもの。１行空けを消しても、かなり縦長になる。ただ、ｈｔｍｌファイルと同様、ｃｓｓファイルの入力も意外と早く終了した。

では、上から順に、超初心者の目線で少しずつ解説して行こう。まず、全体についての指示。

ｆｏｎｔ（フォント：活字）で、「Avenir Next」という種類を指定。また、２ヶ所あるリスト部分で、箇条書きの先頭を示す「・」（点）は消す。list-style（リストスタイル）で、「none」（ナン：無し）と指定するだけ。

　　　　　☆　　　　　☆　　　　　☆

続いて、薄い青緑色のｈｅａｄｅｒ（ヘッダー）部分。

各部分の指定は、すべて「．」（ドット、ピリオド）から始まる。「.header」で、background-color（背景色）とcolor（文字の色）とheight（領域の高さ）を指定。

「.header-logo」は、ヘッダー冒頭の「Progate」という文字のこと。floatでleft（左寄り）として、文字サイズは３６ピクセル。padding（空き間隔の挿入）で「20px 40px」と書いて、上下と左右の間隔を指定。

「.header-list」は、箇条書きの３項目をまとめた呼び方で、３つ全体を左寄りに指定。次に「.header-list li」も「fload:left」と指定して、３項目を左から並べていく。これが無いと、項目が縦に並ぶのだ（後で登場）。

　　　　☆　　　　　☆　　　　　☆

続いて、ｍａｉｎ（メイン：中心部）。まだ今回は、４色の画像や入力フォームは扱わない。

まず、全体の上下で１００ピクセル、左右で８０ピクセル、間隔を空ける。次に「.copy-container h1」（大見出し）と、「.copy-container h2」（小見出し）の文字サイズを指定。最後に、大見出しの最後の点だけ、赤い色を指定。あらかじめｈｔｍｌファイルで、ｓｐａｎタグで点を挟んでおいて、このｃｓｓファイルでは「copy-container span」と書く。

ちなみに、ｃｏｎｔａｉｎｅｒ（コンテナー）という英単語は、入れ物という意味。ここでは、「copy-container」で「文字を入れる部分全体」を指してる。入れ物だけじゃなくて、中身の文字データも込みで。

　　　　　☆　　　　　☆　　　　　☆

そしていよいよ、ｆｏｏｔｅｒ（フッター：末尾）。まず、このエリア全体の背景色、文字の色、高さ、上下左右の空き間隔を決定。「footer-logo」や「footer-list」は、前のｈｅａｄｅｒの時とほぼ同様。ただし、「float:right」だから、リストの３項目はエリアの右側に配置される。

最後に、「.footer-list li」の「padding-bottom」で、箇条書き３項目の下側のスペースを２０ピクセルに指定。ｈｅａｄｅｒの時とは違って、ここに「float:left」と書いてないから、３項目は縦に並ぶ。

これで、上図まで出来たから、残りはあと少し。次回、メインの図と入力フォームを入れて完成させるとしよう。素直にちょっと嬉しいけど、実は図書館でｈｔｍｌ関連の本を探すと、少ししかない。要するに、プログラミングの中でも簡単すぎて、わざわざ解説本を沢山並べるほどのものでもないわけか♪

ともあれ、今日の所はこの辺で。。☆彡

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

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

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

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

　　　　　　　（計　１９５３字）