ホームページ作りのすべてがこの１冊に！新標準ＨＴＭＬ　Ｌｉｖｉｎｇ　Ｓｔａｎｄａｒｄ対応。ＨＴＭＬとＣＳＳは、スマートフォンやタブレットなどのサイズの異なる表示に対応し、ウェブ制作に必須の基礎知識です。ＪａｖａＳｃｒｉｐｔは、ウェブ制作者が知っておきたい内容に厳選して解説し、簡単な動きや仕組みを理解しやすくなっています。本書は、コンテンツの構造を示す「ＨＴＭＬ」、表示方法を設定する「ＣＳＳ」、インタラクティブな動きを追加する「ＪａｖａＳｃｒｉｐｔ」から、よく使う機能をわかりやすく解説しています。

■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