Web クリエイター 能 力 認 定 試 験 スタンダード エキスパート 共 通 XHTML 1.0 対 応 受 験 者 用 リファレンス
目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS 編... 10 CSS の 書 式 (セレクターの 指 定 方 法 )... 10 セレクターの 種 類... 10 擬 似 クラス 疑 似 要 素... 10 ボックス... 11 配 置... 12 リスト... 14 文 字 色 と 背 景... 14 フォント... 15 テキスト... 16 表... 16 資 料 : 単 位... 17
XHTML 編 XHTML 編 共 通 属 性 class id style クラスを 指 定 する < 要 素 名 class="クラス 名 ">~</ 要 素 名 > 文 書 中 で 一 意 の 名 前 を 指 定 する < 要 素 名 id="id 名 ">~</ 要 素 名 > スタイルを 指 定 する < 要 素 名 style="プロパティ: 値 ;プロパティ: 値 ; ;プロパティ: 値 ">~</ 要 素 名 > 文 書 構 造 <html> xmlns xml:lang lang XHTML 文 書 の 最 上 位 要 素 (ルート 要 素 )を 定 義 する <html> </html> XML 名 前 空 間 を 指 定 する <html xmlns=" 名 前 空 間 "> </html> 名 前 空 間 ( 例 )XHTML を 表 す 名 前 空 間 : "http://www.w3.org/1999/xhtml" XML 言 語 としての 要 素 の 言 語 を 指 定 する <html xml:lang=" 言 語 "> </html> 言 語 ja( 日 本 語 ) en( 英 語 )など XHTML 言 語 としての 要 素 の 言 語 を 指 定 する <html lang=" 言 語 "> </html> 言 語 ja( 日 本 語 ) en( 英 語 )など <head> XHTML 文 書 の 基 本 情 報 (ページタイトルやサーバー 等 が 利 用 する 情 報 )を 定 義 する <head> </head> <title> XHTML 文 書 のタイトルを 定 義 する <title> </title> <meta> http-equiv name content メタ 情 報 を 定 義 する <meta /> HTTP 通 信 時 のヘッダー 生 成 に 用 いる <meta http-equiv="http ヘッダー" /> HTTP ヘッダー HTTP ヘッダーの 名 前 メタ 情 報 における 属 性 名 を 設 定 する <meta name=" 名 前 " /> 名 前 メタ 情 報 における 属 性 名 meta 要 素 内 での 属 性 値 を 設 定 する <meta content=" 値 " /> 値 name 属 性 または http-equiv 属 性 に 対 する 属 性 値 <body> XHTML 文 書 の 本 体 ( 本 文 )を 定 義 する <body> </body> <div> 複 数 の 要 素 を 構 造 的 にまとめ ブロックレベル 要 素 にグループ 化 する <div> </div> <span> 複 数 の 要 素 をまとめ インライン 要 素 にグループ 化 する <span> </span> 1
XHTML 編 <h1>~<h6> 見 出 しを 定 義 する <h1> </h1> <h2> </h2> ~ <h6> </h6> <address> 連 絡 先 を 定 義 する <address> </address> 文 書 <p> 段 落 を 定 義 する <p> </p> <br> 強 制 的 に 改 行 する <br /> <em> 文 字 列 を 強 調 表 示 する ( 一 般 的 に 斜 体 で 表 示 される) <em> </em> <strong> 文 字 列 を 強 調 表 示 する (<em>より 強 い 強 調 一 般 的 に 太 字 で 表 示 される) <strong> </strong> <sub> 文 字 列 を 下 付 き 文 字 として 定 義 する <sub> </sub> <sup> 文 字 列 を 上 付 き 文 字 として 定 義 する <sup> </sup> <pre> 整 形 済 みテキストを 定 義 する <pre> </pre> <q> 引 用 を 定 義 する <q> </q> <blockquote> ブロックレベル 型 の 引 用 を 定 義 する <blockquote> </blockquote> cite 引 用 元 を 示 す <blockquote cite=" 引 用 元 "> </blockquote> 引 用 元 URL <ins> 文 書 の 修 正 により 追 加 された 部 分 を 定 義 する <ins> </ins> cite 追 加 理 由 を 示 す <ins cite="url"> </ins> URL 追 加 理 由 などを 記 載 したページの URL datetime 追 加 日 時 を 示 す <ins datetime=" 追 加 日 時 "> </ins> 追 加 日 時 日 付 と 時 刻 <del> 文 書 の 修 正 により 削 除 された 部 分 を 定 義 する <del> </del> cite 削 除 理 由 を 示 す <del cite="url"> </del> URL 削 除 理 由 などを 記 載 したページの URL datetime 削 除 日 時 を 示 す <del datetime=" 削 除 日 時 "> </del> 削 除 日 時 日 付 と 時 刻 2
XHTML 編 リスト <ul> 箇 条 書 きリストを 定 義 する <ul> </ul> <ol> 番 号 付 きリストを 定 義 する <ol> </ol> <li> 箇 条 書 きリスト 番 号 付 きリストのリスト 項 目 を 定 義 する <li> </li> <dl> 定 義 型 リストを 定 義 する <dl> </dl> <dt> 定 義 型 リストで 定 義 する 用 語 を 定 義 する <dt> </dt> <dd> 定 義 型 リストで 定 義 する 用 語 の 説 明 を 定 義 する <dd> </dd> テーブル( 表 ) <table> summary width border cellspacing cellpadding テーブル( 表 )を 定 義 する <table> </table> 表 の 要 約 文 を 指 定 する <table summary=" 要 約 "> </table> 要 約 表 についての 要 約 文 表 全 体 の 横 幅 を 指 定 する <table width=" 幅 "> </table> 幅 ピクセル 数 ボーダーの 幅 を 指 定 する <table border=" 幅 "> </table> 幅 ピクセル 数 各 セル 間 の 間 隔 を 指 定 する <table cellspacing=" 間 隔 "> </table> 間 隔 ピクセル 数 ボーダーとセル 内 容 との 間 隔 を 指 定 する <table cellpadding=" 間 隔 "> </table> 間 隔 ピクセル 数 <tr> align valign テーブル( 表 )の 行 を 定 義 する <tr> </tr> セル 内 テキストの 水 平 方 向 位 置 を 指 定 する <tr align=" 位 置 "> </tr> 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) セル 内 テキストの 垂 直 方 向 位 置 を 指 定 する <tr valign=" 位 置 "> </tr> 位 置 top( 上 揃 え) middle( 上 下 中 央 揃 え) bottom( 下 揃 え) baseline(ベースラインを 揃 える) 3
XHTML 編 <th> rowspan colspan align valign scope テーブル( 表 )の 見 出 しセルを 定 義 する <th> </th> セルの 結 合 ( 複 数 行 に 渡 るセルを 定 義 する) <th rowspan="セル 数 "> </th> セル 数 結 合 するセルの 行 数 セルの 結 合 ( 複 数 列 に 渡 るセルを 定 義 する) <th colspan="セル 数 "> </th> セル 数 結 合 するセルの 列 数 セル 内 容 の 水 平 方 向 位 置 を 指 定 する <th align=" 位 置 "> </th> 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) セル 内 容 の 垂 直 方 向 位 置 を 指 定 する <th valign=" 位 置 "> </th> 位 置 top( 上 揃 え) middle( 上 下 中 央 揃 え) bottom( 下 揃 え) baseline(ベースラインを 揃 える) 見 出 しセルに 対 応 するデータの 方 向 を 指 定 する <th scope=" 方 向 "> </th> 方 向 row( 行 方 向 ) col( 列 方 向 ) rowgroup( 行 グループ) colgroup( 列 グループ) <td> rowspan colspan align valign scope テーブル( 表 )のデータセルを 定 義 する <td> </td> セルの 結 合 ( 複 数 行 に 渡 るセルを 定 義 する) <td rowspan="セル 数 "> </td> セル 数 結 合 するセルの 行 数 セルの 結 合 ( 複 数 列 に 渡 るセルを 定 義 する) <td colspan="セル 数 "> </td> セル 数 結 合 するセルの 列 数 セル 内 容 の 水 平 方 向 位 置 を 指 定 する <td align=" 位 置 "> </td> 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) セル 内 容 の 垂 直 方 向 位 置 を 指 定 する <td valign=" 位 置 "> </td> 位 置 top( 上 揃 え) middle( 上 下 中 央 揃 え) bottom( 下 揃 え) baseline(ベースラインを 揃 える) 見 出 しとして 機 能 するデータセルに 対 応 するデータの 方 向 を 指 定 する <td scope=" 方 向 "> </td> 方 向 row( 行 方 向 ) col( 列 方 向 ) rowgroup( 行 グループ) colgroup( 列 グループ) <caption> テーブル( 表 )にキャプション(タイトル)を 定 義 する <caption> </caption> 4
XHTML 編 <thead> align valign テーブル( 表 )の 行 グループ(ヘッダー)を 定 義 する <thead> </thead> 行 グループ(ヘッダー) 中 のセル 内 容 の 水 平 方 向 位 置 を 指 定 する <thead align=" 位 置 "> </thead> 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) 行 グループ(ヘッダー) 中 のセル 内 容 の 垂 直 方 向 位 置 を 指 定 する <thead valign=" 位 置 "> </thead> 位 置 top( 上 揃 え) middle( 上 下 中 央 揃 え) bottom( 下 揃 え) baseline(ベースラインを 揃 える) <tfoot> align valign テーブル( 表 )の 行 グループ(フッター)を 定 義 する <tfoot> </tfoot> 行 グループ(フッター) 中 のセル 内 容 の 水 平 方 向 位 置 を 指 定 する <tfoot align=" 位 置 "> </tfoot> 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) 行 グループ(フッター) 中 のセル 内 容 の 垂 直 方 向 位 置 を 指 定 する <tfoot valign=" 位 置 "> </tfoot > 位 置 top( 上 揃 え) middle( 上 下 中 央 揃 え) bottom( 下 揃 え) baseline(ベースラインを 揃 える) <tbody> align valign テーブル( 表 )の 行 グループ( 本 体 )を 定 義 する <tbody> </tbody> 行 グループ( 本 体 ) 中 のセル 内 容 の 水 平 方 向 位 置 を 指 定 する <tbody align=" 位 置 "> </tbody> 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) 行 グループ( 本 体 ) 中 のセル 内 容 の 垂 直 方 向 位 置 を 指 定 する <tbody valign=" 位 置 "> </tbody> 位 置 top( 上 揃 え) middle( 上 下 中 央 揃 え) bottom( 下 揃 え) baseline(ベースラインを 揃 える) <colgroup> span width align テーブル( 表 )の 列 グループを 定 義 する <colgroup> </colgroup> 列 グループの 列 数 を 指 定 する <colgroup span=" 列 数 "> </colgroup> 列 数 グループの 列 数 列 グループの 各 列 のデフォルトの 列 幅 を 指 定 する <colgroup width=" 列 幅 "> </colgroup> 列 幅 デフォルトの 列 幅 列 グループ 中 のセル 内 容 の 水 平 方 向 位 置 を 指 定 する <colgroup align=" 位 置 "> </colgroup> 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) 5
XHTML 編 valign 列 グループ 中 のセル 内 容 の 垂 直 方 向 位 置 を 指 定 する <colgroup valign=" 位 置 "> </colgroup> 位 置 top( 上 揃 え) middle( 上 下 中 央 揃 え) bottom( 下 揃 え) baseline(ベースラインを 揃 える) <col> span width align valign テーブル( 表 )の 属 性 を 共 有 する 列 を 定 義 する <col /> 属 性 を 共 有 する 列 数 を 指 定 する <col span=" 列 数 " /> 列 数 グループの 列 数 属 性 を 共 有 する 列 のデフォルトの 列 幅 を 指 定 する <col width=" 列 幅 " /> 列 幅 デフォルトの 列 幅 属 性 を 共 有 する 列 のセル 内 容 の 水 平 方 向 位 置 を 指 定 する <col align=" 位 置 " /> 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) 属 性 を 共 有 する 列 のセル 内 容 の 垂 直 方 向 位 置 を 指 定 する <col valign=" 位 置 " /> 位 置 top( 上 揃 え) middle( 上 下 中 央 揃 え) bottom( 下 揃 え) baseline(ベースラインを 揃 える) リンク <a> name href リンク(アンカー)を 定 義 する <a> </a> XHTML 文 書 内 にアンカー 名 を 指 定 する <a name=" 名 前 " id=" 名 前 "> </a> 名 前 リンク 先 のアンカー 名 ( XHTML1.0 では 後 方 互 換 性 を 考 慮 し name 属 性 と id 属 性 の 両 方 を 指 定 id 属 性 について は P.1 共 通 属 性 を 参 照 ) リンク( 参 照 ) 先 の 場 所 (URL)を 指 定 する <a href="url"> </a> 同 じ XHTML 文 書 のアンカー 位 置 へのリンクを 指 定 する <a href="#アンカー 名 "> </a> 別 の XHTML 文 書 のアンカー 位 置 へのリンクを 指 定 する <a href="url#アンカー 名 "> </a> <link> href type rel 文 書 間 の 関 係 を 定 義 する <link /> リンク 先 を 指 定 する <link href="url" /> URL リンク 先 の URL リンク 先 コンテンツの MIME タイプを 指 定 する <link type="mime タイプ" /> MIME タイプ text/css(css ファイル) text/html(html ファイル) リンク 形 式 を 指 定 する <link rel=" 形 式 " /> 形 式 stylesheet(スタイルシート) alternative( 代 替 文 書 ) 6
XHTML 編 オブジェクト <img> インラインイメージを 埋 め 込 む <img /> src alt height width 表 示 するイメージファイルの 場 所 (URL)を 指 定 する <img src="url" /> URL ファイル 名 ディレクトリ 名 /ファイル 名 等 イメージの 代 替 テキストを 指 定 する <img alt=" 代 替 テキスト" /> 代 替 テキスト イメージの 代 わりに 表 示 するテキスト( 文 章 ) イメージの 高 さを 指 定 する <img height=" 高 さ" /> 高 さ ピクセル 数 イメージの 幅 を 指 定 する <img width=" 幅 " /> 幅 ピクセル 数 スタイルシート <style> type 文 書 内 で 使 用 するスタイルシートを 定 義 する <style> </style> スタイルシートのタイプを 指 定 する <style type="mime タイプ"> </style> MIME タイプ スタイルシートの MIME タイプ( 現 在 は text/css のみ) 装 飾 <hr> 水 平 線 ( 区 切 り 線 )を 定 義 する <hr /> フォーム <form> action method フォームを 定 義 する <form> </form> 実 行 する CGI の URL を 指 定 する <form action="アクション"> </form> アクション CGI の URL メールアドレス(mailto:メールアドレス) フォームデータ 送 信 に 使 う HTTP メソッドを 指 定 する <form method="メソッド"> </form> メソッド post get 7
XHTML 編 <input> type name value size maxlength checked src 入 力 項 目 を 定 義 する <input /> 表 示 / 実 行 形 式 を 指 定 する <input type=" 機 能 " /> 機 能 text(テキストフィールド) password(パスワード 入 力 ボックス) checkbox(チェックボックス) radio(ラジオボタン) image( 画 像 ボタン) hidden( 不 可 視 フィールド) submit( 送 信 ボタン) reset(リセットボタン) file(ファイル 名 入 力 ボックス) フォーム 部 品 を 識 別 するための 名 前 を 指 定 する <input name=" 名 前 " /> 名 前 フォーム 部 品 の 名 前 データの 初 期 値 ボタンに 表 示 されるテキストを 指 定 する ( 初 期 値 )<input value=" 初 期 値 " /> 初 期 値 フォーム 部 品 のデータの 初 期 値 (ボタン)<input value="テキスト" /> テキスト ボタンに 表 示 されるテキスト テキストボックスまたはファイル 名 入 力 ボックスの 幅 を 指 定 する <input size=" 幅 " /> 幅 ピクセル 数 文 字 数 テキストフィールドやパスワード 入 力 ボックスで 入 力 できる 最 大 文 字 数 を 指 定 する <input maxlength=" 数 値 " /> 数 値 最 大 文 字 数 チェックボックスやラジオボタンをあらかじめチェックが 入 っている 状 態 にする <input checked="checked" /> 画 像 ボタンとして 表 示 するイメージファイルの URL を 指 定 する <input src="url" /> URL ファイル 名 ディレクトリ 名 /ファイル 名 等 <textarea> name rows cols テキストエリアを 定 義 する <textarea> </textarea> フォーム 部 品 を 識 別 するための 名 前 を 指 定 する <textarea name=" 名 前 "> </textarea> 名 前 フォーム 部 品 の 名 前 テキストエリアの 高 さ( 行 数 )を 指 定 する <textarea rows=" 行 数 "> </textarea> 行 数 テキストエリアの 行 数 テキストエリアの 幅 を 指 定 する <textarea cols=" 幅 "> </textarea> 幅 テキストエリアの 幅 <select> name size multiple 選 択 リストを 定 義 する <select> </select> フォーム 部 品 を 識 別 するための 名 前 を 指 定 する <select name=" 名 前 "> </select> 名 前 フォーム 部 品 の 名 前 行 数 を 指 定 し フィールド 型 リストを 作 成 する <select size=" 行 数 "> </select> 複 数 選 択 を 可 能 にする <select multiple="multiple"> </select> 8
XHTML 編 <option> value selected 選 択 リストの 項 目 を 定 義 する <option> </option> 選 択 リストの 項 目 に 対 応 する 値 を 指 定 する <option value=" 値 "> </option> 選 択 済 みとして 表 示 する 項 目 を 指 定 する <option selected="selected"> </option> <optgroup> label option 要 素 をグループ 化 する <optgroup> </optgroup> 選 択 肢 グループのラベルを 指 定 する <optgroup label="ラベル"> </optgroup> <label> for フォーム 部 品 のラベルを 定 義 する <label> </label> ラベルを 付 けるフォーム 部 品 (コントロール)を 指 定 する <label for=" 名 前 "> </label> 名 前 関 連 付 けるフォーム 部 品 の id 名 <button> type name value 汎 用 的 なボタンを 定 義 する <button> </button> ボタンの 種 類 を 指 定 する <button type=" 種 類 "> </button> 種 類 submit( 送 信 ボタン) reset(リセットボタン) button(ボタン) ボタン 名 を 指 定 する <button name="ボタン 名 "> </button> ボタンの 初 期 値 を 指 定 する <button value=" 初 期 値 "> </button> <fieldset> 書 式 制 御 グループを 定 義 する <fieldset> </fieldset> <legend> accesskey 書 式 制 御 グループの 標 題 を 定 義 する 項 目 内 容 を 引 き 渡 すときのフィールド 名 を 指 定 する <legend accesskey="キー"> </legend> キー キーボードのキー 文 字 実 体 参 照 改 行 禁 止 スペース & アンド(アンパサンド) & " 二 重 引 用 符 " < > 小 なり < 大 なり > 9
CSS 編 CSS 編 CSS の 書 式 (セレクターの 指 定 方 法 ) 基 本 書 式 セレクター {プロパティ: 値 ;} 同 一 セレクターの 複 数 の プロパティに 値 を 設 定 す る 複 数 のセレクターに 同 一 のスタイルシートを 記 述 す る セレクター { プロパティ: 値 ; } セレクター1, セレクター2, セレクター3, { プロパティ: 値 ; } セレクターの 種 類 タイプセレクタ 要 素 名 { プロパティ: 値 ; } 全 称 セレクター * { プロパティ: 値 ; } 子 孫 セレクター 親 要 素 子 孫 要 素 { プロパティ: 値 ; } 子 セレクター 親 要 素 > 子 要 素 { プロパティ: 値 ; } クラスセレクター 要 素 名.クラス 名 { プロパティ: 値 ; } ( 要 素 名 を 省 略 した 場 合 全 ての 要 素 が 対 象 となる) ID セレクター 要 素 名 #ID 名 { プロパティ: 値 ; } ( 要 素 名 を 省 略 した 場 合 全 ての 要 素 が 対 象 となる) 擬 似 クラス 疑 似 要 素 :first-letter 要 素 の 最 初 の 文 字 を 指 定 する 疑 似 要 素 :link :visited :hover :active <a>タグで 作 成 されたリンクのうち 未 アクセスであるものを 指 定 する 疑 似 クラス <a>タグで 作 成 されたリンクのうち アクセス 済 みであるものを 指 定 する 疑 似 クラス マウスでポイントしたオブジェクトを 指 定 する 疑 似 クラス マウスのボタンが 押 されているなど アクティブなオブジェクトを 指 定 する 疑 似 クラス 10
CSS 編 ボックス margin-top margin-right margin-bottom margin-left margin padding-top padding-right padding-bottom padding-left padding border-top-width border-right-width border-bottom-width border-left-width border-width border-top-color border-right-color border-bottom-color border-left- color border-color 上 下 左 右 のマージンを 個 別 に 指 定 する {margin- : マージン 幅 ;} マージン 幅 数 値 + 単 位 auto マージンをまとめて 指 定 する {margin: マージン 幅 ;} 上 下 左 右 のマージンを 一 括 指 定 する {margin: 上 下 マージン 幅 左 右 マージン 幅 ;} 上 下 と 左 右 のマージンを 指 定 する {margin: 上 マージン 幅 左 右 マージン 幅 下 マージン 幅 ;} 上 左 右 下 のマージンを 指 定 する {margin: 上 マージン 幅 右 マージン 幅 下 マージン 幅 左 マージン 幅 ;} 全 マージンを 個 別 に 指 定 する 上 下 左 右 のパディングを 個 別 に 指 定 する {padding- : パディング 幅 ;} パディング 幅 数 値 + 単 位 auto パディングをまとめて 指 定 する {padding: パディング 幅 ;} 上 下 左 右 のパディングを 一 括 指 定 する {padding: 上 下 パディング 幅 左 右 パディング 幅 ;} 上 下 と 左 右 のパディングを 指 定 する {padding: 上 パディング 幅 左 右 パディング 幅 下 パディング 幅 ;} 上 左 右 下 のパディングを 指 定 する {padding: 上 パディング 幅 右 パディング 幅 下 パディング 幅 左 パディング 幅 ;} 全 パディングを 個 別 に 指 定 する 上 下 左 右 のボーダーの 太 さを 個 別 に 指 定 する {border- -width: 太 さ;} 太 さ 数 値 + 単 位 thin( 細 線 ) medium( 通 常 の 太 さの 線 ) thick( 太 線 ) ボーダーの 太 さをまとめて 指 定 する {border-width: 太 さ;} 上 下 左 右 のボーダーの 太 さを 一 括 指 定 する {border-width: 上 下 ボーダーの 太 さ 左 右 ボーダーの 太 さ;} 上 下 と 左 右 のボーダーの 太 さを 指 定 する {border-width: 上 ボーダーの 太 さ 左 右 ボーダーの 太 さ 下 ボーダーの 太 さ;} 上 左 右 下 のボーダーの 太 さを 指 定 する {border-width: 上 ボーダーの 太 さ 右 ボーダーの 太 さ 下 ボーダーの 太 さ 左 ボーダーの 太 さ;} 全 ボーダーの 太 さを 個 別 に 指 定 する 上 下 左 右 のボーダーの 色 を 個 別 に 指 定 する {border- -color: 色 ;} 色 #RRGGBB rgb( ) 色 名 transparent( 透 明 ) ボーダーの 色 をまとめて 指 定 する {border-color: 色 ;} 上 下 左 右 のボーダーの 色 を 一 括 指 定 する {border-color: 上 下 の 色 左 右 の 色 ;} 上 下 と 左 右 のボーダーの 色 を 指 定 する {border-color: 上 の 色 左 右 の 色 下 の 色 ;} 上 左 右 下 のボーダーの 色 を 指 定 する {border-color: 上 の 色 右 の 色 下 の 色 左 の 色 ;} 全 ボーダーの 色 を 個 別 に 指 定 する 11
CSS 編 border-top-style border-right-style border-bottom-style border-left-style border-style border-top border-right border-bottom border-left border 上 下 左 右 のボーダーのスタイルを 個 別 に 指 定 する {border- -style: スタイル;} スタイル solid( 実 線 ) double( 二 重 線 ) groove( 溝 線 ) ridge( 稜 線 ) inset( 沈 みこみ) outset( 浮 き 出 し) none(ボーダーなし) hidden(ボーダーを 表 示 しない) dashed( 破 線 ) dotted( 点 線 ) ボーダーのスタイルをまとめて 指 定 する {border-style: スタイル;} 上 下 左 右 のボーダーのスタイルを 一 括 指 定 する {border-style: 上 下 のスタイル 左 右 のスタイル;} 上 下 と 左 右 のボーダーのスタイルを 指 定 する {border-style: 上 のスタイル 左 右 のスタイル 下 のスタイル;} 上 左 右 下 のボーダーのスタイルを 指 定 する {border-style: 上 のスタイル 右 のスタイル 下 のスタイル 左 のスタイル;} 全 ボーダーのスタイルを 個 別 に 指 定 する 上 下 左 右 の 各 ボーダーに 関 する 属 性 をまとめて 指 定 する {border- : border- -width の 値 border- -style の 値 border- -color の 値 ;} すべてのボーダーに 関 する 属 性 をまとめて 指 定 する {border: border-width の 値 border-style の 値 border-color の 値 ;} 配 置 display overflow position top right ボックスの 表 示 形 式 を 変 更 する {display: 形 式 ;} 形 式 block(ブロックレベル 要 素 にする) inline(インライン 要 素 にする) list-item(リストアイテム 要 素 にする) none( 存 在 しないものとして 処 理 される) ボックスの 内 容 あふれの 処 理 方 法 を 指 定 する {overflow: 処 理 ;} 処 理 visible( 高 さ 幅 の 指 定 を 無 視 してすべて 表 示 ) hidden( 高 さ 幅 の 指 定 により 範 囲 内 のみ 表 示 ) scroll(スクロールバーを 表 示 ) auto(ブラウザーの 処 理 に 任 せる) 要 素 の 配 置 方 法 を 指 定 する {position: 配 置 ;} 配 置 static( 指 定 なし) relative( 通 常 配 置 される 位 置 からの 相 対 的 な 位 置 で 指 定 ) absolute( 親 要 素 に 対 して 絶 対 的 な 位 置 で 指 定 ) fixed( 固 定 配 置 で 指 定 ) 上 からの 位 置 を 指 定 する {top: 位 置 ;} 位 置 数 値 + 単 位 auto 右 からの 位 置 を 指 定 する {right: 位 置 ;} 位 置 数 値 + 単 位 auto 12
CSS 編 bottom left float clear width height line-height vertical-align z-index visibility 下 からの 位 置 を 指 定 する {bottom: 位 置 ;} 位 置 数 値 + 単 位 auto 左 からの 位 置 を 指 定 する {left: 位 置 ;} 位 置 数 値 + 単 位 auto ボックスをフロートさせ 寄 せて 配 置 する( 後 続 するボックスは 回 りこむ) {float: 配 置 ;} 配 置 left( 左 寄 せ) right( 右 寄 せ) none(なし) ボックスのフロートを 解 除 する {clear: 対 象 ;} ボックスの 幅 を 指 定 する {width: 幅 ;} 対 象 left( 左 寄 せのフロートを 解 除 ) right( 右 寄 せのフロートを 解 除 ) both( 両 方 解 除 ) none( 解 除 しない) 幅 数 値 + 単 位 auto ボックスの 高 さを 指 定 する {height: 高 さ;} 高 さ 数 値 + 単 位 auto 行 の 高 さを 指 定 する {line-height: 高 さ;} 高 さ 数 値 + 単 位 normal インライン 要 素 やテーブルセルの 垂 直 方 向 位 置 を 指 定 する {vertical-align: 位 置 ;} 位 置 baseline(ベースライン) sub( 下 付 き 文 字 ) super( 上 付 き 文 字 ) top( 上 揃 え) bottom( 下 揃 え) middle( 上 下 中 央 揃 え) 重 ね 合 わせの 順 序 を 指 定 する {z-index: 値 ;} 値 数 値 ( 整 数 ) auto 表 示 / 非 表 示 を 指 定 する {visibility: 表 示 方 法 ;} 表 示 方 法 visible( 通 常 通 り 表 示 ) hidden( 指 定 した 箇 所 を 空 白 として 表 示 ) テーブルセルへの 指 定 は 無 効 テーブルセルへの 指 定 は 無 効 13
CSS 編 リスト list-style-type list-style-image list-style-position list-style リストのマーカーの 種 類 を 指 定 する {list-style-type: マーカー;} マーカー disc( 黒 丸 ) circle( 白 丸 ) square( 四 角 ) decimal(10 進 数 ) lower-roman( 小 文 字 ローマ 数 字 ) upper-roman( 大 文 字 ローマ 数 字 ) lower-alpha( 小 文 字 アルファベット) upper-alpha( 大 文 字 アルファベット) none(なし) リストのマーカーに 画 像 を 指 定 する {list-style-image: 画 像 ;} 画 像 url( ) none リストのマーカーの 位 置 を 指 定 する {list-style-position: 位 置 ;} 位 置 inside( 内 側 ) outside( 外 側 ) リストのマーカーに 関 する 属 性 を 一 括 指 定 する {list-style: list-style-type の 値 list-style-position の 値 list-style-image の 値 ;} 文 字 色 と 背 景 color background-color background-image background-repeat background-position 文 字 色 を 指 定 する {color: 色 ;} 色 #RRGGBB rgb( ) 色 名 背 景 色 を 指 定 する {background-color: 色 ;} 色 #RRGGBB rgb( ) 色 名 transparent 背 景 画 像 を 指 定 する {background-image: 画 像 ;} 画 像 url( ) none 背 景 画 像 の 繰 り 返 しを 指 定 する {background-repeat: 繰 り 返 し;} 繰 り 返 し repeat( 並 べて 表 示 ) repeat-x( 横 方 向 のみに 並 べて 表 示 ) repeat-y( 縦 方 向 のみに 並 べて 表 示 ) no-repeat( 繰 り 返 しなし) 背 景 画 像 の 開 始 位 置 を 指 定 する {background-position: 値 1 値 2;} 値 数 値 + 単 位 ( 値 は 水 平 垂 直 方 向 の 順 序 で 指 定 ) ( 値 は 水 平 垂 直 方 向 の 順 序 で 指 定 ) 表 意 定 数 : 水 平 方 向 ( 値 の 水 平 垂 直 方 向 の 指 定 順 序 は 任 意 ) 値 1 left( 左 端 ) center( 中 央 ) right( 右 端 ) 表 意 定 数 : 垂 直 方 向 ( 値 の 水 平 垂 直 方 向 の 指 定 順 序 は 任 意 ) 値 2 top( 上 端 ) center( 中 央 ) bottom( 下 端 ) 14
CSS 編 background background-attachme nt 背 景 に 関 する 属 性 をまとめて 指 定 する {background: background-color の 値 background-image の 値 background-repea t の 値 background-attachment の 値 background-position の 値 ;} 背 景 の 固 定 /スクロールを 指 定 する {background-attachment: 値 ;} 値 fixed(ブラウザー 画 面 に 対 して 位 置 固 定 ) scroll(ブラウザー 画 面 に 連 動 してスクロール) フォント font-family font-style font-weight font-size font フォントの 種 類 を 指 定 する {font-family: フォント 名 ;} フォント 名 フォントの 正 式 名 称 一 般 名 (serif sans-serif cursive fantasy monospace) フォントのスタイルを 指 定 する {font-style: スタイル;} スタイル normal italic oblique フォントの 太 さを 指 定 する {font-weight: 太 さ;} 太 さ 100 200 300 400 500 600 700 800 900 bold bolder lighter normal フォントサイズを 指 定 する {font-size: サイズ;} サイズ 数 値 + 単 位 xx-small x-small small medium large x-large xx-large larger smaller フォントに 関 する 属 性 をまとめて 指 定 する {font: font-style の 値 font-variant の 値 font-weight の 値 font-size の 値 line-height の 値 font-family の 値 ;} ( line-height の 値 は font-size の 値 の 後 に/を 付 けて 指 定 ) 15
CSS 編 テキスト text-indent text-align text-decoration text-transform letter-spacing white-space テキストのインデント( 字 下 げ 幅 )を 指 定 する {text-indent: 幅 ;} 幅 数 値 + 単 位 テキストの 水 平 方 向 位 置 を 指 定 する {text-align: 位 置 ;} 位 置 left( 左 揃 え) center( 中 央 揃 え) right( 右 揃 え) justify( 両 端 揃 え) テキストの 文 字 装 飾 を 指 定 する {text-decoration: 装 飾 ;} 装 飾 underline( 下 線 ) line-through( 取 り 消 し 線 ) none(なし) 大 文 字 / 小 文 字 を 設 定 する {text-transform: 値 ;} 値 capitalize(1 文 字 目 を 大 文 字 に) uppercase(すべて 大 文 字 ) lowercase(すべて 小 文 字 ) none( 入 力 した 通 り) 文 字 の 間 隔 を 指 定 する {letter-spacing: 値 ;} 値 数 値 + 単 位 空 白 の 扱 いを 指 定 する {white-space: 扱 い;} 扱 い normal( 連 続 するタブ スペース 改 行 を1つの 半 角 スペースとして 扱 い 自 動 改 行 する) pre( 入 力 した 通 りに 表 示 ) nowrap( 連 続 するタブ スペース 改 行 を1つの 半 角 スペースとして 扱 い 自 動 改 行 しない) 表 border-collapse 表 のボーダーの 表 示 モデルを 指 定 する {border-collapse: 表 示 モデル;} 表 示 モデル collapse( 隣 接 するセルのボーダーを 重 ねて 表 示 ) separate( 隣 接 するセルのボーダーを 間 隔 をあけて 表 示 ) 16
資 料 : 単 位 資 料 : 単 位 mm cm in pt pc ミリメートル センチメートル インチ ポイント パイカ em エム( 文 字 の 高 さ) ex エックス( 文 字 x の 高 さ) px ピクセル % 17
CERTIFY Inc.2012 禁 無 断 転 載 複 写