詳解 HTMLタグ辞典 第2版

概 要

ホームページやブログを構成する「HTML(Hyper Text Markup Language)」のタグや具体的な使い方をサンプルを使って解説した辞典です。いまウェブページはHTML4.0やXHTML1.0、CSS2.1を使って作成するのが一般的ですが、新しいブラウザでは新規格のHTML5やCSS3への対応がはじまっています。本書では、HTML4.01やXHTML1.0におけるHTMLタグの使用方法の解説に加えて、HTML5についても詳しく解説。カラー色見本や最新ブラウザ対応表、知ってて役立つTIPSなどが満載です。サンプルのダウンロードサービス付き。

著者 猿橋大
価格 本体1500円(税別)
ISBN 978-4-7980-2833-0
発売日 2010/12/22
判型 A5
色数 4色
ページ数 416
CD/DVD
対象読者 初級
シリーズ 詳解辞典
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

HTMLについて

HTML とは?

HTMLの書き方

HTML文書の作成

ブロックレベル要素とインライン要素

汎用属性

HTMLでのサイズ指定

HTMLとXHTML

HTML 4.01からXHTML1.0に変換する

HTML 4.01文書とXHTML1.0文書の比較

HTMLとCSS

CSSによるスタイルシートの設定方法

HTMLの歴史

HTMLの現状とこれから

HTML5とは?

HTML5で可能になること、HTML 4との違い

HTML5で追加される予定の要素(タグ)

HTML5で廃止される予定の要素(タグ)

HTML5によるマークアップ

DOCTYPE スイッチ(DOCTYPE宣言とブラウザの表示モード)

HTMLタグ HTML

01 ドキュメント -文書情報・構造-

01 ドキュメントタイプを宣言する <!DOCTYPE>

02 HTML 文書であることを定義する <html> lang

03 XHTML1.0 の文書を作成する <xml> xml:lang xmlns

04 文書のヘッダ情報を表す <head>

05 文書にタイトルをつける <title>

06 文書の本体を表す <body>

07 文書の作者・使用したエディタを示す <meta> name content author generator

08 文字コードや言語を指定する charset Content-Style-Type Content-Script-Type

09 文書の説明・検索エンジン向け情報を記述する description keywords robots

10 文書のキャッシュを制御する http-equiv Pragma Cache-Control Expires

11 別ページへのジャンプ・再読み込みをする http-equiv refresh

12 関連文書を示す <link>

13 外部スタイルシートファイルを参照する <link> rel="stylesheet"

14 文書の先頭にスタイルシートを記述する <style>

15 文書にスクリプトを埋め込む <script>

16 スクリプトが動作しない環境用の内容 <noscript>

17 ソース中にコメントを入れる <!-- -->

18 マークアップ記号などを表示する < > &  

02 レイアウト

01 文書の文字色・背景色を指定する text link alink vlink bgcolor

02 文書の背景画像を指定する background

tips 背景画像を連続させたくない no-repeat

03 ページのマージンを指定する leftmargin topmargin marginwidth margnheight

tips ブラウザのデフォルトスタイルを消したい * { }

04 範囲を指定する(ブロックレベル要素) <div>

05 範囲を指定する(インライン要素) <span>

06 水平線を引く <hr>

07 センタリングする <center>

08 改行する <br>

09 改行なしで表示する <nobr>

tips ボックスをセンタリングしたい margin

tips お気に入りのアイコンをオリジナルにしたい shortcuticon favicon.ico

tips スクロールバーの色を変えたい scrollbar-base-color

tips カーソルを変えたい cursor

03 テキスト -テキストの意味-

01 見出しをつける <h1>~<h6>

02 ひとつの段落であることを表す <p>

tips 行間を空けてテキストを読みやすくしたい line-height

03 強調する <strong> <em>

04 用語を定義していることを示す <dfn>

05 削除した箇所であることを示す <del>

06 追加した箇所であることを示す <ins>

07 連絡先・問合せ先であることを示す <address>

08 引用であることを示す <blockquote>

09 引用であることを示す <q>

10 引用元・出典を示す <cite>

11 プログラムのソースコードであることを示す <code>

12 変数や引数であることを示す <var>

13 プログラムの出力サンプルであることを示す <samp>

