HTML初級編3~CSS(カスケード・スタイル・シート)、メモ帳で簡単作成
遂に、2日連続でプログラミング記事を書くまでになってしまった。正直言うと、単に前日の記事が途中までしか書けなかったということ♪ 時間の制約もあるし、1本の記事が長くなってしまう。
今、目指してるのは、上のようなページの作成。学習アプリ「Progate」の課題だ。前日の記事で作ったのは、htmlファイルの途中まで。下は、メモ帳で私が書いたプログラム。
長くて複雑に見えるけど、実際に入力してみると意外と早かった。1行あたりの字数が少ないし、型にハマった入力だからか。アルファベットや記号の入力を、PCが学習してくれればもっと速くなるのに、なぜか今のところ学習してくれない。後で調べてみよう。
上のメモ帳プログラムをhtmlファイルとして保存して、ブラウザで開くと、日本語だけ文字化けしてしまう。そこで、ブラウザのエンコードで日本語(自動選択)を選ぶと、下のように正しく表示された。この後、色付け、全体のレイアウト、細かい配置などを、cssファイルで味付けしていく。Windows10付属アクセサリー、「メモ帳」アプリを再び使用。
☆ ☆ ☆
先に、私が作った完成図を掲載しとこう。学習アプリで分割表示されてる画面を、1つにまとめて自分で入力したもの。1行空けを消しても、かなり縦長になる。ただ、htmlファイルと同様、cssファイルの入力も意外と早く終了した。
では、上から順に、超初心者の目線で少しずつ解説して行こう。まず、全体についての指示。
font(フォント:活字)で、「Avenir Next」という種類を指定。また、2ヶ所あるリスト部分で、箇条書きの先頭を示す「・」(点)は消す。list-style(リストスタイル)で、「none」(ナン:無し)と指定するだけ。
☆ ☆ ☆
続いて、薄い青緑色のheader(ヘッダー)部分。
各部分の指定は、すべて「.」(ドット、ピリオド)から始まる。「.header」で、background-color(背景色)とcolor(文字の色)とheight(領域の高さ)を指定。
「.header-logo」は、ヘッダー冒頭の「Progate」という文字のこと。floatでleft(左寄り)として、文字サイズは36ピクセル。padding(空き間隔の挿入)で「20px 40px」と書いて、上下と左右の間隔を指定。
「.header-list」は、箇条書きの3項目をまとめた呼び方で、3つ全体を左寄りに指定。次に「.header-list li」も「fload:left」と指定して、3項目を左から並べていく。これが無いと、項目が縦に並ぶのだ(後で登場)。
☆ ☆ ☆
続いて、main(メイン:中心部)。まだ今回は、4色の画像や入力フォームは扱わない。
まず、全体の上下で100ピクセル、左右で80ピクセル、間隔を空ける。次に「.copy-container h1」(大見出し)と、「.copy-container h2」(小見出し)の文字サイズを指定。最後に、大見出しの最後の点だけ、赤い色を指定。あらかじめhtmlファイルで、spanタグで点を挟んでおいて、このcssファイルでは「copy-container span」と書く。
ちなみに、container(コンテナー)という英単語は、入れ物という意味。ここでは、「copy-container」で「文字を入れる部分全体」を指してる。入れ物だけじゃなくて、中身の文字データも込みで。
☆ ☆ ☆
そしていよいよ、footer(フッター:末尾)。まず、このエリア全体の背景色、文字の色、高さ、上下左右の空き間隔を決定。「footer-logo」や「footer-list」は、前のheaderの時とほぼ同様。ただし、「float:right」だから、リストの3項目はエリアの右側に配置される。
最後に、「.footer-list li」の「padding-bottom」で、箇条書き3項目の下側のスペースを20ピクセルに指定。headerの時とは違って、ここに「float:left」と書いてないから、3項目は縦に並ぶ。
これで、上図まで出来たから、残りはあと少し。次回、メインの図と入力フォームを入れて完成させるとしよう。素直にちょっと嬉しいけど、実は図書館でhtml関連の本を探すと、少ししかない。要するに、プログラミングの中でも簡単すぎて、わざわざ解説本を沢山並べるほどのものでもないわけか♪
ともあれ、今日の所はこの辺で。。☆彡
cf.プログラミング学習アプリ「Progate」~HTML&CSS初級編
Progate2~Java初級編
Java初級編2~Progate3
HTML&CSS初級編2
(計 1953字)
| 固定リンク | 0
「プログラミング」カテゴリの記事
- 令和3年度、文科省・情報活用能力調査の調査問題例と正答(小中高、4年1~2月)、感想とレビュー(2022.12.28)
- C言語入門5~選択構造、if文、else、switch-case文による多岐分岐(2021.11.20)
- 将棋AIも採用、ミニ・マックス法の無駄を省いた α β(アルファ・ベータ)法と α 値、β 値の具体例の解説(2021.11.18)
- C言語入門4~変数の入力と計算、型指定子 int(整数型)、float(実数型)、順次構造(2021.10.28)
- 超初心者によるC言語入門3~情報系学科の大学生が1年生向けに作った学習アプリ『Study-C』で復習(2021.10.16)
コメント