HTMLコーダーへの道 (1)
HTMLの学習前の基礎知識
HTMLって何？
ハイパーテキスト・マークアップ・ランゲージ。
ウェブページを作成するためのマークアップ言語です。
◯◯言語というのは分類の方法ですが、HTML単体ではプログラミング言語には分類されません。
テキストエディタに入力したテキストをWWWブラウザで表示するために、HTMLのルールに則って整形していきます。
WWWブラウザはウェブページを見るためのアプリで、単にブラウザとも呼ばれます（今あなたはWWWブラウザでこの記事を読んでいるはず）。
WWWブラウザを通さないで、テキストエディタで整形している段階では「HTMLファイル」です。
HTMLファイルをWWWブラウザを通してディスプレイに表示した時に「ウェブページ」と呼ばれるものになります。
WWW（ワールドワイドウェブ）とはウェブページをWWWブラウザで閲覧するためのインターネット上のシステムです。
インターネットは「インフラ」、WWWは「物流システム」、WWWブラウザは「配達人」、ウェブページは「商品」という考え方で良いかと。
HTMLとWWWの発明者は同じ人で、ティム・バーナーズ=リーというイギリスの科学者です。
ウェブページを作成するために必要な道具は？
パソコンとテキストエディタというアプリが必要です。
タブレットやスマホでも無理では無いと思いますが、やはりパソコンだと習得が早いでしょう。
パソコンはChromebookの型落ちエントリーモデルでも良いと思います。
広い画面と物理キーボードがあれば性能はそんなに求めなくてもいいです。
テキストエディタは、たとえばWindowsを使用しているなら標準でインストールされている「メモ帳」でOKです。
ただ、多くの人は「ウェブページ作成支援機能付きテキストエディタ」（HTMLエディタ）というものを利用します。
HTMLエディタは無料でたくさんありますので、自分に合ったものを探してみてください。
作ったウェブページを世界に公開するという段階で「FTPクライアント」（HTMLファイルをウェブサーバに転送するためのアプリ）と、転送先の「ウェブサーバ」の契約が必要になりますが、とりあえず練習段階では考えなくても大丈夫です。
「DreamWeaver」とかが必要って聞いたけど？
DreamWeaverはプロの現場で使われる有名なソフトです。
そういったものの使い方を学ぶのも悪くない方法だと思いますが、当方はなるべくコストの掛からない学習方法を提案したいです。
HTMLとCSSを直接覚えれば、その延長線上でCGIやデータベースの学習にスムーズに繋がっていく可能性もあります。
コーディング？ プログラミング？
テキストエディタを使ってHTMLファイルに整形することを「HTMLコーディング」と呼びます。
HTMLコーディングをする人は「HTMLコーダー」です。
「HTMLプログラミング」や「HTMLプログラマー」と言う呼び方は普通はしませんが、Javascriptと連携すればHTMLも立派なプログラミング言語になるので、文脈によってはそう呼んでも間違いではありません。
一般的にHTMLコーディングにはCSSコーディングも含まれます。
もはやHTMLとCSSはセットで運用する場面しか存在しないからです。
ただし、分担して作業するということはあって、HTMLだけの仕事やCSSだけの仕事もあるにはあります。
WordPressの使い方を知っていればHTMLは学ばなくてもいいのでは？
その通りかもしれません。
ただ、フルスクラッチでHTMLから手書きでコーディングができる人材を募集している案件も多くあり、もしウェブ制作を仕事にしたいのであれば、HTMLやCSS、Javascriptなどの知識は必須と言えるでしょう。
また、WordPressを高度にコントロールするには、結局のところHTML、CSS、Javascriptの知識が必要です。
HTMLってもともとは何の目的で生まれたの？
HTMLは、 ものすごく端折って説明すると『SGMLにハイパーリンクを追加したもの』です。
SGMLはもともとは戦闘機や軍艦などのマニュアルを電子化してコンピューター上で管理するために考えられたマークアップ言語です。
HTMLは学術論文をインターネットの世界で取り扱うためにSGMLを改良したものです。
その最大の特徴がハイパーリンクです。
ハイパーリンクはある論文上で別の論文を参照したいと思った時に、一発でその目的の論文を呼び出せるようにする仕組みです。
ハイパーリンクって？
我々が日常使う「リンク」のことです。
もうあまりハイパーリンクとは言いませんね。
ハイパーリンクは「ハイパーテキスト」というアイデアを具現化したものです。
ハイパーテキストの考案者はテッド・ネルソンという人物で、前出のティム・バーナーズ=リーではありません。
ハイパーテキストの発明はHTMLやWWWの発明よりもずっと古いのですが、実用化して本来のポテンシャルを引き出したのがティム・バーナーズ=リーでした。
HTMLとその後は何を学べば良い？
とりあえず「CSS」は必須です。
現代のウェブ制作ではHTMLとCSSはセットで習得しなければなりません。
「Javascript」は『他人が作成したものを丸々自分のファイルにコピーしてとりあえず動くようにできる』程度の知識があれば、がっつりと取り組む必要はないかもしれません。
「CGI」や「データベース」はコーダーの仕事の範疇を超えてプログラマーの仕事になります。
そこまでいくと習得の難しさは段違いに難しくなりますが、CGIやデータベースも覚えるとやれることの幅も段違いに広くなります。
大きな稼ぎを目指すのであれば必須かもしれませんが、基礎知識としてHTMLとCSSがある程度は頭に入っている必要がありますので、まずはHTMLとCSSに集中しましょう。
デザインは？
ウェブデザインは別の人が行うことが一般的です。
デザイナーが依頼主と打ち合わせを重ねてデザインを完成させ、それをコーダーがコーディングするという流れです。
腕のあるコーダーであれば、デザイナーから完成図（カンプ）を1枚渡されただけで、打ち合わせ無しにコーディングを完遂できます。
コーダー専業であれば依頼主との交渉が必要ないので、より自分のペースで仕事ができるというのは魅力でしょう。
デザイナーには芸術家としての素養やセンスが必要で、コーダーには職人としての経験と豊富な知識が必要になります。
両方を備えていればそれに越したことはないのですが…。
もちろん、デザインからコーディングまで一気通貫で請け負うというフリーランスの方もいっぱいいます。
HTMLのバージョンの違い
基本的にHTMLは常に最新バージョンを学習すればOKです。
HTMLはバージョンが進むたびに仕様が根本から変更になるというのではなく、新しいものが継ぎ足し継ぎ足しされて、一旦は取り入れたものでも不合理なものは廃止していくという方法で進化してきました。
主要な部分は初期バージョンから変わっていません。
2023年現在の最新バージョンは「HTML Living Standard」です。
一つ前のバージョンは「HTML5」。
2021年にHTMLの仕様を策定する機関が変更になった際にバージョン名の付け方が変更になりましたが、その時はHTMLの仕様自体に大きな変更はありませんでした。
レスポンシブ対応は必須
昔はPC用のページとスマホやガラケー用のページは別々に作っていました。
2015年頃から『ガラケーのことはもう考えない』というサイトが増えていき、「レスポンシブ対応」でPC版とスマホ版をまとめて作るというのが一般的になっていきます。
何か特別な事情が無い限り、デバイスごとに別々のHTMLを用意するというやり方は今はほとんど行われていません。
レスポンシブ対応は、『ブレイクポイントを決めてメディアクエリで切り替える』というのが一般的でしたが、CSSの進化に伴って現在ではブレイクポイントありきではなく、メディアクエリもできるだけ使わないでどんな大きさの端末にも対応するという方法にシフトしつつあります。
※なのでブレイクポイントとメディアクエリの説明はここでは省きます。
スマホファーストで行きましょう
昨今ではウェブ閲覧に使用されるデバイスの50%以上がスマホとなったために、ウェブ制作は「スマホファースト」で行うべきだとの考えが大勢となっています。
以前はアプリじゃないとできなかったことがブラウザでも同等のことができるようになってきて、ブラウザ回帰現象が起こっているとも言われており、スマホでのウェブページの見映えは日に日に重要度を増しているという状況です。
今回は以上です。
お疲れ様でした。
次はいつになるかわかりません。
この記事が気に入ったらサポートをしてみませんか？