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. www-pakutaso-com-shared-img-thumb-pp_gyosen

    起業独立する前に絶対に必要な準備と心構えとは

    もうすぐ起業独立しようと思っている人は、自分の将来に希望を持って、起業独立し…

  2. max16011542_tp_v

    成功体験と失敗体験の必要性

    自信をつけていくためには、小さな成功体験が必要だとよく言われています。大小かかわらず成功体験は、モチ…

  3. c29f43be40f588d607ec2ce37062e1cd_s

    1円・1秒も無駄にしない!引越しのプロが使うお店9選

    大変なのは引越し前の準備だけではありませんこんにちは。私は10月の前半に引越しをしたので…

  4. gori_9V9A8291_TP_V

    ブログ・メルマガのネタ探し・ネタ集め3つの方法・コツ

    ブログやメルマガを書いていて、ネタに困ることってありませんか?「読者さんの役に立つ記事を書かなきゃ」…

  5. www-pakutaso-com-shared-img-thumb-miyako92_gakenokeiji20140727

    会社をずる休みしてリフレッシュ!充実感のある過ごし方を!

    朝起きたら顔を洗って歯磨きをして目を覚まし、朝食を食べて支度をして会社に出勤する…

  6. 3330a672899655c1c850318260977249_s

    セミナーを受講した時の勉強効果を高める3つの方法・やり方

    大人になってから勉強をする方法と言えば、習い事をしたり、読書をしたり、セミナーに通ったり、そんな方法…

  7. PASONA_26_TP_V1

    副業でアフィリエイトは稼げるのか?稼げるアフィリエイトの種類は何…

    副業と言われたら何を思い浮かべますか?アフィリエイトという人も少なからずいるとは思います。アフィリエ…

  8. ffd8a22f35b49d8c28dcd6a3e39e0e6b_s

    仕事ができる人のビジネスメールのコツやマナー!効率化する…

    「仕事のできる人はメールの返信が早い」ということはよく言われていることなので、知…

コメント

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

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

PAGE TOP