お役立ち情報

HTMLとは？基礎から重要なセマンティックタグやカラムの使い方まで

HTMLとは何か？

ギリシャのパルテノン神殿の柱が、世界で最も注目すべき建造物の一つを支えているように、HTMLの柱もまた、よりユニークなウェブサイトを支えています。この2つの違いは、「デジタルかそうでないか」というだけです。HTML（Hyper Text Markup Language）とは、ウェブページの構造を定義するウェブ用のマークアップ言語のことを指します。あらゆるウェブサイトの最も基本的な構成要素の一つとなるため、ウェブ開発のキャリアを積みたいのであれば、習得することが極めて重要です。HTMLをよく理解するために、その略語を構成する各単語を確認してみましょう。

・Hyper Text（ハイパーテキスト）：関連する項目をつなぐために構成されたテキスト（多くの場合、画像などの埋め込みも含む）
・Markup（マークアップ）：ハードコピーやソフトコピーの形式で印刷されるものをタイプセットするためのスタイルガイド
・Language（言語）：コンピュータシステムが理解し、コマンドを解釈するために使用する言語

HTMLは、ウェブページの構造を決定します。しかし、この構造だけではウェブページを見やすくインタラクティブにすることはできません。そこで、CSSやJavaScriptなどのアシスト技術を使って、それぞれにHTMLを美しくしたり、インタラクティブ性を加えたりすることになります。このとき、「HTML」「CSS」「JavaScript」という3つの技術を、HTMLは骨格、CSSは皮膚、JavaScriptはその骨格と皮膚に命を吹き込む循環器系、消化器系、呼吸器系といった具合に人体と考えて分解したいところです。他にも、HTMLは家の構造、CSSは内装や外装、JavaScriptは電気や水道など、家を住みやすくするためのさまざまな機能に例えることもできるでしょう。

HTMLタグ
HTMLは、特定のウェブページのマークアップを定義するものです。そのため、テキストや画像、その他の埋め込みを特定の方法で表示させる必要があります。例えば、「あるテキストは大きく」「あるテキストは小さく」「あるテキストは太字、斜体、箇条書きにする」といった具合です。HTMLには、これを実現するための見出し、段落、太字、斜体などを作る「タグ」があります。

HTML要素
HTML要素は、開始タグや文字、コンテンツ、終了タグで構成されます。一部の要素は、空です。つまり、終了タグがなく代わりにウェブページに埋め込みたいコンテンツへのソース、またはリンクがあります。空の要素の例は<img>です。ウェブページに画像を埋め込むために使用します。HTML要素は、タグと同じ意味で使用されることがよくありますが、2つには違いがあることも押さえておきましょう。要素は、開始タグと終了タグ、それらの間のコンテンツの組み合わせです。

HTML属性
HTMLタグは、属性と呼ばれるものも受け取ります。これらの属性は、開始タグに配置され、スタイルやIDからクラスにまで及ぶのが特徴です。それらは、値を取ったり要素に関するより多くの情報を伝えたりするなど、スタイル設定やJavaScript での操作などを行うのに役立ちます。基本的な HTML ページの構造は、次の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Definition of HTML</title>
</head>
<body>

</body>
</html>

ここで、重要なコードを見てみましょう。

<html></html>
すべての HTML ドキュメントのルート、または最上位の要素です。他のすべての要素をラップする必要があります。

<head></head>
HTML ドキュメントの最も重要な部分の一つです。ウェブクローラーは、headタグ内を調べてページに関する重要な情報を取得します。ページやタイトル、スタイルシート、SEOのメタ情報などの情報が含まれているのが特徴です。

<meta></meta>
これは、ページに関するメタ情報を伝える空の要素です。このような情報には、作成者や使用しているエンコーディングの種類（ほとんどの場合 UTF-8）、応答性、互換性などが含まれています。ウェブクローラーは、常にメタタグを参照してウェブページに関する情報を取得しているため、SEOで重要な役割を果たしているといえるでしょう。

<title></title>
Web ページのタイトルを定義しており、ブラウザのタブに常に表示されます。

<body></body>
HTML ドキュメントのすべてのコンテンツがbodyタグ内に配置されます。ページ全体で <body> タグを1つだけ使用可能です。

重要なセマンティックタグとその機能

最も一般的に使用される、セマンティックHTMLタグをいくつか見てみましょう。

<header>
<header>要素は、ウェブページの紹介セクションを定義します。ロゴやナビゲーション、テーマ、スイッチャー、検索バーなどのアイテムが含まれています。

<nav>
<nav>要素は、ホームや連絡先、概要、FAQなどのページのナビゲーション項目を指定します。

