詳解 HTML&CSS&JavaScript 辞典 第7版

概 要

HTML、CSS、JavaScriptの定番総合辞典として版を重ねてきた本書も累計10万部を突破し、第7版となりました。本書は、最新のHTML5.1のほか、CSS3やJavaScriptに対応し、ホームページ作成に必要な基礎知識をまとめた辞典です。できること・したいことから項目を探せる目次や索引や、ウェブ制作に役立つ各種チャートやフォント見本も充実しており、Web制作に携わる全ての人に役立ちます。サンプルコードのダウンロードサービス付き。

著者 大藤幹、半場方人
価格 本体2000円(税別)
ISBN 978-4-7980-5022-5
発売日 2017/3/17
判型 A5
ページ数 640
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

●HTMLパート

◎HTMLについて

HTMLとは?

最新のHTML5の特徴

HTMLのタグとは?

要素と属性

グローバル属性

HTML5の要素の分類

従来からのシンプルな分類方法

ファイルの場所の指定方法

■基本的な内容

HTMLのバージョンを示す DOCTYPE

最低限必要な要素 html, head, body

コメントを入れる <!-- -->

■文書情報

文字コードを示す meta charset

タイトルを付ける title

ページ概要・制作者名・キーワードを入れる meta, description, author, keywords

関連する他のファイルを示す link, rel

基準URLを設定する base

■セクションと範囲

見出しを表す h1, h2, h3, h4, h5, h6

段落を表す p

記事全体の範囲を示す article

一般的なセクションの範囲を示す section

本題から外れた内容のセクションを示す aside

ナビゲーションの範囲を示す nav

ヘッダーの範囲を示す header

フッターの範囲を示す footer

メインコンテンツの範囲を示す main

独自に範囲を設定する div, span

場面やトピックの変わり目を表す hr

■リスト

マーク付きのリストを作る ul, li

番号付きのリストを作る ol, li

番号の形式を変える ol, type

番号の順序を変更する ol, start, li, value

用語と説明のリストを作る dl, dt, dd

■リンク

他のページにリンクする a href

同じページの特定の位置にリンクする a href, id

他のページの特定の位置にリンクする a href, id

リンク先を別のウィンドウに表示する a href target

■表示にかかわる指定

改行させる br

ルビをふる ruby, rt, rp

スペースや改行をそのまま表示させる pre

上付き文字・下付き文字を表示させる sup, sub

特別な文字を表示させる <, >, ", &

■テキスト

問い合わせ先を示す address

強調する em

重要であることを示す strong

補足情報的な注記を表す small

短い引用文を表す q cite

長い引用文を表す blockquote cite

出典を表す cite

注目すべき部分として目立たせる mark

略語を表す abbr, title

追加したことを示す ins cite, datetime

削除したことを示す del cite, datetime

正しくない情報になったことを示す s

定義対象の用語であることを示す dfn

プログラム関連のテキストを表す kbd, samp, code, var

■画像・動画・音声

画像を配置する img

ピクセル密度に合わせた画像を表示させる img srcset

状況に応じたサイズの画像を表示させる img sizes

表示領域の幅によって画像を切り替える picture, source media

動画を埋め込む video

音声を埋め込む audio

形式の異なる複数の動画・音声を埋め込む source

イメージマップを作成する img usemap, map, area

さまざまな形式のデータを配置する object

プラグインを利用するデータを配置する embed

■テーブル

表の基本形 table, tr, th, td

表にタイトルを付ける caption

セルを連結する th, td, rowspan, colspan

横列をグループ化する thead, tbody, tfoot

縦列をグループ化する colgroup, span

グループ内で縦列をさらに分ける col span

■フォーム

フォームを作る form

送信ボタンを作る input, submit

リセットボタンを作る input, reset

汎用的なボタンを作る input, button

画像で送信ボタンを作る input, image

要素内容がラベルになるボタンを作る button

1行の入力フィールドを作る input, text

複数行の入力フィールドを作る textarea

パスワードの入力フィールドを作る password

表示されないフィールドを作る input, hidden

ラジオボタンを作る input, radio

チェックボックスを作る input, checkbox

メニューを作る select

メニューの選択肢をグループ化する optgroup label

リストボックスを作る select, selected

ファイル選択の機能を付ける input, file

項目をグループ化する fieldset, legend

ラベルとフォーム部品を一体化させる label

■その他