14 キーボード入力される文字であることを示す <kbd>

15 略語であることを示す <abbr>

16 略語(頭字語)であることを示す <acronym>

04 フォント -フォントの見栄え-

01 フォントのサイズ・色・種類を指定する <font> size color face

02 基準フォントのサイズ・色・種類を指定する <basefont>

03 フォントのサイズをひとまわり大きく・小さくする <big> <small>

tips 文字サイズの指定をきちんと理解したい font-size

04 テキストを太字・イタリック体(斜体)にする <b> <i>

05 テキストにアンダーライン(下線)を引く <u>

06 打ち消し線を引く <s> <strike>

07 等幅フォントで表示する <tt>

08 入力した通りに等幅フォントで表示する <pre>

09 上付き文字・下付き文字を表示する <sup> <sub>

10 テキストの表記方向を指定する <bdo>

11 スクロールさせる <marquee>

12 文字を点滅させる <blink>

05 イメージ -画像-

01 画像を表示する <img>

02 画像周りの余白を指定する hspace vspace

03 画像の配置と回り込みを指定する align left right

04 画像とテキストの縦位置を揃える align top middle bottom

05 画像のボーダー幅を指定する border

06 ひとつの画像に複数のリンクをはる <map> <area>

06 リンク

01 リンクをはる <a> href target

02 ページの途中にリンクをはる name

03 メールアドレスにリンクをはる mailto

04 相対パスの基準URIを指定する <base>

tips リンクテキストにカーソルが乗ったら色を変えたい link visited hover active

tips リンク領域を広くしたい・揃えたい display block

tips CSS のみで画像を入れ替えたい background-position background-image

07 リスト -箇条書き-

01 定義リストをつくる <dl> <dt> <dd>

02 順序のない番号なしリストをつくる <ul> <li>

03 順序のある番号付きリストをつくる <ol> <li>

tips リストタグで水平メニューを作りたい float left

tips リストの先頭記号に画像を使いたい list-style-image

08 テーブル -表-

01 表を作成する <table>

02 表の見出しセル・データセルを作成する <tr> <th> <td>

03 表のボーダー幅とボーダー色を指定する border bordercolor

04 外側ボーダーと内側ボーダーの表示方法を指定する frame rules border

05 表・セルの幅・高さを指定する width height

06 表の配置と回り込みを指定する align left center right

07 セル内の横位置・縦位置を指定する align valign

08 複数のセルを結合する colspan rowspan

09 セル内での改行を禁止する nowrap

10 セル内の余白・セル同士の隙間を指定する cellpadding cellspacing

11 表・セルの背景色を指定する bgcolor

12 表・セルの背景画像を指定する background

13 表のヘッダ・ボディ・フッタを定義する <thead> <tbody> <tfoot>

14 表にキャプションをつける <caption>

15 表の縦列をグループ化する <colgroup>

16 表の縦列の属性をまとめて指定する <col> span

tips テーブルの罫線を一本線にしたい border-collapse

tips テーブルを使わずにグリッド表示したい float width

tips カーソルが乗ったテーブル行の色を変えたい hover background-color

09 入力フォーム

01 入力・送信フォームを作成する <form> action method GET POST

02 フォームの送信ボタン・リセットボタンを作成する <input> submit reset

03 フォームの画像ボタンを作成する <input> image

04 フォームの汎用ボタンを作成する <input> button

05 ボタンを作成する <button>

06 一行テキストボックスを作成する <input> text

07 パスワード入力欄を作成する <input> password

08 ラジオボタンを作成する <input> radio

09 チェックボックスを作成する <input> checkbox

10 非表示データを送信する <input> hidden

11 サーバーにファイルを送信する <input> file

12 セレクトボックスを作成する <select> <option>

13 セレクトボックスの選択肢をグループ化する <optgroup>

14 複数行のテキストエリアを作成する <textarea>

tips フォーカス中の入力欄に変化をつけたい input textarea focus

15 フォーム部品(入力項目)をグループ化する <fieldset> <legend>

16 入力項目に項目名(ラベル)をつける <label>

10 フレーム

01 ウィンドウをフレームに分割する <frameset> <frame>

02 リンク先フレームを指定する frame name target

03 フレームのボーダーを指定する frameborder border bordercolor

04 フレームのボーダーを完全に消す frameborder framespacing

05 フレームサイズを固定してリサイズさせない noresize

06 スクロールバーの表示方法を指定する scrolling

07 フレーム内のマージン(余白)を指定する marginwidth marginheight

08 フレームを表示できない環境用の内容 <noframes>

09 インラインフレームを作成する <iframe>

tips CSS でiframe風のレイアウトを作りたい overflow

11 オブジェクト -Flash・動画・音声・Java-

01 Flash などのプラグインデータを埋め込む <embed> <noembed>

02 様々な形式のデータを埋め込む <object> <param>

03 Java アプレットを埋め込む <applet> <param>

04 音声や動画を再生する <embed> loop autostart

HTML5で追加される(可能性のある)タグ HTML5

01 セクション Sections

01 一つのセクションであることを示す <section>

02 ナビゲーションであることを示す <nav>

03 記事であることを示す <article>

04 余談・補足情報のセクションであることを示す <aside>

05 セクションの見出しを表す、見出しをまとめる <hgroup>

06 ヘッダであることを示す <header>

07 フッタであることを示す <footer>

02 コンテンツを分類する Grouping content

01 図表であることを示す・図表にキャプションを付ける <figure> <figcaption>

03 テキストの意味 Text-level semantics

01 日付や時刻を正確に示す <time>

02 文書内の該当テキストを目立たせる <mark>

03 ルビをふる <ruby> <rt> <rp>

04 改行しても良い位置を指定する <wbr>

04 コンテンツの埋め込み Embedded content

01 プラグインデータを埋め込む <embed>

02 動画を再生する <video>

03 音声を再生する <audio>

04 動画や音声などのURLや種類を指定する <source>

05 canvasで図形を描く <canvas>

05 フォーム Forms

01 フォーム入力されるデータの種類を指定する <input> type

02 入力欄にカーソルを当てて自動フォーカスする <input> autofocus

03 入力欄に初期表示する内容を指定する <input> placeholder

04 入力必須であることを示す <input> required

05 正規表現で入力値のパターンを指定する <input> pattern

06 入力できる最小値と最大値を指定する <input> min max

07 入力欄で刻むステップ値を指定する <input> step

08 入力候補を提示して入力内容を自動補完する <input> autocomplete <datalist>

09 複数の値を入力・選択できるようにする <input> multiple <datalist>

10 フォーム送信時にキーを発行する <keygen>

11 計算結果を示す <output>

12 タスク完了までの進行状況を示す <progress>

13 規定範囲内の測定値を表す <meter>

06 ユーザーによる操作 Interactive elements

01 備考や操作手段などの詳細情報を示す <details> <summary>

02 操作メニューの各コマンドを指定する <command>

03 操作メニューを作成する <menu>

知ってて役立つTIPS Q&A TIPS

01 float(CSS)で2段組固定幅レイアウトにしたい float left right

02 float(CSS)で2段組可変幅レイアウトにしたい float left right

03 position(CSS)で2段組固定幅レイアウトにしたい position absolute

04 position(CSS)で2段組変動幅レイアウトにしたい position absolute

05 HTMLソースが正しいかどうかチェックしたい 文法チェック

06 position指定で自由にレイアウトしたい position absolute relative

07 ランダム表示をしたい Math.random()

08 JavaScriptでブラウザを振り分けたい navigator.userAgent indexOf()

09 ボックスモデルをきちんと理解したい border width height margin padding

10 id属性とclass属性の使い分けを理解したい id class

11 長い英数テキストでレイアウトが崩れる? word-break

12 テーブルのセルを立体的にしたい border-top border-left border-bottom border-right

13 CSSファイルを複数に分割したい @import

14 [このページを印刷] ボタンを設置したい print()

補足 Reference

1.HTMLやCSSでの色指定について

WEBセーフカラー216色

カラーネーム140色

システムカラー

2.特別な文字

3.画像

4.ブログで使用できるHTMLタグ・Wiki文法

5.HTMLタグ-ブログ対応表

6.HTMLタグ一覧表

7.HTMLタグ - ブラウザ対応表

PR

秀和システム