\ WordPressテーマ1470サイトの利用例を紹介 (2021/9/24更新)/

HTMLは覚えたほうがいいのか?

HTMLは覚えたほうがいいのか?
まみ先生

ホームページは何で書かれているか知っていますか?

あかり

はーい!
ホームページはHTMLっていうもので書かれていまーす!

まみ先生

はい、そうですね。
では、HTMLはもう覚えましたか?

あかり

知りませーん!
だって、「HTMLなんて知らなくても…」って広告に出てるもーん!

ホームページは「HTML」っていうもので書かれているということは自分でホームページを作ろうと思っている方なら知っていると思います。しかし「HTML」を知っているか?というとそうではない方が多いのも事実です。しかし、やはりホームページ作成の基本はHTMLです。

HTMLを理解しているとたとえHTMLを知らなくても投稿できるブログであれ、WordPressであれイザというときに役に立ちます。投稿の表現の幅が広がります。ここではこれだけは覚えておきたいHTMLを紹介します。

目次

絶対に覚えておいた方が良いHTMLタグ

見出しタグ(h1,h2,h3,h4,h5,h6)

通常の作文や論文、レポートを書く際には文書のタイトルをつけたり、文書の内容ごとに見出しを付けてその文書を読みやすく、理解しやすくします。これはホームページの文章でも同じです。

ペンで紙に書く文書では見出しは行を独立させたり、文字の色を変えたり、大きめの文字で書いたりして見出しと分かるようにします。ホームページ作成の場合には「見出しのタグ」を使用します。

「見出しのタグ」を使わなくてもHTMLやCSSで文字のサイズを変えたり、改行したりして見出しのように視覚的に見せることは可能です。しかしSEOの観点からも見出しには「見出しのタグ」を使うことが必要です。

「見出しのタグ」は「hタグ」ともいわれ「h1」「h2」「h3」「h4」「h5」「h6」の6段階で表すことが出来ます。「h1」は通常ページのタイトルとなりそのページのキーワードを含んでいたりします。続いて「h2」「h3」…と全部で6段階あります。

「見出しタグ」の記述方法

<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>
<h6>h6の見出し</h6>

このように記述すると以下の表示例のように表示されます。

見出し

段落のタグ(p)

通常の文章でも「文のかたまり」を「段落」といいます。これはホームページでも同じです。ブログサービスやWordPressなどのCMSで文章を入力すれば何もしなくてもたいていはこの段落のタグで記述されます。ですからあまり意識することのないHTMLタグですが、最も頻繁に使われるタグと言えます。

「段落のタグ」の記述方法

<P>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。</p>
<p>ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、「ドンブラコッコ、スッコッコ。ドンブラコッコ、スッコッコ。」と流れて来ました。</p>

このように記述すると以下の表示例のように表示されます。

段落のタグ(p)

改行のタグ(br)

文章を開業したいときに使用するのが「改行のタグ」です。「段落のタグ(p)」と混同しやすいですが、「改行」は単純に行を改めるだけです。見た目では「段落のタグ(p)」は1行隙間が出来ますが、「改行のタグ(br)」では隙間はありません。

「改行のタグ」の記述方法

<P>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。</p>
<p>ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、<br>
「ドンブラコッコ、スッコッコ。<br>
ドンブラコッコ、スッコッコ。」<br>
と流れて来ました。</p>

このように記述すると以下の表示例のように表示されます。

改行のタグ(br)

ここで注意したいのが「改行のタグ(br)」を2つ続けると見た目は段落と同じになりますが、HTMLの文法上は好ましくありません。文章のまとまりを表すのは段落のタグを使うことが正しいです。

こんな「改行のタグ(br)」の記述の仕方は間違い

<p>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。<br>
<br>
ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、<br>
「ドンブラコッコ、スッコッコ。<br>
ドンブラコッコ、スッコッコ。」<br>
と流れて来ました。</p>

こんな風に記述しても以下のように段落のように表示されますが、HTML文法上は正確ではありません。

間違った記述

リンクのタグ(a)

テキストにリンクを作成することはサイト内の別のページに移動させたい場合や他のサイトを開きたい時など頻繁に使用します。ブログサービスやWordPressなどのCMSではリンク作成のボタンなどがあると思いますがどのようなタグなのかを理解しておくことは大切です。

「リンクのタグ(a)」の記述方法

<!--同じタブまたはウィンドウでリンク先のページを表示する-->
<a href="リンク先のURL">テキスト</a>
<!--別のタブまたはウィンドウでリンク先のページを表示する-->
<a href="リンク先のURL" target="_blank">テキスト</a>

「tardet=”_blank”」をつけると別のタブまたはウィンドウでリンク先のページを開くことが出来ます。

リンクのタグ(a)

画像のタグ(img)

ほとんどのホームページではそれぞれのページで画像を貼り付けています。画像を貼り付けることで文字では表現できないものも視覚的に表現することが出来ます。通常、ブログサービスやWordPressなどのCMSでは画像を貼り付けるためのボタンや機能があるためこのタグを入力することは滅多にありませんが、どのようなタグなのかを理解しておくことは大切です。

「画像のタグ(img)」の記述方法

<img src="画像のURL" width="幅" height="高さ" alt="画像の説明">
<!--画像にリンクを作成する場合-->
<a href="リンク先のURL"><img src="画像のURL" width="幅" height="高さ" alt="画像の説明"></a>

これらも覚えておきたいHTMLタグ

リストのタグ(ul,ol,li)

箇条書きのHTMLタグです。結構活用します。箇条書きには「・」で並べるリストと番号付きのリストがあります。見た目では改行で表現することも可能ですが箇条書きは「リストのタグ」で記述することが大切です。

「リストのタグ(ul,ol,li)」の記述方法

<!--通常の箇条書き-->
<ul>
<li>だいこん</li>
<li>にんじん</li>
<li>じゃがいも</li>
</ul>
 
<!--番号付きの箇条書き-->
<ol>
<li>ももたろう</li>
<li>うらしまたろう</li>
<li>おむすびころりん</li>
</ol>

このように記述すると以下の表示例のように表示されます。

リストのタグ

表(テーブル)のタグ(table,tr,td)

表を作るためのHTMLタグです。おそらく初心者が一番最初に悩むHTMLタグではないかと思います。WordPressなどのCMSでも視覚的に簡単に表(テーブル)を作成できるようになってきています。ただ、やはりこれもHTMLでどのように記述されているかを理解しておくと何かと便利です。

「表(テーブル)のタグ(table,tr,td)」の記述方法

<table>
<tr>
<td>だいこん</td>
<td>200円</td>
</tr>
<tr>
<td>にんじん</td>
<td>180円</td>
</tr>
<tr>
<td>じゃがいも</td>
<td>90円</td>
</tr>
</table>

このように記述すると以下の表示例のように表示されます。

表(テーブル)のタグ

まずはこれだけをしっかり理解しよう

いかがでしょう。HTMLタグはまだまだありますが、ブログサービスやホームページ作成サービス、WordPressなどのCMSを活用して記事を投稿するのであればこれくらいは身に着けておきましょう。これらのタグをしっかり理解出来たらその他のタグも少しずつ理解が進んでいくはずです。

WordPressのテーマはやっぱり国産テーマが安心!

WordPressのインストールは最近ではレンタルサーバー会社の「簡単インストール機能」などでだれでも簡単にできるようになりましたが、そこからのデザインがやっぱり悩みどころ。プラグインも何を使ったらよいのかわかんないし、解説サイトが英語表記というのもよくあるケースです。そして、

WordPressなんてムリだ…

なんていう残念な結論を出して、挫折してしまう方がとても多いです。
せっかく独自ドメイン取得したのに…
せっかくレンタルサーバー契約したのに…
せっかくWordPressインストールしたのに…
です。

WordPressのデザインを決めるものが「テーマ」であることは理解したと思いますが、どのテーマを選べばよいのかわからない…ダッシュボードのテーマの新規追加を試みても種類が多すぎるし、解説は英語だし、有効化してもよくわかんないし…

国産(日本語)のWordPressテーマを導入しよう

WordPressのダッシュボードからテーマを新規追加しようと探しても日本語のものはまず見つかりません。世界中のユーザーから見れば日本語なんて希少言語なので仕方ありません。日本語サイト向けのWordPressテーマはいくつもあります。それらの日本語サイト向けWordPressテーマはそれぞれのテーマ開発者のサイトなどで公開、販売されています。

日本語サイト向けWordPressテーマは有料のものも多いですが、有料であるからこそサポート体制も充実しています。多くの有料の日本語サイト向けWordPressテーマでは日本語での丁寧なサポートに対応しています。何をインストールすればよいかよくわからない「プラグイン」も不要だったり最小限の利用で済んだりします。以下に挙げる日本語サイト向けWordPressテーマは当サイトがおススメするWordPressテーマです。

日本語サイト向けWordPressテーマをもっと見る

よかったらシェアしてね!

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のホームページ制作を行っています。
近年はほとんどがWordPress案件となっています。
ビール、料理、カメラ、アウトドア好き!

目次
閉じる