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

Size: px
Start display at page:

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

Transcription

1 2016 年 度 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. 1 はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な Web ページの 作 成 方 法 レイアウト 方 法 について 学 んできました.ここで,タグは 本 来, Web ページ 上 の 文 章 構 造 を 決 定 するために 用 い るものでまた,タグでレイアウトを 決 定 す ると,HTML 文 章 の 構 造 が 複 雑 になり,Web ペ ージの 運 用 保 守 が 非 常 に 困 難 となりまそ のため,Web ページのレイアウトに 関 しては, Cascading Style Sheets(カスケーディング スタ イル シート:CSS)を 用 いてそれを 実 現 する ことが 推 奨 されてきました. そこで 発 展 編 2 では,CSS の 基 礎 とその 記 述 方 法 を 説 明 し,CSS を 用 いた Web ページ 作 成 に ついて 理 解 を 深 めることを 目 標 としままた, 世 界 中 の 人 々が 分 け 隔 てなく 情 報 資 源 にアクセ スできるようにすることを 目 的 とした,Web ア クセシビリティの 考 え 方 についても 学 びま 2 Cascading Style Sheets CSS は, 基 本 的 には, 各 タグで 囲 まれた 文 章 をどのように 表 示 するかを 決 定 しまCSS を 用 いる 際 には, 必 ず 以 下 の 記 述 が 必 要 となりま タグ 機 能 <meta http-equiv= Content-Style-type content= text/css > CSSを 使 用 することを 宣 言 しま (sample30.html) <meta http-equiv= Content-Style-type content= text/css > なお,ページ 幅 の 都 合 上 改 行 してありますが, 改 行 はしなくて 結 構 でしかし,この 改 行 部 分 に 相 当 するところに, 半 角 スペースを 入 力 し てください. 3 CSS の 記 述 方 法 3.1 CSS の 書 式 CSS は, 基 本 的 には, 以 下 の 書 式 をとりま セレクタプロパティ: 値 ; ここで,セレクタは 適 用 範 囲,プロパティは 何 を 指 定 するか( 文 字 の 色, 形 など), 値 は 具 体 的 な 内 容 ( 赤,MS 明 朝 など)を 指 定 しま また,セレクタに 示 した 適 用 範 囲 に 複 数 の 指 定 ( 文 字 の 色 と 形 の 両 方 など)をしたい 場 合 は, ; で 区 切 りまこのとき, ; で 区 切 った 後 に 改 行 すると 見 やすい 場 合 がありま 3.2 CSS の 3 つの 実 現 方 法 CSS には 以 下 に 示 す 3 つの 実 現 方 法 がありま style 属 性 を 使 う 方 法 HTML ファイルの ~ 間 に CSS を 記 述 する 方 法 CSS のみを 記 述 した 別 ファイル(***.css)を 用 意 し,HTML ファイルからリンクを 貼 る 方 法 style 属 性 を 使 う 場 合 は 以 下 のように 記 述 しま タグ < 要 素 名 style= プロパティ: 値 > 機 能 要 素 のスタイルを 指 定 しま (sample31.html) <p style="color:#ff0000"> 赤 い 文 字 </p> 次 に,HTML ファイルの ~ 間 に CSS を 記 述 する 場 合 は, 以 下 のように 記 述 しま タグ 機 能 (sample32.html) <style type= text/css > ~ </style> CSS を HTML ファイルの 中 で 記 述 します -16-

2 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 <style <!-- pcolor:#ff > </style> <p> 赤 い 文 字 </p> ここで,<!-- -->は,CSS に 対 応 していないブ ラウザで 閲 覧 したときに,この 中 の 部 分 がその ままテキストとして 表 示 されないようにするた めの 配 慮 で 最 後 に,CSS のみを 記 述 した 別 ファイルを 用 意 し,HTML ファイルからリンクを 貼 る 場 合 は, 以 下 のように 記 述 しま タグ <link rel= stylesheet href= ***.css type= text/css > 機 能 ***.css ファイル 内 で 記 述 した CSS を, HTML ファイルの 中 で 使 用 しま (sample33.html) <link rel="stylesheet" href="sample1.css" <p> 赤 い 文 字 </p> (sample1.css) pcolor:#ff0000 なお, 一 般 に CSS を 別 ファイルに 記 述 する 方 法 が 推 奨 されていまこれは, 複 数 の HTML ファイルから CSS を 参 照 できるようにすること で,HTML 作 成 保 守 運 用 を 簡 単 にするため で 本 資 料 でも,CSS を 別 ファイルに 記 述 す る 方 法 に 的 を 絞 って 説 明 して 行 きま 3.3 Class これまで, 指 定 した 要 素 にのみ 適 用 可 能 なス タイルの 指 定 方 法 について 説 明 してきました. しかしながら CSS では,class(クラス)と 呼 ば れるものを 用 いて 好 きな 名 前 でスタイルを 指 定 することが 出 来 まこれにより, 異 なる 要 素 に 対 して 共 通 のスタイルの 指 定,また, 同 じ 要 素 に 対 して 異 なるスタイルの 指 定 などが 可 能 に なりままず,クラスを 用 いた CSS を 適 用 す る 際 の HTML タグの 記 述 方 法 は 以 下 のようにな りま タグ < 要 素 名 class= クラス 名 > 機 能 要 素 にクラス 名 で 指 定 されたスタイルを 適 用 なお,クラス 名 の 後 にスペースを 空 けてその 他 のクラス 名 を 記 述 することにより,2 つのス タイルを 1 つの 要 素 に 適 用 することが 出 来 ま 次 に,CSS 側 は, 以 下 のような 指 定 方 法 になり ま.クラス 名 ( 任 意 に 決 定 )プロパティ: 値 ; 要 素 名.クラス 名 ( 任 意 に 決 定 )プロパティ: 値 ; ここで, 前 者 は 要 素 を 指 定 していないので, どのような 要 素 にも 適 用 させることが 可 能 で また, 後 者 は, 指 定 された 要 素 の 一 部 にのみ, 適 用 させることが 可 能 となりま 定 義 したクラスを html ファイルに 適 用 する 方 法 は,sample38.html のとおりでただし,<p class= red it >のように 複 数 のクラスを 適 用 する 場 合 は,クラス 名 とクラス 名 の 間 にスペースを 入 れま (sample34.html) <link rel="stylesheet" href="sample2.css" <p class="red"> 赤 い 文 字 </p> <p class="red it"> 赤 いイタリック 文 字 </p> <h1 class="blue"> 青 い 文 字 </h1> <p class="blue"> 青 くない 文 字 </p> (sample2.css).redcolor:#ff0000.itfont-style:italic h1.bluecolor:#0000ff -17-

