HTML―右寄せなどHTML／CSS入門

ホームページなどのページはHTML／CSSを記述して表示します。HTMLは構造をCSSはデザインを決めます。この記事では、HTMLと、右寄せなどCSSの入門知識を解説しています。

▲記事トップへ

1. HTMLとは

HTMLとはは、本ページのようなWebページの文書を記述できるマークアップ式の言語です。

HTMLは、HyperText Markup Languageの略で、文章の中に記述することで画像、リスト、表、リンクなどさまざまな機能を記述して設定出来ます。

またCSSでレイアウトなどのデザインを調整したり、JavaScriptで表示後に動作を加えたりすることができます。

HTMLのサンプル

メモ帳などのテキストエディタでhello.htmlという名前で以下のコードを記述したファイルを作成します。

sample.html

<!doctype html>
<html>
<head>
<title>Hello</title>
</head>
<body>
Hello
</body>
</html>

表示例

作成したsample.htmlをブラウザで表示します。

CSS

CSSは、スタイルシートと呼びますが、CSSでHTMLタグの要素のレイアウトを設定できます。

文字を右寄せにする例

たとえば、HTMLの文字の開始は通常左からですが、CSSを使用して右寄せすることができます。

sample.html

<!doctype html>
<html>
<head>
<title>Hello</title>
<style>
body {
	text-align:right;
}
</style>
</head>
<body>
Hello
</body>
</html>

表示例

作成したsample.htmlをブラウザで表示します。

JavaScript

JavaScriptを組み込んで、レイアウトの設定を行ったり、ユーザの操作に伴って動的に変更したりすることができます。

HTMLの表示色確認ツール

以下は、HTMLの表示色確認ツールです。JavaScriptを使用してこのようなツールも作れます。

使い方

入力フィールドに設定した色を背景に設定され、HTMLの表示色を確認できます。

2. HTML入門知識

HTML入門知識について見ていきます。

HTMLの公開とバックエンド、フロントエンド

Webページをインターネットで公開する場合は、HTMLファイルをWebサーバプログラムが動作するサーバーに配置します。そうするとWebサーバプログラムが、ブラウザからの要求に応じてそのファイルのHTMLコードを読み込んで送信してくれるようになり、クライアント側でWebページが見れるようになります。

WebサーバプログラムとPHP、Ruby、Java言語のプログラムと連携すれば、HTMLファイルを配置しなくてもこれらの言語で記述したプログラムがHTMLコードを作成することができます。

このようにサーバサイドで動くプログラムのことをサーバーサイドプログラムとかバックエンドと言ったりします。それと対比して、ブラウザ側にコードが渡ってから動くHTMLやCSS、JavaScriptはフロントエンドといいます。

なお、ホームページをWeb公開するためにはレンタルサーバでサーバスペースを借りるなどして公開用のサーバを用意する必要があります。以下はレンタルサーバを借りて公開する例です。

申し込みから独自ドメインを設定してWebページ公開

バリューサーバーでのホームページ公開の仕方を紹介しているページです！申し込みから独自ドメインを設定してWebページ公開までを説明しています。

詳細

HTMLのバージョン

HTML 1.0
1993年6月にインターネット・ドラフトとして発表されたものをいいます。
HTML 2.0
1995年11月にRFC 1866として仕様が発表されたものです。シンプルなHTMLで、インライン画像やフォームが使えます。
HTML 3.2
HTML 3.2 は、1997年1月14日にW3C勧告として仕様が発表されたものです。 HTML 3.0は、策定作業中に破棄されました。
HTML 4.0
HTML 4.0は、1997年12月18日にW3C勧告として仕様が発表されたものです。
HTML5
HTML5は、2014年10月28日にW3C勧告として仕様が発表されたものです。動画や音声、グラフィックの描画が可能になりました。また、今までよりも記述する量がすくなくなりました。

HTMLの書式

HTMLの書式について見ていきます。

HTMLの記述例

HTMLはWebページの「構造」を指定するための言語（マークアップ言語）です。 Webページ内のコンテンツそれぞれに役割を与えます。

以下はHTMLの記述例になります。

<!doctype html>
<html>
<head>
<title>Hello</title>
</head>
<body>
Hello
</body>
</html>

書式とは

書式とは、構文とも呼ばれ、ソースコードの描き方、ある要素にどのような属性が指定できるか、子要素に何を含めることができるか、属性値として何が指定できるかなどです。

文書型宣言

