« JR SKISKI 2019-2020、テレビ60秒CM(浜辺美波×岡田健史)&足重ジョグ | トップページ | HTML初級編3~CSS(カスケード・スタイル・シート)、メモ帳で簡単作成 »

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

1年4ヶ月ぶりの挑戦となる、HTML&CSS初級編の学習。要するに、ウチみたいなブログも含めて、サイト表示の元になってる記述を学ぶわけだ。どう書けば、どう見えるか。こう見せるためには、どう書けばいいか・・・etc。例によって、親切丁寧で見やすいアプリ「Progate」が教科書。

    

ちょっと前、JAVA初級編の記事を2本書いてるけど、HTMLやCSSの書き方はほとんど忘れてたから、昨夜は思い出すだけで終了♪ ようやく今夜、締切時間前に執筆し始めたわけ。

   

191220b

   

ちなみに、この記事のここまでの入力がどうなってるのか、管理画面の「通常エディタ」というタブで見てみると、上の通り。p、< >、spanとかの文字・記号が目立ってる。他には、font-size(文字のサイズ)とか、color(色)とか。

   

上図に出てるのは、私の個人的な入力だけ。たまに、上図の画面を直接いじることもある(エラーの修正とか)。これ以外に、ブログのシステムが元々用意してる原型みたいなものもあって、初めてこの記事が表示されるわけだ。

  

なお、過去の関連記事3本は次の通り。

  

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

 Progate2~Java初級編

 Java初級編2~Progate3  

      

   

    ☆     ☆     ☆

191220a

  

さて、前回のHTML(HyperText Markup Language)記事から目指してるのは、上のようなページの作成。見るだけなら何ともないけど、自分で作ろうとすると、大変さを思い知らされる。文字の大きさ・間隔、色、図、全体的なレイアウト(上・中・下段の3分割)など。HTMLとCSSの書き方の答をいきなり全部書くと、結構長いし、分かりにくい。

  

そこでまず、遥かに簡単なページを自分で作ってみよう。下は、Windows10付属の「メモ帳」アプリで私が作った、テキストファイル。

  

191220c

   

わざと、1行空けとか右への文字ズラシとか使わず、単純に書き並べてる。というか、そうした見やすさのための作業は無くてもちゃんと表示されることを、確認したかったわけ。

   

まず一番上の行が、最新版のHTML5を使うという宣言らしい。その下全体は、<html>タグと</html>で挟まれた部分。変なトラブルが怖いから、わざと全角文字を使用。

  

で、その間には、まずhead(ヘッド:ブラウザで開いた時のタブの名前)があって、次に<body>タグと</body>で挟んだ本文がある。h1で大見出し用の文字、h2で小見出し用の文字を指定。その後は、<p>と</p>で挟んで、各段落の文を書くだけ。このpに時々、変なエラーが生じてしまうから、試行錯誤の独学で修正してるのだ。

  

191220d

   

先ほどのテキストファイルを、htmlファイルとして保存し直して、ブラウザ(IE)で開いた様子が上図。タブの名前(タイトル)、大見出し、小見出し、本文2段落、ちゃんと構成できてる。ただ、味気ないから、htmlファイルを複雑にして、css(cascading style sheet)ファイルで色を付けたりして、見栄えを良くして行く。

  

   

     ☆     ☆     ☆

191220e

  

では、Progateに戻って、前のキレイなページを作って行こう。上はhtmlファイルの最初。headの中で、文字コード「utf-8」を指定した後、別にcssファイル(stylesheet)も利用するという宣言がある。そのcssファイルを特定する名前が、stylesheet.css。二重引用符の有無や使い分けは、まだよく分からない。

   

191220f

  

続いて、body(本文)の最初の部分。div classのタグで、ページ上部のheader(ヘッダー:薄い緑の細長いエリア)を作成。さらにその中で、header-logo(ヘッダーロゴ)とheader-list(ヘッダーリスト)を分ける。リストの箇条書きは、<ul>タグと<li>タグの組合せ。「入れ子」状に組み合わさった複雑な構造。   

 

191220g

   

さらに、body(本文)の中央をさらに3分割。copy-container(コピーコンテナー:見出し)の2行と、contents(コンテンツ:後で付ける画像)と、contact-form(コンタクト・フォーム:お問い合わせ)。ちなみに色が変わってる部分は、私がアドバイスの文章を消した箇所。

  

細かい話だけど、HELLO WORLDという大見出しの右側の<span>タグは、文末のピリオド(点)だけ色を変えるための準備だ。文の一部分だけ操作する時に使うタグらしい。まあ、基礎の理論がよく分からないまま、前からたまにいじってた♪

  

191220h

   

そして上が、body(本文)の最後、footer(フッター:文末)。headerと同様、ここでもロゴとリストを分けてる。これだけ見ると、headerとfooterはそっくりだけど、cssファイルでの味付けの仕方が違うのだ。背景色とか、リストの配置とか。

   

   

    ☆     ☆     ☆

さて、ここまでアプリの画面を使って来たから、htmlの全体を自分でメモ帳に書き直してみた。一発で、間違いなしに入力成功(たぶん♪)。1行空けや文字ずらしも入れて、ちょっと見やすくしてみた。

  

191220i

  

で、これをhtmlファイルで保存し直して、ブラウザで開くと、文字化け!(^^ゞ どこも間違えてないけどな・・と思ってよく見ると、日本語の部分だけ表示がおかしい。

  

ブラウザのエンコードは、Unicode(utf-8)で正しそうだけど、試しに「日本語(自動選択)」をクリックすると、表示成功☆

  

191220j2

      

ちなみに、ブラウザのエンコードは、「日本語(シフトJIS)」に変わってた。utf-8を指定したのに、何でかね? まあ、とりあえず、htmlファイルの作成は成功としとこう♪

  

長くなったので、味付けを担当するcssファイルについては、また後ほど。それでは今日はこの辺で。。☆彡

   

      (計 2383字)

|

« JR SKISKI 2019-2020、テレビ60秒CM(浜辺美波×岡田健史)&足重ジョグ | トップページ | HTML初級編3~CSS(カスケード・スタイル・シート)、メモ帳で簡単作成 »

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

コメント

コメントを書く



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


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



« JR SKISKI 2019-2020、テレビ60秒CM(浜辺美波×岡田健史)&足重ジョグ | トップページ | HTML初級編3~CSS(カスケード・スタイル・シート)、メモ帳で簡単作成 »