Home > 記事一覧 > 【初心者必見】HTMLの基本4〜ゼロから始めるウェブサイト〜
このエントリーをはてなブックマークに追加
ホームページ制作

【初心者必見】HTMLの基本4〜ゼロから始めるウェブサイト〜

クイックウェブの原田です。前回はテーブル組みについてご説明致しました。テーブル組みはHTMLを書いていく上でとても大切な要素の一つです、しかし少し難しい部分もあるので丸々一回を全てテーブル組みに特化した内容でお送りしました。
そんな今回の企画は「【初心者必見】HTMLの基本4~ゼロから始めるウェブサイト~」と題しまして前々回「【初心者必見】HTMLの基本2~ゼロから始めるウェブサイト~」のようにいくつかのタグをご紹介する形式となります。

今までのおさらい

大事なポイントを今回もまとめました。

  • HTMLはウェブサイトの土台を作る言語。
  • <html>~</html>のようにタグを駆使して記述していく。
  • あくまで構造部分を記述するのでデザインはCSSで記述していく。

尚、テキストエディタによっては補完機能がないため最初の記述が億劫な方もいらっしゃると思います。そんな方向けにコードを記述しましたのでよろしければこちらをコピーしてコードを記述してみてください。

	<!DOCTYPE html>
	<html>
	<head>
		<title></title>
	</head>
	<body>

	</body>
	</html>

それでは、おさらいはこれぐらいにしてさっそく本題に入っていきましょう。

タグ紹介

今回紹介するタグは以下のようになっています。

タグ一覧

  • sタグ
  • delタグ
  • strongタグ
  • aタグ
  • コメントタグ
  • クラスについて
	<s>~</s>タグ

このタグは、すでに以前は正確だったが現在では正確でなくなったり、関係なくなったという意味でテキストに横線を引くものです。ただし訂正する、 取り消す際には使用しませんので注意が必要です。わかりやすく言えば過去の情報などに使用します
記述例

	<s>税込9,800円</s><p>セール価格税込5,000円</p>

上記のように記述すると「税込9,800円」の部分が「税込9,800円」と表示されます

	<del>~</del>タグ

このタグは削除や訂正された情報に対して取り消し線を引く際に使用するタグです 以下のように記述することでこのタグは機能します。
記述例

	<del>応募はこちら</del>
	<p>応募は終了しました</p>
サンプルコード

このように記述することで、「応募はこちら」の部分が「応募はこちら」というふうに表示されます。

見た目は<s>~</s>タグと一緒ですが意味は違うので合わせて覚えておきましょう。

このほかにも用法がそっくりなタグはあります

例えば以前ご紹介した<b>~</b>タグですが、これに似たものとして<strong>~</strong>タグというものがあります。
<strong>強調したいテキスト</strong>
というふうに記述すると、<b>~</b>タグと同じように太字になります。
<strong>~</strong>の方がSEO効果はあるということを噂もありますが所詮は噂です。 Googleも「差はない」と明言しているので気にすることはないでしょう。

<a>~</a>タグ
時々見られる「詳しくはこちら!!」というものです。
簡単言えばリンクを貼り付けるタグです。記述の仕方は以下のようになっています。
<a href="URL">表示させたいテキスト</a>というふうに記述します

番外編

ここからご紹介するものはタグと関係するものですとても役に立つので是非とも覚えておきましょう。

コメント

自分がこのタグでサイトのどの部分を記述しているかなどのメモを記述できます。 もちろんウェブ上には表示されないのでご安心ください。 正確にはタグの一種で、「コメントアウトタグ」と言います。 記述方法は以下のようになっています
<!--ここにコメントを記入します-->

クラス

今まで触れてこなかった「クラス」の考え方についてご説明いたします。 このクラスを覚えていくときに知っておいて欲しいのが<div>というタグです。このタグは複数のタグをひとまとめにする効果があります。

	<h1>見出し</h1>
	<p>本文<p>

これらの記述を全て赤色にしたいときCSSで2回同じことを書くのであれば1回でまとめて済ませたいですよね?そんなときにこのタグを活用し、以下のように記述すると、

	<div>
	<h1>見出し</h1>
	<p>本文<p>
	</div>

これによって<div>~</div>の中に入っているものを1つのグループとして扱うことができます。

次にクラス(class)ですが、これはdivにつける名前と思っていただいても結構です。 というのも、今後HTMLを記述する際にこのdivは使うことが多くなることでしょう。 そんな中で複数のグループが存在していても区別ができなければいけません。
divで括られたグループが3つ存在したとしてもそれらをCSSなどで指定する際にグループを識別するためにつける名前のことです以下のように記述します。

	<div class=”つけたいクラス名”>
	<h1>見出し</h1>
	<p>本文<p>
	</div>

このようにすることで複数のクラスも区別できるようになります。 このクラスという概念は今後必ず役に立つと思います。覚えておきましょう

まとめ

今回の企画では前回とは打って変わり、複数のタグ特に似通っているものをご紹介いたしました。もちろん今回ご紹介したものは今後使う機会が訪れることでしょう。最後にご紹介した コメントやクラスについても必須と言えるものばかりです。これは余談ですが、表示速度という面で考えるとSEOの観点ではホームページを作成するソフトやツールを使用するよりも、 自分でじっくり勉強して考えてコードを記述した方がいいです少しでも自分のサイトを上位にあげて見たいのであれば自分で作るのも一つの手かもしれません。

サンプルコード

最後に今回の企画でご紹介したタグをひとまとめにしたサンプルコードを記述しております。是非ともご活用ください。

	<!DOCTYPE html>
	<html>
	<head>
		<title>HTML基本4</title>
	</head>
	<body>
		<h2>色々なタグ</h2>
		<!--これはコメントアウトタグです-->
		<del>これはdelタグです</del>
		<s>これはsタグです</s>
		<b>これはbタグです</b>
		<strong>これはstrongタグです</strong>
		<p>実際に記述を読んでコメントを確認して見ましょう</p>
	</body>
	</html>

クイックウェブのレンタルホームページは充実のサポート対応

レンタルホームページ、クイックウェブならサーバーやドメインの取得といった面倒な手続きは一切不要です。簡単、低価格であなたのホームページを作成することができます。基本プランでは、ドメインは「.com/.net/.org/.biz/.info」の中からお選び頂けます。また、ホームページの活用方法や集客方法などは、専門のスタッフもいるのでサポートやアフターフォローもついています。もしあなたが、経営者・個人事業主・ウェブ担当者でこれからホームページを作成しようと思っているなら、簡単、低価格であなたのホームページを作成することができる、レンタルホームページ、クイックウェブを検討してみてください。ちなみに、当社では本格的なホームページを月々5,000円から利用できるレンタルホームページというサービスを行なっていますが、はじめから美しいデザインになるように計算されたホームページのテンプレートがあります。もしあなたが、これから何かしらのテーマのホームページを作ろうとされている方なら、ぜひ一度覗いてみてください。

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

最近書いた関連記事