こんばんは!
この記事を書き出したのが夜中で、夜食でもあればなーとお腹を空かせております。
ちなみに最近はブルーベリーとヨーグルトをこの時間によく食べています。ノイエルです。

本日は、これからブログを書き始めたい人に向けて、文字装飾とか整形できれいに記事を見せるためだけに必要な最低限のHTMLの知識を紹介していきたいと思います!

ブログのブラッシュアップとかHTML勉強しようかな程度の考えの人にも、全然読んでもらえる感じで書くつもりです!では、ゴー!

今日の目的

ブログとかの記事管理画面でHTML使えますって書いてあるけど、具体的に使い方が分からない。。。を分かるようにします

流れ

  • HTMLとは?
  • HTMLで文章を書く

HTMLとは?

HTMLとは簡単にいうと
「webページをつくるための言語」です。
言語といってもタグを使うだけです。まぁこのまま読んでいくと納得できるかと思いますので、とりあえず進んでくれたらありがたいです。

ちなみにHTMLを傘でたとえると骨の部分になります。

脱線:HTMLについて詳しくはこちら

その中でも今回は文字の装飾だったり、綺麗に整形して表示するための簡単に覚えられて、カッコよく使える技術のお話です!

では、実際にHTMLで文章を書いてみましょう!
ちなみに記事内にそのままHTMLを書くとタグが読み込まれた形で表示されてしまうため、コードを読み込まれないような感じで
以下に文章のサンプルを書きました。

文字を特定のタグ(<タグ>~)で囲っていますね!

コレを実際に記事の中に書くとこのように表示されます!

–ここからサンプル–

h1タグ

本文をpタグの中に書きます

h2タグ

本文をpタグの中に書きます

h3タグ

本文をpタグの中に書きます

h4タグ

本文をpタグの中に書きます

–サンプルここまで–

どうでしょうか!?
タグの種類によって文字の大きさが変わったり、装飾がつきましたね!

今回はここで使用したhタグとpタグについて紹介します!
ちなみに「えいちたぐ」「ぴーたぐ」とか呼んでおけば通じます!

まず文字や文章があります。
その文字をタグで囲うと

あら不思議!装飾が施されるようになっているのです!

このタグこそがHTMLです!今回はブログの装飾用なのでそれ以上の事には触れませんが、最低限このことを知っていると他の理解もご自身でしていけるのではないかと思うほど簡単です!

ちなみにここで使用したhタグは、英語で見出し(headline)の頭文字hからきており、1~6くらいまで使用できます!

いちばん大きな見出しが1でその次は2と続きますので、若い番号ほど大きな見出しになります。なのでh2とかh3は「小見出し」という認識でよいかもしれません!

つづいてpタグですが、これは文章の段落、ひとまとまりの文章に使われるタグになっています。pはparagraphから来ていますね!

見出しの後に文章が基本ですので、今回はそのようなこともあってセットで紹介させていただきました!

そうやってさっきのHTMLを見てみると

見出しと文章が交互に書かれていることが間単に分かりますね!

このくらいのことなら簡単に覚えることが出来ますのでブログ書くためにはちょうど良いのではないでしょうか!?

今回はこれ以上にお話することもないので以上になります!

ご自身のブログ環境で試す場合は、さきほどのHTMLをコピペしてみてください!それぞれのブログでの表示がみれると思います!

ただし、ひとつだけ注意点ですが、h1タグは基本的に1ページで1つだけ使用することが原則としてあります!それがブログのタイトル部分で使われているので、実際に記事の中での見出しはh2、小見出しh3といった感じで使うのがベストでしょう!

ちなみにhタグに施されていた装飾ですが、実はあれは事前にタグをCSSにて装飾しています!なので素のタグでは文字の大きさしか変化はないと思いますが、今回は分かりやすいように装飾しておきました!

これには、HTMLに加えてCSSの知識も必要になりますので、今回は紹介まで。
とりあえずは、タグについての理解が進んでくれたら嬉しいです!

読んでいただいて、ありがとうございました!

勘の良い人はCSSの装飾は、タグを使い回せば共通の装飾が施せることやその他いろんな利点や面白さに気づいたのではないでしょうか?CSSが傘に例えると布にあたる部分なんですね。

機会があればそのCSSについてもお話しましょう!
ではまた!