3 4 CSS の 例 以 下 に, 代 表 的 な CSS について 説 明 しま なお,これら 以 外 にも 様 々な CSS が 存 在 しま また,それぞれの 値 の 指 定 方 法 についても,こ れ 以 外 のものが 沢 山 在 りまそれらを 勉 強 す る 際 には,http://htmlhelp.com/ja/reference/css/ が 良 い 参 考 ページとして 役 立 つと 思 いま 4.1 CSS の 例 1 タグの 範 囲 の 背 景 色 を 指 定 CSS background-color: 色 機 能 背 景 色 を 指 定 値 数 値 16 進 数 で 色 を 指 定 色 名 色 名 で 色 を 指 定 タグの 範 囲 の 文 字 色 を 指 定 CSS color: 色 機 能 文 字 色 を 指 定 値 数 値 16 進 数 で 色 を 指 定 色 名 色 名 で 色 を 指 定 文 字 の 大 きさを 指 定 CSS font-size: 文 字 の 大 きさ 機 能 文 字 の 大 きさを 指 定 値 %, em, px, pt などで 指 定 備 考 %: 標 準 文 字 サイズを 100%とした 割 合 em: 親 要 素 の 文 字 サイズを 1 em としたと きの 比 px:ピクセル 数 で 指 定 pt:ポイント 数 で 指 定 文 字 の 太 さを 指 定 CSS font-weight: 文 字 の 太 さ 機 能 文 字 の 太 さを 指 定 値 bold, normal 文 字 の 斜 体 を 指 定 CSS font-style: 文 字 の 種 類 機 能 斜 体 とするかしないかを 指 定 値 italic 斜 体 normal 標 準 の 文 体 文 字 のフォントを 指 定 CSS font-family:フォント 名 or 文 字 の 種 類 名 機 能 フォント 名 や 種 類 名 を 指 定 値 文 字 の 種 類 名 serif 文 字 の 先 端 にはねがある. sans-serif 文 字 の 先 端 にはねが 無 い cursive 筆 記 体 monospace 幅 が 全 て 同 じフォント フォント 名 フォント 名 には 様 々なものがありま 皆 さんで 調 べてみてください. 行 間 を 指 定 CSS line-height: 行 間 機 能 複 数 行 にわたるブロックの 行 間 を 指 定 値 %, em, px などの 数 値 文 字 の 表 示 位 置 を 指 定 CSS text-align: 表 示 位 置 機 能 文 字 の 表 示 位 置 を 指 定 値 left 左 揃 え center 中 央 揃 え right 右 揃 え justify 両 端 揃 え( 半 角 のみ) (sample35.html) <link rel="stylesheet" href="sample3.css" <p class="sec"> 章 用 スタイル</p><br> <p class="subsec"> 節 用 スタイル</p><br> <p class="text"> 本 文 用 スタイル 本 文 用 スタイル 本 文 用 スタイル<br> 本 文 用 スタイル 本 文 用 スタイル 本 文 用 スタイル </p> <p>スタイル 適 用 していない 本 文 ( 上 と 行 間 を 比 べてみてください)<br> スタイル 適 用 していない 本 文 ( 上 と 行 間 を 比 べて みてください)</p> <h1 class="center"> 中 央 寄 せ: 文 字 色 赤 : 背 景 黒 (sample3.css).sec font-size:16pt;.subsec font-size:14pt;.text font-size:12pt; font-family:"ms P 明 朝 "; line-height:1.5em; -18-

