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. green_no20140125_tp_v

    ミスをしても大丈夫!ミスを活用できるフィードフォワードとは?

    誰もが、ミスはしたくないものですがミスは、必ずと言っていいほど起こるものです。しかし何かを依頼される…

  2. pp_tenkey_tp_v

    一流のビジネスマンの共通点は、シンプル思考

    頭の中がごちゃごちゃしていると仕事を順調に進めることができないどころか仕事が辛くなってしまいます。そ…

  3. 4e17893db429968e851ea2f5b42e6524_s

    ビジネスで活用したいソーシャルメディアは?

    ビジネスをする上でソーシャルメディアは、欠かせないものになっています。ソーシャルメディアをどのような…

  4. ook161103154_tp_v

    仕事を効率化するにはマルチタスクはやめよう

    あなたは、マルチタスクと聞いてどんな印象を受けますか。業務を複数同時に進めてカッコいいビジネ…

  5. 7b851790d732a676b34aef9c32fa3ced_s

    クレジットカード(クレカ)を持っていない人がカード決済する方法

    インターネットショッピングに海外旅行、現代はクレジットカード決済ができないとすごく不便な時代になって…

  6. 09bb87c516aeb5d4370b1230ee2c550e_s

    行動力のある人に共通する仕事で成果を出す5つ習慣

    仕事をする上では、行動力はとても重要ですよね。何か理由をつけてモタモタしているとチャンスを逃してしま…

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

    今すぐできる!モチベーションを上げる3つの方法

    モチベーションが下がったままで仕事をするのはよくありません。仕事がやりたくないし楽しくないのでダラダ…

  8. 7970033ea775f539b2e470af8646111c_s

    副業でアフィリエイトをやる人のための効率の良い時間の使い方

    個人でアフィリエイトをやっているほとんどの人はサラリーマンをやりながら副業として始めていると思います…

コメント

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

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

PAGE TOP