詳解HTML&CSS&JavaScrpt辞典第8版
書籍情報
発売日 : 2023年03月18日
著者／編集 : 大藤幹/半場方人/松浦健一郎/司ゆき
出版社 : 秀和システム
発行形態 : 単行本
書籍説明
内容紹介
ホームページ作りのすべてがこの１冊に！新標準ＨＴＭＬ Ｌｉｖｉｎｇ Ｓｔａｎｄａｒｄ対応。ＨＴＭＬとＣＳＳは、スマートフォンやタブレットなどのサイズの異なる表示に対応し、ウェブ制作に必須の基礎知識です。ＪａｖａＳｃｒｉｐｔは、ウェブ制作者が知っておきたい内容に厳選して解説し、簡単な動きや仕組みを理解しやすくなっています。本書は、コンテンツの構造を示す「ＨＴＭＬ」、表示方法を設定する「ＣＳＳ」、インタラクティブな動きを追加する「ＪａｖａＳｃｒｉｐｔ」から、よく使う機能をわかりやすく解説しています。
目次
■HTML パート
●About
HTML について
HTML とは？
HTMLのバージョンについて
HTML のタグとは？
要素と属性
グローバル属性
HTMLの要素の分類
従来からのシンプルな分類方法
ファイルの場所の指定方法
●HTML
基本的な内容
ブラウザの表示モードを適切なものにする DOCTYPE
最低限必要な要素 html, head, body
コメントを入れる
文書情報
文字コードを示す meta, charset
タイトルを付ける title
ページ概要・制作者名・キーワードを入れる meta, description, author, keywords
関連する他のファイルを示す link, rel
基準URL を設定する base
セクションと範囲
見出しを表す h1, h2, h3, h4, h5, h6
見出しとサブタイトルを一体化させる hgroup
段落を表す 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
テーブル
表の基本形 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
表示されないフィールドを作る hidden
ラジオボタンを作る radio
チェックボックスを作る checkbox
メニューを作る select
メニューの選択肢をグループ化する optgroup, label
リストボックスを作る select, selected
ファイル選択の機能を付ける input, file
メーターを作る meter
プログレスバーを作る progress
項目をグループ化する fieldset, legend
ラベルとフォーム部品を一体化させる label
その他
HTML にスクリプトを組み込む script
スクリプトが実行されない環境用の内容を入れる noscript
インラインフレームを配置する iframe
図表であることを示す figure
図表にキャプションを付ける figcaption
情報の折りたたみと展開を可能にする details
折りたたんだ情報の見出しを表す summary
ダイアログボックスを表示させる dialog
●Reference
リファレンス
HTML全要素・属性一覧
HTMLの各カテゴリーに該当する要素一覧
HTMLの要素の配置のルール一覧
■CSS パート
●About
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
テキストを縦書きで表示させる writing-mode: vertical-rl
背景
背景色を指定する background-color
背景画像を指定する background-image: url()
背景画像の並び方を指定する background-repeat
背景画像の表示位置を指定する background-position
背景画像を固定する background-attachment
1 枚の背景画像でページ全体を覆う background-size: cover
背景関係をまとめて指定する background
ボックス
マージンを設定する margin
内容の周りの空間を設定する padding
枠線の太さを指定する border-width
枠線の色を指定する border-color
枠線の線種を指定する border-style
枠線をまとめて指定する border
幅と高さを指定する width, height
幅と高さを枠線も含めて適用させる box-sizing: border-box
ボックスの角を丸くする border-radius
ボックスに影をつける box-shadow
ボックスの大きさを変更可能にする resize
フレキシブルボックスレイアウト
ブロックレベル要素を横に並べる display: flex
横に並べた要素の順番を変更する order
並べる方向を指定する flex-direction
親要素の幅に応じて子要素の幅を変化させる flex
グリッドレイアウト
グリッドレイアウトの基本的な指定方法
display: grid, grid-template-columns, grid-template-rows, grid-column, grid-row
グリッドセルに名前をつけて指定する grid-template-areas, grid-area
グリッドセルの幅を比率で指定する grid-template-columns, fr
その他のレイアウト
左右への配置と回り込みを指定する float
回り込みを解除する clear
横方向の中央に配置する margin, auto, margin-left, margin-right
縦横両方向の中央に配置する display: flex, align-items, justify-content, center
絶対的な位置に配置する 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
特定方向へのグラデーションを表示させる linear-gradient()
円形のグラデーションを表示させる radial-gradient()
カーソルの形を指定する cursor
印刷時の改ページを指定する page-break-before, page-break-after
要素の前後にテキストや画像を入れる before, after, content
引用符として使用する記号を設定する q, quotes, open-quote
●Reference
リファレンス
CSS主要プロパティ一覧
■HTML&CSS&JavaScriptの活用 パート
HTMLとCSSとJavaScriptのつながり
スマホ時代のHTML
自動的に内容を更新するページ
JavaScriptを使ったWebスクレイピング
Webページのスクリーンショットを保存する ― Puppeteer
Webページを丸ごと保存する ― Puppeteer
■JavaScript パート
●About
Javascriptについて
JavaScriptの記述法
オブジェクト・プロパティ・メソッド
イベントハンドラ
eventオブジェクトによるイベントの取得
JavaScriptで取り扱える型の種類
関数
ビルトイン関数
変数・定数
オブジェクト・関数・変数などに設定可能な名前
演算子
JavaScriptの命令文（ステートメント）
JavaScriptの歴史
●JavaScript
ナビゲーターオブジェクト
navigatorオブジェクト
ブラウザ名を取得する appName
ブラウザのコード名を取得する appCodeName
ブラウザのバージョンを取得する appVersion
ブラウザのユーザーエージェントを取得する userAgent
プラットフォームのタイプを取得する platform
ブラウザの判別をする userAgent
使用可能なMIMEのタイプを取得する mimeTypes
使用可能なプラグインを取得する plugins[]
screenオブジェクト
ディスプレイのサイズを取得する width, height, availWidth, availHeight
ディスプレイの表示情報を取得する pixelDepth, colorDepth
eventオブジェクト
イベントのタイプを取得する type
どこでイベントが発生したかを取得する window, event, type
どこでイベントが発生したかを取得する -Firefox- type
どのキーが押されたかを取得する keyCode, onkeydown
ウィンドウのサイズの変更を取得する window, onresize
windowオブジェクト
警告用のダイアログボックスを開く alert(), onClick
確認ボタン付きのダイアログボックスを開く confirm()
入力欄付きのダイアログボックスを開く prompt()
新しいウィンドウを開く open()
ウィンドウを閉じる close(), setTimeout(), onLoad
ウィンドウの外周・内周を取得する innerHeight, innerWidth, outerHeight, outerWidth
ウィンドウ内の文字を検索する find()
frameオブジェクト
入力されたURLを別フレームに表示する parent
複数のフレームを同時に変更する -ボタンを使う- parent, location
複数のフレームを同時に変更する -リンクを使う- open(), href
documentオブジェクト
文字を書き出す write()
改行付きで文字を書き出す writeln()
ドキュメントの情報を取得する title, URL, referrer
ファイルの更新日時を取得する lastModified
開いたウィンドウに文字を記述する open(), close(), write()
ドキュメントや画像を後から開く write()
背景色を変えるボタンを作る bgColor
選択した文字を返す getSelection()
historyオブジェクト
戻るボタンを作る back()
進むボタンを作る forward()
複数ページを戻ったり進んだりするボタンを作る go()
locationオブジェクト
自ページのURLを取得する href, protocol, hostname, pathname, port, host
入力されたURLへ進むフォームを作る href
ページのロードが完了してから次のページをロードする onLoad, setTimeout()
アンカーを設定する hash
リロードボタンを作る reload()
元のページへ戻れないようにする replace()
Link・Anchorオブジェクト
リンクのURLの情報を表示する links[]
リンクをボタンのように使う - 1 - href="javascript:関数"
リンクをボタンのように使う - 2 - onClick
Formオブジェクト
ラジオボタンをリンクに使う input, radio, onClick
ボタンをリンクに使う input, button, onClick
メニューをリンクに使う select, onChange
フォームに文字を流す input, text, value
フォームの内容変更をチェックする onChange
フォームの内容をチェックする onSubmit
リセットしてもいいか確認する onReset
チェックボックスの値を変更する input, checkbox, value
チェックボックスのチェックを変更する input, checkbox, checked
ラジオボタンの値を変更する input, radio, value
ラジオボタンのチェックを変更する input, radio, checked
隠しテキストフォームの値を変更する input, hidden
パスワードフォームの値を変更する input, password, value
セレクトフォームの内容を後から変える options[]
フォームのタイプを調べる elements[]
Areaオブジェクト
エリアマップ内のリンクのURL情報を表示する links[]
イメージマップをリンク以外の機能で使う onMouseOver, onMouseOut
Imageオブジェクト
画像の情報を取得する images[], src, vspace, width
画像をアニメーションする Image()
アニメーションにスタートボタンとストップボタンを付ける Image(), onClick
画像に触ったりクリックした時に画像を変化させる images[]
画像に触ったりクリックした時に画像を変化させる - オブジェクト名を使う -
document, src
画像に触った時に別の画像を変化させる images[]
画像に触った時に別の画像を変化させる - オブジェクト名を使う - document, src
画像のロード状態を表示する onAbort, onError, onLoad
ビルトインオブジェクト・他
Dateオブジェクト
年・月・日・時・分・秒を表示する
getYear() getDate() getMonth() getHours() getMinutes() getSeconds()
午前午後を表示する getHours()
曜日を表示する getDay()
国際標準時やローカルタイムを表示する
toGMTString(), toLocaleString(), getTimezoneOffset()
日時を後から変更する getTime(), setTime()
年・月・日・時・分・秒を設定する
setYear() setMonth() setDate() setHours() setMinutes() setSeconds()
ミリセコンドを表示する getMilliseconds()
ミリセコンドを設定する setMilliseconds()
UTCを表示する getUTC*()
UTCを設定する toUTCString(), setUTC*()
日付をカウントダウンする getTime()
時間ごとに違ったメッセージを表示する getHours()
Objectオブジェクト
新しいオブジェクトを作る - 1 - new Object()
新しいオブジェクトを作る - 2 - オブジェクト名= {プロパティ:値}
Booleanオブジェクト
真（true）か偽（false）の値を設定する Boolean()
Numberオブジェクト
Numberオブジェクト数値を作成する Number(), NaN
使用可能な数値の範囲を調べる
MAX_VALUE MIN_VALUE NEGATIVE_INFINITY POSITIVE_INFINITY
複数のオブジェクトで利用できるプロパティ・メソッド
オブジェクト（配列）の数を取得する length
オブジェクトに名前を付ける name
新たにプロパティを作成する prototype, constructor
オブジェクトを文字列に変える toString()
n進数に変換する toString(n)
オブジェクト内の値を返す valueOf()
一定時間ごとに処理を繰り返す setInterval(), clearInterval()
ビルトイン関数（top-level関数）
フォームに入力された文字列を計算できるようにする eval()
文字列をASCII形式にエンコードする escape()
ASCII形式の文字列をデコードする unescape()
文字列をURI形式にエンコードする encodeURI()
URI形式の文字をデコードする decodeURI()
DynamicHTML
DOMのプロパティ
要素内にHTML形式でコンテンツを書き出す innerHTML
DOMのメソッド
id属性を使って要素を指定する getElementById()
属性の値を返す getAttribute()
属性の値を変更する setAttribute()
body要素
背景画像を変更する background
テキストの色を変えるボタンを作る fgColor
style要素
スタイルシートの情報を取得する getElementById(), layers[], style
子スタイルシートの情報を取得する getElementById(), style
フォントの太さを変更する fontWeight
フォントの色を変更する color
文字サイズを変更する fontSize
リストの形式を変更する listStyleType
カーソルの形を変更する cursor
スタイルシートの背景色を変更する background
スタイルシートの重なりを変更する zIndex
クリックした位置へスタイルシートを移動する layers[], style
マウスの移動に合わせてスタイルシートを移動する getElementById(), style
●Reference
JavaScript補足
Ajaxとは
XMLHttpRequestオブジェクトリファレンス
Ajaxの記述方法
■補足
Webサイズチャート
相対的な大きさの単位
絶対的な大きさの単位
カラーチャート1：名前が定義されている基本色
Webセーフカラーについて
カラーチャート2：Webセーフカラー
カラーチャート3：名前が定義されているその他の色
フォント表示見本
Windows
Mac
●About
HTML について
HTML とは？
HTMLのバージョンについて
HTML のタグとは？
要素と属性
グローバル属性
HTMLの要素の分類
従来からのシンプルな分類方法
ファイルの場所の指定方法
●HTML
基本的な内容
ブラウザの表示モードを適切なものにする DOCTYPE
最低限必要な要素 html, head, body
コメントを入れる
文書情報
文字コードを示す meta, charset
タイトルを付ける title
ページ概要・制作者名・キーワードを入れる meta, description, author, keywords
関連する他のファイルを示す link, rel
基準URL を設定する base
セクションと範囲
見出しを表す h1, h2, h3, h4, h5, h6
見出しとサブタイトルを一体化させる hgroup
段落を表す 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
テーブル
表の基本形 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
表示されないフィールドを作る hidden
ラジオボタンを作る radio
チェックボックスを作る checkbox
メニューを作る select
メニューの選択肢をグループ化する optgroup, label
リストボックスを作る select, selected
ファイル選択の機能を付ける input, file
メーターを作る meter
プログレスバーを作る progress
項目をグループ化する fieldset, legend
ラベルとフォーム部品を一体化させる label
その他
HTML にスクリプトを組み込む script
スクリプトが実行されない環境用の内容を入れる noscript
インラインフレームを配置する iframe
図表であることを示す figure
図表にキャプションを付ける figcaption
情報の折りたたみと展開を可能にする details
折りたたんだ情報の見出しを表す summary
ダイアログボックスを表示させる dialog
●Reference
リファレンス
HTML全要素・属性一覧
HTMLの各カテゴリーに該当する要素一覧
HTMLの要素の配置のルール一覧
■CSS パート
●About
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
テキストを縦書きで表示させる writing-mode: vertical-rl
背景
背景色を指定する background-color
背景画像を指定する background-image: url()
背景画像の並び方を指定する background-repeat
背景画像の表示位置を指定する background-position
背景画像を固定する background-attachment
1 枚の背景画像でページ全体を覆う background-size: cover
背景関係をまとめて指定する background
ボックス
マージンを設定する margin
内容の周りの空間を設定する padding
枠線の太さを指定する border-width
枠線の色を指定する border-color
枠線の線種を指定する border-style
枠線をまとめて指定する border
幅と高さを指定する width, height
幅と高さを枠線も含めて適用させる box-sizing: border-box
ボックスの角を丸くする border-radius
ボックスに影をつける box-shadow
ボックスの大きさを変更可能にする resize
フレキシブルボックスレイアウト
ブロックレベル要素を横に並べる display: flex
横に並べた要素の順番を変更する order
並べる方向を指定する flex-direction
親要素の幅に応じて子要素の幅を変化させる flex
グリッドレイアウト
グリッドレイアウトの基本的な指定方法
display: grid, grid-template-columns, grid-template-rows, grid-column, grid-row
グリッドセルに名前をつけて指定する grid-template-areas, grid-area
グリッドセルの幅を比率で指定する grid-template-columns, fr
その他のレイアウト
左右への配置と回り込みを指定する float
回り込みを解除する clear
横方向の中央に配置する margin, auto, margin-left, margin-right
縦横両方向の中央に配置する display: flex, align-items, justify-content, center
絶対的な位置に配置する 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
特定方向へのグラデーションを表示させる linear-gradient()
円形のグラデーションを表示させる radial-gradient()
カーソルの形を指定する cursor
印刷時の改ページを指定する page-break-before, page-break-after
要素の前後にテキストや画像を入れる before, after, content
引用符として使用する記号を設定する q, quotes, open-quote
●Reference
リファレンス
CSS主要プロパティ一覧
■HTML&CSS&JavaScriptの活用 パート
HTMLとCSSとJavaScriptのつながり
スマホ時代のHTML
自動的に内容を更新するページ
JavaScriptを使ったWebスクレイピング
Webページのスクリーンショットを保存する ― Puppeteer
Webページを丸ごと保存する ― Puppeteer
■JavaScript パート
●About
Javascriptについて
JavaScriptの記述法
オブジェクト・プロパティ・メソッド
イベントハンドラ
eventオブジェクトによるイベントの取得
JavaScriptで取り扱える型の種類
関数
ビルトイン関数
変数・定数
オブジェクト・関数・変数などに設定可能な名前
演算子
JavaScriptの命令文（ステートメント）
JavaScriptの歴史
●JavaScript
ナビゲーターオブジェクト
navigatorオブジェクト
ブラウザ名を取得する appName
ブラウザのコード名を取得する appCodeName
ブラウザのバージョンを取得する appVersion
ブラウザのユーザーエージェントを取得する userAgent
プラットフォームのタイプを取得する platform
ブラウザの判別をする userAgent
使用可能なMIMEのタイプを取得する mimeTypes
使用可能なプラグインを取得する plugins[]
screenオブジェクト
ディスプレイのサイズを取得する width, height, availWidth, availHeight
ディスプレイの表示情報を取得する pixelDepth, colorDepth
eventオブジェクト
イベントのタイプを取得する type
どこでイベントが発生したかを取得する window, event, type
どこでイベントが発生したかを取得する -Firefox- type
どのキーが押されたかを取得する keyCode, onkeydown
ウィンドウのサイズの変更を取得する window, onresize
windowオブジェクト
警告用のダイアログボックスを開く alert(), onClick
確認ボタン付きのダイアログボックスを開く confirm()
入力欄付きのダイアログボックスを開く prompt()
新しいウィンドウを開く open()
ウィンドウを閉じる close(), setTimeout(), onLoad
ウィンドウの外周・内周を取得する innerHeight, innerWidth, outerHeight, outerWidth
ウィンドウ内の文字を検索する find()
frameオブジェクト
入力されたURLを別フレームに表示する parent
複数のフレームを同時に変更する -ボタンを使う- parent, location
複数のフレームを同時に変更する -リンクを使う- open(), href
documentオブジェクト
文字を書き出す write()
改行付きで文字を書き出す writeln()
ドキュメントの情報を取得する title, URL, referrer
ファイルの更新日時を取得する lastModified
開いたウィンドウに文字を記述する open(), close(), write()
ドキュメントや画像を後から開く write()
背景色を変えるボタンを作る bgColor
選択した文字を返す getSelection()
historyオブジェクト
戻るボタンを作る back()
進むボタンを作る forward()
複数ページを戻ったり進んだりするボタンを作る go()
locationオブジェクト
自ページのURLを取得する href, protocol, hostname, pathname, port, host
入力されたURLへ進むフォームを作る href
ページのロードが完了してから次のページをロードする onLoad, setTimeout()
アンカーを設定する hash
リロードボタンを作る reload()
元のページへ戻れないようにする replace()
Link・Anchorオブジェクト
リンクのURLの情報を表示する links[]
リンクをボタンのように使う - 1 - href="javascript:関数"
リンクをボタンのように使う - 2 - onClick
Formオブジェクト
ラジオボタンをリンクに使う input, radio, onClick
ボタンをリンクに使う input, button, onClick
メニューをリンクに使う select, onChange
フォームに文字を流す input, text, value
フォームの内容変更をチェックする onChange
フォームの内容をチェックする onSubmit
リセットしてもいいか確認する onReset
チェックボックスの値を変更する input, checkbox, value
チェックボックスのチェックを変更する input, checkbox, checked
ラジオボタンの値を変更する input, radio, value
ラジオボタンのチェックを変更する input, radio, checked
隠しテキストフォームの値を変更する input, hidden
パスワードフォームの値を変更する input, password, value
セレクトフォームの内容を後から変える options[]
フォームのタイプを調べる elements[]
Areaオブジェクト
エリアマップ内のリンクのURL情報を表示する links[]
イメージマップをリンク以外の機能で使う onMouseOver, onMouseOut
Imageオブジェクト
画像の情報を取得する images[], src, vspace, width
画像をアニメーションする Image()
アニメーションにスタートボタンとストップボタンを付ける Image(), onClick
画像に触ったりクリックした時に画像を変化させる images[]
画像に触ったりクリックした時に画像を変化させる - オブジェクト名を使う -
document, src
画像に触った時に別の画像を変化させる images[]
画像に触った時に別の画像を変化させる - オブジェクト名を使う - document, src
画像のロード状態を表示する onAbort, onError, onLoad
ビルトインオブジェクト・他
Dateオブジェクト
年・月・日・時・分・秒を表示する
getYear() getDate() getMonth() getHours() getMinutes() getSeconds()
午前午後を表示する getHours()
曜日を表示する getDay()
国際標準時やローカルタイムを表示する
toGMTString(), toLocaleString(), getTimezoneOffset()
日時を後から変更する getTime(), setTime()
年・月・日・時・分・秒を設定する
setYear() setMonth() setDate() setHours() setMinutes() setSeconds()
ミリセコンドを表示する getMilliseconds()
ミリセコンドを設定する setMilliseconds()
UTCを表示する getUTC*()
UTCを設定する toUTCString(), setUTC*()
日付をカウントダウンする getTime()
時間ごとに違ったメッセージを表示する getHours()
Objectオブジェクト
新しいオブジェクトを作る - 1 - new Object()
新しいオブジェクトを作る - 2 - オブジェクト名= {プロパティ:値}
Booleanオブジェクト
真（true）か偽（false）の値を設定する Boolean()
Numberオブジェクト
Numberオブジェクト数値を作成する Number(), NaN
使用可能な数値の範囲を調べる
MAX_VALUE MIN_VALUE NEGATIVE_INFINITY POSITIVE_INFINITY
複数のオブジェクトで利用できるプロパティ・メソッド
オブジェクト（配列）の数を取得する length
オブジェクトに名前を付ける name
新たにプロパティを作成する prototype, constructor
オブジェクトを文字列に変える toString()
n進数に変換する toString(n)
オブジェクト内の値を返す valueOf()
一定時間ごとに処理を繰り返す setInterval(), clearInterval()
ビルトイン関数（top-level関数）
フォームに入力された文字列を計算できるようにする eval()
文字列をASCII形式にエンコードする escape()
ASCII形式の文字列をデコードする unescape()
文字列をURI形式にエンコードする encodeURI()
URI形式の文字をデコードする decodeURI()
DynamicHTML
DOMのプロパティ
要素内にHTML形式でコンテンツを書き出す innerHTML
DOMのメソッド
id属性を使って要素を指定する getElementById()
属性の値を返す getAttribute()
属性の値を変更する setAttribute()
body要素
背景画像を変更する background
テキストの色を変えるボタンを作る fgColor
style要素
スタイルシートの情報を取得する getElementById(), layers[], style
子スタイルシートの情報を取得する getElementById(), style
フォントの太さを変更する fontWeight
フォントの色を変更する color
文字サイズを変更する fontSize
リストの形式を変更する listStyleType
カーソルの形を変更する cursor
スタイルシートの背景色を変更する background
スタイルシートの重なりを変更する zIndex
クリックした位置へスタイルシートを移動する layers[], style
マウスの移動に合わせてスタイルシートを移動する getElementById(), style
●Reference
JavaScript補足
Ajaxとは
XMLHttpRequestオブジェクトリファレンス
Ajaxの記述方法
■補足
Webサイズチャート
相対的な大きさの単位
絶対的な大きさの単位
カラーチャート1：名前が定義されている基本色
Webセーフカラーについて
カラーチャート2：Webセーフカラー
カラーチャート3：名前が定義されているその他の色
フォント表示見本
Windows
Mac
著者情報
大藤, 幹, 1963-
大藤幹
半場, 方人, 1964-
半場方人
松浦, 健一郎
松浦健一郎
司, ゆき
司ゆき
