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

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

この記事のまとめ

文章を書くのは得意だけど技術的なことはよくわからない…

ワードプレスでブログを始めたいけどHTMLとかCSSとかよくわからない…

そんなブログ初心者が最低限知っておくべきHTMLCSSコード5つの基本について解説します

SEOを最適化する方法も紹介!

ナラ

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

ココ

HTMLCSSって初心者ブロガーが最初に直面する悩みの一つだよね

でも長期的にブログを運営していくなら遅かれ早かれHTMLCSSの勉強は必須よ

ナラ

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

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

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

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

※タップして読みたい場所までジャンプする

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

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

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

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

HTMLとは

  • 記事のテキストに“見出し”、“段落”、“箇条書き”、“表(テーブル)”といった意味を与えるコード

CSSとは

  • 記事のテキストに“色”、“サイズ”、“フォント”、“テキストと画像との配置のバランス”といったデザインを与えるコード

ココ

テキストに意味を与えるのがHTMLで、デザインを与えるのがCSS、ザックリ言うとそんな感じ?

絵で例えると、“人物”や“建物”の輪郭や構図を決める下書きがHTMLで、その上から色塗りしていくことがCSSってところかしらね

ナラ

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

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

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

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

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

ココ

じゃあそもそもブログ初心者がHTMLCSSを学ぶ意味ってあるの?

HTML・CSSの知識がほんの少しあるかないかでその後のブログライフが大きく変わるわよ

ナラ

ブロガーがHTML・CSSの基礎を理解することで以下のメリットがあります。

  1. ブログのデザインを自分好みにカスタマイズできるようになる
  2. ブロガーさんが公開しているカスタマイズコードをコピペして使えるようになる
  3. HTML・CSSの観点からブログのSEO対策を施すことが出来る

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

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

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

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

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

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

ココ

オシャレなデザインのHTMLCSSコードを公開しているブロガーさんってたくさんいるよね

それらをコピペするだけでもブログカスタマイズの幅は一気に広がるわよ

ナラ

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

 

ブログカスタマイズ用コードを公開しているオススメブログ

これらを参照すれば、自分で1からコードを書く必要はありません。

ほんの少しHTML・CSSの基礎知識があれば、コピペするだけでブログカスタマイズが簡単にできます。

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

HTMLCSSの知識はSEOの最適化にも重要です。

検索エンジンはブログのHTML・CSSコードを読み取ってブログの内容を理解し、評価しています。

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

テキストが正しく定義付けられているか?
ユーザビリティに配慮されたデザインがされているか?

HTMLCSSを正しく使うことでSEOは最適化されるのです

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

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

どのような点に注意してHTMLCSSをチェックすればいいのか?
ブログ初心者が見落としがちなHTML・CSSの誤った使い方とは
どの部分か

ここでは具体的な例を用いてブロガーが最低限知っておくべきHTMLCSSの使い方・注意点を解説します。

ココ

間違った使い方をしていた場合でもブログはリライトが出来るから安心だよ

詳しい解説については各パートでリンクしてある関連記事をチェックしてね

ナラ

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

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

テキストを太字にする

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

ココ

エディタを使って太字にすると通常、そのテキストに強調<strong>タグが付与されるよ

強調<strong>タグを使いすぎると「本当に重要なテキスト」がわからなくなりSEO的に良くないわよ

ナラ

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

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

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

▼次の関連記事でわかること

  • 太字<b>タグと強調<strong>タグの意味の違い
  • 太字<b>タグと強調<strong>タグの使い方実例
  • 1記事あたりの強調<strong>タグの使用目安
【注意】HTMLタグとタグの違いと使い分け【SEO】【注意】HTMLのbタグとstrongタグ違いと使い分け【SEO】

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

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

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

ココ

これはワードプレスの自動補正機能が余分な改行を消去してしまうことで発生する現象だね

この問題もHTML・CSSの基礎知識があればプラグインを使わなくても解決できるわよ

ナラ

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

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

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

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

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

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

▼次の関連記事でわかること

  • ブログにおける改行の重要性
  • ワードプレスブログの改行できない問題をmarginで解決する具体的な方法
  • 他の解決法と比較したmarginを使った解決のメリット