<main>
<main>要素は、慣習的にタグの直下の子孫として扱われ、<header>と<footer>を除くHTMLドキュメントの主要なセクションが含まれています。HTMLドキュメント全体に、これらの1つだけが存在することが理想的です。

<section>
<section>要素は、Web ページの特定のセクションを定義します。これは、ショーケースセクションや概要セクション、連絡先セクションなどです。 1つのHTMLドキュメントで多数のセクションを使用できます。

<article>
<article> 要素は、特定の情報を伝えるウェブページの特定の部分を表します。このような情報は、テキストや画像、ビデオ、埋め込みの組み合わせの可能性があります。

<aside>
asideという名前が示すように、ウェブページのサイドバーを表します。通常は、メインコンテンツと直接関係のないウェブページの一部です。

<footer>
<footer>要素には、クイックリンクや著作権情報、ウェブサイト全体、ウェブページに関連するその他のデータなどの項目が含まれます。

セマンティック要素は、実際の意味と特定のコンテンツが実際に何をするか（ナビゲーション用のナビゲーション、サイドバー用のaside など）を伝えるものです。そのため、これらの要素は、本来あるべき場所に自動的に配置されないことに注意しましょう。非常にシンプルなセマンティックHTMLドキュメントは、次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Definition of HTML</title>
</head>

<body>
<header>
<h1 class="logo">LOGO</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQs</li>
</ul>
</nav>
</header>
<main>
<section class="about-me">
<article>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
nesciunt, nisi inventore assumenda earum repellat labore ratione
architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
voluptatem quam at officia beatae!
</article>
</section>
<section class="contact-me">
You can find me on
<a href="https://twitter.com/koladechris">Twitter</a> You can find me on
<a href="https://Instagram.com/koladechris">Instagram</a>
</section>
<aside class="address">My Address</aside>
</main>
<footer>© 2022 All Rights Reserved</footer>
</body>
</html>

<aside>タグ内のコンテンツがサイドバーになく、<nav>タグ内のコンテンツがナビゲーションバーとして自動的に利用できないことがわかります。これが、CSSで想定されているように見えるようにしなければならない理由です。

HTMLでカラムを作成する方法

HTMLで列を作成する方法は、1つだけではありません。HTMLとCSS の組み合わせが必要です。今まで列を作成する唯一の方法は、項目のサイズが固定されたページのCSSスタイルを設定し、列を手動で表明することでした。このような方法は有効でしたが、カラムの視覚的な外観をシミュレートするだけのものだったわけです。その後、CSSは成長し列を持つレイアウトの構築は、以前よりはるかにアクセスしやすくなり、サポートも充実しました。さらに、ウェブページのカラムレイアウトを作成する方法はたくさんあります。

HTMLの2カラム
HTMLでシンプルな2カラムのレイアウトを作成するのは、難しいことではありません。なぜなら、1つのCSSセレクタに幅とマージンを設定するだけでよいからです。この基本的なカラムレイアウトの例で、HTMLを設定するために必要なコードを見てみましょう。

<body>
<div class="column" style="background-color:red;">
<h2>Column 1</h2>
<p>Data..</p>
</div>
<div class="column" style="background-color:blue;">
<h2>Column 2</h2>
<p>Data..</p>
</div>
</body>

このコードは、基本的なもので、2つの要素を持つ列ベースのレイアウトを作成するだけです。しかし、そのスタイルを設定するために必要なCSSがなければ機能しません。このHTMLを2列のレイアウトにスタイル設定するために、必要な基本的なCSSのコードを見てみましょう。

.column {
float: left;
width: 50%;
}

上記の3行のCSSを記述するだけで、2カラムのレイアウトになり、自由自在に使い分けることが可能です。しかも、このデザインはユーザーのディスプレイに合わせて、必要に応じてサイズを変更し、その大きさと構造を維持することができます。このような簡単な方法を覚えたところで、より拡張性に優れた他の方法についても見ていきましょう。

カラムのためのHTMLコード
長年にわたり、CSSは多くの成長と発展を遂げ、ウェブページをよりシンプルかつクリーンにスタイリングするためのツールが改良されてきました。これらの変更は、単に柔軟性を提供するだけではありません。また、よりシンプルになりDRYコードの実践をサポートするようになりました。CSSの現状では、カラムを作成するいくつかの方法は嫌われています。かつて、開発者はCSSのテーブルを使用して列を作成するのが一般的でしたが、現在ではこの方法は使われなくなりました。その代わり、明示的に列を作成する方法があります。以下でそれを見てみましょう。

