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

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

クイックウェブの原田です。前回の企画では、HTMLの基本的な部分を紹介し、簡単ではありますが、実際にコードの編集も行いました。そんな今回の企画は、「【初心者必見】HTMLの基本2〜ゼロから始めるウェブサイト〜」と題しまして。前回の企画でも告知しましたが、 HTMLにおいて頻出する「これだけは押さえておきたい!!」というものにピックアップしてご説明させていただきます。

前回のおさらい

前回の記事はこちら:【初心者必見】HTMLの基本〜ゼロから始めるウェブサイト〜

それではまず前回のポイントをおさらいをしていきましょう。

前回のポイント

  • HTMLとはウェブサイトの土台を形作る重要な言語で、デザインをCSSで行いこれらを組み合わせてウェブサイトを構築する。また、現在インターネット上に存在するウェブサイトのほとんどがHTMLで作られている。
  • HTMLではタグというものがあり、これを駆使してコードを書いていく。
  • タグには、開始タグと終了タグというものがあり、これらで挟み込むことでタグは成立する。

前回の企画で大事なところはこれぐらいでしょうか。それでは前回の企画に登場したタグをおさらいしていきましょう。

タグのおさらい

	<p>~</p>

文章や、段落を表示させるために必要なタグで、最も使用するであろうタグ。

	<th1~6>~</h1~6>

見出しを形作るタグで、hの次に来る数字が大きいほど見出しのサイズが小さくなる。
↓サンプルコードを貼り付けていますので、こちらを前回ご紹介した手順でブラウザに表示させて違いをご確認ください。

	<!DOCTYPE html>
	<html>
	<head>
		<title>h1~6タグ</title>
	</head>
	<body>
		<h1>h1タグの見出し</h1>
		<h2>h2タグの見出し</h2>
		<h3>h3タグの見出し</h3>
		<h4>h4タグの見出し</h4>
		<h5>h5タグの見出し</h5>
		<h6>h6タグの見出し</h6>
	</body>
	</html>

頻出するタグ

それではここからは、HTMLのコードを書いていくにあたり、頻出するであろう基本的なタグについてご説明いたします。最後に今日ご紹介したタグのサンプルコードを掲載いたしますのでこちらも前回ご紹介した手順で表示させたり、自由に編集してみてください。

	<br>タグ
	<br>タグは改行をする際に使用します。書き方は以下のようになっています。
	<p>ここで<br>改行</p>
	このように書くと<br>タグ以降の文字(改行)は改行されて表示されます。
	また、<br>タグに終了タグは存在しません。
	<hr>タグ
	<hr>タグは罫線を引いて改行を行います。書き方は以下のようになっています。
	<p>ここから<hr>改行</p>
	このように書くと<hr>タグ以降の文字(改行)を改行し、改行したも時とその上の文字の間に罫線を引きます。
	<b>~</b>タグ
	<b>タグは文字を太字にすることができます。
	例えば下記のように記述すると
	<b>ここは太字</b>

「ここは太字」の部分が <b>太字</b> になります。

	<i>~</i>タグ
	<i>タグは文字を斜体にすることができるタグです。
	<p>タグや<b>タグのような要領で、
	<i>ここは斜体</i> と記述すると

「ここは斜体」の部分が <i>斜体</i> として表示されます。

	<ul>,<ol>,<li>タグ
	これらのタグは、箇条書きをする際に使用します。
	といっても「ulとli」、「olとli」をセットで使用します。
	それではまず「ulとli」を使用した書き方をご紹介します。
		<ul>
			<li>項目1</li>
			<li>項目2</li>
			<li>項目3</li>
		</ul>
	上記のように記入します。
	続いて、「olとli」を使用した方法での書き方をご紹介します。
		<ol>
			<li>項目1</li>
			<li>項目2</li>
			<li>項目3</li>
		</ol>
	上記のように記入します。
	もうお気付きの方もいらっしゃると思いますが、<li>は項目を記述する際に使用するタグです。<ul>と<ol>の違いですが、
	<ul>タグを使用すると
  • 項目1
  • 項目2
  • 項目3

と表示されます

	<ol>タグを使用すると
  1. 項目1
  2. 項目2
  3. 項目3

と表示されます
つまり、項目の左側が数字になるか、・になるかの違いということになります

今回のまとめ

今回は基本的なタグの中でも特に簡単なものについてご紹介させていただきました。テーブル組みなど必要なものはまだまだありますがそちらに関してはまた別企画とさせていただきます。最後に、今回登場したタグを記述したサンプルコードを貼り付けておりますので前回ご紹介した方法で表示、編集をして見てください。

	<!DOCTYpE html>
	<html>
	<head>
		<title>色々なタグ</title>
	</head>
	<body>
		<p>ここで<br>改行</p>
		<p>ここで<hr>罫線を引いて改行</p>
		<p><font size="1">フォントサイズ1</font></p>
		<p><font size="6">フォントサイズ6</font></p>
		<p><font color="red">赤色の文字</font></p>
		<p><font color="blue">青色の文字</font></p>
		<p><font size="6" color="red">フォントサイズが6で赤色の文字</font></p>
		<p>文章の<b>この部分</b>を太字で表示</p>
		<p>文章の<i>この部分</i>を斜体で表示</p>
			<ul>
			<li>項目1</li>
			<li>項目2</li>
			<li>項目3</li>
		</ul>
		<ol>
			<li>項目1</li>
			<li>項目2</li>
			<li>項目3</li>
		</ol>
	</body>
	</html>

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

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

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

最近書いた関連記事