さて、HTML入門講座「その２」です。
今回も、基本的、かつ、簡単で便利なタグを５つマスターしましょう。
できれば、実際にキーボードで打ち込んで練習してください。
いろいろなことができるタグですが、お店ページを作るときに心がけるのは、あくまで「お客さんが読みやすいか？」「見やすいか？」という点です。
色がつけられるからといて、カラフルなページにしてしまうと品を下げて逆効果になりかねません。
できるだけ、シンプルにするよう心がけてください。（激安店などは別）
<HR> 横線を引く
文章が長くなると空行を入れる方法もありますが、横線を引くことで、前後の関係をばっさり切ってメリハリをつけることができます。
「メリハリ」もページ作りのキーワードです。
だらだら長い説明文は誰も読みたくありません。
横線を使って読みやすくレイアウトすることができます。
【書き方】
<hr width=”95%”>
※<hr>単品で使います。90％は、許可されている横幅に対して、どれくらいの割合の長さにするか。」ということです。
「％」以外「ピクセル」で長さを指定することも可能です。パーセントで指定したほうがスマホでも表示しやすくなります。
タグの中に入る「width（ウィドス）／横幅」などをプロパティーと言います。
今回は、幅だけを指定しましたが「size=”2″」を太さを指定したり、「color=”green”」と色を指定することもできます。
【使い方の例】
戦後の日本の家庭の床はフローリングが多く取り入れられています。綺麗なフローリングを貼ったのに、モノを落としたりお子様が傷つけたりなどすると ショックですよね。いつも心配していては、せっかくのフローリングも楽しめません。さて、今回入荷したのは「ふんわりコルクマット」です。厚みが50mmもあるので、消音性はもちろんのこと、クッション性にも優れていて、キッチンでの立ち仕事でも疲れにくく、ゴロ～んと寝転んでも気持ちいいのが特徴です。
↓
戦後の日本の家庭の床はフローリングが多く取り入れられています。綺麗なフローリングを貼ったのに、モノを落としたりお子様が傷つけたりなどすると ショックですよね。いつも心配していては、せっかくのフローリングも楽しめません。
さて、今回入荷したのは「ふんわりコルクマット」です。厚みが50mmもあるので、消音性はもちろんのこと、クッション性にも優れていて、キッチンでの立ち仕事でも疲れにくく、ゴロ～んと寝転んでも気持ちいいのが特徴です。
【色やサイズを変えてみたパターン】
<hr width=”95%” size=”4″ color=”brown”>
あくまで参考です。実際のページ作成の現場ではあまり使いません。通常は<hr>だけで済ますことが多いです。
<p> 一段落を囲む
こんなところで出てきたのですが、このタグは超重要なので完璧に覚えてください。
と言っても、ひとつの段落を囲むタグです。
囲んだしたに改行が自動的に入るので余計な<br>を打つ必要がなくなります。
文章を書くときは、一段落は必ず<p>～</p>のセットで囲こむクセをつけてください。
【書き方】
<p>今、ちまたで大人気のシリコン製フェイスマスクです。市販の顔パックの上にかぶるだけで、保湿効果２万倍！アンチエイジングも６万倍です。</p><p>フリーサイズなので赤ちゃんから、お顔の大きなカバさんまで広くカバーできます。ぜひ、冬の乾燥対策のお供にどうぞ。</p>
↓
今、ちまたで大人気のシリコン製フェイスマスクです。市販の顔パックの上にかぶるだけで、保湿効果２万倍！アンチエイジングも６万倍です。
フリーサイズなので赤ちゃんから、お顔の大きなカバさんまで広くカバーできます。ぜひ、冬の乾燥対策のお供にどうぞ。
※サンプルの文章はふざけたフィクションですのでいちいち気にしないように。
<s> 打ち消し線
これぞネットショップ運営者のためにあるタグと言っても過言です。
文字をこのように打ち消します。
「何に使うかって？」そりゃ、値段表記ですよ。
「本当は2000万円もするものを、涙の70％OFFでご奉仕させていただきます！（号泣）」といった価格の見せ方にピッタリです。
【書き方】
通常価格：<s>2,000万円</s> → 600万円 （70％OFF！）
↓
通常価格：2,000万円 → 600万円
※余談・・・この割引率は悪質過ぎますね。通常2000万というからには、本当に2000万で売っていた実績がないとウソとみなされますし、ヤフーストアでは実際に売った実績がないとこのような表記はできません。（関連ページ：アンカリング効果）
<h2> 見出し
ウェブサイトのページは、本や論文などと同じく、「大見出し」→「中見出し」→「小見出し」という順番で書かなければいけません。
大見出しの前に小見出しが来るのはダメです。
この見出しを指定するのが<h1>、<h2>、<h3>です。<h6>までありますが、制作現場では多くても<h3>までしか使いません。
<h1>はページ内に1個というのが基本です。<h○>タグの下は改行されます。
ヤフーストアの場合、商品ページでは、大見出し<h1>は自動的に「商品名」に割り振られているので、他に使う場合は<h2>から使います。カスタムページを作る場合も、ショップ名に<h1>が使われているので、<h2>から使います。
【書き方】
<h3>ヤフーストアの見出しタグ</h3>
ヤフーストアでは、商品名に<h1>タグが付きますが、見た目上は、右上に通常の文字の大きさで表示されています。そのため、見出しとはわかりにくくなっております。↓のようになります。
ヤフーストアの見出しタグ
ヤフーストアでは、商品名に<h1>タグが付きますが、見た目上は、右上に通常の文字の大きさで表示されています。そのため、見出しとはわかりにくくなっております。
<u> 文字に下線を引く
ここ重要ですよ！というふうに、テキスト文字の下に線を引くことができます。
【書き方】
<u>あなたのような客はお断りですから！そう、出禁！出禁！</u>
↓
あなたのような客はお断りですから！そう、出禁！出禁！
<b>と同様、強調させることができます。ただし、最初にも書いたように、使いまくると、読みにくい品のないページなって、お店全体のイメージを損ねかねません。メリハリをつけて、「どうしても下線を引くべき」と思えるところだけに引くようにしましょう。