トピックス - WEBマーケティング

知っておくと便利なHTMLのタグ

2015.02.10

はじめに 


今や多くの企業や学校ではホームページを持つのが当たり前の時代です。そこで当然、そうした企業や学校では、ホームページを更新する担当の方がいらっしゃいます。しかし、実際にホームページを触ってはみたものの、わからないコードだらけでどこを触っていいか困ったことはありませんか?

 

ニュースを更新したい、この文字を大きくしたい、この部分の色を変えたい!と思っても、分厚いマニュアルを読む時間もない!でも更新はしなくてはならない!そんな悩みを持つあなたに、これだけ知っていればいいというHTMlのタグについて紹介いたします。

 

 

準備

 

ホームページを変更するためには、ホームページのソースを見る必要があります。まずはこちらの準備から始めましょう!



すると、ページのソースが表示されます。
 

これで準備はできました。


 

タイトルを変えたい!

ホームページをご覧になった時にブラウザーのタブに表示される文字をご覧になった方は多いのではないでしょうか?
 


 

この「企業向けホームページ制作・・・・」という部分がソースの中で、<title> </title>で囲まれた部分なのです。
 


 

この部分をブラウザーで表示すると下記のようになるのです。
 

 

こちらを変更したいときは、<title>ダミー会社</title>の部分を変更してみましょう!ダミー会社の部分を楽々HTML講座にしてみましょう。
 


 

するとブラウザーの表示が以下のように変わります。
 


このようにブラウザーのタブの文字が変更されました。

 

検索ツールで検索された時に出てくる文章を変更したい!

みなさんが企業等を検索した時、その企業名と一緒に出てくる説明文を目にした方は多いと思います。何かの事情が
あって、説明文を変更したいと思うこともあると思います。そんな時に使うのが、上記のソースの<meta name="Description" content="これはダミーサイトです。" />という部分です。黄色の部分を変更することによって説明文を変更できるのです。この時、" の記号を消さないように気を付けましょう。
例えばワン・デザイン工房のサイトだったらでしたら、下記の緑色の部分がgoogle検索をした時に出てくる説明文になるのです。
 


 

こちらは実際のブラウザー上ででは下記のように表示されます。



ニュースを更新したい tableタグを使う

みなさんの中には企業でホームページのニュース更新を担当している方も多くいらっしゃると思います。そんな方たちのために、簡単な更新方法を紹介しましょう。

ニュースの更新は定型のものはなく、制作会社が作ったソースの種類で更新方法が変わります。一つ目は、みなさんがよく目にするtable タグというものです。一番多いのは下記のようなタイプではないでしょうか?
 


 


 

上の表は枠線があり、下の表は枠線がありますが、どちらもtableタグというもので作成しています。tableは表を作成したい時などによく使われます。
 

上のtableのソースは下記のようになります。
 


 

この<table></table>で囲まれた部分がtableタグになります。ソースを変更した時は</table>を削除しないように注意しましょう。これは閉じタグと言って、そのタグの終わりを意味します。tableに限らず、タグには閉じタグがいくつか存在します。
例)<p></p>、<h1></h1>、<td></td>、<div></div>
この</>がついたものが閉じタグとなります。こちらが消えてしまうと、ページが壊れてしまいます。ページを修正するときは、うっかり閉じタグを消すということがあると思います。もしもの場合のために、ページ修正する場合は、オリジナルのファイルは別名保存して、バックアップファイルを取っておきましょう。
 


例えば、上記のようなページがあったとします。もし、こちらを編集中にうっかりと閉じタグを消してしまったらどうなるでしょうか?
 


こちらのページをブラウザーで見てみると、下記のように崩れてしまいます。
 

 

どうでしょう?おわかり頂けたでしょうか?ニュース更新の際は閉じタグを削除しないように気を付けなくてはなりません。もし、更新した後に、ページが崩れてしまったら、それは閉じタグを消してしまった可能性があるということを覚えておいてください。

 

(1)table タグの構造について
 

Table タグで重要なものは以下のようになっています。

<table></table>

Tableの定義
ここから閉じタグまで、tableタグですよ、という合図です。
 


<table width="600" border="1" align="center" cellpadding="10" cellspacing="0">で、どんなtableかという定義が書かれています。

width="600"

これは幅600pxの表だということを表しています。ただし、必ずしもpxだけで表すだけではありません。%がつくこともあります。

border="1"

これはtableの枠線の太さが1pxであることを表しています。このような表になります。
 


 

