【HTML・CSS】ブログ初心者が最低限知っておくべき5つの基本とは？

HTML・CSSの設定はブログの見た目だけでなくSEO対策とも密接に関わっています。

ブログを収益化させたいと考えているなら、なるべく早く苦手意識を克服する必要があります。

そこで、ブログ初心者が最低限知っておくべき5つのHTML・CSS基本コードについて要点をまとめました。

HTMLとかCSSって聞いただけで拒否反応が出てしまう…
ワードプレスでブログを書いているけどテキストの編集はしたことない…

そんな悩めるブログ初心者にオススメのHTML・CSS勉強方法についても記事の最後に紹介します。

ブログにおけるHTMLとは？CSSとは？

まず、そもそもHTMLとかCSSとかってなんのこと？というところから説明します。

▼ザックリ説明するとこんな感じ

このようにHTML・CSSにはそれぞれ異なる役割があります。

ブログ初心者がHTML・CSSを学習するメリット

HTMLやCSSはブログを書く上で必須のスキルではありません。

無料ブログでも記事は十分書けますし、ワードプレスの有料テーマを使えばオシャレなデザインテンプレートも使えます。

大きく分けるとブログ初心者がHTML・CSSの基礎を理解するメリットは以下の3つです。

ブログのデザインを自分好みにカスタマイズできるようになる

先ず、HTML・CSSを学ぶ一番のメリットはブログデザインを自分好みにカスタマイズできるようになることです。

ワードプレスの有料テーマでもある程度のオシャレなデザインは可能です。

一方で、JIN、SANGO、Cocoonなどの多くのブロガーが使っているテーマはデザインが似てしまい、差別化できない傾向があります。

本当の意味でのブログに個性を出すためにはHTML・CSSのカスタマイズは避けては通れません。

ブロガーさんが公開しているカスタマイズコードをコピペして使えるようになる

カスタマイズ用HTML・CSSコードを公開しているブログといえば、オススメは以下この3つです。

実はオシャレなブログデザインはこれらのコードをコピペするだけで十分作れます。

だからこそ基礎知識レベルでもHTML・CSSを学ぶメリットは大いに有るのです。

HTML・CSSの観点からSEO対策を施すことが出来る

HTMLやCSSの知識はSEOの最適化にも重要です。

検索エンジンはブログを評価する際、HTML・CSSコードが正しく書かれているかを1つの基準にしています。

ブログで間違ったHTML・CSSの使い方をしているとSEOの評価がマイナスになる原因にもなりかねません。

テキストが正しく定義付けられているか？

ユーザビリティに配慮されたデザインがされているか？

これらを意識してHTML・CSSを正しく使うことでSEOは最適化されるのです。

ブログ初心者が知っておくべき5つのHTML・CSS基本ルール

• どのような点に注意してHTML・CSSをチェックすればいいのか？
• ブログ初心者がやりがちなHTML・CSSの誤った使い方とは？

ここでは具体的な例を用いてブログ初心者が最低限知っておくべきHTML・CSSの注意点を解説します。

太字<b>タグと強調<strong>タグの使い分け

ブログのテキストを太字にしたいとき、いつもエディタの

ココを使ってしまいませんか？

そんなとき重要なのは強調<strong>タグと太字<b>タグの使い分けです。

太字<b>タグには「意味を強調する」という役割がないので、シンプルにテキストを装飾したいときに使えます。

両者の違いを理解し、適切に使い分けてSEOの最適化をはかる方法は別の記事にまとめました。

【注意】HTMLのbタグとstrongタグ違いと使い分け【SEO】

ワードプレスブログの改行できない問題の解決法

改行したはずなのに投稿したら改行部分が消えていた…

ワードプレスでブログを書いていてそんな経験をしたことがありませんか？

この「ワードプレスブログの改行できない問題」はmarginで解決するのがオススメです。

marginとは余白を作るときのコードで、これを改行（余白）を作りたいテキストに設定をしてあげるだけで、

↑こんな風に行の上下に必要な余白を↓

自由に作ってあげることができます。

他の解決法ではなくなぜmarginを使うべきなのか？

詳しい解説は別の記事にまとめました。

【SEO】ワードプレスブログが改行できない問題のオススメ解決方法

見出しタグ<h1><h2><h3>…の使い方と注意点

もしブログを書けども書けども検索順位が上がらないとしたら、見出しタグの使い方が間違っている可能性があります。

そのくらい、見出しタグの使い方はブロガーが知るべきSEO対策のなかでも最も重要なものです。

▼見出しの階層構造についてはサルワカさんの記事で非常にわかりやすく解説されています

