目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS "

Transcription

1 Web クリエイター 能 力 認 定 試 験 スタンダード エキスパート 共 通 XHTML 1.0 対 応 受 験 者 用 リファレンス

2 目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS 編 CSS の 書 式 (セレクターの 指 定 方 法 ) セレクターの 種 類 擬 似 クラス 疑 似 要 素 ボックス 配 置 リスト 文 字 色 と 背 景 フォント テキスト 表 資 料 : 単 位... 17

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 CSS 編 CSS 編 CSS の 書 式 (セレクターの 指 定 方 法 ) 基 本 書 式 セレクター {プロパティ: 値 ;} 同 一 セレクターの 複 数 の プロパティに 値 を 設 定 す る 複 数 のセレクターに 同 一 のスタイルシートを 記 述 す る セレクター { プロパティ: 値 ; } セレクター1, セレクター2, セレクター3, { プロパティ: 値 ; } セレクターの 種 類 タイプセレクタ 要 素 名 { プロパティ: 値 ; } 全 称 セレクター * { プロパティ: 値 ; } 子 孫 セレクター 親 要 素 子 孫 要 素 { プロパティ: 値 ; } 子 セレクター 親 要 素 > 子 要 素 { プロパティ: 値 ; } クラスセレクター 要 素 名.クラス 名 { プロパティ: 値 ; } ( 要 素 名 を 省 略 した 場 合 全 ての 要 素 が 対 象 となる) ID セレクター 要 素 名 #ID 名 { プロパティ: 値 ; } ( 要 素 名 を 省 略 した 場 合 全 ての 要 素 が 対 象 となる) 擬 似 クラス 疑 似 要 素 :first-letter 要 素 の 最 初 の 文 字 を 指 定 する 疑 似 要 素 :link :visited :hover :active <a>タグで 作 成 されたリンクのうち 未 アクセスであるものを 指 定 する 疑 似 クラス <a>タグで 作 成 されたリンクのうち アクセス 済 みであるものを 指 定 する 疑 似 クラス マウスでポイントしたオブジェクトを 指 定 する 疑 似 クラス マウスのボタンが 押 されているなど アクティブなオブジェクトを 指 定 する 疑 似 クラス 10

13 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

14 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

15 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

16 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

17 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: 太 さ;} 太 さ 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

18 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

19 資 料 : 単 位 資 料 : 単 位 mm cm in pt pc ミリメートル センチメートル インチ ポイント パイカ em エム( 文 字 の 高 さ) ex エックス( 文 字 x の 高 さ) px ピクセル % 17

20 CERTIFY Inc.2012 禁 無 断 転 載 複 写

Cascade Style Sheet

Cascade Style Sheet SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;

More information

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

Taro-CSS.jtd

Taro-CSS.jtd CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

More information

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W Webデータ 管 理 HTML+CSS (4) (2 章 ) 2011/10/26( 水 ) 1/21 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z:

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

Microsoft PowerPoint - 第03回目.pptx

Microsoft PowerPoint - 第03回目.pptx 1 情 報 リテラシーII ( 樋 口 担 当 ) 3 回 目 10/10 本 日 の 予 定 2 Webページの 作 成 I.テキストの 記 述 方 法 II.ハイパーリンク III.インラインイメージ( 画 像 ) IV. 表 V. 課 題 3 I.テキストの 記 述 方 法 1. 改 行 4 終 了 タグは 無 い 改 行 していない なすび なすびがいっぱい

More information

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

ホームページの作成

ホームページの作成 HTML5,CSS 資 料 HTML5 HTML の 文 法 HTML(Hyper Text Markup Language)は, 文 章 の 部 分 を Tag(タグ)と 呼 ばれ る 命 令 で 挟 んでいく タグは ... 開 始 終 了 のように 開 始 タグと 終 了 タグ 一 対 のペアになっている. タグは, 挟 まれた 部 分 がどのような 情 報 であるかを

More information

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS

More information

情報公開システム論2.pptx

情報公開システム論2.pptx 情 報 公 開 システム 論 (2) 神 戸 情 報 大 学 院 大 学 横 山 輝 明 電 子 文 書 としてのWebページ 2 ホームページ(1) ホームページ 自 由 に 作 成 安 価 世 界 中 に 公 開 多 彩 な 表 現 力 双 方 向 性 - 島 根 県 立 大 学 - 島 根 県 立 大 学 短 期 大 学 部 h,p://www.u- shimane.ac.jp/ 3 ホームページ(2)

