マークアップ言語とスタイルシート言語について学ぶ, Learn about markup and stylesheet languages, 学习标记语言和层叠样式表语言


    210320メモ:古いサイトから本記事を引っ越して来るついでに、コンテンツを全面的にリニューアルし、タイトルも変更しております。

    また、筆者は必要になって来るものから勉強しているので、本来のHTML学習順ではありませんので、順を追って学ぶなら、別コーナーのHTMLに関する記事ナビを参照頂けると幸いです。

    以下本文です。

    時代はITに特化しつつあり、仕事からパソコンは離せなくなりましたね。オフィスソフトやネットサーフィンに慣れると、今度は自分のホームページを自分の手で作りたくなります。成長の道筋みたいな?w

    まずはプログラムを勉強しなくちゃ、なんて思っていましたが、若いころ、本屋さんでプログラムの本を何十冊も捲ってようやく知ったものです、ホームページを作成するための言語はプログラム言語ではなかったのですね~びっくりです。

    今ではネットを開けば、プログラム教室が豊富にあり、情報を見つけるのは簡単です。しかし初期は、HP作成を検索してもHTML情報を得られる時代ではなかったので、ホームページを作るには HTML を習得しなければならない、なんて事を知るまでに、相当無駄な期間を要したのです。

    書籍も当時は企業システム向けの本格プログラム言語のものが多く、HTML入門なんて、数少なかったので、本屋に置いてあったとしても、気づかないほどでした。

HTMLとは何か

    ブラウザを通して、ネットで見る事ができる、全てのWEBページは HTML で作られていて、ホームページとはサイトの事ではなく、サイトの「表紙」のようなものです。なので、自分のホームページを作りたい!と言う感覚もちょっと違って、自分のサイトを開設したい!と言うのが正解です。

    さて本題です。HTML (Hyper Text Markup Language) はマークアップ言語に分類されています。タグと言う要素を沢山並べる事で、コンテンツを作って行きますが、そのコンテンツを飾り立てる為に使うのは CSS (Cascading Style Sheets)であり、スタイルシート言語と呼ばれます。

    ハイパーテキストとは、文章や画像にリンクを貼って、そのリンクで別ページへ飛べると言う事で、関連した情報が紐づけられて、目的情報へ辿り易くなる仕組みの事です。これがHTMLの真髄ですね。

    ドメインを買ったり、サーバーをレンタルしたり、経済負担してまでやりたくなくて、無料のブログやSNS程度なら使うと言う人も、HTML と CSS を多少知って置くと、自分の好みでWEB ページをカスタマイズができるので、人と違った個性を出す事ができます。

    個性は注目を集めます。WEB ページは見て貰える事で、価値が生まれます。

何故ブラウザを通して見る必要がありますか

    現在世界中に196か国がある事を、知っている人は多いと思いますが、世界中にある言葉の種類はどの位あると思いますか?なんと!約6900種類もあります。(注:後から分かった事ですが、学者によって、言葉の種類に対する認識が違い、5000~8000種類と言う幅広い見方があります。)

    人間と言う生き物は極めてエゴであり、ある範囲内でのコミュニケーションは活発であっても、リーチ範囲を超えてしまうと、排他的論理が働いてしまいます。古来から限られた資源の中で生き続ける為の本能しょう、社会の文明化に従って、国と言う概念が生まれて来ました。

    しかし、インターネットの世界では、国境を作る事は出来ません。すごくないですか?あるのは、人が作り出すコンピュータと、そのコンピュータと対話する人々、そんなイメージです。文明の大きな進化ですよね。

    この中で、HTMLはコンピュータが理解する言語であって、ブラウザは各国の言葉で、各国の人々に情報を共有させる為の、インターフェースです。

    HTMLは一部の人しかわかりあせんが、ブラウザを通せば、全ての人が情報を見る事がでいます。例え文字が読めなくても、画像と動画を見る事ができます。

プログラム言語との違い

    当然湧いて来る疑問ですよね、筆者も理解するまでに時間がかかりました。

マークアップ言語文書の構造を指定する為の言語
  (HTML、SGML、XML、XHMLがあり、それぞれの特徴と背景は下記参考)


スタイルシート言語文書の文字サイズや色等スタイルを指定する為の言語
  (HTMLのバージョンアップで4.0から、スタイルシートの棲み分けとなった)

プログラム言語コンピュータに指示通りの計算をするよう命令する為の言語
  (C言語、JAVA、Javascript、PHP、Ruby 等がある)

    上記それぞれの違い以外にも、プログラム言語とマークアップ言語の違いがあります。それは、難易度の違いです。

    HTMLは比較的に優しく、CSS の知識も同時に必要となりますが、検索エンジン対策(SEO)も身に付ける事ができます。

    プログラマーを職種で分けると SE(system engineer)と言いますが、マークアップ言語は web 制作に関わる仕事で使われ、マークアップエンジニアと言う職種になります。

    余談ですが、マークアップ言語に対して、マークダウン言語があり、同じく文章の構造を指定するものですが、メジャーにはなれませんでした。しかしマークダウン言語はマークアップ言語より記述が簡単ですので、世界中に愛好者もかなりいます。

    プログラム言語も上記以外に、あまりメジャーでないものが数百種類もあるそうですが、これらを全てひっくるめて、コンピュータ言語と言います。その道のプロたちが、「0」と「1」しか判断できないが計算だけはすこぶる早いコンピュータに、人間の指示を理解させ、計算させる為に定義した言語です。

HTMLの基礎知識

    HTML でWEBページを作成するのに、必要なものは2つだけです。

ブラウザ(Explorer、Chrome 等、PC に既存している)
テキストエディタ

    テキストエディタは文書作成の為のソフトで、Windows には標準搭載しています。Windows アクセサリーと言うフォルダーを開ければ、「メモ帳」と「ワードパッド」と言うのがありますね、どっちもテキストエディタです。筆者は昔、メモ帳でコードをベタ打ちして、HTML ファイルを作っていました。

    ファイルには拡張子がある事を知っていれば、テキストエディタで作成したソースコードを、.htmlと言う拡張子で保存すれば、それがHTMLファイルとなります。

    MACマシーンは「テキストエディット」と言うソフトになります。しかし、本格的に IT 時代に入ると、HTML を制作する事に特化したテキストエディタが多く生まれて来ました、本格的にウェブページを作成するなら、そう言った専用ソフトを使う方が、格段と効率が上がります。    

    専用テキストエディタは、中級者以上のコーディングが出来る人に向いていますので、勉強し始める頃は、一般のテキストエディタで十分だと思います。

    また、ブログのカスタマイズの場合は、専用のHTML編集画面が管理メニューにありますので、直接コードを書く事ができ、テキストエディタすら必要としません。

    筆者もコーディングのレベルが上がってから、専用テキストエディタを調べたいと思いますので、ここでは、HTMLとCSSの意味、その他プログラムとの違いまでにして置きましょう。