こんにちは！皆さんブログ書いてますか？？？書いてますね！
ブログを書く時ってなかなか思い通りにならない事、ありませんか？
「文字が太くならない…」、「色の変え方が分からない」、「ここにアンダーラインを引きたいけどどうしたら…」などなど…
近くにHTMLに詳しい人がいればすぐに解決しますが、自分で解決できた方がお手軽なうえに執筆に時間を掛ける事ができると思います。
せっかくブログを書いているのであれば、カンタンなHTMLを覚えて、よりリッチなブログを書けるようになりましょう！

HTML基礎

そもそもHTMLって何？

HTML(HyperText Markup Language)とは、ウェブサイトを表示するむために開発・設計された言語です。
HTMLには主にWebページの骨組みを作る役割があります。例えばここは一まとまりの段落、ここは見出し、ここは表データ…など。
HTMLの名前に含まれる【Mark Up】、印をつけると考えたら理解しやすいかもしれません。

HTMLでWebページを書くことをコーディングといいますが、コーティングをする上でいくつか簡単な法則があります。
HTMLにはタグという決められた文言でコーディングしていきます。タグには様々な種類がありますが、必ず小なり「<」と大なり「>」で囲まれた文字で構成されます。
また、一部例外を除いて多くのタグは「< >」で始まり、「</>」で終わります。

インライン要素とブロック要素

HTMLで定義されているタグは全てインライン要素とブロック要素に二分されます。
ブロック要素は主に大まかな区画を分けるための箱、インライン要素はブロック要素の中で文書や画像を構成する為の要素です。
…と言われてもなんのこっちゃですね。

上の図は非常にベーシックなホームページの骨組みですが、赤枠の部分はブロック要素によって構成されます。
ブロック要素は文書や画像、表などのインライン要素をひとまとめにして配置するための箱です。基本的には前後に改行が入ります。
また、ブロック要素は要素内に更に別のブロック要素を入れ子にする事ができます。
一方、インライン要素には前後に改行は挿入されず、インライン要素内に別のインライン要素は入れることができません。
また、ブロック要素をインライン要素で囲むことはできません。

ブロック属性のタグ

ここからはお待ちかね！実際に使用するタグを紹介していきます。
HTMLタグは非常に種類が多いので、ここでは使用頻度の高いもののみ紹介するので、もし気になかった方はGoogle検索してみると良いかもしれません！

pタグ

pタグは段落を構成する為のタグです。これが無ければ何も始まりません。
HTMLではタグで囲まずとも文字を表示する事ができますが、pタグで囲むことでpタグとpタグの間にスペースが設けられ、自動的に見やすい文書が構成できます！

ul・liタグ

ul・liタグは主に箇条書きをする際に使用します。
ulタグは箇条書きリストをひとまとめにするために、後述のliタグ群を囲みます。
liタグは箇条書きの1項目を作成する際に使用します。

• 箇条書き1
• 箇条書き2
• 箇条書き3
• 箇条書き4
• 箇条書き5

h1-h6タグ

h1-h6までの複数のタグは文章中の見出しに使用されます。
数字が小さいタグから大見出しとなるので、h1等はSEO効果も大きいと言われていましたが、
SEO屋さんが乱用した為、現在はそこまで重要視されなくなりました。
しかし、デザイン上では非常に重要になるので、積極的に使いましょう。

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

divタグ

divタグは最もよく知られたブロック属性のタグです。
このタグ自体は特に効果 がありませんが、様々な要素を一つのブロックとしてまとめる事ができます。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、
ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、
地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
いまこの暗い巨きな石の建物のなかで考えていると、
みんなむかし風のなつかしい青い幻燈のように思われます。

インライン要素のタグ

brタグ

brタグは文章中で改行をしたい時に使用します。それ以上もそれ以下もありません！
そして早速例外ですが、このタグは他のタグのように両端をタグで囲む必要がありません！！

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、
ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、
地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
いまこの暗い巨きな石の建物のなかで考えていると、
みんなむかし風のなつかしい青い幻燈のように思われます。

aタグ

aタグは要素に対してジャンプリンクを設定することができます。
この要素はインライン要素としては異例で、ブロック要素をインライン要素で囲むことができます。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、
ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、
地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
いまこの暗い巨きな石の建物のなかで考えていると、
みんなむかし風のなつかしい青い幻燈のように思われます。

imgタグ

imgタグは画像を挿入する為に使用されるタグです。ブログをリッチにしていく上で非常に重要なタグです！
このタグは前述のbrタグと同様、両端をタグで囲まずとも動作します。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、
ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、
地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
いまこの暗い巨きな石の建物のなかで考えていると、
みんなむかし風のなつかしい青い幻燈のように思われます。

bタグ

bタグは文字を太字にするためのタグです。

HTML入門

iタグ

iタグは文字を斜体にするためのタグです。

HTML入門

strikeタグ

strikeタグは文字に打消し線を追加するためのタグです。

HTML入門

非タグ

コメントタグ

こちらは特殊なタグで、HTMLに書き込んでも実際のページには表示されません。
コーディング中の自分用のメモとして使用できます。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られた モリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、
ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、
地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
いまこの暗い巨きな石の建物のなかで考えていると、
みんなむかし風のなつかしい青い幻燈のように思われます。

まとめ

以上、いかがだったでしょうか？
内容の都合上、記載していないタグもありますが、今回紹介したタグが頻繁に使われるタグの全てです。
「文字色の変え方知りたかったんだけど…」「背景に画像入れたかった…」「マーカーの引き方は？」etc…
そんな悩みを持ちながら読んで頂いた方々！ごめんなさい！HTMLの知識だけではその願いは実現しません…
冒頭で紹介した通り、HTMLはあくまで骨組みの為の言語です。ただの骨組みを彩るのがCSSという言語になります。
次回！CSS入門編を紹介するので是非！こちらの記事と併せてご覧ください！！