箇条書き<li>タグの使い方と注意点

記事の中で大事なポイント抽出するときに便利なのが箇条書きです。

そんな箇条書きを、

・中点を使って
・こんな風に
・手作りでやってしまうことがありませんか？

これでは検索エンジンから正しく“箇条書き”と認識されない問題があります。

リスト<li>タグを正しく使えば、ユーザーからも検索エンジンからもその部分が＜重要＞であることを認識させることが出来ます。

▼箇条書き<li>タグの使い方についてもサルワカさんのコチラの記事が非常に分かりやすいです

表（テーブル）<th><tr><td>タグのSEOを最適化するポイント

表（テーブル）タグもまた、ブログの中で情報を整理したいときに便利な機能です。

ブログで作った表（テーブル）のSEO対策に必須なのが見出し<th>とキャプション<caption>の設定です。

見出し<th>とキャプション<caption>の役割を図で示すと、このようになります。

キャプションと見出しの設定が出来ていないブログは損するのでご注意ください。

【図解】ワードプレスの表(テーブル)｜2つの重要な設定とは？

ブログ初心者にオススメのHTML・CSS学習方法

HTML・CSSの知識なんかなくてもブログは書けます。

ただし、充実したブログライフを長く楽しく続けたいなら最低限のHTML・CSSの知識は不可欠です。

私自身、大学は文系出身で、ブログを書くまでは「HTML？なにそれ美味しいの？」状態でした（笑）

そんな私が実践したブログ初心者にオススメのHTML・CSS学習方法は以下の3ステップです。

それぞれのステップについて、実体験に基づいて詳しく解説します。

プロゲートを使って無料で学ぶ

プロゲートはオンラインでプログラミング学習サービスを提供しているサイトです。

HTML・CSS以外にも、JavaScript、Ruby、PHPなど様々なプログラミング言語を学ぶことができます。

プロゲートの様々な学習コンテンツを利用するには月額課金が必要になります。

オススメは「プロゲートの無料講座だけとりあえずやってみる」と割り切ってしまうことです。

少なくとも「HTML・CSSが怖いものではなくなる」まで学べます。

プロゲートを見てみる

UdemyのWeb講座を使って本格的に学ぶ

HTML・CSSの基礎を身に付けるならUdemyのWeb講座がオススメです。

動画を見ながら自分でテキストエディタにコードを打ち込んでいくので、より実践的な知識が身につきます。

私が実際に受けた講座はコチラです。

HTML5+CSS3 手を動かしてマスターする WEBデザイン プログラミング動画講座

私はセール中に購入したので10.5時間にも及ぶ講座がわずか1200円で購入できちゃいました！

▼Udemy（ユーデミー）のHTML・CSS講座の評判と実体験に基づいた感想をまとめた記事はコチラ

【実体験】Udemyの評判・口コミは？HTML講座を受けてみた感想

学んだことを自分のブログで実践してみる

どんなジャンルの知識でも、アウトプットする機会があると学習の質は飛躍的に向上します。

ブログは覚えたてのHTML・CSS知識をアウトプットする理想的な環境といっても過言ではあません。

ブログのHTML・CSSカスタマイズは1から全て自分でやる必要はありません。

好きなブロガーさんのデザインを真似て、自分好みにカスタマイズしましょう。

\ 定期的に実施中 /
Udemyのセールを確認 

ブログ初心者が知っておくべきHTML・CSSまとめ

文章を書くのは得意だけど技術的なことはさっぱりわからない…
文系出身の自分にはHTML・CSSなんて暗号にしか見えない…

オンラインでHTML・CSSほんの少し勉強してみると、これらが全て思い込みであったことに気付かされます。

私自身、HTML・CSSの基礎を知っただけでブログに対する抵抗感がなくなり趣味としての楽しみが増しました。

HTML・CSSカスタマイズの知識は過去に書いた記事をリライトする際にも役立ちます。

そろそろリライトしたいな…というタイミングに差し掛かっている人は早めに実行しましょう！

Udemy（ユーデミー）では人気講座を1000円代で購入できるお得なセールを定期的に実施しています。

\ 定期的に実施中 /
Udemyのセールを確認 

▼Udemy（ユーデミー）のHTML・CSS講座の評判と実体験に基づいた感想をまとめた記事はコチラ

【実体験】Udemyの評判・口コミは？HTML講座を受けてみた感想

ブログ初心者がやりがちな失敗

ブログ初心者はこれらの読者目線を見落としがちです。

私の実体験から、ブログ初心者がやりがちな失敗集をまとめました。

同じミスを自分もしていないか？よかったら参考にしてみてください。