HTML にスクリプトを組み込む script

スクリプトが実行されない環境用の内容を入れる noscript

インラインフレームを配置する iframe

図表であることを示す figure

図表にキャプションを付ける figcaption

◎HTMLリファレンス

HTML5.1全要素・属性一覧

HTML5.1の各カテゴリーに該当する要素一覧

HTML5.1の要素の配置のルール一覧

●CSSパート

◎CSSについて

スタイルシートについて

基本的な書き方

単位について

色の指定方法

ボックスについて

スタイルの優先順位

■CSSの組み込み

CSSの書かれたファイルを読み込む link rel stylesheet

style要素の内容として組み込む style

style属性の値として組み込む style=

コメントを入れる /**/

■適用先の指定方法

特定の要素に適用させる { }

複数の要素に適用させる , , , { }

すべての要素に適用させる * { }

IDやクラスを指定した要素に適用させる #myid, .myclass

リンク部分に適用させる link, visited, hover, active

特定の属性に適用させる [ ]

1行目に適用させる first-line

1文字目に適用させる first-letter

n番目の要素に適用させる nth-child

奇数番目・偶数番目の要素に適用させる nth-child

特定の要素に含まれる要素に適用させる { ? }

■フォント

文字色を指定する color

フォントを指定する font-family

フォントサイズを指定する font-size

フォントの太さを指定する font-weight

フォントスタイルを指定する font-style, text-decoration

フォント関係をまとめて指定する font

■テキスト

行間を設定する line-height

行揃えを指定する text-align

縦方向の位置を指定する vertical-align

文字間隔・単語間隔を設定する letter-spacing, word-spacing

1行目のインデントを設定する text-indent

空白や改行をそのまま表示させる white-space:pre

改行しないで表示させる white-space:nowrap

全体を大文字または小文字で表示させる text-transform

テキストに影をつける text-shadow

■背景

背景色を指定する background-color

背景画像を指定する background-image:url()

背景画像の並び方を指定する background-repeat

背景画像の表示位置を指定する background-position

背景画像を固定する background-attachment

背景関係をまとめて指定する background

1枚の背景画像でページ全体を覆う background-size

■ボックス

マージンを設定する margin

内容の周りの空間を設定する padding

枠線の太さを指定する border-width

枠線の色を指定する border-color

枠線の形式を指定する border-style

枠線をまとめて指定する border

幅と高さを指定する width, height

ボックスの角を丸くする border-radius

ボックスに影をつける box-shadow

■レイアウト

左右への配置と回り込みを指定する float

回り込みを解除する clear

センタリングする margin auto

絶対的な位置に配置する position:absolute

相対的な位置に配置する position:relative

絶対的な位置に固定配置する position:fixed

重なる順序を指定する z-index

表示されないようにする display:none, visibility:hidden

はみ出る部分の処理方法を指定する overflow

■メディアクエリ

幅に合わせてCSSを切り替える:style要素 style media

幅に合わせてCSSを切り替える:link要素 link media

幅に合わせてCSSを切り替える:@media @media

■リスト

リストのマークや番号の形式を変える list-style-type

リストのマークを画像にする list-style-image:url()

リストのマークを内側に表示させる list-style-position

リストのマークをまとめて指定する list-style

■テーブル

表の枠線を単一の線にする border-collapse

セルとセルの間隔を指定する border-spacing

表のタイトルを下に表示させる caption-side

空のセルの枠線の表示・非表示を設定する empty-cells

■その他

半透明にする opacity

カーソルの形を指定する cursor

印刷時の改ページを指定する page-break-before, page-break-after

要素の前後にテキストや画像を入れる before after content

引用符として使用する記号を設定する q, quotes, open-quote

◎CSSリファレンス

CSS2.1 全プロパティ一覧

●Javascriptパート

◎Javascriptについて

JavaScriptの記述法

オブジェクト・プロパティ・メソッド

イベントハンドラ

eventオブジェクトによるイベントの取得

JavaScriptで取り扱える型の種類

関数

ビルトイン関数

変数・定数

オブジェクト・関数・変数などに設定可能な名前

演算子

JavaScriptの命令文(ステートメント)

JavaScriptの歴史

◎ナビゲータオブジェクト

■navigatorオブジェクト

ブラウザ名を取得する appName

ブラウザのコード名を取得する appCodeName

ブラウザのバージョンを取得する appVersion

