メニュー

リファレンス

HTMLタグ逆引き

検索

目次

  1. MIMEタイプ
  2. 言語コード
  3. リンクタイプ
  4. XHTMLの基礎
  5. HTTPステータスコードとシンボル名

HTMLの基礎知識

MIMEタイプ

MEMEタイプとは

データ形式を表したもので、Webサーバとブラウザが通信するときにデータの種類を表すのに使われます。

主なMIMEタイプ

MIMEタイプファイルの種類拡張子
text/plainプレーンティストファイル.txt
text/htmlHTMLファイル.html, .htm
test/cssスタイルシーとファイル.css
text/javascriptJavaScriptファイル.js
image/gifGIFファイル.gif
image/pngPNGファイル.png
image/jpegJPEGファイル.jpg, .jpeg
video/mpegMPEGファイル.mpeg, .mpg
video/quicktimeQuicktimeファイル.qt, .mov
application/pdfPDFファイル.pdf
application/mswordワードファイル.doc
application/x-shockwave-flashFlachファイル.swf
application/zipzipファイル.zip

言語コード

言語コードとは

対象とする内容の言語を指定

主な言語コード

言語コード言語名
ja日本語
en英語
deドイツ語
esスペイン語
frフランス語
ko韓国語
zh中国語
ptポルトガル語
itイタリア語

リンクタイプ

リンクタイプとは

リンク先の役割

リンクタイプ一覧

HTML4で定義済みのキーワード
リンクタイプ内容
alternate代替にあたる文書
stylesheet外部スタイルシート
appendix付属書にあたる文書
bookmark文書内の重要なアンカーへのリンク
contents目次にあたる文書
copyright著作権に関する記述のある文書
glossary指定する文書が用語集
helpヘルプにあたる文書
index索引にあたる文書
next次の文書
prev前の文書
start一連の文書の中で最初の文書
chapter一連の文書の中で章にあたる文書
section一連の文書の中で節にあたる文書
subsection一連の文書の中で項にあたる文書
HTML5で定義されるキーワード
リンクタイプ内容
alternate代替にあたる文書
archives過去のコンテンツを集めたアーカイブ
author文書の制作者
bookmark親にあたるセクション内のコンテンツのパーマリンク
externalリンク先が外部サイト
first初回のコンテンツとして参照されるべき文書
help文書のヘルプ
iconサイトもしくはドキュメントのアイコン
index文書の索引
last最終回のコンテンツとして参照されるべき文書
license著作権やライブラリ、ソフトウェア等の使用条件が記された文書
next次回のコンテンツとして参照されるべき文書
nofollowリンク先のコンテンツについては保証・責任がもてないコンテンツ
noreferrerHTTPリファラの欄を空白にしたまま送信
pingbackリンク先にリンクを張ったことを自動的に通知
prefetchリンク先のリソースを事前にロード
prev前回のコンテンツとして参照されるべき文書
search検索機能がある文書
stylesheet外部スタイルシート
sidebar視覚環境のUAのサイドバー欄に表示
tag文書のタグ
up1つ上の階層の文書

XHTMLの基礎

XML宣言

使い方
<?xml version="1.0" encoding="UTF-8"?>

文章型宣言

使い方
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html要素

使い方
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

ページタイトル

使い方
<title>サイト名</title>
例
トップページ
<title>サイト名 - サイトの説明</title>
カテゴリトップ
<title>カテゴリ名 | サイト名</title>
個別ページ
<title>ページ名 | カテゴリ名 | サイト名</title>

メタ情報

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="ページの概要文" />
<meta name="keywords" content="キーワード" />
<meta name="author" content="制作者" />
<meta name="copyright" content="著作権保有者" />

文章間関係(link要素)

スタイルシートファイルの指定
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen, projection, tv" />
RSSファイルの指定
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="feed.xml" />
トップページやヘルプページの指定
<link rel="contents" href="index.html" title="ホーム" />
<link rel="help" href="help.html" title="ヘルプ" />
日本語以外の言語で制作したページ
<link rel="alternate" type="text/html" href="index-en.html" hreflang="en" />
スクリプト
<script type="text/javascript" src="/javascripts/prototype.js">

サイト所有者

<adress>Copyright &copy; 2009 サイト名. All Rights Reserved.</address>

フォントの種類

body, p, ol, ul, td {
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック', "MS P Gothic" ,sans-serif;
}

一般的なID名

