みずー工房

気ままライフを綴るブログです

【ブログ開発】HTMLって何?

ブログを書いたり見たりしていると、こういう見た目にしたいなあとか、
この装飾はどうやっているんだろうとか、よく私は思っています。
これらの基礎になっている言語「HTML」についてまとめてみました!

注意
ここでは、はてなブログで動作するものを基準に掲載します。
他のブログサービスでも動作する可能性は高いですが、留意してください。



インターネットの表示のほとんどが、HTML という言語で記述されているものになります。
「見たままモード」ではてなブログをやっている人も、実は裏で勝手にHTMLに変換されています。


結局、HTMLって何?

HTMLは、文書を構造化するためのプログラミング言語 です。
プログラミング言語というには大袈裟かもしれませんが、コンピュータに理解させるための文書形式です。
文書を構造にして書くことで、コンピュータにも人間にも理解がしやすいようになっています。
ちなみに、HTMLの正式名称は「Hyper Text Markup Language」です。


構造??

え。構造って何って思われるかもしれませんが、以下の図をご覧ください。

普段私たちが見ているのは「表現 です。Wordでは「表現」のままで編集が可能になっています。
はてなブログの「見たままモード」についても「表現」のまま編集可能です。


一方で HTMLは「構造」を指定することで「表現」する文書 になります。つまり、2つは分離しています。
面倒だし、最初から直接的に「表現」で書けば良いのでは?と思う方もいるかもしれませんが、
「構造」で書くことで以下のようなメリットが生まれます。

  • デザインの統一が簡単
    このあと説明するタグを利用すると、どのページでも同じ設定を呼び出すことができ、
    簡単に同じ設定を適用することができます。

  • 文書内容の訂正が容易
    「表現」で書いてしまうと、文書の内容を変更した際にデザインの情報も失われてるかもしれません。
    一方、「構造」で書けばデザインと内容は別個になっているので、訂正が簡単にできます。

  • 表現の幅が広がる(拡張性がある)
    「表現」でできることの多くは、サービスが提供してくれる範囲のみです。
    「構造」では、オリジナルのデザインを定義することができます(デザインはCSSの知識も必要です)。


HTMLを(少し)書いてみよう!

HTMLは「タグ」と「要素」によって構成されています。


HTML
<p>本文をこんな感じでタグで囲います</p>
  • <p> ... 開始タグ
  • 本文をこんな感じでタグで囲います ... 要素
  • </p> ... 終了タグ


開始タグは必要ありませんが、 終了タグにはスラッシュが必要 です。
このように<開始タグ>と</終了タグ>で要素を囲みます。
私が最初にこれをみたとき、英語の「as ~ as構文」を思い出しましたw


pというのは、段落を表すためのもの で「pタグ」と言います。
HTMLでは、様々な用途で利用できるタグが事前に用意されています。
主なタグの一覧については、今後執筆しようと思います。


はてなブログでHTMLを書く

はてなブログでは、全ての編集モードでHTMLを書くことができますが、
「見たままモード」で利用できるHTMLは自動的に内容が修正されてしまうので、おすすめしません。
はてな記法」か「Markdown」(Proなら「HTML」)のいずれかを利用しましょう。
以下は、編集モードについての過去の記事です。

過去記事


HTMLファイルを作る

はてなブログでは利用しませんが、HTMLをファイルにしたい時について記します。めちゃくちゃ簡単です。
メモ帳やテキストエディタでHTMLを書き込んだあと、拡張子(ファイル名の最後)を.txtから.htmlにして保存します。
終わりです(わたし用の備忘録ですw)。


おわりに

私もこの前まで全くHTMLを触ってこなかった人間でした(一度、挫折していますw)。
HTMLだけでデザインしようとするのは難しいですが、デザインするためには必要な知識となるので、
私と一緒に勉強していきましょう!