Webサイトを作ろう!【8】HTMLソースコードの解説②

   2019/01/31   icon-clock-o読了時間:約34分21秒

前回記事 【7】HTMLソースコードの解説① から引き続き各タグの解説です。

 目次 

テーブル(表)を作る tableタグ

箇条書きのリストタグ ul要素、li要素
  ∟マーカー付きのリスト
  ∟ペイントを使った簡単マーカー作り

テキスト入力に関するタグ
  ∟太字にする strong
  ∟テキストの段落 p
  ∟改行する br

空白(スペース)を作る

各種の線を引くタグ
  ∟下線を引く uタグ
  ∟取り消し線を引く delタグ
  ∟水平線を引く hrタグ

リンクを貼る
  ∟相互リンク
  ∟ランキングに参加
  ∟リンク集への登録
  ∟同一ページ内でのリンク アンカータグ
    ∟『 ▲このページの上部に戻る 』リンク
    ∟違うページの指定場所にリンクを貼る

コード内にコメントを付ける

テーブル (表)を作る tableタグ

複数の項目を綺麗に並べたい時に役立つのがtableタグです。
ここでは何も装飾を行っていないので、一番シンプルな表の状態になっていますが、
タグ指定やCSSのスタイル指定をすれば、Excel表計算ソフトで作る表のように
セルの幅や高さ指定、中央寄せや文字色・背景色の変更なども可能です。

テーブルタグ
<table border=”1″>
<tr>
<td width=”132″ class=”tb”>社名</td>
<td width=”386″>有限会社 エヌシステム</td>
</tr>
<!– 中略 –>
<tr>
<td class=”tb”>主要取引銀行</td>
<td>ジャパンネットバンク・楽天銀行・ゆうちょ銀行</td>
</tr>
</table>

表を線(太さ1px)で囲ってみると実際の表示は以下のようになります。
テーブル1


これくらいのちょっとした装飾ならタグによる指定で良いのですが、
出来れば次のようにCSSを使ったより見やすい表を作ってみましょう。

テーブルCSS
<!– テーブルCSSを追加 –>
<style type=”text/css”>
.blue {
background-color:#0000ff;
color:#ffffff;
}
.table {
  border-collapse: collapse;
width: 530px;
}
.table th {
text-align: left;
border: 1px solid #808080;
}
.table td {
text-align:center;
border: 1px solid #808080;
height: 30px;
line-height: 30px;
}
</style>

<!– tableクラスを適用させる –>
<table class=”table” summary=”会社概要”>
<tr>
<td>社名</td>
<td>有限会社 エヌシステム</td>
</tr>
<tr>
<td>主要取引銀行</td>
<td>ジャパンネットバンク・楽天銀行・ゆうちょ銀行</td>
</tr>
</table>

.blue の部分は前回ご説明した、文字の背景色を青くするスタイル指定です。
今回はその後ろにテーブル用のCSSを追加します。
htmlの部分はちょっと間を省略しています。

実際に表示させると以下のようになります。
テーブル2
summary要素にはテーブルの概略を記述します。
summary要素に記述した内容は表向きには何も表示されませんが、
前回ご説明した画像タグのalt属性のように、スクリーンリーダー (画面読み上げソフト)を
使用している目の不自由な方に向けて表の内容を伝えるために記述が推奨されています。

テーブルもスタイルによって色、大きさ、枠線などが自由に変えられるので
ちょっと凝って作ってみると楽しいかもしれません。

箇条書きのリストタグ ul要素、li要素

リストタグ
<ul>
<li>液晶画面修理
<li>電源修理
<li>マザーボード基板修理
<li>HDD・SSD修理
<li>CD・DVD・Blu-rayドライブ修理
<li>キーボード・タッチパッド修理
<li>その他、各種修理可能
</ul>
基本のリストタグのみを記述すると、このように黒丸の付いた箇条書きになります。
リスト黒丸

マーカー付きのリスト

基本の黒丸だけではなく、四角にしたり、マーカーを無くしたりもできます。
以下の記述で四角のマーカーになります。

リストタグ
<ul style=”list-style-type:square”>
<li>液晶画面修理
<li>電源修理
</ul>

list-style-type:square の部分を変えれば各マーカーを指定する、もしくは番号を振ることができます。

リストのマーカー種類
<!– 黒の四角 –>
<ul style=”list-style-type:square”>
<li>液晶画面修理
<li>電源修理
</ul>