ブラウザのユーザーエージェントを取得する userAgent

プラットフォームのタイプを取得する platform

ブラウザの判別をする userAgent

Javaが使えるかどうか判断する javaEnabled()

使用可能なMIMEのタイプを取得する mimeTypes

使用可能なプラグインを取得する plugins[]

プラグインがインストールされているかチェックする plugins[]

■screenオブジェクト

ディスプレイのサイズを取得する width, height, availWidth, availHeight

ディスプレイの表示情報を取得する pixelDepth, colorDepth

■eventオブジェクト

イベントのタイプを取得する type

どこでイベントが発生したかを取得する-Firefox- イベント.type

どこでイベントが発生したかを取得する -Internet Explorer- window, event, type

どのキーが押されたかを取得する keyCode, onkeydown

どのキーが押されたかを取得する -Firefox- which, onkeydown

■windowオブジェクト

ウィンドウのサイズの変更を取得する window, onresize

警告用のダイアログボックスを開く alert(), onClick

確認ボタン付きのダイアログボックスを開く confirm()

入力欄付きのダイアログボックスを開く prompt()

新しいウィンドウを開く open()

ウィンドウを閉じる close(), setTimeout(), onLoad

開いたウィンドウから元のウィンドウを操作する opener, closed

ウィンドウを前に出す focus()

ウィンドウの外周・内周を取得する innerHeight, innerWidth, outerHeight, outerWidth

ブラウザの表示領域を指定した位置までスクロールする scrollTo()

ブラウザの表示領域を指定した分量ずつスクロールする scrollBy()

ウィンドウ内の文字を検索する find()

■frameオブジェクト

入力されたURLを別フレームに表示する parent

複数のフレームを同時に変更する -ボタンを使う- parent, location

複数のフレームを同時に変更する -リンクを使う- open(), href

開いたウィンドウから元のウィンドウのフレームを操作する open(), target

■documentオブジェクト

文字を書き出す write()

改行付きで文字を書き出す writeln()

ドキュメントの情報を取得する title, URL, referrer

ファイルの更新日時を取得する lastModified

開いたウィンドウに文字を記述する open(), close(), write()

ドキュメントや画像を後から開く open(), close(), write()

テキストやリンクの色を指定する alinkColor, bgColor, fgColor, linkColor, vlinkColor

背景色を変えるボタンを作る bgColor

選択した文字を返す getSelection()

■historyオブジェクト

戻るボタンを作る back()

進むボタンを作る forward()

複数ページを戻ったり進んだりするボタンを作る go()

■locationオブジェクト

自ページのURLを取得する href, protocol, hostname, pathname, port, host

入力されたURLへ進むフォームを作る href

ページのロードが完了してから次のページをロードする href

JavaScript対応ページと未対応ページを振り分ける href

アンカーを設定する hash

リロードボタンを作る reload()

元のページへ戻れないようにする replace()

■Link・Anchorオブジェクト

リンクのURLの情報を表示する links[]

リンクをボタンのように使う - 1 - href="javascript:関数"

リンクをボタンのように使う - 2 - onClick

■Formオブジェクト

ラジオボタンをリンクに使う input, radio, onClick

ボタンをリンクに使う input, button, onClick

メニューをリンクに使う select, onChange

フォームに文字を流す input, text, value

チェックボックスの値を変更する input, checkbox, value

チェックボックスのチェックを変更する input, checkbox, checked

ラジオボタンの値を変更する input, radio, value

ラジオボタンのチェックを変更する input, radio, checked

フォームの内容変更をチェックする onChange

フォームの内容をチェックする onSubmit

隠しテキストフォームの値を変更する input, hidden

フォームからの送信にメモを付ける input, hidden

パスワードを入力する input, password

パスワードフォームの値を変更する input, password, value

リセットしてもいいか確認する onReset

アップロードするファイルを選ぶ input, file

フォームの内容を後から変える options[]

フォームのタイプを調べる elements[]

■Areaオブジェクト

エリアマップ内のリンクのURL情報を表示する links[]

イメージマップをリンク以外の機能で使う onMouseOver, onMouseOut

■Imageオブジェクト

画像の情報を取得する images[], src, vspace, width

画像をアニメーションする Image()

アニメーションにスタートボタンとストップボタンを付ける Image(), onClick

画像に触ったりクリックした時に画像を変化させる images[]

