HTML5でページをつくる

2020年2月22日HTMLの基礎知識

HTML5を使ってウェブページを作成します。コピペで利用。

ファイルは「index.html」で保存します。

HTML5の基本形

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>DEMO SITE</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <header>
 <h1>DEMOSITE</h1>
 ヘッダーブロック
 </header>
 <main role="main">
 メインブロック
 </main>
 <footer>
 フッターブロック
 </footer>
</body>
</html>

各行の解説

HTMLの宣言

<DOCTYPE html>

1行目は「HTML5を使ってページ作っています！」の宣言です。

HTMLで囲む

<html>
ページについての情報と中身を入力
</html>

開始に<html>で始まり、

最後に</html>で閉じます。

言語の指定（今後は不要）

lang="ja"

「ja」＝Japaneseで、日本語を使うことを指定しています。<html lang="ja">という感じで使用していましたが、SEOからの観点では不要との見解がグーグルからあったそうで、今後は使わないことにします。

<head>はページの情報

<head>
ページの情報
</head>

開始に<head>で始まり、

最後に</head>で閉じます。

この部分はページの情報を格納するところで、ウェブページに表示はされません。

文字コードの指定

<meta charset="utf-8">

文字コードを「utf-8」に指定しています。文字コードとは、機器側が読む文字に変換する際の種類で、他に日本語対応の「Shift_JIS」がよく使われたりしますが、現在のウェブサイトでは世界共通の「utf-8」が主に使われています。たとえば、ファイルの保存を「Shift_JIS」で行い、ページの表示を「utf-8」でしようとすると文字化けします。主な文字化けの原因は、この文字コードの指定違いによります。

表示幅を各デバイスに対応（モバイル対応）

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

この1行にいくつか意味のあることが入っているのですが、大まかに言うと「モバイルにも対応するように横幅のサイズを可変できるようにする」という指定です。現在はいろいろな幅の機器に対応できるようにする必要があるので、この指定は必須です。

サイトのタイトルを指定

<title>サイトのタイトル</title>

サイトのタイトルを囲みます。ここでの入力文字はウェブページに表示されることではなく、ブラウザのタグ部分やグーグル検索などのタイトル部分に使われます。

CSSファイルの指定

<link rel="stylesheet" type="text/css" href="style.css">

別に作成したCSSファイルを指定してHTMLに呼び込み、ウェブページに反映させます。href=""のところには、同階層であればファイル名をそのまま書き入れ、外部からCSSファイルを呼び込む場合はURLを書き入れたりします。

<body>はページの表示部分

<body>
ページの表示部分
</body>

開始に<body>で始まり、

最後に</body>で閉じます。

ページの表示させる部分です。

<header>はページの見出し

<header>
ページのタイトルなど
</header>

開始に<header>で始まり、

最後に</header>で閉じます。

何のページなのかをタイトルや画像で表す部分です。他に<section>や<archive>などの囲み内でも使用します。

先に説明した<head>とは全く異なる要素なので注意！

<h1>は見出しのトップ

<h1>見出し</h1> 

開始に<h1>で始まり、

最後に</h1>で閉じます。

ヘッダー内ではページタイトル、記事ではそのタイトルなど最上層の見出しにあたります。下層としてh2,h3,h4,h5…と続きます。

<main>はページのメイン部分

<main role="main">
　　メインブロック
</main>

開始に<main>で始まり、

最後に</main>で閉じます。

ページのメイン部分を指定します。

<footer>は下部のメニューや作者の表示

<footer>
コピーライトなど
</footer>

開始に<footer>で始まり、

最後に</footer>で閉じます。

ページの作者を示すコピーライトやサイトメニューが入ります。

Posted by おまかせホーマン