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

    icon-clock-o読了時間:約22分34秒

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

 目次 

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

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

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

空白(スペース)を作る

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

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

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

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

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

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


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

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

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

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

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

基本のリストタグのみを記述すると、このように黒丸の付いた箇条書きになります。
リスト黒丸

マーカー付きのリスト

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

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

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

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

こういったリストマーカーのように、ちょっとした丸や四角を自分で作る時には
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(http://www.website.com/image/sqs27.jpg) となります。

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

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

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

太字にする strong

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

テキストの段落 p

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

このpタグにCSSスタイルを指定すれば、行間の幅や文字のフォントなども自由に決めることができます。

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

改行する br

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

空白(スペース)を作る

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

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

見出しタイトルの左右に書かれている謎の文字列 &nbsp; がノーブレークスペース。
これを記述した箇所には半角に似た幅のスペースが出現します。

代表的な特殊文字

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

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

&yen;   ¥ (円マーク)
普通に半角の円マーク¥を記述すると、そのページに使われている文字コードによっては
半角のバックスラッシュとして表示されてしまうことがあるため、
特殊文字で表記することが推奨されています。
 ⇒なぜこんなことになっているのかは Hello Dolly を改造してリサイクル 
  ページ中ほどの『 改行コードについて補足 』の項をご覧ください。

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

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

各種の線を引くタグ

下線を引く uタグ

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

取り消し線を引く delタグ

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

水平線を引く hrタグ

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


基本の状態ではメインコンテンツの幅に合わせた100%の長さになっています。

閉じタグは無いので注意。

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







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

リンクを貼る

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

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

今回のコード記述例ですと31行目のメールフォームへのリンクや42行目の地図サイトへのリンクが存在します。
自分のサイト内で移動するリンクであれば、URLとディレクトリのどちらの記述でもOKです。
これも画像の設定と同じで、何かの拍子にお引越ししてURLが変わってしまうと
いちいち自サイト内のリンクも書き換えなければなりません。
最初からディレクトリでリンクを記述しておけばそんな面倒を回避できるので
出来るだけディレクトリで記述することが推奨されています。

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

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

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

target=”_blank” と rel=”external”

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

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

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

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

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

相互リンク

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

ランキングに参加

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

リンク集への登録

これもジャンルによって様々なリンク集があります。
例えば弊社だと修理ナビパソコン故障・修理・サポート相談.COMに参加しています。
ピンポイントでそのジャンルについての情報を求めているひとが訪れてくれる可能性が高くなりますし、
ランキングと違って順位の浮き沈みに一喜一憂することもなく、気軽に登録・解除できるのでおすすめです。

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

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

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

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

たとえばこんな感じで。

一番目のコードを本文の最下部に記述(目には見えませんが)してアンカーを設定してあります。
二番目のコードをここ ↓ に記述しています。
このリンク 本文の一番下までGO! を押してみてください。
この文章の一番下、関連記事の上のあたりに飛ぶと思います。

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

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

ノーブレークスペースで指定する場合

私はサイトを作り始めたときに ↑ この方法しか知らなかったのでこれで設定していたのですが、
リンクに下線を引く設定にしているとノーブレークスペースの半角空白のところに
アンダーラインが出てしまうので、このブログの中では ↓ 下の方法に修正しました。
空白なしで指定する場合

この方法で今のところエラーが出たりといったことも無いので、
いちいち下線のことを気にしなくて良いように、最初からこちらで設定したほうがいいかなと思います。

違うページの指定場所にリンクを貼る

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

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

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

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

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

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