【初心者向け】ブログをやるなら知っておくべきHTMLの基礎知識

HTMLの基礎知識
Thanks to our advertisers


ここでは、これからブログを書き始める初心者の人が、最初に知っておくべきHTMLの基礎知識を紹介していきます。

おそらく今はHTMLについて「なにそれ美味しいの?(゚Д゚)」状態かと思いますが、僕も最初はそんなから始めて、今ではこのように自由にサイトを運営できるようになっています。

僕はもともとWebの専門学校で勉強してきたということもあるんですが、ブログをやるためだったらHTMLの知識ってそこまで必要ないんですよ。

それなのに「ブログをやるにはHTMLを覚えなきゃ( ;゚д゚))))アワワ」って勘違いしている人が未だにいるんです。これはすごくもったいない!

なので、僕がここで断言します!

宮川 輝
ブログは誰にでも簡単にできるんだぞぉぉぉ!
Thanks to our advertisers

ブログはHTMLが使いこなせなくても記事が書けるの?

まず最初に、ブログをやるためだったらHTMLが使いこなせなくても記事が書けます。

マジです。キーボードでタイピングさえれできれば、誰にでもブログ記事を作ることができます。

それがはなぜかというと、ブログを書くためにはゼロからHTMLを打ち込む必要がないからなんですね。

僕はWebデザインの専門学校でHTMLを勉強してきましたが、今はそのうちの1割ほどしか使ってません。

だからといって全く使えないのも困りものです。例えるなら、サッカーでボールの蹴り方を知らないまま試合に出るような感覚です。ボールも蹴れないままじゃ間違いなくサッカーはプレーできませんよね。

じゃあブログをやるためにHTMLの何を知っておくべきかというと、基礎知識だけで十分です。

なので、「HTMLとは何ですか?」と聞かれたときに、頭のなかで説明できるくらいの知識だけは最低限身につけておきましょう。

ブログはHTMLが使えなくても記事が書ける理由。

ブログはHTMLが使えなくても記事が書けるようになってます。これを覚えておくと無駄に勉強をする時間が省けますから、まず最初に頭に入れておいてください。

ではなぜHTMLが使えなくてもブログ記事が書けるのか。

それは、もっと高度なプログラム技術を持った人たちが、自動でHTMLにしてくれるシステムを作ってくれいるからなんですね。

僕らはテキストだけを打ち込めば、あとは勝手にHTMLに変換してくれます。

下の画像は、僕が実際にブログを書くときに使っている画面です。見てわかるように、HTMLを打ち込む場所はほとんどありません。

wordpressの管理画面

本来だったら、これらは<h1></h1>タグや<title></title>タグ、<meta>タグや<p></p>タグだので囲ってあげなくちゃいけないんですが、僕は決められた場所にテキストを入れてるだけです。

HTMLを入力するときでも、自動的にHTMLを生成してくれるボタンも用意されています。

ほんと、これを開発した人は素晴らしいですよ。ありがとう!って感じです。

ただしブログサービスに限られる

wordpress

ただし、これらは『はてなブログ』や『アメブロ』、『ライブドアブログ』や『WordPress』といったブログサービスで作った場合にのみに限られています。

おそらく、みなさんは上記のどれかのブログサービスを利用してブログを運営していくでしょうから、HTMLを全て覚える必要がありません。

もしこういったブログサービス以外でブログを運営しようと思ったら、こんなにもHTMLを打ち込まないといけないんです。

お見せしましょう。

これが本来ブログを運営するために必要なHTMLの全てです!

本来のHTML
宮川 輝
どひゃぁー!やってらんねー!

って感じですわなこれ!

上の画像にはPHPという別の言語も入っているんですが、これがブログサービスを使えば、先ほどお見せしたようなシンプルな画面だけで記事が書けるようになるんですね。

ブログで使うタグの種類も少ない

さらにさらに、ブログで使うHTMLのタグ(意味は後ほど説明)の種類もかなり少ないです。

HTMLのタグは全部で約200種類ほどありますが、ブログで必要なタグの種類は7〜10個程度です。

ブログでよく使うタグの種類についてはこちらで紹介しています。

【まずはこの5つ!】ブログで最低限必要になるHTMLのタグと意味

ブログで使うHTMLの基礎知識。

ハイパーテキストマークアップランゲージといいます。

それではいよいよ、ブログで使うHTMLの基礎知識を紹介していきます。

正式名称なんてどうでもいいんですが、とりあえず基礎ということでご紹介していきます。

HTMLとは、HyperTextMarkupLauguageの頭文字をとったもので、ウェブページを作るために開発された言語です。

「はいぱー・てきすと・まーくあっぷ・らんげーじ」なんて長ったらしいですよね。だから通常は「えい・ちてぃー・えむ・える」と簡略化されて呼ばれています。

今あなたが見ているこのページも、普段検索しているサイトも、全てこのHTMLから成り立っています。

なんでHTMLで書く必要があるの?

おそらく初めてプログラムを触る人からすると、「そもそも、なんでブログをHTMLで書く必要があるの?」と疑問に思われるかもしれません。

そうですよね。だってパソコンに打ち込んだ文章をわざわざHTMLにするなんて、ただ手間がかかるだけのように感じますよね。

それでもHTMLで書かなければいけない理由は、パソコンに人間の使う言葉の意味を認識させるためです。

それはどういうことなのか。

その理由を説明していくために、HTMLを使わずに書いた文章と、HTMLを使って書いた文章にどういった違いが出るのかを比べていきます。

HTMLを使わずに書いた文章

まずはHTMLを使わずに文章を書いた場合です。

HTMLを使わないとサイト上ではこのように表示されます。

