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プログラミングも、
楽しめると思ったので、これらの説明を加えることにしました。
・・・・・・・・・・・・・・・・・・・・・・・・・・


それでは、続けますね。

と、その前に、HTMLファイルの基本的な書き方を説明します:
	<!doctpe html>
	<html>
		<head>
			いろいろなコード
		</head>
		<body>
			いろいろなコード
		</body>
	</html>
こんな構造ですが、書き方としては、

	<ある部分が始まるタグ><その部分が終わることを示すタグ/>

この部分を「入れ子/ネスト」しながら書いていくわけです。
このネストという仕組みが少し難しいと思いますので、このよい例と、
悪い例を、見て考えて見ましょう。
まず「よい例」は、これです。
そして「悪い例」は、こちらです。
分かっていただけたでしょうか?
まず、基本ルールはこれです。
ちょっと例外ルールとしては「終了タグのないタグ」の時は、
少し違うルールになります。
例えば、文字コードを utf-8 に指定するタグは、
	<meta charset="utf-8"/>
このコードでしたが、
	/
を、開始タグに挿入して、終了タグは書きません/ を、書かなくても許容される、
	ルールがあったとしても(あるような気がする)、
	それは、逆に余分なルールを覚えることになると思います!
	というか、この方がルールに筋が通っている。
	なので、そのことに関しては、ここでは無視させてください。

では、また、このコードを見ながら、続けます。

・<style>について

	p{
		color:red;
	}

このコードの意味するところは、

	パラグラフ タグに指定する style(スタイル){
		色:赤;
	}
	
		パラグラフ(<p>):
			一まとまりの文章 のことです。
			ただし、これはこのタグを使う目的なのですが、
			たとえ、1文字に対して使っても、
			文法的には、間違いではありません。
			また、CSSを使って、見せ方 を変えなければ、
			改行が自動で入ります。
		
ということで、まあ、これ以上の説明は必要ないと思います。

・<h2>
これも、テキスト のためのタグで、
特に「見出し」に使うために用意されているタグです。
大きさは、6段階あり、h1 から h6 まで。
h1 が、一番大きな文字を使った見出しになります。
ですので、h2 は、2番目に大きな、見出しですね。

ただ、文字の大きさを、きっちり最初から決めている方は、
<p>タグ を、使い、
<style>タグ を使って、
見せ方を指定するというのもありでしょう。
(「font-size CSS」 で、ググって下さい)
(こういう、いわゆる正しくない使い方は、
 実は、正しい使い方かもしれません。
 なぜなら、どの道、コンピュータに対するプログラミング
 は、常に試行錯誤中 であるといえると思いますから。)
 
・<script>
この中に、JavaScriptコードを書けばいいです。
javascript の文字がどこにもないのは、
現在、普通のブラウザが、動かせるプログラミング言語は、
JavaScript しかないから、JavaScript が、デフォルト値 です。
だからこれだけでいいのです。
 また、この <body>タグを閉じる直前 に書くというのは、
例えば、右のウィンドウで、やっているような、
「バック・ツー・ザ・本物のコード」
での、JavaScript と Dom を使って、書き換えたりするような
操作がある場合、この位置にないと、最初に、ページが、
表示される前に、JavaScript が、実行されてしまい、
思ったとおりのアクションを得られないからということを、
調べて分かりました。
ただ、それをコントロールする方法や、わざと違う位置
に書いたりするやり方もあるようです。
私には分かりませんが、まあ、ある程度書けるようになって、
自分なりのアクションを考えるようになるまでは、
この位置で問題ないと思われます。
またこの位置が、最近の書き方の主流のようです。

 ・・・
最近のプログラミング学習環境について思うこと:
私が、プログラミングが好きになった、2002年ぐらいは、
今ほど恵まれていませんでした。
最初、覚えようと思ったとき、こんなことを聞かれました。
英語を勉強するつもりですかと、その当時は、
Javaの予約語なんて、何十語 なんだから、
たったそれだけのために、とても英語を勉強しようなんて、
全く思っていませんでした。
いまだに、学習中ですが。。
それはともかく、Javaの文法をほぼ大体覚えたころ、
これからいろんなプログラムが書けると思っていましたが、
大きな間違いでした。
ドキュメント/参考書/解説Webページ
が、少なすぎたのです。

それで、何年か後に、仕方がないので、英語を学習する
決心をしました。

でも、今は、HTML5(canvas) などで、
割と簡単に、見た目にも、派手な、
(派手といっても、コマンドプロンプトのプログラム
 ばかりやっていたので、そう思えるわけなのですが)
プログラムが、書けるようになってきていることもあるかも
知れませんが、
日本にいる(日本語の)環境だけで、ずいぶん深いことまで、
学習できるようになっている気がします。

例えば、C++ なんて、私には、
 門外不出の巻物に書かれている秘密の奥義
な感じで思っていました。

しかしどうでしょう。
今ざっとアマゾンでチェックしたりしても、
これなら、C++をマスターできそうだと思える本がたくさんあります。
(Javaでも)

プログラミングを覚えるために、英語を覚えるというのは、
それほどには、重要ではないかもしれないですね。

ただ、やはり、Dartなど日本語情報の少ない言語や、
Box2d なども、余り情報がないかもしれませんが、
そんな出来ないことを気にするより、
たくさんの出来るすばらしいことを気にすべきでしょう。

C#, swift, (Java), Dart などが素晴らしい言語だというのは、
書きやすい/生産性が高い という部分が多分にあって、
いいプログラム(作品)が、出来るということとは、
別の話で、
Cでだって、気の遠くなる話だとは思いますが、
素晴らしいプログラムを書けますというか、
スピードが速かったり、より細かい設定が出来たりで、
逆に、いいプログラムが出来ますが、
余りにも書くのが大変で、現実的ではないと思いますが、
ちょっと前に主流だった言語ぐらいなら、
生産効率(プログラムを書くスピード)が、やや落ちる
ぐらいのことだと思います。

また、逆に、ある程度プログラミングをマスターして、
英語を覚えるアプリを自分で作るというのも大有りだと、
思いますが、どうでしょうか?

こんなことを最近思ったので、書いてみました。
 ・・・

では、今までやったことを復習しましょう!


復習テスト2-1

テスト
HTMLandCSS_2-1