« 給食持ち帰り教員の懲戒処分・依願退職と規則(文科省・学校給食衛生管理の基準&地方公務員法) | トップページ | 令和元年、最後のハーフ走終了、ようやく湘南の写真チェック »

HTML&CSS初級編4~コンテンツ作りで完成、プログラムとページの全体図

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

  

191220a

   

学習アプリ「Progate」のHTML&CSS初級編がようやく終了。全く消化不良のまま、丁寧な誘導に従って、目標のページが完成した。上がアプリの図。下は私が自分で書き直したプログラムをブラウザ(IE)で開いた様子。微妙に違うのは、ブラウザの種類や設定の問題か。大見出しの活字と送信ボタンのデザインが違う。

   

191228a

   

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

 

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

 HTML&CSS初級編2

 HTML初級編3~CSS、メモ帳で簡単作成

  

      

    ☆     ☆     ☆

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

  

191228b

   

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

  

作る箇所全体のCSSファイル(スタイルシート)は下の通り。

  

191228c

   

   

    ☆     ☆     ☆

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

  

191228e

   

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

   

CSSファイルは次の通り。htmlの各要素には、border(ボーダー:初期状態では表示されない枠線)が取り囲んでて、その内側の余白領域がpadding(パディング:枠と要素の間に挿入する空きスペース)、外側の余白がmargin(マージン)。こうした構成をボックスモデルと呼ぶ。

       

191228f

   

191228g

   

   

    ☆     ☆     ☆

続いて、下半分の入力フォームの箇所、お問い合わせのエリアの入力。下がhtmlファイルの該当箇所。一番下のdivタグは、「main」部分全体の締めくくりで、その下はもう「footer」(末尾)に変わる。

  

191228h

  

imput(入力)とかtextarea(テキスト入力箇所)のタグは非常に簡単だけど、送信ボタンの指示が分かりにくい。classの指定を省いて、単に「input type・・・」と簡略化してもいいようだ。

   

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

  

191228i

   

    ☆     ☆     ☆

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

   

191228d

     

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

  

       (計 1344字)

|

« 給食持ち帰り教員の懲戒処分・依願退職と規則(文科省・学校給食衛生管理の基準&地方公務員法) | トップページ | 令和元年、最後のハーフ走終了、ようやく湘南の写真チェック »

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

コメント

コメントを書く



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




« 給食持ち帰り教員の懲戒処分・依願退職と規則(文科省・学校給食衛生管理の基準&地方公務員法) | トップページ | 令和元年、最後のハーフ走終了、ようやく湘南の写真チェック »