2016/12/25~

HTML&CSS
Dart は、これからとても期待されている、新しい言語です。
でも、HTML&CSS / JavaScript / Java の、
深い知識があればあるほど、Dart を、上手く使える気がします。
もし、いきなり、Dart を、始めるとしたら、
『Dart for Absolute Beginners(Authors: Kopec, David)』
が、いいかもしれません。
著者によると、
 ・少しだけ、HTMLを知っていて、もっとレベルアップしたい人
 ・コンピュータとWebを、知ることに、とても情熱のある人
は、多分、いい読者になるでしょう、と言っています。
さらに、
 ・Dartを使った、Webベースのプログラムを、始めたい人
は、一番ふさわしい、読者でしょう。
と言っています。
まあ、かんぐって考えると、
あなたが、余り知らなくても、プログラミングに、熱烈な思いがあれば、
理解できるでしょうが、
「Dartを使った、Webベースのプログラムを、始めたい人」が、
最も、一番マッチするでしょう、、つまり、、
この意味は、多分、JavaScriptなどの経験が多少ある人のような気がします。
それで、私としましては、多分この本を読んでも、挫折する気がしました。
まして、人に説明しようとするなら、
たとえ、紹介する部分が、少なくても、深い理解がないと、
上手に説明できない気がします。
最近は、以前にも増して、プログラミングを、学習しやすくなった気がします。
例えば、Lynda.com(日本語版も、あり)などなどです。
ということで、私自身、知識・理解 を、深めながら書いていくつもりです。

途中で、サボって、いつの間にか、放棄しないように、
1週間に一度ぐらいは、どんなに少ない量でも、書いていこうと思っています。
(どんなに少ない量でも、と言うのは、冗談ではなく、
 最後まで、続けられるように、考えたことです)
多分、とても時間がかかるとは、思います。

また、最初は、行き当たりばったりで、書いていくと思うので、
あとから、リメイクするかもしれません。

多くの人が読んでよかったと思えるように書いていこうと思っています。
よろしくお願いします。

ついでに言いますと、もし、Dart まで、覚えなかったとしても、
趣味でやるにしても、JavaScript/Java は、
例えば、JavaScript には、jQueryあり、
Javaなら、ほとんどなんでも出来る!
2つともとても魅力的な言語です!
ですので、Dart に、いたらずとも、価値があると、私は思っています。


前置きが長くなってしまいましたが、
『JavaScript(Dart)のための、一番簡単な、HTML(CSS)』
について、考えて見ましょう。

まず、HTML&CSS について:
・一番の骨格
・リスト、テーブルなどを書きたい
・プログラム(JavaScript/Dart)の導入
・フォント、カラー、レイアウト(配置)は?
など、考えられますが、
まあ、ぶっちゃけた話、クールなレイアウトや、
テーブルを作らなくても、JavaScript は、覚えられます。
学習が進むにしたがって、書けたほうがいい、
コンテンツやレイアウトもあるかもしれませんが、
基本の内には、そんなに多くのことを知る必要は、
ないと思います。
必要があれば、その都度覚えるとして、
まず、このHTMLを、覚えましょう。

このページには、
HTML、CSS、JavaScript を、無理やり詰め込みました。
ファイルを分ける方法もありますが、覚えることが、
増えてしまいますので、
まずは、出来るだけ少なく覚えて、ゴールを目指しましょう。

まず、このページのソースコード(WebStorm/IntelliJ,IDE で、チェック済み)です。



もしHTMLファイルが、日本語だったら!

さて、ソースコードを見てどう思われたでしょうか?
よく知っている方はともかく、初めて見た人でも、
表示画面と見比べ見て、
  <h2>Dartをおぼえる!</h2> 
  <p>JavaScript と Java が、キー!</p> 
の部分などは、なんとなく、なるほどと思われると思います。
HTMLコードは、比較的、直感的に書けるコードではあると思います。

では、このコードを見てどう思われますか?
意味的には、ほぼ同じですが、
多くのプログラムは、英語/英語を基にした単語 を、使って書きます。
これは、にせものの、HTMLコードです。
ただ、日本語である分、わかりやすいと思います。

これから、このコードを使って、説明していきたいと思います。
1. 基本的な、書き方
2. 気をつけること
  ・終了タグがない時
  ・順番について
  ・頭脳部分・体部分とは
  ・なぜ、<JavaScriptコード> は、この位置か?
3. バック・ツー・ザ・本物のコード(との対応)

まず、こののリストは、これから説明する内容についてですが、
この順番で説明するわけではありませんので。
この事柄を含めながら、説明していくということです。
また、このコード(本物のコードと フェイク/偽物 コード)を、見ながら、
進めていきましょう。

では、上から順番に見ていきます。
右の画面では「本物のコード」に切り替えてください。
(タグ/<なになに> の簡単な意味は「ゴー・ツー・ザ・フェイクコード」
 で、確認してください。)
 
(1) <!doctype html>
これは、つまり、こういうことです:
 <!HTMLファイルですよ>
Web技術に、広く、深い、知識を持った人から見れば、
こんな説明では、物足りないでしょうが、まあ、いいと思います。

今となっては、ちょっと余分な話ですが、HTML4 までは、
こんなに簡単ではなかったようです。
これは、HTML5 になっての改善でしょう。

