ブログやSNSを日々使っている人達が全員HTMLの知識を持っているわけではありません。また、興味がないからという理由で知ろうともしない人もいるでしょう。
でもHTMLの知識があれば、ワードプレスやブログの高度なカスタマイズが思い通りに出来ます。他の人と差をつけるなら是非とも身に着けておいて損はないスキルです。
そこで今回は、HTMLとはどういったものなのか？について解説していきたいと思います。
まだ学習を始めてもいない方にも興味を持ってもらえるようにわかりやすくまとめて行きたいと思いますので、最後まで読んでみてください！
HTMLとは
まずそもそも「HTMLとは何なのか？」という部分についてです。
HTMLとは「Hyper Text Markup language(ハイパーテキスト マークアップ ランゲージ)」の頭文字を取った略語で、Webサイトやアプリケーションソフト、電子メールなどにも使用されている言語です。
ただ言語といっても、HTMLはマークアップ言語に分類されるため、JavaやPHPなどのプログラミング言語とは異なります。
HTMLで構成されたモノ
インターネットを通じて利用するものは全てHTML要素が入っています。
ここでは、具体的にどのようなものにHTML技術が使用されているのかを紹介していきます。
Webページ
インターネット上で観覧できる全てのWebサイトにはHTMLが使用されています。
自身が普段何気なく見ているWebサイトを開いてみてください。
そのページ上でマウスを右クリックすると出てくるメニューの中にある「ページのソースを表示」を実行すると、Webページを構成しているコードが表示されます。これがHTMLです。
アプリケーション
皆さんが普段から使っているLINEやクックパッドなどのアプリケーションでもHTMLは使用されています。
「アプリはプログラミングで作っているのでは？」と思われる方も多くいらっしゃいますが、直接皆さんの目に見えている部分はHTMLを使用しています。
アプリケーション開発にHTMLを取り入れる理由としては、コストと開発速度の改善が挙げられます。
プログラマーとコーダーでは人件費に差があります。またHTMLはJavaなどのプログラミング言語と比べ比較的シンプルな構造となっているため、開発速度も格段に違います。
こういった理由から、アプリケーション開発でHTMLを利用するケースが非常に多くなっています。
HTMLはほぼ全てのアプリケーションで利用されています。
メール
昔のメールはテキストメールだけでしたが、今ではメールを開くと画像やリンクが張られていたという経験のある方も多いはずです。これはHTMLメールというデザイン性に富んだメールで現在の主流となっていて、当然HTMLが使用されています。
このHTMLメールは作成ツールを使用して作成されますが、高水準の知識を持っていない方でも簡単に作れるようになっているため、色々な企業が利用しています。
デザイン系ソフト
IllustratorやPhotoshopなどの作成ツールを使っている方もHTMLを利用しているケースがあります。
例えば打ち合わせなどでクライアントにデザインを見せる際、現場によってはHTMLファイルに出力して実運用と同じような視点で行うケースがあります。
こういった場合には、アプリケーションソフトによってHTML変換されたデザインが出力されるため、やはりHTMLを使用することになります。
HTMLのメリット
ここまではHTMLそのものについて解説してきましたが、やはり学習する上で何かしらのメリットがないとやる気になれないのも事実です。
そこでこの章では、HTMLの知識を学習するメリットについて解説していきたいと思います。
普段は隠されている情報を入手することが出来る
ソースコードを理解することが出来れば、普段HTMLの表面上には決して表示されることのない情報を入手することが出来るかもしれません。
例えばJavaScriptなどは簡単なモノになるとHTMLに直接平打ちされているケースも多く、コメントアウトでプログラムの構造説明がされていることも多々ありますが、こういった情報はWebサイトをただ眺めているだけでは決して入手できません。
ソースコードの下部にこのようなJavaScriptが記述されていてもWebサイトには表示されません。
高度なカスタマイズが可能になる
今やブログやSNSは当たり前となっているため、一番のメリットといえばこれだと思います。
ブログシステムはどれもテンプレートのHTMLカスタマイズが可能なため、HTMLの知識を得ることによって今までしていたカスタマイズでは出来なかったような高度な変更が可能となります。
例えばフォント一つとってもHTMLの構造を理解することで、いくつかの中から選択するしかなかった状態からタグを書き換えることも可能になるため、好みのWebフォントを割り当てることが出来るようになります。
Webサイトを作成できる
更にHTMLに対する理解が進めば、ブログシステムのカスタマイズに留まらず自分でWebサイトを作成することも出来るようになります。
Webサイト制作については特に高価で難しい操作が必要なソフトがないと作成できないわけではありません。OSに付属されているメモ帳アプリのようなモノと知識さえあれば、誰でも容易に作成することが可能です。
HTMLの記述
ここまでの説明で、HTMLの知識を身に着けるとどのような恩恵があるかについては大体理解してもらえたのではないでしょうか。
そこで次は、「HTML覚えてみようかな」と少しでも思っていただけた方のために、少しだけHTMLの記述方法についての解説もしてみたいと思います。
HTMLコードはタグと呼ばれる要素を介して記述していきます。
ほぼ全てのタグは概ね次のように記述します。
<p>hello world!</p>
上のコードでは通称「pタグ」と呼ばれるタグを例にしましたが、ほぼ全てのタグはこのように記述していきます。
最初の「<p>」は開始タグと呼ばれ、HTMLでどのタグを使うかの宣言の役割を担います。
最後の「</p>」は終了タグと呼ばれ、開始タグがどこで終わるかを定めるのに必要となります。
また、これらの要素には属性というオプションを付与することが出来ます。
属性の付与は次のように記述します。
<p style="width: 300px; height: 50px; padding: 5px; font-size: 16px;">hello world!</p>
属性はこのように要素名の後ろに半角スペースを空け「style=””」とすることで初期化できます。そしてこのダブルクォーテーションの中にそれぞれのオプションを記述していくことで、そのタグに属性を付与することが出来ます。
複数の属性を付与する場合には、オプション毎に最後に「;(セミコロン)」を付ける必要がありますので注意してください。
今回のこの例では、「width: 300px」「height: 50px;」でpタグの横幅と高さを指定し、「padding: 5px;」とすることで、pタグに内包されるテキストの余白を指定、「font-size: 16px;」とすることで、通常よりも大きめのフォントサイズで表示されるように設定を変更しました。
HTMLを作る際には、こうしてタグをそれぞれ増やしながらページを作っていくことになります。
まとめ
今回はHTMLの基本知識について解説をしましたがいかがでしたか？
まだ何もわからないという方でも、HTMLなら意外にも簡単に覚えることができ即実践で使用することも出来るため、積極的に覚えても損はないと思います。
少しかじる程度でもブログのテンプレートなどは変更できるようになると思いますので、この記事で基本的な部分を理解しカスタマイズにチャレンジしてみましょう！
コンピューター言語と聞くと、大抵の人はプログラミング言語を想像してしまいますが、言語にも様々なものがあり、全てがプログラミングのために用意された命令言語ではありません。
先ほど出てきたマークアップ言語の他にも、SQLで使用されている「Data系言語(定義言語・操作言語・制御言語)」やスタイルシート言語などがあります。