« HTML&CSS初級編2~プログラミング学習アプリ Progate | トップページ | 北半球の冬至、南半球の夏至&フルから3週間、やっとRUNペースのハーフ »

HTML初級編3~CSS(カスケード・スタイル・シート)、メモ帳で簡単作成

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

   

191220a_20191221151701

  

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

   

191220i_20191221151901

   

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

  

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

    

191220j2_20191221152101

   

   

     ☆     ☆     ☆

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

   

191221b2

      

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

   

191221c

  

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

   

  

     ☆     ☆     ☆

続いて、薄い青緑色のheader(ヘッダー)部分。

  

191221a

 

191221d2

   

各部分の指定は、すべて「.」(ドット、ピリオド)から始まる。「.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色の画像や入力フォームは扱わない。

  

191221e

    

191221f

  

まず、全体の上下で100ピクセル、左右で80ピクセル、間隔を空ける。次に「.copy-container h1」(大見出し)と、「.copy-container h2」(小見出し)の文字サイズを指定。最後に、大見出しの最後の点だけ、赤い色を指定。あらかじめhtmlファイルで、spanタグで点を挟んでおいて、このcssファイルでは「copy-container span」と書く。

  

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

   

   

     ☆     ☆     ☆

191221g

   

191221h

   

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

     

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

   

191221i

   

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

   

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

   

   

   

cf.プログラミング学習アプリ「Progate」~HTML&CSS初級編

 Progate2~Java初級編

 Java初級編2~Progate3

 HTML&CSS初級編2

   

       (計 1953字)

|

« HTML&CSS初級編2~プログラミング学習アプリ Progate | トップページ | 北半球の冬至、南半球の夏至&フルから3週間、やっとRUNペースのハーフ »

プログラミング」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



« HTML&CSS初級編2~プログラミング学習アプリ Progate | トップページ | 北半球の冬至、南半球の夏至&フルから3週間、やっとRUNペースのハーフ »