More information

モール管理者マニュアル Ver.1.0

モール管理者マニュアル Ver.1.0 1 Html 編 集 ツール 補 足 マニュアル Ver.1.0 株 式 会 社 ソフトクリエイト 2012/11/14 目 次 1. Html について... 3 1.1. Html とは... 4 1.2. Html タグの 基 本... 5 1.2.1. HTML タグの 基 礎... 5 1.2.2. HTML タグの 種 類 ( 主 要 タグ)... 7 2. Html 編 集 ツール...

More information

Microsoft Word - メディア技術基礎.docx

Microsoft Word - メディア技術基礎.docx メディア 技 術 基 礎 (Web) 脇 田 玲 先 生 (2010) 田 中 浩 也 (2011) HTML の 基 本 的 な 書 き 方 テキストエディタで index.html を 作 成 して 以 下 のサンプルを 入 力 してみましょう 始 めの 2 行 は HTML を 書 く 前 のおまじないの 様 なものです ここで 登 場 する HTML タグについての 説 明 は 以 下 の

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

Microsoft Word - 2016メディプロ1HTML統合版v1

Microsoft Word - 2016メディプロ1HTML統合版v1 2016 年 度 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. 1 はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な

More information

border- 個 々のプロパティを 参 照 [<'border-top-width'> <'border-style'> ] border-color 個 々のプロパティを 参 照 {1, 4} border-top-color #000000 border-bottom-color #00000

border- 個 々のプロパティを 参 照 [<'border-top-width'> <'border-style'> ] border-color 個 々のプロパティを 参 照 {1, 4} border-top-color #000000 border-bottom-color #00000 Appendix_B EMOBILE CSSプロパティ 対 応 表 印 の 要 素 および 属 性 はモバイルブラウザで 使 用 できます で 示 す 項 目 は 一 部 の 端 末 で 使 用 できません A azimuth center - EMOBILE 非 対 応 B background 個 々のプロパティを 参 照 [

More information

CSSで書籍組版を

CSSで書籍組版を CSSで 書 籍 組 版 を ( 有 )イー エイド 藤 島 雅 宏 FormatterClub CSS 書 籍 組 版 セミナー 講 演 資 料 開 催 日 2013 年 10 月 18 日 会 場 東 京 都 中 央 区 浜 町 区 民 館 簡 単 そう 易 しい 簡 単 なことしかできない CSSはWeb 用 であり 組 版 機 能 が 劣 る コンテンツはHTMLなので 構 造 が 簡 単

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

■新聞記事

■新聞記事 情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]

More information

[color]- 色 の 設 定 color: 値 ; スタイルシートでは 文 字 の 色 を 変 えたり 背 景 に 色 を 付 けたりすることができます こ のとき 色 の 指 定 が 必 要 になりますが CSS では 大 きく 分 けて カラー 名 による 指 定 と 数 値 (RGB) に

[color]- 色 の 設 定 color: 値 ; スタイルシートでは 文 字 の 色 を 変 えたり 背 景 に 色 を 付 けたりすることができます こ のとき 色 の 指 定 が 必 要 になりますが CSS では 大 きく 分 けて カラー 名 による 指 定 と 数 値 (RGB) に CSS の 主 なプロパティ プロパティ 説 明 color 色 の 設 定 font フォントの 一 括 設 定 font-size フォントサイズの 設 定 font-family フォントの 種 類 の 設 定 font-style 文 字 を 斜 体 にする text-align 位 置 の 設 定 text-decoration 文 字 装 飾 の 設 定 vertical-align 文

More information

初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ

初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ 日 本 情 報 処 理 検 定 協 会 主 催 1 級 編 (Expression Web 4 対 応 ) 2015 年 4 月 日 本 情 報 処 理 検 定 協 会 初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

WORD 98 入力の手引き

WORD 98 入力の手引き コンピュータ 基 礎 実 習 ( 上 級 ) 第 13 週 スタイルシートの 基 礎 今 回 の 授 業 は スタイルシート(CSS)の 使 い 方 を 解 説 します 1. CSS の 基 本 1.1. CSS とは CSS は Cascading Style Sheets の 略 で ウェブページの 見 栄 えを 設 定 するための 言 語 です CSS は 最 近 多 くのサイトで 使 用 され

More information

html_text

html_text HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web

More information

