検索でホームページ入門と打ってみたら、驚くことに何と上位は全てタグ手打ちで占めています。ここにビルダーのようなWYSIWYG編集ソフトが入っていないのが不思議です。つまりタグを入力する事が基本であり入門の第一歩であるということが証明されていると思って間違いなさそうですが、さあ?どうでしょう。ほとんどの人はそういったソフトから入門されているケースが多いと思うのです。私も最初はホームページビルダーでした、これはこれで使い勝手が良くて初心者でも簡単に作成できる大きなメリットがありそうです、そして手打ちに目覚めた今でも、こういったツールを利用すると便利な面も確かにあって全て否定するわけにはいかないのです。 手打ちとは言っても全てタグをチマチマと打つ方は少ないでしょう、ほとんどの方はコピー&ペースト主体で作成しているはずです。100%ソフトに依存する場合と、タグと向き合う場合との大きな違いは、ソースコードに現れて来ると言っていいでしょう。誤った構文でもブラウザの曖昧な恩恵により、それなりに表示されてしまう事が決していいはずはありません。仕様に基づき正しい記述を心がけるべきだと思うのです。
ホームページを絵が動き回る、ボタンをポチって押せばページか変わって動き回るロゴが出てといったホームページを動的な媒体として捉えてる人には難しく感じるでしょう。でもホームページはたかが電子文書と捉えてる人はさほど難しく感じないものです。動的な媒体として捉えてる人は文書の構造など考えない場合が多く、というより華やかかさばかりに目が行って基礎の部分が見えないと言った方が適切かもですが、電子文書として捉えてる人は本や雑誌、新聞と同じように捉えているために、文書の構造があからさまに見えています。そして動的媒体と捉えてる人の共通点は自分が作り手になったときにエゴが出やすく、電子文書として捉えてる人は常に見る側の立場に立って、より見やすく読みやすくに配慮している場合が多いように感じます。これは文書なのだ、たとえ挿絵を挿入しても基本は文書なのだと思えば、案外簡単なように感じるものだと思います。文書には約束事があるからね!
動的コンテンツに惹かれるのもわかる気がするが、それらが何の上で存在感を示しているのかを先に理解しなくてはいけません。点で捉えるか面で捉えるかが大事なんですよ。例えば家を建てようと思ってください、自分なりのこだわりがあって台所はこうだ、お風呂はこうでなくちゃと色々と勝手な構想を練ったりします。でもその前に考えなくちゃいけないのは、その家が何坪のスペース内に建つ家なのか?という事ですね。ホームページで考えてみると情報を入力するスペースをどれだけ確保するかという事、そして入り口の大きさや居間の大きさ、台所やお風呂を割り当てていきます。これがレイアウトですね。この基本的な部分を面で捉える部分がしっかりしている事が大事なんです。
タグ打ちは難しいと思い込んでいる方には何を書いても受け入れ難いと思いますが、柔軟な姿勢をお持ちの方なら極めて簡単であると気付くのも間もなくですでお楽しみに。さて文書は静的なものと捉えて先に進みます。上の項目のレイアウトを考えます。雑誌や新聞と同じと思ってください、。ページ上部に見出しがあって本文があってと大体は似たようなものですね、それらを書き出してみます。
①タイトル②メニュー③本文④締めくくりに著作権などのスペース
このわずか4つをレイアウトするするわけなので、限られてしまうのは当然です。
サンプルページ
この本文中に挿入されているHTMLタグは
<h1><h2><ul><li><p><address>のわずか六つだけです。それらわずか六つのタグを挿入するのに高価なソフトは必要なんでしょうか?そして当サイト全体で使用されているタグ数もわずか20個ほどなんです。
自分が入力した文章などを最初と最後をタグで挟む事は難しい事でしょうか?例えば<p>は段落であると習い覚えれば、文章の塊は段落つくるでしょう、そして段落を作るには<p>で囲むんだという事が誰でも理解できると思います。つまりホームページビルダーなどのソフトで何かを入力する場合、段落を作って情報を入れるという基本的なことを覚えるのに時間がかかりすぎるんです、ひょっとして一生覚えない人もいるかも知れません。情報(文書)の塊をそれに対する適切なタグで挟むめばいいんだ!と言う事を理解すれば次の一歩へと大きく前進するんです。 WYSIWYG編集ソフトをただ漠然と利用するのではなくて、このアイコンをクリックしたら何が挿入されるんだろう?といったソースコードを確認しながら作成していけば上達もかなり早いんでしょうが、ほとんどの人は先を急いでしまうためにソースに触れようとしないのが現実です。WYSIWYG編集ソフトを利用するということは、それが吐き出すソースコードの良い面も悪い面も含めて熟知していなければならないような気がするのです。そしてWYSIWYG編集ソフトに作らされているという事に早く気付くべきなんだと思います。
何の変哲もないサンプルを表示しましたが、このような無味無臭のテキストページが基本的構造となるわけでして、もしこの基本的な構造の中にレイアウトや他の装飾を入れてしまうと後々が大変になってきます。ここで大切な事はHTMLタグが適材適所に用いられているか注意します。例えば文書の下段に空白を用いるために改行が連発されていないか、文章の一部を強調するのに適したタグが使われているかといった確認が必要です。そしてこうのような基本情報のみの記述は、わかり易く例えてみると料理をする前の素材をテーブルの上に並べた状態だと思っていただければ結構です。情報と見栄えを実践されている方なら一目でわかりますね。ところが情報と見栄えを同じ土俵でひっくるめてしまう習慣のある人から見れば「なんだこれは?」って物足らなく感じてしまうのです。昔の作り方はHTML内でたくさんの装飾が入っています、このような作成方法では多様化した端末では表示されない場合が多く、それに対応させようとするならば別のファイルの作成を余儀なくされてしまうのです。
基本情報の中の塊一つ一つを適所に配置していった情報をCSSでコントロールします。基本情報の入力なら手打ちでもぜんぜん問題なく進める事が可能ですがCSSの記述になってくると入力支援が必要な場合が多いですのでエディタの機能に助けてもらいましょう。ez-HTMLやCrescent Eveでは最初の一文字を入力すると候補が出てくるありがたい機能がありますのでお勧めです。自分だけのリファレンスを作っている人も多いです。いずれにしても挿入するCSSはほぼ決まっているのでコピー&ペーストで十分だと思います、そして値は手入力ですね。
何故手打ちなのかって言えば楽しいからに違いないが、全てタグを手打ちで作成しているかと言えば決してそうとは限らない。コピー&ペーストという便利なものもあるし、タグ挿入支援エディタのez-HTMLではほとんど打たなくても大丈夫である。じゃあ手打ちの定義って何だ?って事になるが、基本的に其処に打つタグを決め、<・・・から始める事を手打ちと呼んでみたいと思う。メニューからアイコンをクリックしてタグを挿入してもらうのはWYSIWYG編集ソフトと何ら変わりはないが、それでも視覚的に情報を形で捉えているか文字で捉えているかを比べれば、その差は相当大きなものがありそうである。WYSIWYG編集ソフトを使用されている方で上級の方は必ずソース画面と向き合っていると思いますが、多分それはタグのチェックと、編集画面では不可能な情報を挿入するときのようである。昔ソフトを購入して挫折した人や、イマイチ使いこなせていない人、そん人は今まで仕入れた誤った情報は一切捨て去って手打ちから初めてみることを推奨します。今は昔と違います、CSSという凄い味方がついていますので、CSSこそ手打ち派の心強い味方なんですから。あなたも私も<・・・からはじめてみましょう。
Let's enjoy hand-made.