こちらが0になると枠線なしのtableとなります。従って、下記のような表になります。
 


align="center"

これは作った表 (table タグ)を真ん中寄せにするということです。左寄せの場合は" "の中がleft、右寄せの場合はrightとなります。


<tr></tr>

表の中の1行を表します。1つの<tr></tr>の中には必ず1つの<td></td>が入っていて、そこに自分の入力したいデータを入れます。 ですから表の中のデータを変更する場合は<td></td>で囲まれた部分を変更することになります。
 

<th></th>

見出しタグのことです。表の中で文字が強調されていたり背景に色がついている場合があります。

 

<td></td>

表の中のデータそのものを表す。



(2) ニュースを更新する
 

○1列の場合
 


 


 

上の表をソースで表すとこのようになります。ですから緑の<td></td>で囲まれた部分を修正すればいいわけです。

「これはダミーです。」 を 「新製品の○○が発表になりました。」に変更したい場合は、
<td align="left" valign="top">これはダミーです。</td>から
<td align="left" valign="top">新製品の○○が発表になりました。</td>に変更すればよいわけです。

 

○2列の場合
 

 


  で囲まれたところが1行分(<tr></tr>)になっていることがおわかりでしょうか?2列の場合はこの<tr></tr>の中に<th></th>と<td></td>が入っています。1列目(日付け)は黄色い<th></th>の間にあり、2列目は緑色の<td></td>の中に書かれています。この<th></th>は表の中での見出しに該当します。

 

日付けを直したい場合
 

黄色い部分を消さずに、中の日付けだけを変えればよいわけです。
例)<th width="20%" align="left" valign="top">2014/12/17</th>
                                  ↓
<th width="20%" align="left" valign="top">2014/12/25</th>


データそのものを変える場合

緑の部分を消さずに、中のデータだけを変更する。
例)<td align="left" valign="top">これはダミーです。</td>
                                 ↓
<td align="left" valign="top">新製品○○の発表です。</td>

データ編集の際、コピペの途中で、</th>,</td>,</table>と言った閉じタグを削除しないように十分に注意してやりましょう!

 

見出しを変更したい! hタグ

みなさんが自分のホームページを運営していく上で、見出しを変更したいと思うこともあるかと思います。見出しは画像を使う場合とテキストで作られているものがあります。見出しには下記のようなタグがあります。

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>
 


上の見出しのソースを見ると下記のようになります。

 

ただし、実際にホームページ制作会社が作ったページの見出しはこのようなシンプルな形とは限りません。見出しタグに画像を使うこともあります。

例)


こちらの見出しタグには以下のように画像が入っています。そのため、見出しを変更するには画像そのものの変更が必要になります。
 


テキストベースの見出しは、文字を簡単に修正できます。
 


 

この見出しはテキストベースですが、ソースは下記のようになります。こちらは「midashi」というスタイルが別ファイルで定義されています。こちらの例だと青い枠がそのスタイルになります。

<h3 class="midashi">ニュース</h3>

もしこの見出しを変更したい場合は「ニュース」の部分だけ変更しましょう。

例)
<h3 class="midashi">ニュース</h3>
                    ↓
<h3 class="midashi">サイトマップ</h3>
 

このとき気を付けたいのは「class="midashi"」を消さないようにすることです。もし消してしまうと、デザインが崩れてしまうので、気を付けましょう。

 

いい例

<h3 class="midashi">サイトマップ</h3>


 

悪い例
 

<h3>サイトマップ</h3>

 

このように、スタイルを削除してしまうと、枠線や色等、スタイルシートで設定したものが削除されてします。コピペする時は、スタイルを消さないように、注意しましょ!

 

文章を変更する pタグ
 

ホームページの中でたくさんテキストが並んでいるページを見ることは多いと思います。そうした場合に使われるのが「pタグ」なんです。使い方はとても簡単です。Pタグは<p></p>のように使います。
 

ブラウザーでの表示


 

ソースでの表示

 


上記を見てみますと、<p></p>をそのままにし、中の言葉を変えるだけで変更可能なのです。 ただし下記のように
Pタグにクラスがついている場合はそのクラスを消さないように注意しましょう。
 

ブラウザーでの表示
 



ソースでの表示
 



改行を入れたい brタグ
 

Pタグなどを使っている時、どこかで改行したいと思うこともあるでしょう!改行するには<br/ >を使いましょう!このタグはtable タグや hタグと違い、改行したいところに置くだけなので、とても簡単です。<br><br/ >とはならず、 <br />一つだけで終わるので、置きたいところに一つ置きましょう。
 

