こんにちは！新人森田です。
年明け早々の３連休があったりもしましたが、前回の更新からハレノヒブログリニューアルプロジェクト（勝手に命名そして長い）を水面下で進めておりました。一段落したところで、作業のおさらいをしてみたいと思います。

その前に、師匠のご指導のもと出来上がったデザインをちょっとだけご紹介！

全貌はリニューアルしてのお楽しみということで。
こんな感じにPhotoshopで全体のデザインを作るところから始め、このデザインを元に実際のwebページを作る作業＝コーディングをするという流れで作っていきました。

コーディングという作業では、htmlタグというものと格闘することになります。バックに師匠という秘密兵器が控えつつも、やっぱり秘密兵器は秘密兵器なので多分だいたい自力で頑張りました。webページを作っているベースはこのhtmlタグなので、今回はhtmlタグについてまとめてみます。

htmlタグとは

html専用の記述文字のことをhtmlタグといいます。（htmlって何だっけという人はWeb用語を知るべし）

“<>”で１つの要素を書き、”< >〜</>”で要素の範囲を表現します。
webページでは検索したりボタンをクリックしたりと色んなことが出来ます。それだけ色んな要素が使われているということなんですが、色々ありすぎるのでhtmlタグにはどんな種類があるのかをざっくりと分類してみました。

分類その１：UIとそれ以外のタグ

上に書いたような「検索」「クリック」といった動作だったり、デザインの表示だったりといったwebページの表面に影響するタグがUI。要素を入れ子にしたりする箱は<div>、文章の見出しを表す<h1>、画像を貼り付ける<img>などです。

それ以外に、ページそのものを定義したりするタグもあります。<meta><!doctype>などプログラミングしてるぜって感じです（個人差あり）。

UIのタグは、さらに要素の種類で分けることが出来ます。
１つの固まりとして扱われて横幅いっぱいに表示される（改行される）ブロック要素と、文章の一部のようにブロック要素の中身として扱われるインライン要素です。

その他にも、インライン要素なんだけどブロック要素のように幅や高さをもつインラインブロック要素、表を作るテーブル要素などもあります。

ブロック要素：<div>、<h1>（上記参照）、<p>（文章の段落）、<ul><ol><dl>（各種リスト）等

インライン要素：<a>（リンク）、<strong>（強調）、<span>（任意の範囲をひとまとめにする）等

インラインブロック要素：<img>（上記参照）、<button>（ボタン）等

テーブル要素：<table>

こういったタグたちを駆使してwebページを形作っていきます。といっても、これらをどう使うのか、それがどんな風にwebで表示されるのか等々イメージしづらいと思います。

表記例としてはこんな感じです。

そして私の頭の中。

それがこうなります。

色がついたりしてる理由は次回！

頭の中はさておき、大体このようにwebページが成り立っているのでした。デザインとは違う領域の脳を使っている感覚です。とはいえ、慣れてくるとコードのことも意識しながらデザインする頭も出来てくる。はず。

それから、前回の記事でも触れた「UIを意識したデザインが紙媒体とは性格が違う」理由も、こういう仕組みを覗いてみるとほんのり具体的になってきたのではないでしょうか。

タグについてもですが、バージョンやOSやデバイス等々含めるとhtmlはまだまだまだまだ奥が深いです。日々画面と睨めっこしながらコーディングもデザインの腕も磨いていこうと思います！というわけで今回はこの辺で！押忍！