【SEO】ワードプレスブログが改行できない問題のオススメ解決方法【SEO】ワードプレスブログが改行できない問題のオススメ解決方法

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

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

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

ココ

読まれないブログの多くに共通しているのは見出しタグ<h1><h2><h3>の階層構造が崩れているケースだよ

階層構造を整理すると「どこに何の情報があるか?」がわかるからユーザビリティの向上に直結するの

ナラ

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

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

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

そんな箇条書きを、

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

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

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

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

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

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

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

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

格安SIM料金比較
格安SIM 回線 料金 通信容量
Aモバイル au 3000円/月 6GB
B通信 docomo 1980円/月 3GB
Cネット softbank 2500円/月 4GB

ワードプレスブログの表(テーブル)

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

▼次の関連記事でわかること

  • テーブルタグの構成と正しい使い方
  • 見出し<th>とキャプション<caption>の役割と重要性
  • 具体的な見出し<th>とキャプション<caption>の設定方法
【図解】ワードプレスで表(テーブル)をSEO最適化にする2つの設定【図解】ワードプレスの表(テーブル)|2つの重要な設定とは?

ブログ初心者にオススメのHTMLCSS学習方法

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

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

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

ココ

文系出身で知識ゼロの自分にも簡単にできる学習方法が知りたいな

今なら、わざわざプログラミングスクールに通わなくても自宅で簡単にHTMLCSSの基礎を学ぶことができるわよ

ナラ

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

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

ステップ1
プロゲートを使って無料で学ぶ
 
ステップ2
UdemyWeb講座を使って本格的に学ぶ
 
ステップ3
学んだことを自分のブログで実践してみる
 

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

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

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

HTMLCSS以外にも、JavaScriptRubyPHPなど様々なプログラミング言語を学ぶことができます

ココ

無料でそれだけ学べるならプロゲートだけで十分なんじゃないの?

残念ながら無料で学べるのは本当に基礎中の基礎の部分だけなのよ

ナラ

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

月額自体は980/月と安いのですが、時間が不定期なサラリーマンや飽き性の人には不向きです。

ちなみに私は勉強しないまま半年くらい課金し続けてしまいました…

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

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

プロゲートでのHTMLCSS学習ポイント

  • 無料講座分だけ割り切って学習する
  • HTMLCSSに対する恐怖心をなくす

プロゲートを見てみる

UdemyWeb講座を使って本格的に学ぶ

HTMLCSSの基礎を身に付けるならUdemyWeb講座がオススメです。

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

ココ

Udemyユーデミーの講座は買いきりだから自分のペースで勉強できるんだね

課金される心配もないからお金がない学生や、時間が不規則なサラリーマンや主婦の方にもオススメよ

ナラ

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

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

UdemyユーデミーでのHTMLCSS学習ポイント

  • HTMLCSSの基礎講座を買いきりで最後までやりきることができる
  • 自分でテキストエディタにコードを書き込みながら実践的な知識を身に付けられる
  • セールを使えば1000円代で購入することが可能

 

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

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

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

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

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

ココ

Udemyユーデミーの講座を受けたらブログのテキスト編集やCSSカスタマイズが怖くなくなったよ

ブログは自分のメディアだから誰かに許可を取る必要もないし、思い通りにカスタマイズできるわよ

ナラ

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

【ブログ初心者がHTMLCSSを覚えておくメリット】でも紹介したように、カスタマイズコードは無料で公開されています。

それらの中から気に入ったものをコピペするだけでもいいですし、それを自分好みにコードを書き換えるだけでも質の高いアウトプットになります。

ブログを使ったHTMLCSS学習ポイント

  • 自分のメディアを自分好みにカスタマイズするだけで自然と知識が身につく
  • 無料公開されているコードをコピペ&編集するだけでも質の高いアウトプットになる

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


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

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

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

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

ココ

ブログという具体的な目標があるからこそ「何を学ぶべきか」が明確になるよね

あとは自宅でお金もかけず簡単に学習する「手段」さえ知っていれば前に踏み出せるはずよ

ナラ

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

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA