sponsored link

HTMLとは?初心者のために便利なタグを簡単に解説

sponsored link

HTMLたぐと言えば、パソコンやインターネットで仕事をしようと思った場合、どこかで必ず習得する必要の出てくる分野です。私たちが普段インターネットと言って見ているInternet ExplorerやGoogle Chromeなどのブラウザというソフトでウェブページを表示させるための言語がHTMLになります。

ゼロからホームページを作ったりする場合、それにはHTMLを始め、CSSなどの大量のプログラミングに関する知識が必要になります。しかし、恵まれたことに、現在では初心者でも最低限のHTMLの知識があればサイトを作ったり、ブログを更新したりできる環境があります。ウェブページのテンプレートや、WordPressをはじめとしたCMS(コンテンツマネジメントシステム)などです。

プログラマーのような専門職を目指す場合を除けば、基本的にパソコンやインターネットに関わる仕事でもHTMLに触れるのは、テンプレートを少し変えてみたり、WordPressで記事を更新したりするくらいなので、簡単なHTMLタグを覚えてしまえば問題ありません。

今回は、簡単に使えるけど、覚えておけば便利なHTMLタグを、初心者さんでも分かるように解説したいと思います。

HTMLタグは2種類ある

129901095e2a951cf9d44a75fd1d597e_s

HTMLタグには2種類のタグがあります。開始タグ、終了タグの2つをセットで使うものと、開始、終了がなく、タグ1つで意味を持つものです。例えば、開始タグ、終了タグをセットで使う場合、囲んだ部分の文字の色を変更したりして、修飾したりすることができます。開始、終了のないタグの場合は、そのタグを掻き込んだ部分に画像を挿入したり、文章の間に入れて、改行をしたりすることに使います。どちらが便利、大事ではなく、どちらも必要になってきますので、しっかりと覚えておきましょう。

便利タグ一覧

今回は、そんなHTMLタグの中でも、特によく使うタグを3種類、紹介しようと思います。ハッキリ言って、WordPressで記事を更新したり、完成しているウェブページを少し改編するくらいなら、これらのタグを知っていれば十分です。

改行タグ

まずは、改行タグです。HTMLファイル内に文章を書いた場合、普通にパソコンのエンターキーで改行しただけでは、改行されて表示されません。そこで必要になるのが、改行タグです。改行タグは<br>もしくは<br />のどちらかを使います。これはどちらでも構いません。HTMLファイルに改行タグを差し込んで文章を書けば、HTML内では改行していないとしても、実際にブラウザで表示した際に、改行されて表示されます。

HTML:例えば、<br>このようにHTMLで書いた場合<br>以下のように表示されます。

ブラウザ表示:
例えば、
このようにHTMLで書いた場合、
以下のように表示されます

このように、<br>を書き込んだ部分で、しっかりと改行されて表示されるようになります。

フォントタグ

次に、フォントタグです。フォントタグは、文字の色を変えたり、文字をマーカーで塗りつぶす際に使うタグです。フォントタグの場合は、先ほどの改行タグと違い、開始タグ、終了タグが存在します。開始タグは<font>、終了タグは</font>になります。開始タグの中の、<font○○>の○○の部分にどのような修飾を施したいかを入れることで、開始タグと終了タグの間にある文字が色づいたり、マーカーで塗られて表示されます。

例えば、

<font color=”red”>この間の文字は赤色で表示されます</font>

この間の文字は赤色で表示されます

<font style=”background-color:#FFFF00″>この間の文字は黄色いマーカーで塗りつぶされます</font>
この間の文字は黄色いマーカーで塗りつぶされます

このように、開始タグ、終了タグで囲んだ部分の文字の色が変わったり、マーカーで塗りつぶされて表示されます。実際に今使ったこの2つのタグは文章の一部を強調する時によく使いますので、非情に便利なタグです。

bタグ、ストロングタグ

次はbタグとストロングタグです。このタグも開始タグ、終了タグがあります。それぞれのタグは以下の通りです。

bタグ:開始タグ<b>終了タグ</b>
ストロングタグ:開始タグ<strong>終了タグ</strong>

これらのタグで先ほどのフォントタグのように文字を囲むと、太字で表示されます。

たとえば、<strong>この部分</strong>が太字で表示されます

たとえば、この部分が太字で表示されます

このように表示されます。実は、ブラウザでの見え方という点では、bタグもストロングタグも変わりありません。では、どのような違いがあるのかというと、bタグは本来、文字を太く見せるためのタグ、ストロングタグは囲んだ部分の意味を強調するという違いがあります。この違いが出るのは、SEOなど、もっと専門的な分野の話になってしまいます。GoogleやYahooでの検索結果に表示されて、ページを色んな人に見て欲しいという場合には、基本的にストロングタグを使えば問題ありません。それ以外の場合でも、どちらも同じように見えるので、基本的にはストロングタグさえ覚えていれば問題ないはずです。

単語登録しておくと非情に便利です

f88dda49bf66247f1cba38ebc89b4ef0_s

最後に、これらのHTMLタグを便利に使う方法として、パソコンの単語登録機能があります。Windowsではもちろん使えますし、Macの「ことえり」や日本語の変換精度で高い評価を得ている「ATOK」でも単語登録機能は付いています。「ふぉんと」と入力するだけで、<font style=”background-color:#FFFF00″>に変換できるようにしておけば、いちいちタグを調べてコピー&ペーストをする必要がなくなりますので、非情に便利です。今回紹介したタグはWordPressを使ったり、メルマガの登録フォーム、商品販売のためのセールスページなど、非情に多くの場面で使いますので、ぜひ、自分の分かりやすい言葉で登録しておきましょう。

HTMLをしっかり学ぶならこの本がおすすめです!

html

sponsored link

f88dda49bf66247f1cba38ebc89b4ef0_sネットビジネスやセールスレターの信頼性の作り方

www-pakutaso-com-shared-img-thumb-max16011518自己効力感を高めると毎日のモチベーションも上がる

関連記事

  1. yuka9v9a8531_tp_v

    仕事とストレスを溜め込まない時間に関する3つのテクニック

    誰でも1日は24時間しかありませんが、世の中には、その時間を無駄に使ってしま…

  2. ダウンロード1

    決断力のある人は立ったまま考える!決断力を高める3つのポイント

    あなたは決断力はありますか?人は毎日色々な決断をしています。どちらの服にしようか、昼ごはんは何を食べ…

  3. fea370f33cc7f1a40a98ca78128f939f_s

    飛行機に乗り続けるマイル修行で得られる上級会員の特典とは

    あなたは、マイルを貯めるために飛行機に乗り続ける人たちが行う、マイル修行とい…

  4. ANJ86_suyasuya_TP_V1

    朝が苦手なサラリーマン必見!!朝寝坊しない5つの方法

    寝起きが悪いとなかなか起きれないですよね。もう少しだけ寝ようと5分だけのつもりが目が覚めて目覚まし時…

  5. a5f7cfd377a5a7c3542c5e65cac43153_s

    Macはウイルス感染する?ウイルス対策ソフトやセキュリティ対策ま…

    Macといえば、ウイルスやセキュリティの対策が必要ないと言われているパソコンですよね。Windows…

  6. 0f2890d83857f2d3e50d317c4ef807c2_s

    今までの半分の労力で生産性の効率を2倍にする6つのポイント

    一生懸命頑張っているのに、仕事の成果に繋がらない人がいますよね。多くの時間を使って夜遅くまで仕事をし…

  7. www-pakutaso-com-shared-img-thumb-kim150922327408

    確実に結果を出す人がやっている新年の目標の立て方とは

    あともう何時間かすれば新たな年がやってきますが、今年はどんな一年だったでしょ…

  8. www-pakutaso-com-shared-img-thumb-hote86_makuragyu15234016

    ショートスリーパーになる方法!短い睡眠時間で充実した毎日を

    毎日仕事で忙しくて時間が足りず、睡眠時間を削っている人はいませんか?…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP