Webページの設定

基本構造で、<head>と</head>の間にページ自体の設定事項や他のプログラムで処理する内容を記述すると説明しましたが、どのようなことを記述するのか説明します。

記述できることはたくさんありますが、よく使用されるものを紹介します。

<meta>タグ

ページ自体の設定や、情報、検索サイトへの対応といった追加の情報を定義するためには、主に<meta>タグを使用します。<meta>タグの属性を使用して設定や情報を指定していきます。

日本語の文字コード指定

日本語でWebページを作成する場合、シフトJISやEUCなど、様々な文字コードが使用されます。それらの文字コードの違いを特に指定しなくても、多くのブラウザでは自動的に文字コードを判別し、正しく表示する機能を持っています。しかし、何らかの原因で文字化けしてしまうのを防ぐために、次のように<meta>タグを記述します。

属性であるcontentの値に「;」で区切って「charset=任意の文字コード」を記述し、どの文字コードでWebページが作成されているかを指定します（http-equiv属性やcontent属性につていは、タグ一覧を参照してください）。

上の例では、charsetに、シフトJISコードを指定しています。通常、WindowsなどのOSではシフトJISが使用され、UNIX系のOSではEUCが使用されることが多いです。指定する値としては次のようなものがあります。

Shift_JIS
euc-jp
iso-2022-jp
utf-8

尚、この文字コードに関する指定は<head>タグの直後に記述します。なぜなら、<head>の要素内では<title>の要素などで日本語のテキストを記述する可能性があるからです。

Webページの説明文

Webページ自体がどのような内容であるかを記述します。通常、100文字以内程度で記述します。

ページに関連するキーワード

ページに関連するキーワードを指定します。「,」（カンマ）で区切ることで複数記述することができます。

記述した説明文、キーワードなどは検索サイトによっては、検索結果や表示結果に反映されることもあります。

検索サイトに登録させないようにする

Webページを検索サイトに登録させないようにすることもできます。ただし、全ての検索サイトでこのような指定方法が有効であるとは限らないので注意してください。

Webページ自体と、そのWebページからリンクされているWebページも登録させたくない場合。

Webページ自体は登録させないが、リンクしているWebページは登録しても良い場合。

<head>タグの具体例

<head>の要素に<meta>や<title>を追加した例を紹介します。

一般的に使用される場合

一般的に使用される場合の入力例です。文字コードはutf-8に設定していますが、自分の環境に合わせて変更してください。

head_1.html


<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
        <meta name="description" content="サイトの説明文" />
        <meta name="keywords" content="キーワード1,キーワード2" />
        <title>タイトル</title>
    </head>
    <body>
        本文
    </body>
</html>

検索サイトに登録させたくない場合

検索サイトに登録させたくない場合の入力例です。文字コードはutf-8に設定していますが、自分の環境に合わせて変更してください。

head_2.html


<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
        <meta name="robots" content="noindex,nofollow" />
        <title>タイトル</title>
    </head>
    <body>
        本文
    </body>
</html>

まとめ

<meta>で文字コードの設定、説明文などの情報を記述

セルの結合

ページの先頭

DTD

2024 Webデザインレッスンプライバシーポリシーサイト管理者に連絡