ウェブ学のすすめ

Study of Web Design & Programing

HTML文書の情報を指定する「meta」タグとは

HTML

「meta」とは何の略

Metainformation（メタ情報）の略です。

metaは、

「超〜」「高次〜」「〜の間の」「〜の後ろの」「〜を含む」などの意味を持つ英語の接頭辞
引用元：メタとは【meta】 - 意味/解説/説明/定義： IT用語辞典

です。

形式

head要素内に配置します。

<head>
<meta http-equiv="〜" content="〜">
<meta name="〜" content="〜">
<title>〜</title>
</head>

終了タグは必要ありません。

主な属性

属性	意味
name	名前を指定
http-equiv	HTTPヘッダ名を指定
content	内容を指定
charset	文字コードを指定

記述例

文字コードを指定する

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

文字化け防止のため、title要素等よりも上に記述します。
日本語指定の書式には、「Shift_JIS」「EUC-JP」「UTF-8」などがあります。

<meta charset="Shift_JIS">

HTML5では↑のように記述することも可能です。

スクリプト言語を指定

<meta http-equiv="Content-Script-Type" content="text/javascript">

スタイルシート言語を指定

<meta http-equiv="Content-Style-Type" content="text/css">

文書のキーワードを指定

<meta name="keywords" content="キーワード1,キーワード2,キーワード3">

キーワードは　「,（コンマ）」で区切って指定できます。

文書の説明を指定

<meta name="description" content="サンプル">

検索結果ページで表示される文書の概要を指定できます。

参考サイト

リンクを指定する「a」タグとは

HTML

「a」とは何の略

Anchor（アンカー）の略です。

いかり(をおろす)、頼みの綱、最終走者、固定する、支える、などの意味を持つ英単語。
引用元：アンカーとは【anchor】 - 意味/解説/説明/定義： IT用語辞典

形式

<a href="...">〜</a>
<a name="...">〜</a>

終了タグが必要です。

主な属性

属性	意味
href	リンク先の文書を指定
target	リンク先の文書をどのフレーム（ウィンドウ）に表示するかを指定
name	文書内にリンク到達点とするための名前を指定

記述例

同じウィンドウ内にリンク先を表示する

<a href="http://d.hatena.ne.jp/vinton/">ウェブ学のすすめ</a>

↓
ウェブ学のすすめ

新しいウィンドウ（またはタブ）にリンク先を表示する

<a href="http://d.hatena.ne.jp/vinton/" target="_blank">ウェブ学のすすめ</a>

↓
ウェブ学のすすめ

同じ文書内の特定部分にリンクする

<a href="#start">トップに戻る</a>

<a name="start"></a>←任意の場所に記述する

↓
トップに戻る

参考サイト

リンク先のアドレスを指定する「href」とは

HTML

「href」とは何の略

Hypertext Referenceの略です。

HTMLなどにおいて、「a」タグや「link」タグとともに用いられ、関連付けられるリソースの所在を示す属性。
引用元：hrefとは - はてなキーワード

形式

body要素内で

<a href="...">〜</a>

head要素内で

<head>
<link rel="..." href="..." type="..." />
</head>

記述例

外部スタイルシートを指定する

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

同じウィンドウ内でリンク先を表示する

<a href="http://d.hatena.ne.jp/vinton/">ウェブ学のすすめ</a>

↓
ウェブ学のすすめ

リンクをクリックするとメールソフトが起動する

<a href="mailto:メールの送信先を記述">メールアドレス</a>

↓
メールアドレス

参考サイト

HTMLタグ/リンクタグ - TAG index Webサイト

絶対パスと相対パスとは

IT用語

HTMLにおいて画像を表示させたり、リンクを貼る場合、ファイルのある場所を指定します。
「絶対パス」と「相対パス」とう２つの指定方法があります。

絶対パスとは

読み方

ぜったいパス

別名

フルパス

英語

absolute path

意味

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、装置内の最上位階層から目的のファイルやフォルダまでのすべての道筋を記述する方式。
引用元：絶対パスとは【absolute path】 - 意味/解説/説明/定義： IT用語辞典

他の人のホームページにリンクする場合は、絶対パス（http://から記述）を使用します。

記述例

▼他のサイトのリンクを貼る場合（例：アップル、iPhone 4Sの仕様ページ）

<a href="http://www.apple.com/jp/iphone/specs.html">アップル - iPhone 4S - 技術仕様</a>

▼画像を表示させたい場合（例：fotolife）

<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/〜.png">

相対パスとは

読み方

そうたいパス

英語

relative path

意味

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式。
引用元：相対パスとは【relative path】 - 意味/解説/説明/定義： IT用語辞典

自分のページの中（同じサーバの中）で画像やリンク先を指定する場合、相対パスを使用します。

半角のドット「.」とスラッシュ「/」を使って場所を表します。

記号	意味
./	同じフォルダ内のファイルを指定
../	1つ上のフォルダ内のファイルを指定
../../	２つ上のフォルダ内のファイルを指定

記述例

<img src="./sample.jpg">

<img src="../sample2.jpg">

<img src="../../sample3.jpg">