CSS3では、ある要素をターゲットにして、その列のプロパティを直接設定することができます。この方法は、テキストを読みやすくするために列を分割する場合に有効です。

.column{
columns: 45vw 3;
}

このコードは、複数のHTML要素を列として整理したい場合にはうまく機能しないため、別のアプローチが必要です。CSS3では、HTML で列を作成する処理をクリーンかつ効果的に行う方法があります。上記のHTMLを使用して、2つの均等な大きさの列を作成するために必要なCSSコードを見てみましょう。

body {
width:100%;
display: inline-flex;
flex-wrap: wrap;
}
.column {
width:50%;
}

このコードでは、body要素内にシンプルで柔軟な2列のレイアウトが作成できます。ただし、複数の列を考慮したものではありません。複数列の場合は、列の親コンテナを作成するための追加のHTMLが必要です。各列の行として新しい親要素を追加することで、複数の行と各行の列のサイズの変更ができます。この効果を実現するために必要なHTMLを見てみましょう。

<body>
<section class="row">
<div class="column-2" style="background-color:red;">
<h2>Column 1</h2>
<p>Data..</p>
</div>
<div class="column-2" style="background-color:blue;">
<h2>Column 2</h2>
<p>Data..</p>
</div>
</section>
<section class="row">
<div class="column-3" style="background-color:green;">
<h2>Column 1</h2>
<p>Data..</p>
</div>
<div class="column-3" style="background-color:brown;">
<h2>Column 2</h2>
<p>Data..</p>
</div>
<div class="column-3" style="background-color:purple;">
<h2>Column 3</h2>
<p>Data..</p>
</div>
</section>
</body>

このHTMLは、行のコンテナとして機能する2つの追加セクションで構成されています。最初の行は2列のレイアウトで、2番目の行は3列のレイアウトです。これらの変更で追加のCSSも必要になるため、列のサイズのセットごとに新しいクラス名を作成します。クラス名をcolumnからcolumn-2、column-3に変更することで、各カラムのサイズを簡単に設定することが可能です。このレイアウトを作成するために必要なCSSを見てみましょう。

.column-2 {
width:50%;
}
.column-3 {
width:33.333%;
}
.row {
width:100%;
display: inline-flex;
flex-wrap: wrap;
}

このコードでは、2列のマルチカラムレイアウトを作成しています。しかし、ウェブページのカラムレイアウトを作成する方法は、他にもあり、それぞれにメリットとデメリットがある点も押さえておきましょう。例えば、CSSグリッドレイアウトは、ウェブページのレイアウトを作成する際に、非常に大きな力や制御、柔軟性を提供します。

HTMLを理解し、カラムレイアウトを進化させる

HTMLの基礎と機能については、CSSやJavaScriptなど、より高度な技術を学び、ウェブ制作の分野で確かなキャリアを形成していきましょう。また、HTMLのWebページでカラムを使うには、カラムを作るさまざまな方法を勉強するのが大切です。多くの方法があり、例えばCSSプリプロセッサのコードにカラムレイアウトが組み込まれているものさえあります。さらに、メディアクエリと組み合わせてレスポンシブなページを作るなど、カラムを使ってさまざまなことが実現可能です。

ページを閲覧するデバイスの画面サイズに応じて、カラムのサイズや数を変更できるページを作成することもできます。いろいろな方法を実践し、自分に合った最適な方法を身に付けていきましょう。

ご利用前にアカウントの登録が必要です。こちらのアカウントで全てのサービスをご利用頂けます。このサービスは企業様専用のサービスとさせて頂いております。個人、個人事業主の方はご利用頂けません。

ご利用前、ご利用中のお客様でご質問がある場合はお気軽にお申し付け下さい。

テレワーク（在宅ワーク）対応、システムを駆使してコストの削減・事業の効率化・売上の向上をご提案致します。＜低リスク・低価格＞なサービスとなっています。

アカウント数の制限や課金体制により、便利で安そうなソフトウェアが割高になることもございます。さまざまなお客様の声に応えようとすると、多機能になりすぎて、ほとんどの会社が利用しない機能、わかりずらい機能などを抑えて、シンプルで最小限のソフトウェアの提供を目指しております。運用実績のあるソフトウェアを販売も行っております。カスタマイズして便利に使えるソフトウェアにもなります。

中小・個人事業主へ特化した長く使える安くて便利なソフトウェアの提供を行っております。

お電話では一次受付となり全て折り返し対応とさせて頂きます。折り返し対応には３営業日以内に折り返し致します。既にアカウントをお持ちの方は会員画面のご要望欄からも受付しております。＜業務担当は土日祝お休みとなります＞

APソフトウェア　お問合せ先　TEL 03-4578-5831