4 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 h1.center text-align:center; 基 本 課 題 11: 自 己 紹 介 ページの 文 字 色 背 景 色 フォント 行 間 などのスタイルを 別 途 CSS ファイルとして 作 成 し,そのスタイルを 自 己 紹 介 の HTML ページに 反 映 させてください. 4.2 CSS の 例 2 省 略 可 文 字 の 周 囲 の 余 白 を 指 定 CSS padding: 間 隔 機 能 文 字 の 大 きさを 指 定 値 数 値 %, em, px, pt などで 指 定 備 考 %: 標 準 文 字 サイズを 100 %とした 割 合 em: 親 要 素 の 文 字 サイズを 1 em としたと きの 比 px:ピクセル 数 で 指 定 pt:ポイント 数 で 指 定 文 字 の 周 囲 にそれぞれ 異 なる 余 白 を 指 定 padding:a b c d 文 字 の 上 (a) 右 (b) 下 (c) 左 (d)の 余 白 を 指 定 padding:a b c 文 字 の 上 (a) 左 右 (b) 下 (c)の 余 白 を 指 定 padding:a b 文 字 の 上 下 (a) 左 右 (b)の 余 白 を 指 定 padding:a 文 字 の 上 下 左 右 (a)の 余 白 を 指 定 上 下 左 右 の 特 定 の 部 分 に 余 白 を 指 定 padding-top 文 字 の 上 の 余 白 を 指 定 padding-right 文 字 の 右 の 余 白 を 指 定 padding-bottom 文 字 の 下 の 余 白 を 指 定 padding-left 文 字 の 左 の 余 白 を 指 定 ブロックの 周 囲 の 余 白 を 指 定 CSS margin: 間 隔 機 能 ブロック 枠 の 周 囲 への 余 白 を 指 定 値 数 値 %, em, px, pt などで 指 定 auto 状 況 に 応 じて 自 動 調 整 備 考 %: 標 準 文 字 サイズを 100 %とした 割 合 em: 親 要 素 の 文 字 サイズを 1 em としたと きの 比 px:ピクセル 数 で 指 定 pt:ポイント 数 で 指 定 ブロックとは,テーブルのセルや,h タ グによる 見 出 しのように,ブロック 状 に 囲 まれた 部 分 のことを 便 宜 上 指 していま ブロックの 周 囲 にそれぞれ 異 なる 余 白 を 指 定 margin:a b c d ブロックの 上 (a) 右 (b) 下 (c) 左 (d)の 余 白 を 指 定 margin:a b c ブロックの 上 (a) 左 右 (b) 下 (c) の 余 白 を 指 定 margin:a b ブロックの 上 下 (a) 左 右 (b)の 余 白 を 指 定 margin:a ブロックの 上 下 左 右 (a)の 余 白 を 指 定 上 下 左 右 の 特 定 の 部 分 に 余 白 を 指 定 margin top ブロックの 上 の 余 白 を 指 定 margin right ブロックの 右 の 余 白 を 指 定 margin bottom ブロックの 下 の 余 白 を 指 定 margin left ブロックの 左 の 余 白 を 指 定 (sample36.html) <link rel="stylesheet" href="sample4.css" <p class="sec"> 文 字 余 白 確 認 : 章 用 スタイル</p> <p class="subsec"> 文 字 余 白 確 認 : 節 用 スタイル </p> <p class="sec_b">ブロック 余 白 確 認 : 章 用 スタイ ル</p> <p class="subsec_b">ブロック 余 白 確 認 : 節 用 スタ イル</p> (sample4.css).sec font-size:16pt;.subsec.sec_b padding:7pt; font-size:14pt; padding:7pt 7pt 1pt 24pt; -19-

5 font-size:16pt; margin:0;.subsec_b font-size:14pt; margin-top:0pt; margin-left:24pt; 4.3 CSS の 例 3 省 略 可 文 字 の 周 囲 に 枠 線 を 表 示 CSS border-style: 種 類 機 能 枠 線 の 種 類 を 指 定 値 solid 枠 を1 本 線 で 表 示 dotted 枠 を 点 線 で 表 示 dashed 枠 を 破 線 で 表 示 double 枠 を 二 重 線 で 表 示 groove 枠 がへこんでいるように 表 示 ridge 枠 が 出 っ 張 っているように 表 示 inset 枠 の 内 側 がへこんでいるように 表 示 outset 枠 の 内 側 が 出 っ 張 っているよう に 表 示 none 枠 無 し.( 初 期 値 ) 上 下 左 右 に, 異 なる 枠 線 を 指 定 border-style:a b c d 上 (a) 右 (b) 下 (c) 左 (d) border-style:a b c 上 (a) 左 右 (b) 下 (c) border-style:a b 上 下 (a) 左 右 (b) border-style:a 上 下 左 右 (a) 枠 線 の 太 さを 指 定 CSS border-width: 太 さ 機 能 枠 線 の 太 さを 指 定 値 px, em 上 下 左 右 に, 異 なる 枠 線 の 太 さを 指 定 border-width:a b c d 上 (a) 右 (b) 下 (c) 左 (d) border- width:a b c 上 (a) 左 右 (b) 下 (c) border- width:a b 上 下 (a) 左 右 (b) border- width:a 上 下 左 右 (a) 枠 線 の 色 を 指 定 CSS border-color: 色 機 能 枠 線 の 太 さを 指 定 値 px, em 上 下 左 右 に, 異 なる 枠 線 の 色 を 指 定 border-color:a b c d 上 (a) 右 (b) 下 (c) 左 (d) border- color:a b c 上 (a) 左 右 (b) 下 (c) border- color:a b 上 下 (a) 左 右 (b) border- color:a 上 下 左 右 (a) 枠 線 の 種 類, 太 さ, 色 を 一 括 指 定 CSS border: 種 類 太 さ 色 機 能 枠 線 の 種 類, 太 さ, 色 を 指 定 値 border-style/border-width/border-color と 同 じ 特 定 の 部 分 に 枠 線 の 種 類, 太 さ, 色 を 指 定 border top 上 border right 右 border bottom 下 border left 左 (sample37.html) <link rel="stylesheet" href="sample5.css" <span class="solid">solid</span> <span class="dotted">dotted</span> <span class="dashed">dashed</span> <span class="double">double</span><br><br><br> 今 までの CSS を 下 にまとめてみました. <p class="solid2">border-style:solid; border-width:1px; border-color:#666666; padding:5px;<br> background-color:#cccccc; color:#666666; font-family:"arial"; font-size:11pt; line-height:1.5em;</p> (sample5.css).solidborder-style:solid.dottedborder-style:dotted.dashedborder-style:dashed.doubleborder-style:double.solid2 border-style:solid; border-width:1px; border-color:#666666; -20-