2 PY 3 2 4 3 5 head 6............... 6 2 meta..................... 6 3 head............. 7 4 BASE......................... 7 6 8......................

2 PY 3 2 4 3 5 head 6............... 6 2 meta..................... 6 3 head............. 7 4 BASE......................... 7 6 8...................... HTML 04480 2 PY 3 2 4 3 5 head 6............... 6 2 meta..................... 6 3 head............. 7 4 BASE......................... 7 6 8......................... 8 2 HTML................. 30 3.........................

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション HTMLガイダンス 1 HTMLを 用 いたUI 設 定 2 色 々な 見 え 方 で 画 面 に 表 示 されるWebページ 全 て 文 字 /キャラクタで 表 現 されたデータの 集 まり HTML(Hyper Text Markup Language) パソコン 等 のインターネット 端 末 のブラウザソフトで 文 書 情 報 を 表 示 するときに 用 いられるプログラム 言 語 の 一 種

More information

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 株 式 会 社 アイ オー データ 機 器 CSS 解 説 書 目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 1.CSSとは? 3 1.CSSとは?

More information

インターネットマガジン2004年3月号―INTERNET magazine No.110

インターネットマガジン2004年3月号―INTERNET magazine No.110 C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;

More information

Page 2 of 7 フォーム 部 品 フォーム
内 のテキスト 入 力 や 実 行 ボタンなどの 各 フォーム 部 品 を 表 示 します 下 記 の type 属 性 の 値 によって 見 栄 えも 動 作 も 異 なる 部 品 となります type 属 性 text

Page 2 of 7 <input>フォーム 部 品 フォーム<form> 内 のテキスト 入 力 や 実 行 ボタンなどの 各 フォーム 部 品 を 表 示 します 下 記 の type 属 性 の 値 によって 見 栄 えも 動 作 も 異 なる 部 品 となります type 属 性 text Page 1 of 7 ホームページ 作 成 Note HOME HPビルダー HTML/CSS CGI/Perl ez-html WebDesign Link SiteMap HTML 入 力 フォーム WebブラウザにHTMLファイルを 表 示 させる 通 常 の 静 的 なページ に 対 し メールフォ ーム 掲 示 板 ブログなどのようにWebブラウザから 入 力 された 要 求 に 対 して

More information

InfoPros13_digest.key

InfoPros13_digest.key ! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web 1 Web Web 1 Web HTML 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML HTML5 takahagi

More information

おすすめページ

おすすめページ 第 6 章 フォーム コントロールを 作 成 する 作 成 した 内 に お 名 前 や ご 意 見 ご 要 望 などの 入 力 フォームを 作 成 していきま す 最 後 に 送 信 ボタンを 設 置 します テキストフィールドを 作 成 する 名 前 を 入 力 できる 欄 をテキストフィールドで 作 成 します テキストフィールドを 作 成 すると 同 時 にラベ ルのテキストも

More information

第9回

第9回 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利

More information

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込

More information

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html

More information

クリック クリック リンクを 張 るためのタグ タグ ~ リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522

More information

Microsoft PowerPoint - css.ppt [互換モード]

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

2014メディプロ1HTML発展編2

2014メディプロ1HTML発展編2 04 年 度 メディアプロジェクト 演 習 HTML 講 座 発 展 編 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な Web ページの

More information

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 では タグの 省 略 は 一 切 認 められていない 第 2 問 インターネット 上 のすべてのコンピュータは イーサネットで 繋 がっている 第 3 問 新 規 にウェブサイトを 公 開 する 際 は HTML ドキュメントをアップロードした 後 に

More information

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

スライド 1

スライド 1 第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが

More information

(1) ,,,,, <> ( ) (/ ) (2) HTML5 (3) HTML (4) html (ja) (5) JavaScript CSS (6)

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript

More information

Web概論

Web概論 HTML/CSS Chapter 04 スタイルシートを使う Copyright 2011 ZDRIVE, K.K. All rights reserved. 4.1 CSS の仕組みと書式 CSS とは Cascading Style Sheet の略 単に スタイルシート と呼ばれることもある HTML で作ったページにレイアウトや装飾などのデザインを施すための仕組み CSS を記述したファイルは.css

More information

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使

More information

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

Microsoft PowerPoint - ⅩII-Allin1SP_HTMLエディタ.ppt [互換モード]