機能・エリア命名例
本文全体を囲むボックスcontainer, wrapper, page, pagebody, all
ヘッダーheader, header-area
ナビゲーションnav, navi, navigation
グローバルナビゲーションglobal-nav, gnav
ローカルナビゲーションlocal-nav, lnav
補足ナビゲーションassist-nav, utility, utility-nav
パンくずナビゲーションtopicpath, breadcrumbs
コンテンツ全体content(s), container, wrapper
メインコンテンツmain, maincontent(s), content(s), alpha, primary
サブコンテンツやサイドバーsub, subcontent(s), sidebar, beta, secondary
見出しと本文のまとまりsection, entrybody, article(s)
記事単体article(s), entry(-ies)
フッターfooter, footer-area, copyright, publication
ロゴlogo
キービジュアルやメインビジュアルkeyvisual, mainvisual
画像や写真、グラフなどimage, photo, fig, figure
検索search, search-area, search-box
ヒント、本題から外れた補足や囲み記事aside, hint, note
商品一覧products, item-list, shopitems

フォーム例

<form action="" method="post">
  <p>説明</p>
  <fieldset>
    <legend>ラベル</legend>
    <dl id="customer">
      <dt><label for="name">名前</label></dt>
    <dd>
      <input type="radio" name="sex" id="man" /><label for="man">男性</label>
      <input type="radio" name="sex" id="woman" /><label for="woman">女性</label>
    </dd>
  </dl>
 </fieldset>
 <fieldset>
   <legend>評価</legend>
   <dl id="rating">
     <dt>項目</dt>
     <dd>
       <ul>
         <li>項目1</li>
         <li>項目2</li>
       </ul>
     </dd>
     <dt><label for="freetext">説明</label></dt>
     <dd><input type="text" size="50" id="freetext" /></dd>
   </dl>
 </fieldset>
 <div><input type="submit" value="確認" /></div>
</form>

レイアウト例

1カラムレイアウト
div#header
div#global-nav
div#container
div.article#new-entry
div.entry-header
div.entry-body
div.entry-footer
div#previous-entry
div.article
div.article
div.step-nav
div#other-contents
div.section-lv2#about
div.section-lv2#archives
div.section-lv2#category
div#footer
2カラムレイアウト
div#global-nav
div#search
div#utility-nav
div.structure#container
div.section-lv1#primary-contents
div.section-lv2
div.section-lv2
div#secondary-contents
div.section-lv2#classroom
div.section-lv2
div.structure#footer

エラステリックレイアウト

div#header
div#global-nav
div#lead
div#wrapper
div#content
div.highlight
div.highlight
div#aside
div#shortcut
div#feed
div#footer

プロパティの指定順序

/* Suggested order
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
*/
  1. 表示や配置など「視覚整形モデル」に関するプロパティ
  2. マージンやパディング、ボーダーなど「ボックスモデル」に関するプロパティ
  3. 背景と前景に関するプロパティ
  4. フォントとテキストに関するプロパティ
  5. 生成内容に関するプロパティ

HTTPステータスコードとシンボル名

コード名前シンボル
100Continue:continue
101Switching Protocols:switching_protocols
102Processing:processing
200OK:ok
201Created:created
202Accepted:accepted
203Non-Authoritative Information:non_authoritative_information
204No Content:no_content
205Reset Content:reset_content
206Partial Content:partial_content
207Multi-Status:multi_status
226IM Used:im_used
300Multiple Choices:multiple_choices
301Moved Permanently:moved_permanently
302Found:found
303See Other:see_other
304Not Modified:not_modified
305Use Proxy:use_proxy
306Reserved:reserved
307Temporary Redirect:temporary_redirect
400Bad Request:bad_request
401Unauthorized:unauthorized
402Payment Required:payment_required
403Forbiddenforbidden
404Not Foundnot_found
405Method Not Allowed:method_not_allowed
406Not Acceptable:not_acceptable
407Proxy Authentication Required:proxy_authentication_required
408Request Timeout:request_timeout
409Conflict:conflict
410Gone:gone
411Length Required:length_required
412Precondition Failed:precondition_failed
413Request Entity Too Large:request_entity_too_large
414Request-URI Too Long:request_uri_too_long
415Unsupported Media Type:unsupported_media_type
416Requested Range Not Satisfiable:requested_range_not_satisfiable
417Expectation Failed:expectation_failed
422Unprocessable Entity:unprocessable_entity
423Locked:locked
424Failed Dependency:failed_dependency
426Upgrade Required:upgrade_required
500Internal Server Error:internal_server_error
501Not Implemented:not_implemented
502Bad Gateway:bad_gateway
503Service Unavailable:service_unavailable
504Gateway Timeout:gateway_timeout
505HTTP Version Not Supported:http_version_not_supported
506Variant Also Negotiates:variant_also_negotiates
507Insufficient Storage:insufficient_storage
510Not Extended:not_extended
セットアップへ