6 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 padding:5px; background-color:#dddddd; color:#666666; font-family:"arial"; font-size:11pt; line-height:1.5em; 発 展 課 題 4: 自 己 紹 介 ページの 見 出 しの 部 分 に 余 白 枠 線 などのスタイルを 別 途 CSS ファイル として 作 成 し,そのスタイルを 自 己 紹 介 の HTML ページに 反 映 させてください. 5 Web アクセシビリティ WWWにおいては, 世 界 中 の 人 々が 分 け 隔 て なく 世 界 中 の 情 報 資 源 にアクセスできるように しようという 理 念 がありまこの 事 を,アク セシビリティを 呼 んでいまアクセシビリテ ィの 向 上 のために,Webの 表 現 方 法 を 直 接 左 右 するHTMLの 規 格 について,いろんな 改 良, 変 更 が 加 えられてきました.HTMLの 要 素 の 中 に は,アクセシビリティについての 考 慮 の 足 りな いかった 要 素 も 含 まれており, 現 在,そのよう な 要 素 については 非 推 奨 という 指 定 がされてい ま 5.1 非 推 奨 な 要 素 や 属 性 HTMLの 仕 様 の 中 には, 色 の 指 定 や, 文 字 の 装 飾 やサイズの 指 定,テキストや 画 像 の 配 置 な ど, 見 た 目 の 構 造 を 制 御 する 要 素 や 属 性 がかな りありまWWWでは, 楽 しいページや 目 立 つページ, 見 やすいページを 目 指 して,そうい った 様 々な 物 理 的 な 構 造 の 工 夫 をしていま しかし, 実 は,そのような 物 理 的 な 構 造 を 表 現 する 要 素 や 属 性 は, 現 在 のHTMLの 規 格 にお いては,ほとんどのものが 非 推 奨 となって いるのでただ, 非 推 奨 だからと 言 って, 見 た 目 の 工 夫 を 否 定 してしまったら,そのページ の 目 的 によっては 意 味 のないものとなったり, 楽 しくないものとなってしまう 可 能 性 もありま これは, 物 理 的 な 構 造 を 否 定 するのではなく, 言 語 仕 様 の 上 で,HTMLは 論 理 的 な 構 造 を 表 現 する 役 割 に 専 念 し, 物 理 的 な 構 造 については 別 の 言 語 仕 様 で 面 倒 をみるという, 役 割 分 担 を 目 指 した 結 果 だと 考 えられまそこで, 物 理 的 な 構 造 を 表 現 するために, 本 資 料 で 勉 強 した CSS (Cascading Style Sheets) という 言 語 仕 様 が 提 案 され, 実 際 に 使 われていま ただ, 現 実 的 にはまだまだ 見 た 目 を 表 現 する ための 要 素 や 属 性 は 多 く 使 われており, TransitionalなDTDを 用 いる 限 り, 禁 止 されてい るわけではありません. 扱 いが 容 易 なので, 本 講 座 でも,フォントの 指 定 や 色 の 指 定 などの 見 た 目 の 表 現 についてのHTML 要 素 や 属 性 につい ても 学 びました. 5.2 Webアクセシビリティ Webのアクセシビリティを 押 し 進 めている 活 動 として,Web Accessibility Initiative (WAI) が 挙 げられまWebアクセシビリティについての ガイドラインの 日 本 語 訳 がありますので,その ページのURLを 載 せておきま さて,なぜHTMLの 仕 様 の 中 から 物 理 的 な 構 造 についての 要 素 や 属 性 を 分 離 しなければなら なかったかと 言 うと,これはアクセシビリティ の 問 題 があったからで 例 えば, 読 み 上 げソ フトを 使 ってWWWを 閲 覧 している 目 の 不 自 由 な 人 たちもいま 文 字 の 大 きさや 文 字 の 色 を 直 接 指 定 してあっても,そのような 人 にとって は,その 事 自 体 にはあまり 意 味 がありません. しかし, 文 字 の 大 きさを 直 接 指 定 するのでは なく,h1 要 素 のように, 見 出 し であるとい う 論 理 的 な 構 造 を,HTML 要 素 として 指 定 して おけば, 読 み 上 げソフトはそれに 則 してその 部 分 が 見 出 しであると 言 う 事 を 閲 覧 者 に 伝 える 事 ができるでしょう.そのような 意 味 で,HTML においては 論 理 的 な 構 造 を 表 現 する 方 法 を 確 立 させておき, 物 理 的 な 構 造 の 表 現 については 別 の 手 段 を 用 意 するという 役 割 分 担 の 考 え 方 が, アクセシビリティの 向 上 にとってとても 有 効 で あると 言 えま 参 考 文 献 [1] HTMLとスタイルシートによる 最 新 Webサイ ト 作 成 術 ホームページでなにを 伝 える?どう 作 る?,エクスナレッジ,

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

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

