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

    起業家の体調管理は仕事の一つです

    最近、めっきり寒くなってきましたが体調管理はしっかりできてきますか?起業家は、健康であるべきなので体…

  2. --www.pakutaso.com-shared-img-thumb-KK_9V9A5426

    タスク管理が苦手な人のための3つのタスク管理方法

    あなたは上手にタスク管理をできているでしょうか?タスク管理が苦手という人は多いはずです。複雑に考えす…

  3. pak63_machikoubaonoff20140531_tp_v

    自分の力を引き出す整理整頓術

    整理整頓は、得意ですか?苦手と思う方もいると思います。整理整頓を苦手だと思っている人は、20代のビジ…

  4. 52c83e9b40b042afc7f59b6cd6f4075b_s

    理不尽な会社に我慢してない?仕事から逃げたい時の対処法とは

    毎日遅くまで残業をしていたり、ミスをした自分が悪いということはわかっているけど、…

  5. 9c4fc3df4432ce3c81b97a59c3db9d96_s

    パソコン仕事による3つの体の不調・症状とその対策とは?

    IT技術が発展し、パソコンが一般向けにも普及したため、現在では多くの仕事や作業をパソコンで行うように…

  6. 2538a97c7258f9f5a7b90f66abe1735e_s

    賃貸で引っ越すときは会社に近い場所が良いのか考えてみた

    賃貸で引っ越すときはどんな場所に引っ越したいですか2016年も終わりに近づい…

  7. MBP9V9A8350_TP_V

    Macbookpro(late2016)でHDMI接続をする際の…

    Macbook Pro(late2016)はめちゃくちゃかっこいい&…

  8. --www.pakutaso.com-shared-img-thumb-LIG_kanbadega-dosurudansei

    仕事の人間関係がトラウマに⁉︎フラッシュバックさせない克服方…

    仕事でミスをしたことがトラウマになってしまったり、深く傷つくほど上司に怒られたこ…

コメント

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

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

PAGE TOP