2008年01月10日

ふと思い立って、こんなものを書いてみる気になったのですが、
全く、微塵も知識の無い大抵の人は、HTMLやら、CSSなどと言われても、


??〝HTML?なんのこっちゃ〟??

??〝CSS?なにそれ、たべもの〟??


みたいな感じで、まったく別次元のお話の様に感じてしまうかも知れません。

ですが、ちょっと考え方・捉え方を変えてみるだけで、そこまで遠い世界のお話ではなくなります。
決して大袈裟な話などではありません。
見方を変えるだけで、HTMLとCSSに限っては、構造を理解するだけでしたら、一日と掛かりません。
HTMLだけでしたら、1時間もあれば、構造を理解出来ます。
構造され理解出来れば、組めるようになるのに、1日もあれば十分でしょう。
CSSは、もう少し厄介な構造をしてるので、HTMLよりかは難易度が若干高いですが、
それでも、HTMLさえ理解出来ていれば、構造を理解するのに多く見ても3〜4時間、
自由に書けるようになるのに、2日程度と言ったところでしょうか?


そこで今回、『HTMLとか興味はあるけど、なんか難しそう…』などと思って、手を出すのを躊躇っている方に、
身近なものを例えることによって、『HTMLってこんなに簡単なものだったんだ!』
と少しでも感じ、手を出すきっかけにでもなれれば…、と思い、これを書くことにしました。

ただし、これからの内容を読む上で、幾つか注意点があります。

1つは、これは、「入門」では無いということ。
 なので、これを読んだだけで、直ぐにHTMLが組めるとは思わないで下さい。
 それ以前の、『こうすると理解し易くなる』といった程度の、心構えについて説明しています。
 ですが、その心構えが出来ているかいないかで、理解出来る速さに格段の差が出ると思っています。

2つは、ほぼ全ての説明が、例え話であること。
 門をくぐることすら躊躇う理由の一つに、難しい専門用語があります。
 その為に、ここでは、専門的な単語を一切扱いません。
 あくまで、考え方・捉え方として、漠然とした、『大体そんなもの』程度にしか説明していませんし、
 正しい意味を完全に無視したり、湾曲させたりして説明してありますので、
 実際にHTML等と組む時は、ちゃんとした入門サイトとかで基礎を学ぶ必要があります。



前置きが長くなってしまいました。それでは本題へと移りましょう。


HTML
幾ら専門用語を使わないと言っても、それでも、最低限の『決められた形』というものが存在します。
いきなり見慣れない暗号みたいのが出てきても、驚かないで下さいね。
「そういう形をした絵がある」
程度に見て、直ぐに次の文章に移動しちゃって下さいw
次に続く文章を読めば、イヤでも理解出来る筈ですから・・・。

先ず、先ほど出て来た、『最低限の決められた形』ってヤツですが、こんなのです。

<html>
 <head>
 </head>
 <body>
 </body>
</html>

これが、基本中の基本構造の、最低限の形なのですが、この時点で十分、意味が分かりませんよねw

そこで、こう捉えてみては如何でしょうか?

<敷地全体>
 <塀>
 </塀>
 <家>
 </家>
</敷地全体>

全体として土地そのものが有り、その中に、<塀>と<家>が存在する訳です。
何の事は無い、ごくごく自然で当たり前な話ですよね。
尚、それぞれの場所が<>と</>で区切られていますが、
これらは、<>が範囲の始まりを、</>が範囲の終わりを示す為の大事なものだと考えてください。
必須です。特に、/(スラッシュ)は終わりを示すものとして、絶対に必須です。
これが無いと、外から人が見たとき、どこからどこまでが<塀>で、どこからどこまでが<家>なのか全く分かりません。
気を付けて下さい。
これで貴方には、HTMLの基礎を学ぶ上での下地が出来ました。


とは言え、これでは何とも味気ない。
と言うことで、もう少しそれぞれの役目を見てみましょう。

先ず<塀>ですが、これの主な役割として、
表札
・セールスお断り!
と言った、外部に知らせたい情報を提示したりします。

次に、<家>ですが、読んで字の如く、『生活空間全て』となります。
色んな部屋があったり、家具があったりします。

ここでも一つ注意がありまして、塀には塀の、家には家としての専用の機能が定められており、
〝表札〟なんだから、家に掛けてもいいじゃないか。と、<家>に掛ける事は出来ません。
〝表札〟は、必ず<塀>に掛けなければなりません。
何故なら、外から来る人は、<塀>を見て判断するからです。
<塀>と言いますか、ここでは<門>と言い換えた方が良いですかね、
<門>をくぐると、そこはもう玄関なので、表札を見ることは出来ないのです。
逆に、<家>の中の物を、<塀>の上に置くことは出来ません。意味を成さないからです。
つまりは、そう言う事です。

そしてそして!
ここからが誰もが知りたいと思っている事でしょう。
なにをすれば良いのか?
なにが出来るのか??

答えは簡単。
土地の上に、塀や家の外枠は出来てるので、そこに、表札を掛けたり、家の中を自由に作ってください。

とは言っても、実際にご自身が住んでいる、住宅を思い浮かべる必要は無いです。

木のプラモデル。そう、木製の家のプラモデルを組み立てる様なものだと解釈して下さい。
ウソのような、非常に簡単な話なのです。
しかもこのプラモデル、定型ですが、
ドアとか、イスとかテーブルとか、箪笥とか、更には階段や壁、廊下に至るまで、
木で作れる家具や建具は全部揃っていて、
且つ、金槌や、釘、角材、大雑把に切れる鋸に、ペンキを塗るハケまで用意されています。
これらを組み合わせるだけで、ほったて小屋程度ですが、家が建ってしまうんです。
ドアの大きさや幅が気に入らなければ切ったり広げればいいし、
階段の段数が気に入らなければ、やっぱり、増やしたり減らしたりすればいいのです。
その様な、大まかな増減も自由に、何度でも行うことが出来ます。

そうして、自分の好きな様に間取りを決めて、家を建てる。
これが、HTMLのものすごく噛み砕いた概要です。


そこで早速、家を組み立ててみました。

その内、何度も簡単な家を建てていくと、もう少し自由に、様々な形に組みたいと思う様になりました。
内装も変えたいし、家具も変わった形や、色鮮やかにしたい。

ですが、実は、現状で用意されている道具・工具では大雑把過ぎて、
ドアやテーブルの大きさを変えることは出来ても、星型や三日月型といった特殊な形に変えることや、
階段の段数は変えられても、全体の形を変えて螺旋状にすることや、
壁のペンキ塗りでも、全体を変えることは出来ても、壁の四隅だけ違う色にすることや、
プラモの仕様により、どうしても詰めて埋めることの出来ない家具同士の隙間を埋めたい、
と言った、細かい部分まで弄ることは出来ないのです。

困りました。
そ こ で、必要になるのが、カスケーディング・スタイル・シート(CSS)です。


CSS
CSSとは、端的に言って、HTMLでは設定しきれない細かい設定を出来る様にする、設計図です。
その他に、ミリ単位で木を削ることの出来る道具や、板の真ん中に穴を開ける道具、
木を曲げたりすることの出来る道具に、色を塗る際の保護テープなども手に入ります。
より専門的な、それの為だけの道具や工具が、一杯手に入ります。
それにより、上では出来なかった、
・星型や三日月型のテーブルやドア
・螺旋階段
・四隅だけ色の違う壁
・家具同士の間に出来てしまう不要な隙間を埋める
これらが全て、実現可能となるのです。


そして、その設計図のお陰で、CSSをCSSたらしめている、建具の一括管理も出来るようになるのです。
具体的にどういうことかと言うと、
例えばドアですが、元の用意されていたドアの大きさを、縦1.8m横90cmとすると、
Aのドアを、縦を2mにして、横は80cmにしたい。
Bのドアを、縦を2mにして、横は80cmにしたい。
Cのドアを、縦を2mにして、横は80cmにしたい。
と言った場合、
HTMLだと、一つ一つを切ったり継ぎ足したりしなければいけなかったのに対し、
CSSだと、設計図に、AとBとCのドアの規格は"縦2m横80cm"と設定するだけで、
3つのドア全てがその形に矯正されるのです。

これは、これまでの多大な作業と労力を無くしてくれる、物凄く便利な機能です。

これを活用することにより、HTMLに付属していた工具では出来なかった、
種々様々な設計・配色を、簡単な力で、当に理想と言える家を組み立てることが出来る様になるのです。
これが、CSSのものすごく噛み砕いた概要です。

勿論、これらの特性により、いきなりCSSを理解しようとしても、無理です。
専門的な工具とか手にしても、使えるわけがありません。
少なくとも、プラモの家は難なく組み立てられ、備え付けの家具や工具の半分程度は理解している必要があります。



家の外観・内装を整えた事で、とても立派な家になりました。

しかし、それでもその内、何かが足りなくて満足できなくなりました。
そうです。明かり等の電化製品、台所やお風呂と言った水周りが全くありません。

これでは、寝るには良いが、住むとなると不便過ぎる。

さて、どうしたものか・・・。
そう、それを解消してくれるのが、JavaScriptです。


JavaScript
JavaScriptとは、家の設備に例えると、
簡単なものでは明かりとそのスイッチから、
高度なものに至っては、TV・冷蔵庫・洗濯機・電子レンジ等といった、
家での生活をより楽しく便利にしてくれる為の、機械全般になります。

そんな訳で、ぶっちゃけ、ここから先は、文字通り違う次元の話になります。
意味は理解出来るが、使える様になるには、ハッキリ申しまして、想像出来ません。
その位に、違う世界の話になります。

どんなことかと言うと、端的に言って、

『これまで木細工を弄っていた人間に、いきなり、電線とか金具とか歯車を渡して、
これで何か好きな機械を作れ。』

ってのと同じ位の、意味の分からない世界に突入します。

初めから、完成された製品なんて、一つもありません。
あるのは、それぞれに機能や意味のある、電線や金具や歯車だけ・・・。

要するに、それらの部品一つ一つを理解しない限り、JavaScriptを使えるようにはならない。と
つまりはそういうことです。


ね?意味不明でしょ?w


スイッチ一つにしても、配線を一つ間違えるだけで、動かない訳ですよ。
これはね、もう、完全に専門の人の作業だろうと・・・。


一応ね、サンプルを扱っているサイトさんもあるにはあるんですがね、
それでも、
例えば、電子レンジなら、開始/停止ボタン一つのみ、出力もひとつのみ。
本当に、最低限の物を温める機能しか付いて無いんですよ。
それ以上は、個人の好みの問題なんです。
タイマー機能だったり、ワット出力を調節したりと言った機能が欲しかったら、
自分で追加するしか無いんです。

只、一つだけ幸いなのは、専用の工具や、必要な部品は全部揃っていること。
構造を理解さえ出来れば、自分だけのレンジも作れるってのが、魅力でしょうか?w

これが、現段階で言える、JavaScriptのものすご〜〜く噛み砕いた概要です。



如何だったでしょうか?
取り敢えず、現段階で私が持ち得る全ての知識を書き綴ってみました。
なるべく、分かり易い表現に気を付けたつもりです。
こんな内容ですが、一人でも、読んだ方のお役に立てたのなら幸いです。

最後になりますが、上で散々出て来た、家具やら建具ですが、これらは、
『リファレンス』
と呼ばれる(銘打っている?)サイトさんに行けば、全部保管されています。
それらを活用することで、全ての素材を把握し、使えるようになるでしょう。

難しい機能さえ求めなければ、HTMLとCSSは非常に簡単です。
何事も遊び心は大事です。
遊びがてら、HTMLを組んでみては如何でしょうか?

(01:34)
日記 |
TVアニメ「ゆるゆり」応援中
ドリクラPV
亜麻音 「sweet×2☆summer」PV


みお 「StayWithMe!」PV


雪 「Hi!-Kin-goo」PV


玲香 「ステキなmagician」PV


魅杏 「Real」PV


るい 「イケないLipStick」PV


理保 「カンパイ☆LOVE」PV


ナオ 「愛しきHero!」PV
llowFullScreen="true" allowScriptAccess="always" />

魔璃 「月の露珠」PV


アイリ 「TimeTraveler」PV