ブラウザーでの表示
 


ソースでの表示
 



テキストを太字にする strongタグ
 

テキストを太字にする時は<strong></strong>を使います。こちらも閉じタグがあるので、削除しないように気を付けましょう!

 

ブラウザーでの表示
 



ソースでの表示
 


 

リンクを付ける aタグ

リンクをはる場合は<a></a>を使います。実際にソースにリンクを張るには<a href=”リンクを張りたいurl ”></a>となります。
 

ブラウザーで見た場合
 


ソースで見た場合
 


リンクを変更する場合は
 

例)
<a href="sitemap.html">サイトマップ</a>
                     ↓
<a href="company.html">会社案内</a>

ブラウザーに表示する部分は黄色の部分を変更し、リンク先の変更は青い部分を変更しましょう。閉じタグの</a>と
「" "」の記号を削除しないように気を付けましょう。

 

画像を変更する imgタグ

みなさんがホームページの画像が古くなり、新しい画像にしたいと思うことも多いと思います。画像変更はそれほど難しいこと
ではありませんが、ひとつ、注意しなくてはならないことがあります。
 

 

ブラウザーではこのように見えるメニューボタンは画像を使っています。そのソースを見てみましょう。
 

 

で囲まれた部分がimgタグの部分になります。src="image/profile.gif"は、imageフォルダの中にprofile.gif
が入っていることを示します。alt="ごあいさつ" はprofile.gif" という画像がどのような画像であるのかを説明している部分です。ですから、上のメニューボタンの例で言うと、画像作成ソフト等で新たに画像を作成し、imageフォルダの中にprofile.gifという同じ名前で保存すれば自動的に画像が変更されるのです。

試しに、上記のメニューボタンの「ごあいさつ」を変更してみましょう。変更したものをわかりやすくするため、違う色でやってみます。 という画像を作成したので、このままあてはめてみるとどのような表示なるのか見てみましょう。

ブラウザーで表示すると下記のようになります。
 


 

どうでしょう?この画像を見て、何かお気付きになったでしょうか?さきほどグレーで作成した「ごあいさつ」の画像より歪んで表示されていることがおわかりでしょうか?実はオリジナルのグレーの画像は
 


のように黄色い部分で設定されているように、width="134" height="24"と、幅134px、高さ24pxとなっているのです。
しかし、変更した赤文字の画像は幅140px、高さ28pxで作成されているのです。
この場合の修正方法としては、画像を、imgタグで設定した、幅134px、高さ24pxのサイズに変更して作り直すか、
<img src="image/profile2.gif" alt="ごあいさつ" width="140" height="28" border="0" />のように、widthとheightのサイズを正しいものに変更しなくてはいけません。従って、ページのデザインによって、変更方法は変わります。

 

(1) 画像自体のサイズを変更する方がよい場合



 

隣接する画像の高さが決まっていて、高さを揃えないとバランスが悪くなってしまう時。
例)「会社概要」と「交通アクセス」のheightが24pxで「ごあいさつ」のheightが28pxとう場合は、画像のバランスが崩れてしまいます。

 

 

 

このような時は、再度heightを24pxとした画像を用意しましょう。

 

 

 

(2) imgタグで画像のwidthとheightを変更した方がよい場合
 


 

このように、隣接する画像がない場合は、新しい画像を作成した後、imgタグをそのまま変更しましょう。

例)幅600pxで高さ455pxの画像を幅300pxで高さ228pxの画像に変更する場合
 

                                                        ↓


このように変更したページをブラウザーで見てみると、下記のように見えます。
 



テキストの色を変更したい

みなさんが制作会社さんのページを作り、あ、ここの文字だけは違う色で目立たせたい!と思うことも多いのではないのでしょうか?今回は直接ソースに書くやり方をマスターしましょう!
 

 

このページのテキストで、ポチの部分の色を変えたいとときは、まず変更したい部分を<span></span>で囲みます。
 

                                    ↓


 

次に、<span>の中に色を変更するスタイルを設定します。

色を変更する場合はstyle="color:色番号"で変更します。今回は赤で設定してみます。
<span style="color:#ff0000">と<span>の部分を変更します。
 

 

上記の黄色い部分が色を表すところです。#と6桁の数字とアルファベットで色を表します。ブラウザーで見ると下記のように
なります。
 


 

もし色を別違うものにしたいのであれば、黄色い部分を変更すれば簡単に変更できます。主な色は下記のようになります。