Microsoft PowerPoint - ⅩII-Allin1SP_HTMLエディタ.ppt [互換モード] HTML EDITOR HTMLエディタ マニュアル 目 次 HTMLエディタの 機 能 概 要 概 要 2 画 面 構 成 2 HTMLエディタの 機 能 説 明 各 ツールの 説 明 3 ツールの 詳 細 説 明 5 1 HTMLエディタ 機 能 概 要 概 要 HTMLエディタは ワープロソフトのように 直 感 的 にウェブページ(HTML 文 書 )を 編 集 するための 補 助 ツール です

More information

Adobe® Corporate Template 2005

Adobe®  Corporate Template 2005 Dreamweaver CS3 による CSS デザイン 入 門 小 松 学 史 アドビ 認 定 インストラクター(ACI) 1 Who is this guy? 小 松 学 史 アクティブファクター Dreamweaverおよび Flash アドビ 認 定 インストラク ター(ACI) 2000 年 よりフリーランスとして マルチメディアコン テンツ Web サイト 制 作 に 携 わる 現 在

More information

CSS3

CSS3 オレたちAndroid CSS @media only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;!

More information

eil2009062930_4.ppt

eil2009062930_4.ppt URL (Universal Resource Locator) WWW (World Wide Web) URL http://www.cs.kumamoto-u.ac.jp/ Web ftp://ftp.cc.kumamoto-u.ac.jp/ FTP (File Transfer Protocol) FTP World Wide Web (WWW) Web HTTP (HyperText Transfer

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6.....................

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6..................... web 0448039 1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6...................... 3 7 HTML CSS.................... 3 8....................

More information

22. 情 報 の 発 信 伝 達 コミュニケーション Ustream :2007 年 にジョン ハム ブラッド ハンスタブル ジュラ フェヘルに よって 設 立 された 動 画 共 有 サービス 元 々は3 人 が 開 発 した イラク 戦 争 に 派 兵 された 友 人 達 と 家 族 のための

22. 情 報 の 発 信 伝 達 コミュニケーション Ustream :2007 年 にジョン ハム ブラッド ハンスタブル ジュラ フェヘルに よって 設 立 された 動 画 共 有 サービス 元 々は3 人 が 開 発 した イラク 戦 争 に 派 兵 された 友 人 達 と 家 族 のための 2016 年 度 春 学 期 ( 月 V/ 火 II ) 情 報 情 報 発 信 と 伝 達 22. 情 報 の 発 信 伝 達 コミュニケーション 23. 情 報 発 信 のためのHTMLの 基 礎 最 初 に 講 義 資 料 は http://astro.u-gakugei.ac.jp/~nishiura 西 浦 クンの 講 義 室 に 縮 小 版 (PDFファイル)を 置 く 予 定 東 京

More information

第7章 Webページによる情報の発信

第7章 Webページによる情報の発信 筑 波 大 学 情 報 処 理 実 習 Webページによる 情 報 の 発 信 情 報 処 理 実 習 用 手 引 き P.197~226 World Wide Web (WWW) インターネット 上 のハイパーテキストシステム 1989 年 にCERNの 物 理 学 者 Tim Berners-Leeが 発 明 WWWはインターネットとも 呼 ばれるが, 両 者 は 同 義 語 ではない WebページのアドレスURL

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 1 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

H10-3 placeholder 未 入 力 時 placeholder title +placeholder + 各 input typeの 読 み 上 げ 例 tit

H10-3 placeholder 未 入 力 時 <textarea title=title  placeholder=placeholder ></textarea> placeholder title +placeholder + 各 input typeの 読 み 上 げ 例 tit HTML H1-1 title - あり - ページタイトル + ページ 遷 移 時 に 読 み 上 げる H1-2 - なし なし 読 み 上 げしない H2 h1...h6 みだし + H3 em - タグ 前 後 の がある 場 合 は 一 拍 おいて 読 まれる H4 strong

More information

文京女子大学外国語学部

文京女子大学外国語学部 7.フォーム 7-1 フォームとは 皆 さんの 中 には ホームページを 閲 覧 していて アンケートに 答 えたり 申 込 書 のような 書 式 に 入 力 した 経 験 がある 人 もいるでしょう すなわち そのような 書 類 を 作 成 し 例 えば 電 子 メールの 形 式 であらかじめ 決 めておいたメールアドレスに 送 信 させる このような 機 能 を 持 つブロックがフ ォームタグで

More information

スライド 1

スライド 1 サイトクリエイション 機 能 一 覧 マニュアル 改 定 履 歴 平 成 18 年 5 月 17 日 平 成 18 年 9 月 5 日 平 成 18 年 12 月 11 日 平 成 19 年 4 月 21 日 SiteCreation 機 能 一 覧 マニュアル 配 布 開 始 しました (Ver1.0) 履 歴 機 能 を 追 加 しました (Ver2.0) RSSフィード 作 成 機 能 RSSボタン

More information

HTML+CSS_Lesson03_2s.indd

HTML+CSS_Lesson03_2s.indd Windows ファイル 名 には 半 角 スペースも 使 用 しないよう 注 意 しましょう 1. _- 2 類 似 するコンテンツがある 際 に content001 content002 といった 連 続 するナンバリングでフォ ルダ 名 をつけることがあります この 方 法 だと 途 中 のコンテンツがなくなったり ネーミングのルールに 無 理 が 生 じたときに ファイル やフォルダを 管

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

Microsoft Word - 1-html.doc

Microsoft Word - 1-html.doc Web ページ 作 成 の 基 礎 の 基 礎 内 容 : 1. HTML の 仕 組 み 2. HTMLの 文 法 2007-11-16 テキスト 原 案 作 成 原 田 隆 史 ( 慶 應 義 塾 大 学 ) 協 力 : 石 田 栄 美 ( 駿 河 台 大 学 ), 新 居 雅 行 (Apple Japan), 中 島 玲 子 1.Web ページの 仕 組 みと 作 成 1. Web ページを

More information

Microsoft PowerPoint - HTML1復習_1021.ppt

Microsoft PowerPoint - HTML1復習_1021.ppt HTML-Ⅱ(HTML 文 書 構 造 編 ) 3-1 HTML 基 本 構 造 html おいしいお 店 一 覧

More information

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き Ver.2 ユーザマニュアル スタートガイド 第 2 版 最 終 更 新 日 2011/7/12 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き

More information

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 : 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 2 : : 1 1 : 3 : 2 (.ppsx) (A0nxxyyy.ppsx) presen (1 ) ID:A0nxxyyy Name: Title: 3 HTML (HyperText Markup Language) 4 ( ) http://pweb.cc.sophia.ac.jp

More information

untitled

untitled MoogaOne 1. MoogaOne... 1 2. MoogaOne... 1 3.... 1 4.... 1 5.... 2 6.... 2 1.... 2 2.... 2 3. Template.htm... 2 4. index.htm... 4 [ ]... 4 5.... 4 6.... 6 7.... 6 8.... 6 [Template.htm Template-e.htm

More information

3 1 5 1.1....................................... 6 1.2.......................................... 6 1.3..................................... 7 1.4.................................... 8 1.4.1.............................

More information

HTML入門

HTML入門 HTML ABC of Hyper Text Markup Language 2009 2 HTML2009 Copyright 2009 by BohYoh Shibata 3 WWW HTML WWW WWWworld wide web hyper text resource 4 HTML2009 http WWW httphyper text transfer protocol HTML HTMLhyper

More information

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc)

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc) ブログをカスタマイズ! ~HTML HTML CSS を 使 ってブログを 自 分 の 好 みにしちゃおう ~ ブログを 登 録 しよう! ブログってなんだろう? ブログとはインターネット 上 で 管 理 者 が 記 事 を 投 稿 する 私 的 ニュースサイト あるいは 日 記 的 なもののこと 個 人 のホームページを 持 たなくても 簡 単 に 自 分 が 書 きたいことを 作 って 載 せることができる

More information

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ HTTP/2 HTTP/1.1 (1999 ) 2015 5 RFC7540! Google SPDY ( ) 1 TCP TCP TLS HTTP Upgrade HTTP 1 HPACK 1 / 24 3 : HTTP : HTML4 2 / 24 testform.html: POST testform2.html: GET iedemo: IE default.css: CSS proxy.pac:

More information

18

18 3.2.1 HTML,CSS 概 要 第 3 部 第 2 章 HTML,CSS 私 達 が 普 段 見 ている Web ページは そのほぼ 全 てが HTML(HyperText Markup Language)と CSS(Cascading Style Sheets)をはじ めとするいくつかの 技 術 の 組 み 合 わせによって 作 られています そして 私 達 でも 簡 単 に Web ページを

More information

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方 Ver.2 ユーザマニュアル スタートガイド 第 5 版 最 終 更 新 日 2012/7/11 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方...

More information

2 2.3...................... 17 2.3.1............................... 17 2.3.2............................. 17 2.3.3....................... 17 2.3.4....

2 2.3...................... 17 2.3.1............................... 17 2.3.2............................. 17 2.3.3....................... 17 2.3.4.... CSS revision01 2012 9 24 Copyright c 2007 2012 Daikoku Manabu This tutorial is licensed under a Creative Commons Attribution 2.1 Japan License. 1 CSS 4 1.1 CSS................................... 4 1.1.1............................

More information

(0) 準 備 自 分 のUSBメモリのなかに 自 分 の 学 番 の 名 前 をつけたフォルダを 作 成 する( 例 :5210001) 以 下 で 作 成 使 用 する HTML 文 書 や 画 像 ファイルはすべてこのフォルダの 中 に 作 成 すること (1)テキストエディタで HTML 文

(0) 準 備 自 分 のUSBメモリのなかに 自 分 の 学 番 の 名 前 をつけたフォルダを 作 成 する( 例 :5210001) 以 下 で 作 成 使 用 する HTML 文 書 や 画 像 ファイルはすべてこのフォルダの 中 に 作 成 すること (1)テキストエディタで HTML 文 情 報 リテラシー 第 13 回 ウェブページの 作 成 と 更 新 インターネットによって 世 界 中 の 人 に 瞬 時 に 情 報 を 伝 えることができるようになった ウェブページ はその 情 報 発 信 基 地 である ここではウェブページの 作 り 方 を 学 ぶ コンピュータ ストアにはたくさ んのウェブページ 作 成 ソフトが 市 販 されており 操 作 法 はソフトによって 様 々である

More information

1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................

1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ HTML 1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ 4 2..................... 6 3.....................

More information

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と ウェブデザイン 技 能 検 定 3 級 実 技 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

More information

Microsoft PowerPoint - A07回目②.pptx

Microsoft PowerPoint - A07回目②.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 7 回 目 2 11/14 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I. JavaScript( 画 像 関 係 ) II. 課 題 3 I.JavaScript 1.JavaScriptを 使 用 するためのお 約 束 4 の 間 に

More information

Microsoft Word - chap2.doc

Microsoft Word - chap2.doc 第 2 章 ホームページとHTML(タグ) ここでは HTML タグについて 今 まで 使 う 機 会 が 無 かった 学 生 を 対 象 に 説 明 する 既 に HTML タグを 使 ったことのある 学 生 にとっては 知 っている 話 になると 思 うので ざっと 目 を 通 すだけでよいだろう 初 めての 学 生 は 演 習 等 を 通 じて 使 い 慣 れて 欲 しい [1] HTML 通

More information

Network Computing の基礎

Network Computing の基礎 CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

Microsoft PowerPoint - lecture1210.pptx

Microsoft PowerPoint - lecture1210.pptx HTML: HyperText Markup Language 1 ウェブページ 作 成 名 古 屋 大 学 情 報 基 盤 センター 情 報 基 盤 ネットワーク 研 究 部 門 嶋 田 創 通 常 のウェブページはHTMLで 記 されている URLの 最 後 が.htmlで 終 わっている( 右 下 図 )ことが 多 いのはそのせい Windowsは 拡 張 子 が.htmlもしくは.htmの

More information

2. 画 面 の 分 割 タグを 使 用 することにより 1 つの 画 面 を 縦 横 複 数 に 分 割 することがでる 分 割 されたそれぞれ の 画 面 をフレームと 呼 ぶ 例 えば 目 次 を 常 に 画 面 上 の 決 まったフレームに 固 定 して 表 示 し 目 次 項

2. 画 面 の 分 割 <frame>タグを 使 用 することにより 1 つの 画 面 を 縦 横 複 数 に 分 割 することがでる 分 割 されたそれぞれ の 画 面 をフレームと 呼 ぶ 例 えば 目 次 を 常 に 画 面 上 の 決 まったフレームに 固 定 して 表 示 し 目 次 項 Web ページ 画 面 構 成 の 技 法 1. 配 置 の 制 御 基 本 的 なタグの 使 い 方 については はじめての HTML などを 通 して 学 習 した ここでは もう 少 し 凝 っ た 画 面 構 成 を 行 うための 基 礎 技 法 について 解 説 する 文 字 や 図 などを 画 面 上 の 任 意 の 位 置 に 配 置 するため には タグを 用 いた 表

More information

ま え が き Web サービスの 例 題 として Web ショップを 選 び,ネット 上 に Web ショップを 開 設 させることにより,Web プログラミングの 基 本 を 習 得 することが 本 書 の 目 的 で ある Web ショップはクライアントサーバモデルにより 実 現 される We

ま え が き Web サービスの 例 題 として Web ショップを 選 び,ネット 上 に Web ショップを 開 設 させることにより,Web プログラミングの 基 本 を 習 得 することが 本 書 の 目 的 で ある Web ショップはクライアントサーバモデルにより 実 現 される We Web HTML/CSSPHPMySQL による Web ショップ 開 設 工 学 博 士 尾 内 理 紀 夫 著 ま え が き Web サービスの 例 題 として Web ショップを 選 び,ネット 上 に Web ショップを 開 設 させることにより,Web プログラミングの 基 本 を 習 得 することが 本 書 の 目 的 で ある Web ショップはクライアントサーバモデルにより 実 現

More information

8 Web 8.1 Web Web 8.3 XHTML Web (1) (2) 2 8.1.1 Web Web Web Web 4 Web Web 2 5 PC Web Microsoft Internet Explorer Netscape Navigator Mozilla Firefox We

8 Web 8.1 Web Web 8.3 XHTML Web (1) (2) 2 8.1.1 Web Web Web Web 4 Web Web 2 5 PC Web Microsoft Internet Explorer Netscape Navigator Mozilla Firefox We 8 Web Web XHTML XHTML 1 Web Web 1 Web XHTML Web Web XHTML XHTML Extensible HyperText Markup Language( ) Web HTML XML HTML Web 2 XHTML XHTML HTML 4.01 XHTML XHTML 1.0 3 XHTML XHTML XHTML Web 1 2 Netscape

More information

スライド 1

スライド 1 ネットワーク ウェブサイト 関 連 の 基 本 (おさらい) ファイルの 公 開 ポート:80 (デフォルト) ウェブ サーバー 海 洋 大 のネットワーク プロキシ サーバー ファイルの アップロード 外 部 ネットワーク Apache サーバで ファイルを 公 開 パケットの 監 視 HTML 文 書 の 閲 覧 上 記 のネットワーク 構 成 は プロキシサーバーを 除 いておおよそどこでも

More information

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード] COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css

More information

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます " 出 し"の 部 分 をクリックすると"コンテンツですよ "の 字 が 表 されます もう 度 " 出 し"をクリックすると"コンテンツですよ "の 字 が 非 表 になります 折 りたたみパネルの 基

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます  出 しの 部 分 をクリックするとコンテンツですよ の 字 が 表 されます もう 度  出 しをクリックするとコンテンツですよ の 字 が 非 表 になります 折 りたたみパネルの 基 / 0/0/ : [CSS] 折 りたたみ 可 能 なパネルの 作 成 - CSSのみを 利 した 折 りたたみ 領 域 / アコー ディオンパネル このページのタグ:[CSS] [アコーディオンパネル] 新 着 記 事 覧 タグ 覧 トップページ ipentec.com CSSのみを 利 した 折 りたたみ 可 能 なパネル( 折 りたたみ 可 能 領 域 )を 実 現 するコードを 紹 介 します

More information

Microsoft PowerPoint - hp2.ppt [互換モード]

Microsoft PowerPoint - hp2.ppt [互換モード] 技 術 センター HP 講 習 会 ( 第 2 回 ) 広 島 大 学 技 術 センター HP 運 用 WG 本 日 の 講 習 会 の 流 れ FTPソフトの 使 い 方 ファイルをサーバにアップロードする 方 法 前 回 ( 第 1 回 )の 復 習 とその 応 用 フォルダ(ディレクトリ)とリンクの 関 係 リンクの 仕 組 み: 絶 対 パスと 相 対 パス パスワードによるアクセス 制 限

More information

ホームページの作成技術

ホームページの作成技術 Next ホームページの 作 成 技 術 2012/02/25 制 作 編 集 : 庄 司 たけし この 資 料 は ホームページ 作 成 のための 諸 技 術 についてまとめたものである 資 料 1と 資 料 2は HTML の 基 礎 についての 復 習 用 資 料 3と 資 料 4は スタイルシートについてまとめたもの 資 料 5 ~ 資 料 7は Javascript について 例 題 を

More information