More information

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

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に 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 - 08回目.pptx

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

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 の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

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

CSSの基礎

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

More information

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

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

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

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

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

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

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

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

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

WORD 98 入力の手引き

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

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

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

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

More information

スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年

スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年 Departmental Bulletin Paper / 紀 要 論 文 スタイルシートを 用 いたWebページの 運 用 太 田, 諭 之 ; 大 橋, 和 義 ; 後 藤, 克 嘉 ; 水 野, 保 則 技 術 職 員 による 技 術 報 告 集. 2009, 17, p. 24-27. http://hdl.handle.net/10076/10274 スタイルシートを 用 いた Web ページの

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

インターネットマガジン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

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(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

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

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................... 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

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

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

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

(Microsoft Word - CSS\202P\201i\212\356\226{\202P_.doc)

(Microsoft Word - CSS\202P\201i\212\356\226{\202P_.doc) スタイルシート ( 第 1 章 基 礎 1) HTMLはWeb 作 成 用 の 言 語 ですが 文 字 飾 りがかなり 貧 弱 です そこを 強 化 した ものがスタイルシートと 言 われるものです さらにスタイルシートには HTMLでは 出 来 ないような 仕 組 みも 取 り 入 れられています スタイルシートよりレベルの 高 い 技 術 は JavaScript ですが スタイルシートの 仕

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

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

1.5. 根 拠 となる 規 格 ウェブアクセシビリティに 関 する 国 内 の 標 準 規 格 である JIS X :2010 高 齢 者 障 害 者 等 配 慮 設 計 指 針 - 情 報 通 信 における 機 器,ソフトウェア 及 びサービス - 第 3 部 :ウェブコンテンツ (

1.5. 根 拠 となる 規 格 ウェブアクセシビリティに 関 する 国 内 の 標 準 規 格 である JIS X :2010 高 齢 者 障 害 者 等 配 慮 設 計 指 針 - 情 報 通 信 における 機 器,ソフトウェア 及 びサービス - 第 3 部 :ウェブコンテンツ ( 六 戸 町 ウェブアクセシビリティガイドライン 2015 年 4 月 1 日 1. はじめに 1.1. 目 的 六 戸 町 ウェブアクセシビリティガイドライン ( 以 下 本 ガイドラインという)は 日 本 工 業 規 格 (JIS X 8341-3)を 踏 まえ 六 戸 町 がウェブサイトにおいて 障 害 者 高 齢 者 の 使 いやすさに 最 大 限 配 慮 して 情 報 提 供 を 行 なうため

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

クリック クリック リンクを 張 るためのタグ タグ ~ リンク 先 の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

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

(1)

(1) 第 回 アビリンピック 京 都 大 会 ホームページ 部 門 練 習 問 題 (1) 仕 様 1 ホームページの 内 容 府 立 京 都 高 等 技 術 専 門 校 のホームページを 作 成 する 2 ページ 構 成 とファイル index.html guid.html course.html mystyle.css ie.css 以 上 のファイルと 素 材 はホームページよりダウンロードして

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

経営論集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

Adobe® Corporate Template 2005

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

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

PowerPoint プレゼンテーション

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

More information

ホームページの作成

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

More information

アフィリエイターの為のHTML

アフィリエイターの為のHTML アフィリエイターが 覚 えておくべき HTML 辞 典 著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はやまひろに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 を いかなる 手 段 においても 複 製 転 載 流 用 転 売 等 することを 禁 じます このレポートに 書 かれた

More information

分散情報システム構成法

分散情報システム構成法 Web Information System Design No.3 Web 文 書 にスタイルを 付 ける Tatsuya Hagino (hagino@sfc.keio.ac.jp) 1 Webページの 構 成 要 素 直 交 技 術 を 組 み 合 わせる 内 容 スタイル プログラミング スタイル プログラミング JavaScript CSS Webページ Web 文 書 HTML 内 容

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

■新聞記事

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

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

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 - HTML1復習_1021.ppt

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

More information

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

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

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

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

OpenCity2説明

OpenCity2説明 和 光 市 市 民 活 動 支 援 サイト 新 掲 示 板 (FCKエディタ)について 通 常 ホームページを 作 成 するには HTML という 専 門 言 語 の 知 識 が 必 要 ですが FCK エディ タを 使 えば ワードやエクセルと 同 じ 感 覚 で タイトル 文 字 を 太 字 にしたり 表 を 作 成 したり 画 像 を 挿 入 したり 更 にはワードで 作 成 した 文 章 スタイルそのままにコピー&ペースト

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

A

A A. ツールボタン の 使 い 方 下 の 図 は NetCommons の 共 通 エディタで 表 示 されるツールボタンの 一 覧 です 書 式 設 定 左 からフォント サイズ スタイルを 設 定 するためのプルダウンメニューです 効 果 をつけたい 箇 所 の 先 頭 でク リックするか 効 果 をつけたい 箇 所 をカーソルで 選 択 してボタンをクリックします 文 字 効 果 左 から

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.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

html_text

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

More information

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

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

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 41 ヨロン 観 光 まちづくり 支 援 サービス マイホームページ 操 作 説 明 書 1 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 センター 承 認 公 開 申 請 ホームページ 作 成 ホームページ 作 成 の3つのステップ 1 ホームページの 設 定 (p3) 2 レイアウト デザインの 設 定

More information

Fckeditor の 基 本 的 な 使 い 方 Point!! fckeditor を 上 手 く 使 うコツ 始 めにページ 内 に 一 通 り 文 章 ( 画 像 や 表 を 含 む)を 書 いてから 文 字 装 飾 をして 下 さい 編 集 したいテキストや 画 像 を 選 択 し アイコ

Fckeditor の 基 本 的 な 使 い 方 Point!! fckeditor を 上 手 く 使 うコツ 始 めにページ 内 に 一 通 り 文 章 ( 画 像 や 表 を 含 む)を 書 いてから 文 字 装 飾 をして 下 さい 編 集 したいテキストや 画 像 を 選 択 し アイコ Fckeditor マニュアル 目 次 Fckeditor の 基 本 的 な 使 い 方... 2 記 事 の 登 録 プレビューの 前 に... 2 リンクを 挿 入... 5 画 像 を 挿 入 する... 6 PC に 保 存 している 画 像 の 挿 入... 6 WEB 上 の 画 像 を 挿 入... 8 文 字 装 飾... 10 文 章 を 見 出 しにする... 10 太 文 字

More information

Table of Contents... 3 XML... 3... 3... 4 XSL... 4 CSS XML... 5 CSS... 5 HTML+CSS... 6 CSS XML... 7 CSS... 8 XSLT XML HTML(+CSS)... 9 IE5 XML... 9 IE5

Table of Contents... 3 XML... 3... 3... 4 XSL... 4 CSS XML... 5 CSS... 5 HTML+CSS... 6 CSS XML... 7 CSS... 8 XSLT XML HTML(+CSS)... 9 IE5 XML... 9 IE5 2001 2 Table of Contents... 3 XML... 3... 3... 4 XSL... 4 CSS XML... 5 CSS... 5 HTML+CSS... 6 CSS XML... 7 CSS... 8 XSLT XML HTML(+CSS)... 9 IE5 XML... 9 IE5... 9 XSLT... 10 XSLT... 11 XML HTML... 11 XML

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 山 都 町 移 住 定 住 サイト マイホームページ 操 作 説 明 書 平 成 26 年 3 月 10 日 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 センター 承 認 公 開 申 請 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト

More information

CSSで書籍組版を

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

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >> ファイル

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

(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

1129

1129 20101129 Web 1 20101129 Web 2 20101129 Web 3 20101129 Web 4 20101129 Web 5 20101129 h1{color:#000;}] h1{color:#000} *{margin: 0; padding: 0;}.note{color: #fco;} p.note{color: #fco;} Web 6 20101129

More information

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

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

More information

ホームページとは何?

ホームページとは何? ホームページ 作 成 にあたっての 基 本 事 項 ホームページとは? インターネットを 介 して 誰 もが 閲 覧 できるように 作 られたものを ホームページ と 言 います ホームページには 文 字 だけでなく 画 像 や 動 画 音 楽 なども 埋 め 込 むことができま す またホームページに 掲 載 されている 情 報 の 中 でひとまとめに 括 られたものを コンテ ンツ と 呼 んでいます

More information

ウェブアクセシビリティガイドライン

ウェブアクセシビリティガイドライン 兵 庫 県 小 野 市 ウェブアクセシビリティガイドライン 第 1 版 平 成 24 年 12 月 情 報 管 理 課 目 次 1 ガイドライン 策 定 の 目 的... 1 2 ガイドラインの 適 用 範 囲... 1 3 ウェブアクセシビリティの 必 要 性... 1 4 根 拠 となる 規 格... 1 5 配 慮 の 対 象 となる 利 用 者... 2 6 達 成 等 級 と 達 成 基

More information

ア ク セス 統 計 の 確 認 月 ごとのアクセス 数 を 確 認 する 1 ア クセス 統 計 画 面 を 表 示 し 確 認 する 月 を 選 択 しま アクセス 統 計 画 面 の 表 示 方 法 アクセス 統 計 画 面 を 表 示 する (P.70) 最 も 古 い 月 の 統 計 デー

ア ク セス 統 計 の 確 認 月 ごとのアクセス 数 を 確 認 する 1 ア クセス 統 計 画 面 を 表 示 し 確 認 する 月 を 選 択 しま アクセス 統 計 画 面 の 表 示 方 法 アクセス 統 計 画 面 を 表 示 する (P.70) 最 も 古 い 月 の 統 計 デー ア ク セス 統 計 の 確 認 ア ク セス 統 計 の 確 認 お 客 様 のホームページへアクセスされた 回 数 を 確 認 しま 統 計 データの 保 証 期 間 統 計 デー タの 保 証 期 間 は 1 年 (12ヶ 月 ) で ア ク セス 統 計 画 面 を 表 示 す る 1 管 理 者 メ ニ ューを 表 示 し ア クセス 統 計 をクリックしま 管 理 者 メニューの 表 示

More information

おすすめページ

おすすめページ 4-5 第 4 章 高 度 なリストのデザイン スマートフォン 向 けのCSSを 読 み 込 む スマートフォンのように 画 面 サイズの 小 さい 端 末 で 見 たときは 専 用 のCSSを 読 み 込 むように します 画 面 サイズが 小 さいときはレイアウトを 変 更 する スマートフォンなど パソコンに 比 べて 画 面 の 小 さい 端 末 で Web サイトを 閲 覧 しようとすると

More information

1 全 体 のレイアウトを 把 握 する 2 段 組 レイアウト 1 段 組 レイアウト 左 サイドメニューが 表 示 され, 新 着 記 事 が 一 覧 (または 簡 略 形 式 ) 投 稿 した 記 事 が, 日 付 順 にそのまま 表 示 される で 表 示 される 管 理 メニュー(ダッシュ

1 全 体 のレイアウトを 把 握 する 2 段 組 レイアウト 1 段 組 レイアウト 左 サイドメニューが 表 示 され, 新 着 記 事 が 一 覧 (または 簡 略 形 式 ) 投 稿 した 記 事 が, 日 付 順 にそのまま 表 示 される で 表 示 される 管 理 メニュー(ダッシュ 編 集 者 ユーザー 用 CONTENTS 全 体 のレイアウトを 把 握 する... 1 管 理 メニュー(ダッシュボード)へログインする... 1 ダッシュボードの 見 方 を 覚 える... 2 新 規 投 稿 の 方 法 について... 3 投 稿 記 事 を 編 集 する... 4 メディア( 外 部 ファイル)を 追 加 する... 5 別 のサイトへリンクする... 6 HTML 編

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

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

Microsoft PowerPoint - manualtachiyomi.pptx

Microsoft PowerPoint - manualtachiyomi.pptx ニックネームはここに 載 る!! マイページの 左 上 ブログのプロフィール 欄 メッセージを 送 った 相 の 受 信 箱 クリックしてもらえるような 興 味 を 引 く 名 前 にしましょう 記 事 を 編 集 削 除 する 下 書 き 保 存 されている= 公 開 されていない 公 開 されている リンクが 付 いていて クリックすると 公 開 されている 記 事 が 開 く 記 事 を 編

More information

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

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 ましき はぴまるサイト マイホームページ 操 作 説 明 書 平 成 27 年 12 月 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト デザインの 設 定 (p5) 3 記 事 の 登

More information

著 作 権 について 本 冊 子 と 表 記 は 著 作 権 法 で 保 護 されている 著 作 物 です 本 冊 子 の 著 作 権 は 発 者 にあります 本 冊 子 の 使 用 に 関 しましては 以 下 の 点 にご 注 意 下 さい 使 用 許 諾 契 約 書 本 契 約 は 本 冊 子

著 作 権 について 本 冊 子 と 表 記 は 著 作 権 法 で 保 護 されている 著 作 物 です 本 冊 子 の 著 作 権 は 発 者 にあります 本 冊 子 の 使 用 に 関 しましては 以 下 の 点 にご 注 意 下 さい 使 用 許 諾 契 約 書 本 契 約 は 本 冊 子 - 0 - ゆーすけ 著 著 作 権 について 本 冊 子 と 表 記 は 著 作 権 法 で 保 護 されている 著 作 物 です 本 冊 子 の 著 作 権 は 発 者 にあります 本 冊 子 の 使 用 に 関 しましては 以 下 の 点 にご 注 意 下 さい 使 用 許 諾 契 約 書 本 契 約 は 本 冊 子 を 入 手 した 個 人 法 人 ( 以 下 甲 と 称 す)と 発 者 (

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル Vol.2 ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >>

More information

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378>

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378> アンケートフォームを 設 置 する 方 法 < 目 次 > 1 アンケートフォームを 利 用 するための 設 定 をする 2 1-1 アンケートフォームの 詳 細 設 定 をする 1-2 アンケートフォームの 入 力 画 面 を 作 成 する 1-3 お 客 さんが 入 力 内 容 を 確 認 するためのページを 作 成 する 1-4 アンケート 完 了 後 に 表 示 するお 礼 画 面 を 作

More information

388-356697252-2.pdf

388-356697252-2.pdf 専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]

More information

地域ポータルサイト「こむねっと ひろしま」

地域ポータルサイト「こむねっと ひろしま」 5. エディタの 使 い 方 5.1. エディタとは? NetCommons の 全 モジュールで 共 通 する 編 集 画 面 です 5.2. 通 常 のエディタの 使 い 方 (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17)(18) (19)(20)(21) (22) (23) (24) (25)

More information

4 背景の設定

4 背景の設定 第 6 アクセシビリティに 配 慮 したホームページづくり ここでは 県 ホームページにおいてアクセシビリティに 配 慮 したホームページづくりを 進 め るために 特 に 注 意 すべき 事 項 を 示 します 県 ホームページのアクセシビリティのレベルを 向 上 するには すべての 所 属 において ホー ムページ 作 りに 関 わるすべての 職 員 の 取 り 組 みが 不 可 欠 です ここに

More information

GMO MobileHomePage

GMO MobileHomePage テンプレート 解 説 書 (キャンペーンサイト) Last update 2010/02/26 1 目 次 1. テンプレート 解 説 書 (キャンペーンサイト)について...3 2. テンプレートを 利 用 した 携 帯 サイト 制 作 方 法...4 3. 全 ページ 共 通 画 像 について...5 4. トップページ 解 説...7 5. 問 題 ページ 解 説...8 6. 正 解 ページ

More information

スライド 1

スライド 1 アリババ ワールドパスポート 製 品 詳 細 ご 利 用 ガイド 2010/03/11 Ver1.00 2012/10/09 Ver1.50 お 問 い 合 わせ 先 アリババ 株 式 会 社 メール:infoggs@alibaba-inc.jp 103-0007 東 京 都 中 央 区 日 本 橋 浜 町 2-12-4 エスエス 製 薬 本 社 ビル4F 目 次 文 字 装 飾 の 追 加 変 更

More information

競 合 ショップとの 差 別 化 するために ボクのショップにオリジナル 性 を 出 したいんだけど 何 かオススメの 方 法 ないかな? 前 にも 教 えたことのある HTML CSS を 使 うと 文 字 を 大 きくした り 色 を 付 けたり サイトのデザインを 自 由 に 変 更 できるよ

競 合 ショップとの 差 別 化 するために ボクのショップにオリジナル 性 を 出 したいんだけど 何 かオススメの 方 法 ないかな? 前 にも 教 えたことのある HTML CSS を 使 うと 文 字 を 大 きくした り 色 を 付 けたり サイトのデザインを 自 由 に 変 更 できるよ このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ 界 No.1 とも 言 われているデザイナー ナムー が WEB ページ 作 成 の コツを 解 説 していきます 少 し 専 門 的 な 内 容 も 含 まれていますが 分 からない ことは 積 極 的 に 調 べて 1つ1つスキルアップをしていきましょう! マリー HTML CSS のプロフェッショナル うさぎだけど

More information

1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 高 いフレームレートで 再 生 ができると 一 般 的 に 動 画 は 滑 らかに 動 作 する 試 験 範 囲 : 5-2.マルチメディアと 動 的 表 現 試

1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 高 いフレームレートで 再 生 ができると 一 般 的 に 動 画 は 滑 らかに 動 作 する 試 験 範 囲 : 5-2.マルチメディアと 動 的 表 現 試 ウェブデザイン 技 能 検 定 3 級 学 科 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

More information

表紙

表紙 EasyServlet V2 EsScreenEditorを 利 用 した Webアプリケーション 作 成 株 式 会 社 システムズリサーチ 1.1 EsScreenEditor 概 要 第 1 章 概 要 本 章 では EasyServletの 画 面 作 成 ツールであるEsScreenEditorの 概 要 について 説 明 します EasyServletは 本 来 Excelで 記 述 されたインタフェース

More information

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i ModifiableWeb レイアウトデザインガイド 1. 基 本 構 成 ModifiableWeb を 使 用 したWebサイトの 基 本 構 成 は 以 下 のようになっています ModifiableWeb iframe の 外 側 の Page Header Page Footer 及 び 全 体 の 背 景 は 普 通 のWebサ イト 同 様 自 由 にデザインすることができます ModifiableWeb

More information

Microsoft Word - 201009_page新機能について.doc

Microsoft Word - 201009_page新機能について.doc @page 新 機 能 について 1. 全 体 背 景 とページ 背 景 画 像 に 画 像 の 入 力 背 景 にグラデーションを 採 用 する 11. 全 画 面 基 本 項 目 の 設 定 の 実 行 ボタンを 選 択 2 背 景 色 を 白 にし カスタマイズ 画 像 を 使 用 する をチェックする グラデーション 画 像 を 横 に 繰 り 返 し 表 示 を 選 択 背 景 とページを

More information

<4D6963726F736F667420576F7264202D20939291F28E738345834683758341834E835A83568372838A83658342834B83438368838983438393323031322E646F63>

<4D6963726F736F667420576F7264202D20939291F28E738345834683758341834E835A83568372838A83658342834B83438368838983438393323031322E646F63> 平 成 25 年 3 月 18 日 作 成 目 次 1. はじめに...3 2. 湯 沢 市 のウェブアクセシビリティ 方 針...3 2.1 ホームページ 利 用 者...3 2.2 ホームページを 利 用 する 環 境...3 2.3 必 須 項 目 と 推 奨 項 目 の 設 定...3 3.ウェブアクセシビリティガイドライン...4 3.1 画 像 に 関 して...5 3.2 文 字 に

More information

ホームページ・ビルダー16

ホームページ・ビルダー16 Part 2 テンプレートからページを 作 る(3) Part 2-3 テンプレートを 使 ってページを 作 ろう テンプレートを 利 用 してホームページを 作 りましょう テンプレートを 利 用 すると 文 字 や 画 像 を 差 し 替 えるだけ で 魅 力 的 で 華 やかなページを 作 ることができます 特 にフル CSS テンプレートを 利 用 して 作 ったページは ページのデザインやレイアウトをスタイルシートで

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

Taro-ホームページB5.jtd

Taro-ホームページB5.jtd 4 タグの 基 本 (Ⅳ) 画 像 基 本 19 1 画 像 を 入 れる 2 画 像 の 大 きさを 指 定 する 3

More information