HTML5 などについては、無知なのですが、少し調べて、
ちょっとだけつかめたので、その部分に触れてみます。
(なお、この話は、少しだけ知っている人だけ読んでください。)
【HTML5 の特徴】
 ・セマンティック
   つまり、タグに、人間にとって分かり易い、意味を持たせること。
 ・inline要素、block要素 の廃止
 
 まず、セマンティック(タグに、もっと意味をもたせる)
つまり、HTML4 までは、<div> 要素を使って、
整理整頓していたのですが、最初から、目的別のタグが、
用意されていることが多くなった、、ということです。
例えば、ヘッダー<header>、フッター<footer> など、
があるでしょう。ただ、それに縛られすぎると、
オリジナルなページを作りにくいということもあるとは思いますが。
 次に、inline要素 は、block要素 の中に、入れるというような、
事は、すべてCSSに任せようということです。
つまり、HTML は、セマンティック(意味、何を書くか)を中心に、
CSS は、スタイル(レイアウトなど、どのように見せるか)を中心にして、
HTML と CSS の役割を、より明確に分けていこうという話ですね。
でも、実際問題、HTML5対応の参考書を買っても、
inlineレベル、blockレベル の話は覚えるべきとして出てきますので、
変わったという事実のみ、知っていれば、対応できると思います。
 ここまでは、少しだけ知っている人だけ 用に書きました。


(2) 全体像
<html> 
    <head> 
        ページに見えない部分:
            ・文字コード:多くのページは、utf-8 なので、それを使うべき。
                (要は、このコードを、そのまま覚える!
                  <meta charset="utf-8"/>
                 コピー&ペーストも、ありでしょう。)
            ・Webページの一番上に書かれる、タイトル(<title>タグを使う。)
            ・<style>タグを使って、CSSコードを書きます。
             (ここ/head部分のどこか、に書くことは、決まっています。)
            ・その他:必要に応じて覚えましょう。
    </head> 
    <body>
        ページに見える部分を書きます:
            ・<h2>、<p> の例を示しました。
             必要に応じて、知っているタグを増やしましょう!
            ・<script>タグに、JavaScriptコードを書きます。
             (目に見えないのになぜここか?:分かる限りで補足説明します。)
    </body>
</html>


(3) 補足説明
・<head>について
ここでは、日本語を「頭部分」としていましたが、「頭脳部分」とした方が、
的確なので、変更しました。
ただ、確かに、HTMLファイルを使われだした当初は、そのとおりだったと思われますが、
今となっては、やはり、改良を重ねるにつれ、多少そのままの意味で受け取ると、
矛盾する部分(例外的な部分)は、出てくるようです。
例えば、JavaScriptコードは、<body>部分の最後に、書くのが、主流のようですし、
CSSコードに関しても、書き方を変えれば、<body>部分に、書くことが出来ます。
ただ、その書き方などは、HTML&CSSを、理解するという意味においては、
どうでもいいことといえると思われます。
(実用的ではないという意味ではありません!)
ですので、触れないで置きます。
また、CSSファイルや、JavaScriptファイルを、別ファイルにするということなども、
理解するという意味においては、余り重要ではないでしょう。
ただ「Webページ上で、JavaScript・HTML・CSSを実行できる環境」などでは、
JavaScript や、CSS を、分けているようですので、その部分を、分けて貼り付けたり、
自分でファイルを分ける方法を、ググって欲しいと思います。
このような環境は「JavaScript実行環境」で、検索してみたら、いくつかヒットしました。
こういうサービスは、エラーも検知してくれるところも多く、大いに役に立つと思います。
ちょっと話が脱線しましたが、
まあ、基本、<head>タグは、HTMLファイルの「頭脳部分」と言えるでしょう。

・文字コードについて
今までは、Shift_JIS などなどが、あったようですが、
このページは、初心者向け(私もそうですが)なので、HTMLページの、
メンテナンスなどのことは考えていません。
ですから、どのページ、どの本を見ても推薦している「utf-8」を、使いましょう。

・<title>タグについて
ここに書かれた内容は、ここに、表示されます。

・・・ちょっと、今後のためのメモ・・・
HTML&CSS に関して、このぐらいで、もう少し説明をしたら、
JavaScript の学習(自分も学習する必要があるので、すぐには進みませんが)に、
入ろうと思っていましたが、ちょっと、物足りない気がします。

それで、
HTML:
 ・リスト
 ・テーブル
 ・h1~h6、pタグについて
 ・画像の挿入
 ・リンク
 ・ボタン(JavaScript起動ボタン)
CSS:
 ・基本構文 と、タグの名前/class/id 指定について
   / まずは一つの方法でも、覚えると、出来ることには違いありません。
   / いきなりたくさんのやり方を覚えようとしても、
   / 単に覚えなければという気持ちでは(必要がなければ)覚えられないでしょう。
   / まずは、1つの方法だけにしておきます。
   /(私がたくさんの方法を知らないということは、別問題ですね?)
 ・色指定
 ・超基本のマージン
 ・お勧めのレイアウト(簡単な、float, positionプロパティ)
 ・<div> の使い方
   / HTML5 の新しいタグを覚えるのは、大変です。
   / まずこのやり方を知っていると便利。
以上ですが、JavaScriptととの連携のためには、
最低このぐらい知っていたほうが、JavaScriptプログラミングも、
楽しめると思ったので、これらの説明を加えることにしました。
・・・・・・・・・・・・・・・・・・・・・・・・・・

つづく

このコースの最後に、復習テストを、考えています。