美味しいたまごかけごはんの作り方。今日は宮川 輝流、美味しいたまごかけごはんの作り方をご紹介するぜ!ごはんをよそう。新鮮な卵を用意する。卵を割ってご飯に入れる。醤油を入れてかき混ぜる。これで完成…と思いきや、ここでワンポイント!なんと味の素をいれるんだぜぇ!これでうまいこと間違いなしだぜベイベー!

どうでしょう。とてもじゃないけれど、見にくくて読んでいられませんよね。

このように、HTMLを使わないとただの文字の羅列になってしまいます。

HTMLは本のように意味分けする

本を読んでいるときを想像して欲しいのですが、見出しがあったり画像があったりと、それぞれのテキストが意味分けされていますよね。

Webサイトでもこれと同じように、パソコンに対して「これは見出しだよ!【<h>タグ】」とか「これは文章だよ!【<p>タグ】」といったように、文章に意味分けしていくのがHTMLの役割になっています。

HTMLを使った文章

では先ほどの文章に、今度はHTMLで意味分け(マークアップ)をしてみました。

美味しいたまごかけごはんの作り方。

今日は宮川 輝流、美味しいたまごかけごはんの作り方をご紹介するぜ!

    1. ごはんをよそう。
    2. 新鮮な卵を用意する。
    3. 卵を割ってご飯に入れる。
    4. 醤油を入れてかき混ぜる。

これで完成…と思いきや、ここでワンポイント!

なんと味の素をいれるんだぜぇ!

これでうまいこと間違いなしだぜベイベー!

内容は先ほどと全く変わらないんですが、これで非常に見やすくなりましたよね。

このようにHTMLで書くと、テキストにどんな意味があるのがパソコンに認識させることができるので、読者にとっても検索エンジン(SEO)にとってもいいブログになります。

HTMLは見た目を変えるものではない

いま紹介したやり方では見た目が変わっていましたが、HTMLはあくまで文章に意味づけするためのものであって、見た目を変えるものではないということを覚えておきましょう。
見た目を変えるときはCSSという別の言語が必要になります。
初心者が2つを同時にやると混乱してしまうので、まずはHTMLから覚えていくのがオススメです。

実際に使われているHTMLコードを見てみよう

次に、実際に使われているHTMLコードを見て見ましょう。

みなさんが普段見ているどんなサイトにも必ずHTMLが使われていて、それを見ることができます。

今回はGoogleさんのトップページのHTMLコードを見てみましょう。グーグルさん、失礼しまーっす!

グーグルのトップページのスクリーンショット

 

まず画面のどこかで右クリックをします。

右クリックしたら、メニューの中にある「ページのソースを表示」を左クリックします。

グーグルのトップページで右クリックしてページのソースを表示

 

すると新しいタブが開き、HTMLが表示されます。

グーグルトップページのコード

ここに書かれているものがHTMLです。

…いまブラウザを閉じようとしたあなた!安心してください。

「うわ難しそう…」と思われたかもしれませんが、ブログを運営するうえで必要なのはここにあるうちの5%にも満たないです。

このやり方でサイトに使われているHTMLを確認することができるということを覚えておきましょう。

HTMLのタグの意味と使い方を理解しよう。

HTMLのタグについて

続いて重要なポイントである、HTMLのタグの意味と使い方について説明していきます。

上の画像の青く囲まれている部分がタグです。HTMLは全てこのタグから構成されています。

タグの種類を使い分けることによって、その文章がどんな役割をしているのかをパソコンに識別させることができます。

まず最初に覚えるべきタグはヘッダタグとボディタグです。

ブログでこのタグを打ち込むことはないものの、HTMLを構成している非常に重要なタグですから、その役割を覚えておきましょう。

【ヘッダ部分】 ヘッダ部分は<head></head>で囲まれた範囲で、その文書の文字コード・タイトル・作成者など、文書に関するヘッダ情報を示します。ヘッダ情報のほとんどは目に見えるかたちでブラウザ上には表示されませんが、それがどのような文書かを知らせる大切な情報です。

【ボディ部分】
ボディ部分は<body></body>で囲まれた範囲で、その文書の本体になります。この部分に書かれた内容が、ブラウザ上に表示されます。
出典:http://www.htmq.com/htmlkihon/004.shtml

スクリプトなどサイト上から見えないものはヘッドタグ内に入り、ブログ記事の内容はボディタグの中へ入ります。

スクリプトなど別のファイルを読み込むときにはヘッド部分などに書くこともありますが、基本的にブログの内容は全てボディタグの中へ入ります。

開始タグと終了タグ

開始タグと終了タグについて

次にタグの使い方についてです。

タグにはタグの始まり(開始タグ)と、タグの終わり(終了タグ)の2種類があります。

このタグを使い分けることによって、見出しなのか、文章なのか、引用文なのかをパソコンに認識させてあげます。

タグの終わりを付け忘れると、パソコンは終わりを見つけるまで全てタグの中身として扱ってしまいますから、終了タグはつけ忘れないようにしましょう。

終了タグがないパターン
一部例外として、終了タグのない特殊なタグもあります。
ブログでよく使うのはimgタグというもので、これには終了タグがありません。

HTML基礎知識のまとめ。

最後に、この記事で説明したことのまとめです。

  • ブログをやるためにはHTMLの基礎知識だけ覚えていればいい。
  • HTMLとは、文章に意味を持たせる役割がある。
  • HTMLを構成するのはヘッダ部分とボディ部分の2つに分けられ、ブログ記事の内容は全てボディタグ内に入る。
  • タグには開始タグと終了タグの2種類あり、一部例外もある。

この4つを覚えられたら、ブログを畝位するために必要なHTMLの基礎は身につけたも同然です。

あとは状況に合わせてタグを使い分けていくだけですから、ブログを運営するときに活用してください。

Thanks to our advertisers