画像に触ったりクリックした時に画像を変化させる - オブジェクト名を使う - document, src

画像に触った時に別の画像を変化させる images[]

画像に触った時に別の画像を変化させる- オブジェクト名を使う - document, src

画像のロード状態を表示する onAbort, onError, onLoad

画像をリロードするかどうか確認する onError

◎ビルトインオブジェクト・他

■Dateオブジェクト

年・月・日・時・分・秒を表示する getYear(), getDate(), getMonth(), getHours(), getMinutes(), getSeconds()

午前午後を表示する getHours()

曜日を表示する getDay()

国際標準時やローカルタイムを表示する toGMTString(), toLocaleString(), getTimezoneOffset()

日時を後から変更する getTime(), setTime()

年・月・日・時・分・秒を設定する setYear(), setMonth() setDate() setHours() setMinutes() setSeconds()

西暦を4桁で表示する getFullYear()

4桁の西暦を設定する setFullYear()

ミリセコンドを表示する getMilliseconds()

ミリセコンドを設定する setMilliseconds()

UTCを表示する getUTC*()

UTCを設定する toUTCString(), setUTC*()

日付をカウントダウンする getTime()

時間ごとに違ったメッセージを表示する getHours()

■Objectオブジェクト

新しいオブジェクトを作る - 1 - new Object()

新しいオブジェクトを作る - 2 - オブジェクト名= {プロパティ:値}

プロパティを監視する watch(), unwatch()

■Booleanオブジェクト

真(true)か偽(false)の値を設定する Boolean()

■Numberオブジェクト

数値を作成する Number(), NaN

使用可能な数値の範囲を調べる MAX_VALUE MIN_VALUE NEGATIVE_INFINITY POSITIVE_INFINITY

■複数のオブジェクトで利用できるプロパティ・メソッド

オブジェクト(配列)の数を取得する length

オブジェクトに名前を付ける name

新たにプロパティを作成する prototype, constructor

オブジェクトを文字列に変える toString()

n進数に変換する toString(n)

オブジェクト内の値を返す valueOf()

オブジェクト内の値を文字列にする toSource()

一定時間ごとに処理を繰り返す setInterval(), clearInterval()

■ビルトイン関数(top-level関数)

フォームに入力された文字列を計算できるようにする eval()

文字列をASCII形式にエンコードする escape()

ASCII形式の文字列をデコードする unescape()

文字列をURI形式にエンコードする encodeURI()

URI形式の文字をデコードする decodeURI()

文字列を完全なURI形式にエンコードする encodeURIComponent()

完全なURI形式の文字をデコードする decodeURIComponent()

◎DynamicHTML

■DOMのプロパティ

要素内にHTML形式でコンテンツを書き出す innerHTML

id属性を使って要素を指定する getElementById()

name属性を使って要素を指定する getElementsByName()

属性の値を返す getAttribute()

属性の値を変更する setAttribute()

■body要素

背景画像を変更する background

テキストの色を変えるボタンを作る fgColor

■style要素

スタイルシートの情報を取得する getElementById(), all(), layers[], style

子スタイルシートの情報を取得する getElementById(), all(), style

フォントの太さを変更する fontWeight

フォントの色を変更する color

文字サイズを変更する fontSize

リストの形式を変更する listStyleType

カーソルの形を変更する cursor

スタイルシートの背景色を変更する background

スタイルシートの重なりを変更する zIndex

クリックした位置へスタイルシートを移動する all(), layers[], style

マウスの移動に合わせてスタイルシートを移動する all(), getElementById(), style

◎JavaScriptリファレンス

JavaScriptで取り扱える値の種類

演算子

JavaScriptの命令文(ステートメント)

イベントハンドラ(JavaScript 1.0/1.1)

イベントタイプ

ナビゲータオブジェクト

ビルトインオブジェクト

Top-Levelプロパティ

ビルトイン関数(top-level関数)

Ajaxとは

XMLHttpRequestオブジェクトリファレンス

Ajaxの記述方法

Ajaxのサンプル

JavaScriptライブラリを利用する

iOS、Androidのタッチパネル関連のイベント

タッチイベントの用法

●補足

Webサイズチャート

カラーチャート1:名前が定義されている基本色

Webセーフカラーについて

カラーチャート2:Webセーフカラー

カラーチャート3:名前が定義されているその他の色

フォント表示見本

PR

秀和システム