<!– 白い丸 –>
<ul style=”list-style-type:circle”>
<li>液晶画面修理
<li>電源修理
</ul>

<!– マークなし –>
<ul style=”list-style-type:none;”>
<li>液晶画面修理
<li>電源修理
</ul>

<!– 自作の画像をマーカーにする –>
<ul style=”list-style-image:url(image/sqs27.jpg)”>
<li>液晶画面修理
<li>電源修理
</ul>

<!– 番号をふる –>
<ol>
<li>液晶画面修理
<li>電源修理
</ol>

それぞれ実際の表示は以下のとおり。
リスト各種

ペイントを使った簡単マーカー作り

こういったリストマーカーのように、ちょっとした丸や四角を自分で作る時には
Windowsに初期搭載されている描画ソフト『 ペイント 』でも充分です。
ペイント
(1)図形の中から四角を選んで描きます。この時、【 Shift 】キーを押しながら描くと正方形が描けます。
   あまり大きくするとマーカーとして不恰好になってしまいますが、
   大きく作っておいて後でサイズ変更、保存してもOKです。
   10ピクセル×10ピクセルくらいがおすすめ。
(2)描いた四角を選択したままの状態で外枠(色1)と中身(色2)の色を選択します。
(3)トリミングを押すと、描いた四角以外の余白部分が切り落とされます。
(4)名前を付けてサイト作成用のフォルダに保存します。
(5)FTPソフトでアップロードすることを忘れずに。
(6)画像のURLもしくはディレクトリを使用したい場所に記述します。
   リストタグで言えば list-style-image:url(image/sqs27.jpg) がディレクトリ指定です。
   URL指定の場合は list-style-image:url(https://www.website.com/image/sqs27.jpg) となります。

 【 番外編1 】画像編集ソフト・素材サイト
 【 番外編2 】商用利用OKな無料素材も合わせてご参考ください。
 

テキスト入力に関するタグ

ここまででご紹介した主なタグ以外にも、サイトをより見栄えよくするために様々なタグがあります。

太字にする strong
<strong>太字</strong>
テキストを太字にして強調するためのタグです。
あまり頻繁に使うと強調の意味がなくなってしまうのでほどほどに。

テキストの段落 p

pタグで囲われた部分を一段落として、デフォルトで先頭一行の前に空白が入り、
閉じタグ</p>の後ろで自動的に改行が行われます。
ただ、厳密に段落ごとで使用しなければならない訳でもないので
行ごとにpタグで囲んでテキストの並びを整えることにも使われたりします。

段落タグ
<p>形状・メーカーを問わず、液晶画面修理、HDDやSSDの交換、DVDドライブの交換、</p>
<p>マザーボード修理など幅広くパソコン修理に対応いたします。</p>
<p>お問合せやお見積りはお電話、FAX、メールフォームからお気軽にご相談ください。 </p>
このpタグにCSSスタイルを指定すれば、行間の幅や文字のフォントなども自由に決めることができます。

このブログでも弊社サイトでも、pタグにはCSSによって
先頭一行の前の空白を無くす、文字のサイズ、一行の高さなどを指定しています。

改行する br

上の段落タグp とは異なり、単に改行だけを行いたい場所に記述します。閉じタグはありません。

改行タグ
<!– 通常の改行 –>
<br>
純粋にテキスト間の改行であればこれで大丈夫。<br><br>
上記のように改行タグを連続して使うことは非推奨ですので、テキストの間を2行分以上空けたい場合などは
<p style=”margin-bottom:2em;”>閉じタグの下で2行ぶんのスペースを空ける</p>
というようにスタイルを指定して工夫します。

また、今回は一番最初のドキュメント宣言のとおりHTML言語でコードを記述しています。
これがもしXHTML言語で記述している場合には <br /> と少し記述が変わるので要注意です。

<!– ちょっと特殊な改行 –>
<br clear=left>
改行してから行の先頭を左端にできる位置にもっていく、という指定です。<br clear=left>
画像に続けて文章を入れると画像の右にぐしゃっと文が表示されてしまったり、<br clear=left>
なぜか前後のタグとの兼ね合いで通常の改行が効かなかったりすることがります。<br clear=left>
そんな時に問答無用で改行を行ってくれるので私は毎回これで改行を行っています。<br clear=left>
あんまり良くないのですが、いちいちちゃんと改行されたかを気にするのが面倒でつい・・・<br clear=left>
<br clear=left><br clear=left>
こんな感じで連続改行して空白を作ることもありますが、これも本来は非推奨なのでおすすめしません。

空白(スペース)を作る

こうしたコードの記述において、スペースキーを押してできる空白(  ←こういう)は非推奨です。
全角スペースや半角スペースをhtmlファイルの中で記述していても実際にブラウザには反映されなかったり、
テキストエディタのコード整形機能で自動的に 「 不要な空白があるので消しときますねー 」 と
判断して削除されてしまったりするためです。
例えばテキストの先頭に毎行長めに空白を入れたいなら段落<p>タグのCSSスタイルでなんとかするべきであり、
ちょっと配置を整える時などにもスペースの連打で体裁を整えようとしてはならん!ということですね。
でも微妙に位置をずらしたい、なんか文字入れないとダメなんだけど空白にしておきたい、
けどいちいちそのためのCSSを書くのが面倒・・・そんな時もあります。

そこで役立つのがノーブレークスペース(自動改行を防ぐスペース)という特殊文字で指定するスペースです。

<h1>【 見出しh1 】&nbsp;パソコン修理のエヌシステム&nbsp;</h1>
見出しタイトルの左右に書かれている謎の文字列 &nbsp; がノーブレークスペース。
これを記述した箇所には半角に似た幅のスペースが出現します。

代表的な特殊文字

コードを記述しているとたまに上記のような特殊文字にお世話になることがあります。
これらは人間が理解するためではなく、コンピュータに 「 この文字に対応したものを表示してね 」 と
お願いするためのものなので、人間から見ると謎の文字列です。

ノーブレークスペース &nbsp; 以外にも、以下のようなものがあります。
&lt; < と &gt; > (大なり 小なりの不等号)
これらの不等号をそのまま書いてしまうと、コード記述としてコンピュータは判断してしまうので
文字列として表示されません。
そのため特殊文字に置き換えて 「 これはコードを書いてるんじゃなくて文字を書いてるんです 」 と
主張する必要があります。
こういったタグの説明などで本文中にコードを記載したい時に使います。

&yen;   ¥ (円マーク)
普通に半角の円マーク¥を記述すると、そのページに使われている文字コードによっては
半角のバックスラッシュとして表示されてしまうことがあるため、
特殊文字で表記することが推奨されています。

&hearts;  ♥ (ハートマーク)
ハートやクローバーなどの記号は、環境依存文字(機種依存文字)と呼ばれ、
そのひとが使っている機器が対応できるか、そのブラウザが対応文字で表示できるかなどの
環境によって表示・非表示が決まってしまいます。
WindowsのOSをお使いでしたら、『 はーと 』と入力して変換していただくと
『 ♥ 環境依存文字(Unicode) 』という変換候補が出てくると思います。
これは Unicode という国際基準で決めた記号ということで
現在のスマホやPCならほぼ問題なく表示されます。
それでも対応してないブラウザやメールソフトもあるだろうし、
コードとして表示する必要があるかもしれないし、ということで
特殊文字として文字参照が可能なようになっています。

&amp;  & (アンド)
こういった特殊文字を本文中に記載して説明したい時、そもそもそのまま記述したら
文字参照されてしまって&になるので、コードとして記載することができません。
そこで頭の&をまた特殊文字に置き換えて、これはコードじゃなくて文字なんだ!と主張することで
そのまま文字として表示させています。

各種の線を引くタグ

下線を引く uタグ

皆さんよくみかけるであろう文字の下の線

<u>強調したいところなどに引いてください</u>
取り消し線を引く delタグ

こんな感じの取り消し線を引くことができます。

<del>価格訂正とか記事の訂正なんかに役立ちます</del>
水平線を引く hrタグ

メインコンテンツの中での区切りや仕切りとして使います。


基本の状態ではメインコンテンツの幅に合わせた100%の長さになっています。
<hr>
閉じタグは無いので注意。

線の長さや色を変えることもできます。

ボーダータグ
<!– htmlで指定:幅を300ピクセルに –>
<hr width=”300px”>

<!– htmlで指定:幅300ピクセル、右寄せ –>
<hr width=”300px” align=”right”>

<!– CSSで指定:線の色はオレンジ、幅の太さ5ピクセル、線の形は実線 –>
<hr style=”color: #F90; border-width: 5px 0 0 0; border-style: solid;”>

それぞれの実際の表示はこうなります。







別にCSSを記述して細かく形状を指定する方法や、画像を設定することもあります。
また、設定できる項目は主に太さ・長さ・色・配置・形状(実線、破線、二重線など)です。
ただ、<hr>で設定した水平線はブラウザによって表示が異なることがあり、
扱いが難しいタグでもあるので、あまり多用しないようにご注意ください。
どうしても区切りを複数使いたい時には、線の変わりに細めの画像を設定するか、
CSSファイルで細かく指定してhrを使うかして、各ブラウザでズレが生じないように気をつけましょう。

リンクを貼る

サイトやページを繋ぐリンク

自分のサイトから誰かのサイトへ、自分のサイトのトップページから問合せのページへ、というように
Web上の部屋や家を移動するためのドアがリンクです。

自分のサイト内で移動するリンクであれば、URLとディレクトリのどちらの記述でもOKです。
これも画像の設定と同じで、何かの拍子にお引越ししてURLが変わってしまうと
いちいち自サイト内のリンクも書き換えなければなりません。
最初からディレクトリでリンクを記述しておけばそんな面倒を回避できるので
出来るだけディレクトリで記述することが推奨されています。

逆に他のサイトへ移動するリンクの場合は必ずURLで記述しなければなりません。
これは自分の家の中なら【 玄関(index.html) 】 や
【 物置(datebase.html) 】だけで通じるのですが、
一歩外に出ると
【 yahooさんちの玄関から中に入って、天気予報のプレートがかかっている部屋
 (http://weather.yahoo.co.jp/weather/) 】
といったように、ちゃんとした説明がないとそこにたどり着けないためです。

リンクタグ
<!– 自分のサイト内で移動、ディレクトリ指定でリンク –>
<a href=”mailform.html” target=”_blank””>メールフォーム</a>

<!– 自分のサイト内で移動、URL指定でリンク –>
<a href=”mailform.html” target=”_blank””>メールフォーム</a>

<!– 他のサイトへ移動、URL指定のみ可 –>
<a href=”http://www.its-mo.com/” title=”いつもNAVI: ゼンリン地図・ルート検索” target=”_blank”>いつもNAVI: ゼンリン地図・ルート検索</a>

単純にタグだけで表示するとこうなります。

<a href=”リンク先のURL” title=”リンク先の名称” target=”_blank”>リンク先の名称(実際に表示されるテキスト)</a>

上のコードが表示されるとこんな感じ。
リンク先の名称(実際に表示されるテキスト)
※正しいディレクトリやURLを入れていないのでクリックしてもどこにも飛ばず、
ページが存在しないというエラーが出ます。

target=”_blank” と rel=”external”

上記コード内の target=”_blank” の部分は、リンクをクリックした時、
別の新しいタブ(ブラウザ設定によっては新しいウィンドウ)を開いて
リンク先を表示させるための記述です。
これを省くと、そのまま同じ表示画面の中でリンク先に移動してしまい
元々見ていたページが分からなくなることがあります。
それはあんまり悲しいので、出来れば他の窓で見て、またここに戻ってきてね、ということで
最近のサイトのリンクでは target=”_blank” を設定していることが多いです。

そしてこの target=”_blank” と同じような機能を持った
rel=”external” が存在しているためにサイト作成初心者を混乱させます。
当ブログやサイトでも両方が混在しているので、
いつか綺麗に統一したいなーと思っていたりします。

この2つの違いは、そのままコードを記述している言語の違いです。
target=”_blank” がHTML言語。
rel=”external” がXTML言語。
上の改行コードで HTMLの改行が <br> 、 XTMLの改行が <br /> とご説明したのと同じで、
異なる言語、しかし大元になった言語が同じなのでなんとなく似ている。
そのためこのリンクについての属性も、どちらを記述しても
ブラウザは『 あー、新しい窓でリンク先を開きたいんだな 』 と察してくれます。

しかし本当は最初にドキュメント宣言で設定した言語に従ってコードを記述するべきなので
今回はHTML言語に対応しているタグの target=”_blank” を使っています。

もしXTML言語でサイトを作成する場合には rel=”external” という記述を使い、
尚且つこのタグを動作させるためのJavaScriptファイルを別途作成する必要があるのでご参考までに。

相互リンク

お互いがお互いのサイトにリンクを貼っていることを相互リンクと言います。
お友達のサイトとお互いにリンクを貼りあって紹介すれば、
興味を持って来てくれる訪問者が増えるかもしれません。

万が一、お友達のサイトが物凄く悪どいことをしていてGoogleなどの検索エンジンに嫌われたりすれば
多少の悪影響が自分に及んでサイトの評価が下がるというデメリットもありますが、
そんなことは頻繁にあることでもないので、サイトを作ったばかりで
訪問者を増やして行きたいという時には相互リンクしてくれる相手を探すのもありです。
他にもたくさんのひとに訪れてもらうための方法として、ランキングやリンク集への登録などがあります。

ランキングに参加

その名のとおり、Web上に存在するそれぞれのサイトやブログを、ジャンルごとに順位付けするサイトです。
自分で登録して参加するものと、いつの間にか勝手に入れられているものがあります。
ブログランキングでは人気ブログランキングなんかが有名ですね。
あまり順位にこだわっているとサイトやブログ作りが楽しくなくなるかもしれませんので登録はお好みで。

リンク集への登録

これもジャンルによって様々なリンク集があります。
ピンポイントでそのジャンルについての情報を求めているひとが訪れてくれる可能性が高くなりますし、
ランキングと違って順位の浮き沈みに一喜一憂することもなく、気軽に登録・解除できるのでおすすめです。

同一ページ内でのリンク アンカータグ

このアンカーは錨(いかり)、拠り所、といった意味です。
アンカータグは同じページの中で閲覧場所を移動する時や、
違うページの中の指定場所へ移動する時に使われます。
このブログ記事の目次の項目も、このリンクアンカーによって各項目へ飛ぶようにしてあります。

基本はリンクと同じなのですが、飛ぶ先に指定するのがURLではなく指定文字(アンカー)になります。

ページ内リンク
目的地指定 <div name=”A” id=”A”></div>

リンクタグ <a href=”#A”>文字</a>

『 A 』の部分がアンカー。
お好みの半角の英字・数字・アンダーバー・ハイフンでアンカーを決め、
スタート地点に目的地指定のアンカータグを、ゴール地点にリンクタグを記述します。

たとえばこんな感じで。

ページ内リンク
<div name=”soko_ni_tobu” id=”soko_ni_tobu”></div>

<a href=”#soko_ni_tobu”>指定の場所までGO!</a>

『 ▲このページの上部に戻る 』リンク

特に1ページの情報量が多いサイトだと、一番下まで読んだ後に
自分でくるくるくるくるマウスで戻るのは大変です。
そういう時にすぐにページトップまで戻れるリンクがあると便利ですよね。
この『 ▲このページの上部に戻る 』リンクも、文字を入れないアンカーリンクで設置することができます。

タグ
<div name=”top” id=”top”></div>
<a href=”#top”>▲このページの上部に戻る</a>
違うページの指定場所にリンクを貼る

アンカーリンクは違うページの特定箇所を参照してほしい時にも役立ちます。
AのページからBのページの特定箇所にリンクしたい場合
それぞれのページに目的地指定と目的地のアンカーを記述します。

タグ
<!– Aのページ –>
詳しくは<a href=”B.html#link-setsumei”>ページBの『 リンクの説明 』(見出しh3)</a>をご覧ください。
タグ
<!– Bのページ –>
<h3 id=”link-setsumei”>リンクの説明</h3>

コード内にコメントを付ける

誰がコードを見ても理解できるように、また自分が後から見返して分かるように
記述内に覚え書きなどのコメントを付ける機能があります。
言語によってコメントの記述方法は異なるのですが、
今回のhtml言語の場合は<!––コメント宣言––>タグを使います。

コメントタグ
<!– 文字の背景色を変える –>
<style type=”text/css”>
</style>
</head>
<!– ここから下がページのメインコンテンツです –>
コメントタグ
<!–
コメントタグで挟めば
改行を含む複数行のコメントを
書くこともできます。
–>

複数のページを作り、どんどん記述するコードが増えるにつれて
「 あの時に一体何を思ってこのコードを書いたんだっけ…? 」 と
わけが分からなくなってしまうことがあります。
また、自分以外の担当者にサイト作成を引き継ぐ場合などはイチから説明するのもなかなか大変です。
そういった時にコメントがあれば、自分にも他人にもコードの中身が分かりやすくなります。
説明コメントだらけだと逆にコードが見返しづらくなりますので、
必要な箇所にのみ、できるだけ分かりやすく、なるべく簡潔にコメントを書く癖をつけましょう。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket