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
「プログラミング」カテゴリの記事
- 超初心者によるC言語入門2~答のケタ数指定、ルート(平方根)、三角関数、二次方程式の解の公式(2021.01.12)
- 超初心者によるC言語入門、無料のオンライン・コンパイラ探しが困難、paiza(パイザ)がいいかも♪(2020.10.24)
- 小学校『5、6年のプログラミング ドリル』問題と解き方4、アルゴリズム、移り変わり図(2020.05.26)
- 小学校『5、6年の楽しいプログラミング ドリルの王様』、問題と解き方3(2020.04.14)
- 小学校『5、6年の楽しいプログラミング ドリルの王様』、問題と解き方2(2020.04.02)
コメント