HTMLは初めに文書型宣言を記述します。「<!doctype html>」はHTML5の文書型宣言になります。

ツリー構造

HTMLはツリー構造に親要素の中に子要素が記述されます。

HTMLのルート要素はhtmlで、子要素としてhead、bodyが置かれます。 headに基本情報、body日本文に当たる内容を含めます。

要素とは

HTMLコード自体は開始タグと終了タグで囲んで記述します。このタグで囲まれた部分を要素といいます。

タグは、「<」と「>」で囲まれた要素の記述で、開始タグは「<要素>」、終了タグは「</要素>」のように記述します。

また、HTML内にCSSやJavaScriptを組み込むことにより、レイアウトや動的な描画が行えます。

属性とは

タグには「<link rel="stylesheet" href="style.css" type="text/css">」の「rel」「href」「type」のように詳細が指定できるようになっています。この「rel」「href」「type」などのタグに指定する部分を属性といいます。

属性値とは

HTMLの要素（タグ）の属性に指定する数値や色、文字列、URLなどのことを属性値といいます。

要素の値

開始タグと終了タグで囲まれた中の記述を要素の値といいます。要素には「Hello」のようなテキストや要素を値として記述できます。

HTMLで特殊文字や記号を表示する

HTMLでは、「<」と「>」はタグを表すために使用されます。ですので、そのまま書くとそこはタグの一部と解釈され、うまく表示されません。

そのような、タグの表示に用いられる記号など特殊文字をHTMLで表示するには、&から始まるコードを用いて表示することができます。

なお、これらのコードは書式の通りに、必ず半角小文字で書く必要があります。

特殊文字の表示サンプル

上述のHTMLの特殊文字の表示の例として、表示できないサンプルとそれを表示できるようにしたサンプルを示したいと思います。

表示できないサンプル

HTMLでは、「<br />」のようにタグに使用される特殊文字を表示するには特殊文字のコードを使います。

これを表示すると以下のようになります。

HTMLでは、「
」のようにタグに使用される特殊文字を表示するには特殊文字のコードを使います。

表示できるようにしたサンプル

HTMLでは、「&lt;br /&gt;」のようにタグに使用される特殊文字を表示するには特殊文字のコードを使います。

これを表示すると以下のようになります。

HTMLでは、「<br />」のようにタグに使用される特殊文字を表示するには特殊文字のコードを使います。

HTMLの特殊文字、記号の対応

HTMLの特殊文字、記号の対応の例です。この他にもさまざまな文字を表示させることが可能です。

記号・文字	意味	HTMLでの表し方
&	アンド記号、アンパサンド	&
<	不等号、小なり、～より小さい	<
>	不等号、大なり、～より大きい	>
"	ダブルコーテーション、二重引用符	"
'	アポストロフィ	'

HTMLのタグ

HTMLのタグについて触れていきます。

HTMLのタグとは

HTMLのタグとは、<タグ名>の記号で囲まれた半角の英数字のことをいい、HTMLの要素を記述するために使用されます。タグを使用してHTMLの要素を記述することでWebページは作られています。

HTMLのタグの種類

HTMLのタグの種類について見ていきます。

HTMLの見出しタグ（h1～h6）

HTMLの見出しは、<h1>～<h6>タグで定義されます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し3</h4>
<h5>見出し3</h5>
<h6>見出し3</h6>

HTMLの段落タグ（p）

HTMLの段落を定義するタグは<p>です。

<p>段落です。</p>
<p>別の段落です。</p>

HTMLのリンクタグ（a）

HTMLのリンクを定義するタグは<a>です。

<a href="https://www.zeakseeds.com">リンク</a>

3. CSSの入門知識

CSS（スタイルシート）は、HTMLやXMLなどマークアップ言語の構造と表示形式を分離するための仕様です。以下ではCSSの入門知識について解説していきます。

CSSの記述例

CSSの記述例を見ていきます。

タグにstyle属性を指定して記述する例

CSSはHTMLのタグのstyle属性に「プロパティ：値」というように記述します。

<p style="color:red">HTMLにはタグとタグの属性、タグとタグの間の要素がある</p>

ただし、一般的にタグに直接style属性を記述してコーディングするのではなく、HTMLなどの文書ファイルとは別に「.css」ファイルを作成して記述します。

HTMLでCSSを別ファイルに記述する例

HTMLでCSSを別ファイルに記述する例です。

HTMLファイル

HTMLファイルではheadタグの要素として、linkタグを記述し、linkタグの属性にて取り込むCSSファイルを指定します。

<html>
<head>
<title>ブラウザに表示されるページタイトル</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>HTMLにはタグとタグの属性、タグとタグの間の要素がある</p>
</body>
</html>

CSSファイル

CSSファイルには以下のように記述します。

p {
	color:red
}

CSSの書式

CSSの記述例を見ていきます。

セレクタ {
	プロパティ:値
}

セレクタ
スタイルを適用する対象を指定する部分を「セレクタ」といいます。
プロパティ
設定するスタイルの性質（色や大きさなど）を「プロパティ」といいます。
値
プロパティに設定する設定値を「値」といいます。
宣言
「セレクタ {プロパティ:値}」の設定するスタイルのかたまりのことを「宣言」といいます。

CSSの実装スタイル

CSSの実装スタイルが共通化されてきています。

リセットスタイル

ブラウザの種類やバージョンごとに初期状態で適用されるスタイルシートの差を、ある程度統一する目的で用意するCSSファイルをリセットスタイル、リセットCSSなどと呼ばれます。

ノーマライズ

CSSでは、Webブラウザのデフォルトスタイルを活かしながら、ブラウザ間の表示差異をできるだけ少なくするスタイルをあらかじめ設定しておく場合があります。このようなCSSファイルをノーマライズと呼びます。以下のCSSが広く利用されています。

参考）https://necolas.github.io/normalize.css/

ホームページのHTML/CSSのボタンの例

ホームページのボタンのフリー素材（HTML/CSSコード）です。カラーコードを調整を変更すれば好きな色のボタンが作成できます。

サンプル

サンプルです。

ボタン

CSS

CSSのコードです。

a {
	text-decoration:none;
}
.button-light-blue {
	font-size:1rem;
	background:	#0bd;
	color:	#fff;
	border-radius:5px;
	padding:10px 15px;
}
.button-light-blue:hover {
	background:#0090aa;
}

HTML

HTMLのコードです。

<a class="button-light-blue">ボタン</a>

更新履歴

この記事の更新履歴です。

2019/10/21 HTMLのタグの種類について追記しました。
2019/10/20 HTMLの見出しタグについて追記しました。
2019/10/11 HTMLのタグについて追記しました。
2019/5/19 CSSについて追記しました。

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Burp /Eclipse /Fiddler /gcc /gdb /Git /g++ /JDK /JMeter /JUnit /Teraterm /ZAP

技術・仕様
Ajax /CORBA /Jakarta EE（旧称J2EE、Java EE） /JNI

ライブラリ／Framework／CMS
bootstrap /jQuery /FuelPHP /Lucene /MyBatis /Seasar2 /Spring /Struts /WordPress

Web API
Google Maps

ITインフラOSとミドルウェア
Linux /Windows /シェル
 ActiveMQ /Tomcat /MariaDB /MySQL /Nagios /Redis /Solr

ITインフラサーバー
公開Webサーバー

ITインフラネットワーク
プログラミング /構築

ITインフラセキュリティ
公開サーバーのセキュリティ

PC製品
ZOTAC

SI
ホームページの作り方

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

18.226.93.138

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a～z、A～Z、0～9」の文字をランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク

HTML―右寄せなどHTML／CSS入門

目次

1. HTMLとは

HTMLのサンプル

sample.html

表示例

CSS

文字を右寄せにする例

sample.html

表示例

JavaScript

HTMLの表示色確認ツール

使い方

2. HTML入門知識

HTMLの公開とバックエンド、フロントエンド

申し込みから独自ドメインを設定してWebページ公開

HTMLのバージョン

HTMLの書式

HTMLの記述例

書式とは

文書型宣言

ツリー構造

要素とは

属性とは

属性値とは

要素の値

HTMLで特殊文字や記号を表示する

特殊文字の表示サンプル

表示できないサンプル

表示できるようにしたサンプル

HTMLの特殊文字、記号の対応

HTMLのタグ

HTMLのタグとは

HTMLのタグの種類

HTMLの見出しタグ（h1～h6）

HTMLの段落タグ（p）

HTMLのリンクタグ（a）

3. CSSの入門知識

CSSの記述例

タグにstyle属性を指定して記述する例

HTMLでCSSを別ファイルに記述する例

HTMLファイル

CSSファイル

CSSの書式

CSSの実装スタイル

リセットスタイル

ノーマライズ

ホームページのHTML/CSSのボタンの例

サンプル

CSS

HTML

更新履歴