WORD 98 入力の手引き

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "WORD 98 入力の手引き"

Transcription

1 コンピュータ 基 礎 実 習 ( 上 級 ) 第 13 週 スタイルシートの 基 礎 今 回 の 授 業 は スタイルシート(CSS)の 使 い 方 を 解 説 します 1. CSS の 基 本 1.1. CSS とは CSS は Cascading Style Sheets の 略 で ウェブページの 見 栄 えを 設 定 するための 言 語 です CSS は 最 近 多 くのサイトで 使 用 され 始 めています ワープロソフトなどで 文 書 の 見 栄 え(スタイル)を 指 定 する 技 術 全 般 をスタイルシートといいますが ウェブページの 見 栄 え 設 定 をするためには 一 般 的 にスタイルシート 言 語 の 1 つである CSS が 使 われます CSS は HTML と 組 み 合 わせて 使 用 されます HTML ではページ 内 の 各 要 素 の 意 味 や 構 造 を 定 義 しますが CSS では ページを 装 飾 するための 情 報 を 定 義 します たとえば ウェブページが 画 面 に 表 示 される 際 の 色 サイズ レイアウト といった 表 示 スタイルや プリンタな どで 印 刷 される 際 のスタイル 音 声 で 読 み 上 げられる 際 の 再 生 スタイルなどを 指 定 できます 1.2. なぜ CSS が 必 要 か 現 在 HTML では <font>タグや background 属 性 など 装 飾 のためのタグや 属 性 が 多 く 存 在 しています また 表 (table タグ)でページをレイアウトするなどすれば HTML だけで 見 栄 えを 設 定 することもできます しかしウェブページの 見 栄 えを 設 定 するために HTML を 用 いるのは HTML 本 来 の 目 的 と 異 なる 使 い 方 です HTML は 情 報 構 造 を 定 義 するための 言 語 ですので 見 栄 えの 制 御 のために 本 来 と 違 った 使 い 方 をすると 文 書 の 情 報 構 造 がデタラメになってしまいます コンピュータや 検 索 エンジンに 理 解 しづらい 文 書 構 造 になってしまえば せっか くの 情 報 がうまく 識 別 されず 有 意 義 に 活 用 されません そこで HTML では 文 書 構 造 のみを 定 義 し ページの 見 栄 え(スタイル)については HTML と 別 に 管 理 することが 推 奨 されるようになりました この 見 栄 えの 設 定 に 用 いられるのが CSS なのです HTML の 次 世 代 バージョンである HTML5 では <font>や<center>タグなど いくつかの 見 栄 えに 関 するタグが 廃 止 される 予 定 となっています 1.3. CSS のメリット (1) 文 書 構 造 を 保 ったままページの 見 栄 えを 設 定 できる HTML で 見 栄 えを 設 定 しようとして 文 章 の 内 容 や 意 味 にそぐわない HTML を 使 用 すると 文 章 構 造 が 難 解 になりま す そこで CSS を 使 うと 文 章 構 造 (HTML)への 影 響 を 最 小 限 にしながらページの 見 栄 えを 設 定 できます ページの 構 造 と 見 栄 えを 分 離 することで HTML の 記 述 をスッキリさせられます (2) 作 業 しやすくなる 例 えば HTML で 見 出 し(<h1>)の 色 やサイズを 変 えようとすると <h1>タグが 使 われているすべての 箇 所 を 修 正 す る 必 要 があります CSS を 使 うと このような 見 栄 えの 設 定 を 一 括 管 理 できます また 複 数 ページで CSS を 共 有 できるので サイト 全 体 のデザイン 変 更 などが 容 易 になり 編 集 が 格 段 に 楽 になります (3) SEO 効 果 やアクセシビリティ 向 上 見 栄 えに 関 する 記 述 を CSS にまとめ HTML から 排 除 することで Google 等 の 検 索 エンジンに 正 しく 解 釈 されるウ ェブページとなります また HTML から 余 分 な 記 述 を 省 くことで 検 索 エンジンによるページの 分 析 処 理 などが 軽 量 化 されます これによって SEO 効 果 やアクセシビリティの 向 上 が 期 待 できます SEO とは 検 索 エンジンにとって 良 いページを 作 ることで 貴 方 のサイトを 検 索 されやすくし アクセス 数 をより 多 く 集 めるための 技 術 です 2. CSS の 書 き 方 2.1. 基 本 書 式 [ セレクタ プロパティ 値 ] CSS で 設 定 を 記 述 する 際 は どの 部 分 に 対 して(セレクタ) どのスタイルを(プロパティ) どのように( 値 ) 適 用 するかを 記 述 します 以 下 の 例 では <h1>タグ 範 囲 内 の 文 字 色 を 赤 くする 記 述 を 記 します h1{color:red;} 基 本 的 に セレクタ {プロパティ 名 : 値 ;} のように 記 述 します - 1 -

2 セレクタ(selector)は 見 栄 え(スタイル)を 適 用 する 対 象 を 指 定 するものです この 例 では<h1>タグが 対 象 になってい ます 異 なるセレクタを 使 うことで 様 々な 対 象 に 見 栄 えを 設 定 できます プロパティ(property)は 適 用 するスタイルの 種 類 のことです また 値 はプロパティに 設 定 する 具 体 的 な 内 容 です こ の 例 では 文 字 色 を 指 定 する color プロパティに 対 して 値 red を 指 定 しています CSS では 様 々なプロパティが 用 意 されており 使 い 分 けることで 様 々な 見 栄 えを 設 定 できます プロパティ: 値 ; 部 分 は { ~ } で 囲 んでください なお{ ~ }の 範 囲 全 体 を 宣 言 ブロック(declaration block) プロパテ ィ: 値 ; の 部 分 をスタイル 宣 言 (declaration)と 呼 びます 2.2. 複 数 のスタイル 宣 言 を 一 度 に 記 述 一 つのセレクタに 対 して 複 数 スタイルを 設 定 する 場 合 は スタイル 宣 言 をセミコロン( ; )で 区 切 って 記 述 します セミコロン( ; )はスタイル 宣 言 を 区 切 るための 記 号 なので 最 後 のスタイル 宣 言 の 後 には 必 要 ありませんが 付 けても 間 違 いではありません p { color:red; background-color:green; } この 例 では<p>タグの 範 囲 内 に 対 して 文 字 色 (color)を 赤 さらに 背 景 色 (background-color)を 緑 に 設 定 しています 2.3. コメントの 記 述 /*から*/で 囲 んだ 範 囲 はコメントとなり CSS の 解 釈 としては 無 視 されます 一 時 的 に CSS を 無 効 にしたり CSS ソ ース 内 にメモを 残 したりする 際 に 便 利 です なお /* /* */ */ のように 二 重 に 使 うことはできません p { color:blue; line-height:1.5; } /* 段 落 の 文 字 色 を 青 くし 行 の 高 さを 1.5 倍 にする */ 2.4. スペースや 改 行 について CSS では 半 角 スペース 改 行 タブ は 結 果 に 影 響 を 与 えません これらを 使 用 して CSS 記 述 を 見 やすく 整 形 して も 問 題 ありません p { } color:red; background-color:green; 上 の 例 は 2.2で 紹 介 した p { color:red; background-color:green; } と 同 じ 意 味 になります 2.5. 大 文 字 と 小 文 字 について HTML では 要 素 名 や 属 性 名 についての 大 文 字 小 文 字 を 区 別 しませんが 拡 張 版 の XHTML では 要 素 名 と 属 性 名 は 小 文 字 で 記 述 する 必 要 があります CSS を 記 述 する 場 合 その CSS が HTML 文 書 に 適 用 されるか XHTML 文 書 に 適 用 されるかによって 大 文 字 小 文 字 が 区 別 されるかどうかが 決 まります よって CSS を 記 述 する 際 は 将 来 的 に XHTML へ 移 行 する 可 能 性 を 考 えて 要 素 名 や 属 性 名 をすべて 小 文 字 で 記 述 したほうがよいでしょう 3. CSS を HTML ファイルで 使 用 する CSS を HTML 文 章 に 適 用 するには 大 きく 分 けて 3 つの 方 法 があります 1 外 部 CSS ファイルを 読 み 込 んで 適 用 する ( <link>タグ ) 2 ファイル 単 位 に 適 用 する ( <style>タグ ) 3 タグに style 属 性 を 追 加 して 局 所 的 に 適 用 する 3.1. 外 部 CSS ファイルを 読 み 込 んで 適 用 する ( <link>タグ ) HTML ファイルと 別 に CSS を 記 入 したファイルを 用 意 して HTML ファイル 内 から 読 み 込 ませる 方 法 です そのためには HTML 文 章 のタグ 内 に 以 下 のような<link>タグを 記 述 し CSS ファイル 名 を 指 定 します HTML ファイルの 内 容 <link rel="stylesheet" type="text/css" href="xxx.css" > - 2 -

3 <h1> 第 一 章 はじめに</h1> xxx.css ファイル の 内 容 h1 { color:red; } /* h1 見 出 しの 文 字 色 を 赤 にする */ 上 の 例 では HTML ファイル 内 の 全 ての<h1> 見 出 しの 文 字 色 が 赤 色 になります サイト 全 体 に 対 するデザイン 修 正 のしやすさ などを 考 慮 すると この 方 法 で CSS を 設 定 するのがおすすめです 3.2. ファイル 単 位 に 適 用 する ( <style>タグ ) HTML 文 書 のタグ 内 に<style>タグを 追 加 して CSS を 設 定 する 方 法 です この 書 き 方 の 場 合 CSS 設 定 はファイル 内 だけで 有 効 です <style type="text/css"> <!-- h1 { color: red; } --> </style> <h1> 第 二 章 CSS とは</h1> この 例 では ファイル 内 の 全 ての <h1> 見 出 しの 文 字 色 が 赤 色 になります なお CSS 部 分 が HTML のコメント 表 現 <!-- -->でコメント 化 されているのは CSS に 対 応 していない 古 いブラ ウザでこのページを 見 た 時 <style>タグ 内 の 文 字 がそのまま 表 示 されてしまうのを 防 ぐためです ただ 近 年 ほとんどのブラウザは CSS に 対 応 しているので <!--と-->は 省 略 してもおおむね 問 題 ないでしょう 3.3. タグに style 属 性 を 追 加 して 局 所 的 に 適 用 する HTML タグに style 属 性 を 追 加 して HTML 文 章 の 中 に 直 接 CSS を 記 述 する 方 法 です <p style="color:red; line-height:1.5;" >CSS のメリットとは </p> 上 の 例 では 指 定 の<p>タグ 範 囲 のみ 文 字 色 が 赤 行 間 が 1.5 倍 の 高 さになります なお style 属 性 による CSS 設 定 は 局 所 的 にスタイルを 設 定 する 際 などには 便 利 ですが HTML 記 述 が 複 雑 になり がちです 効 率 良 く 見 栄 えを 管 理 するには 3.1のように 外 部 CSS ファイルを 読 み 込 むのが 推 奨 です 4. セレクタの 種 類 セレクタ {プロパティ 名 : 値 ;} セレクタは 見 栄 え(スタイル)を 適 用 する 対 象 を 意 味 します 代 表 的 には 以 下 のような 種 類 があります 名 前 セレクタの 書 式 設 定 対 象 例 要 素 型 セレクタ タグ 名 タグ 名 で 指 定 した 全 要 素 p {color:blue;} クラスセレクタ.クラス 名 クラスを 付 けた 要 素.sample {color:blue;} id セレクタ #id 名 id を 付 けた 要 素 #sample {color:blue;} 複 数 セレクタ セレクタ,セレクタ 複 数 のセレクタ h1, h2 {color:blue;} 子 孫 セレクタ セレクタ セレクタ 下 の 階 層 の 子 孫 要 素 td b {color:blue;} 4.1. 要 素 型 セレクタ 指 定 のタグが 全 て CSS の 適 用 範 囲 になるセレクタです - 3 -

4 p {color:blue;} の 場 合 ページ 内 の 全 ての 段 落 (<p>)タグの 文 字 色 が 青 色 になります 4.2. クラスセレクタ 特 定 の class 名 が 付 けられたタグが CSS の 適 用 範 囲 になるセレクタです タグに class 属 性 を 追 加 することで class 名 を 付 けられます ( 例 ) <h1 class="hogehoge"> 文 書 内 の 複 数 の 箇 所 や 異 なるタグに 対 して 同 じスタイルを 適 用 できます <link rel="stylesheet" type="text/css" href="mystyle.css"> <h2> 第 三 章 CSS のメリット</h2> <p class="info">css に HTML から 見 栄 えに 関 する 設 定 を 分 離 することで </p> <p>html5 では 文 章 の 構 造 と 見 栄 えを 分 離 することが </p> mystyle.css の 内 容.info {color:blue; } この 例 では class 属 性 が 付 いている<p>タグだけに info クラスの CSS 設 定 ( 文 字 色 : 青 )が 適 用 されます CSS でクラスの 設 定 を 記 述 する 時 は class 名 の 先 頭 にドット[.]を 付 けます HTML 文 章 内 で class 属 性 を 追 加 する 時 は ドット[.]は 不 要 です 4.3. id セレクタ 特 定 の id 名 が 付 けられたタグが CSS の 適 用 範 囲 になるセレクタです タグに id 属 性 を 追 加 することで id 名 を 付 けられます ( 例 ) <table id="hogehoge"... > 1 つの HTML 文 書 内 で 同 じ id 名 を 重 複 して 使 用 することはできません id セレクタを 使 用 すれば 文 書 内 の 特 定 の 一 箇 所 にスタイルを 適 用 することができます <link rel="stylesheet" type="text/css" href="mystyle.css"> <h2 id="titlemenu" > 第 三 章 CSS のメリット</h2> <p>css に HTML から 見 栄 えに 関 する 設 定 を 分 離 することで </p> <p>html5 では 文 章 の 構 造 と 見 栄 えを 分 離 することが </p> mystyle.css の 内 容 #titlemenu {color:blue; background-color:skyblue; } この 例 では id 属 性 が 付 いた<h2>タグだけに titlemenu の CSS 設 定 が 適 用 されます CSS で id の 設 定 を 記 述 する 時 は id 名 の 先 頭 にシャープ[#]を 付 けます HTML 文 章 内 で id 属 性 を 追 加 する 時 は シャープ[#]は 不 要 です 4.4. 複 数 セレクタ セレクタをカンマ[, ]で 区 切 ると 複 数 のセレクタにまとめて 同 じ CSS 設 定 を 適 用 することができます h1, h2 {color:blue;} /* h1 タグと h2 タグの 両 方 で 文 字 色 が 青 になる */ - 4 -

5 4.5. 子 孫 セレクタ セレクタを 半 角 スペースで 区 切 ると ある 要 素 より 下 の 階 層 にある 子 孫 要 素 を 対 象 にスタイルを 適 用 することがで きます <link rel="stylesheet" type="text/css" href="mystyle.css"> <table> <tr><td><p>1 時 間 目 </p></td><td><p>2 時 間 目 </p></td></tr> </table> mystyle.css の 内 容 td p {margin:10px; } この 例 では<td>タグの 範 囲 内 にある<p>タグのみ 余 白 (margin)が 10 ピクセルに 設 定 されます 5. スタイルシート 設 定 に 便 利 なタグ CSS は 既 存 の HTML タグに 追 加 する 形 で 見 栄 えを 設 定 できます しかし HTML タグが 無 い 場 所 に 見 栄 えを 設 定 したい 場 合 もあります このような 場 合 のために HTML には <div>タグと<span>タグが 用 意 されています 5.1. <div>タグ <div>タグは それ 自 身 には 効 果 がありませんが <div>~</div>で 囲 まれた 四 角 形 の 範 囲 に 対 して CSS を 適 用 させられます <div> 範 囲 の 上 下 には 自 動 的 に 改 行 が 入 ります <div>タグは 単 体 では 意 味 が 無 いので class 属 性 を 追 加 したり style 属 性 を 追 加 したりして 使 用 します HTML 記 述 例 <p>この 文 章 はサンプル 文 章 です <div style="border:dashed 1px red"> 注 意 書 き<br>これは 重 要 な 文 章 です </div> この 文 章 はサンプル 文 章 です </p> 画 面 の 出 力 例 この 文 章 はサンプル 文 章 です 注 意 書 き これは 重 要 な 文 章 です この 文 章 はサンプル 文 章 です 上 の 例 では <div>タグに style 属 性 を 追 加 して 周 囲 に 罫 線 (border)を 引 いています このように 四 角 形 の 範 囲 を 持 つタグのことをブロック 要 素 と 言 います なお 見 出 し(h1~h6) 段 落 (p) リスト(ul,ol) などもブロック 要 素 ですので div と 同 じような 結 果 になります 5.2. <span>タグ <span>タグも それ 自 身 には 効 果 がありませんが <span>~</span>で 囲 まれた 範 囲 に 対 して CSS を 適 用 させられます <div>タグと 異 なるのは 行 内 の 一 部 が CSS 対 象 範 囲 となる 点 です HTML 記 述 例 <p>この 文 章 はサンプル 文 章 です <span style="border:dashed 1px red"> 注 意 書 き これは 重 要 な 文 章 です </span> この 文 章 はサンプル 文 章 です </p> 画 面 の 出 力 例 - 5 -

6 この 文 章 はサンプル 文 章 です 注 意 書 き これは 重 要 な 文 章 です この 文 章 はサンプル 文 章 です 上 の 例 では <span>タグに style 属 性 を 追 加 し 周 囲 に 罫 線 (border)を 引 いています <div>タグと 異 なり 行 内 の 一 部 に 罫 線 が 引 かれます <span> 範 囲 の 前 後 には 改 行 が 入 りません このような 範 囲 を 持 つタグのことをインライン 要 素 と 言 います なお 太 字 (<b>) リンク(<a>) 画 像 (<img>)などもインライン 要 素 ですので span と 同 じような 結 果 になります このように <div>タグや<span>タグを 追 加 すれば もともと HTML タグが 書 かれていない 範 囲 にも CSS 効 果 を 適 用 できるようになります 6. 様 々なプロパティ CSS の 基 本 的 な 書 式 は 以 下 のとおりでした セレクタ {プロパティ 名 : 値 ;} プロパティ 名 には 様 々なものがありますが そのうちいくつかを 紹 介 します スタイル 名 機 能 使 用 例 詳 細 解 説 color: 色 ; 文 字 の 色 を 変 更 する <p style="color:red;">...</p> <p>の 段 落 内 で 文 字 の 色 を 赤 にする background-color: 色 ; 背 景 色 を 変 更 する <div style="background-color:wheat;">...</div> <div> 範 囲 の 背 景 色 を 小 麦 色 (wheat)にする background: url('ファイル 名 '); 背 景 に 画 像 を 配 置 する <h1 style="background:url('bg.jpg');">...</h1> <h1> 範 囲 の 背 景 に bg.jpg を 背 景 として 表 示 する background-repeat: 設 定 値 ; 設 定 値 = repeat-x repeat-y no-repeat 背 景 画 像 の 繰 り 返 し 方 法 を 指 定 repeat-x 横 方 向 のみ 繰 り 返 し repeat-y 縦 方 向 のみ 繰 り 返 し no-repeat 繰 り 返 さない 通 常 背 景 画 像 はタイル 状 に 敷 き 詰 められますが このスタイルを 使 うことで 画 像 の 繰 り 返 し 表 示 を 制 御 できる <body style=" background:url('bg.jpg'); background-repeat:no-repeat; "> ページの 背 景 に bg.jpg を 背 景 として 繰 り 返 さずに 表 示 background-position: 横 縦 ; 背 景 画 像 の 表 示 位 置 を 指 定 background-position: left top; 左 上 に 表 示 background-position: 10px 20px; 左 上 から 10px 下 に 20px background-position: left; left center と 同 じ background-position: top; center top と 同 じ background-position: center; center center と 同 じ background-position: 50% 50%; center center と 同 じ background-position: right 20px; bottom:0px; 右 から 20px 下 から 0px border: 線 種 太 さ 色 ; 枠 線 を 表 示 する <div style="border: solid 1px blue;">...</div> <div> 範 囲 の 周 囲 に 実 線 (solid) 太 さ 1 ピクセル 青 色 の 枠 線 を 引 く width: 幅 ; height: 高 さ; 幅 と 高 さを 指 定 する <div style="width:200px;height:100px;">...</div> <div>の 範 囲 を 幅 200 ピクセル 高 さ 100 ピクセルの 大 きさとする background-color や border を 組 み 合 わせると 指 定 の 大 きさで 色 のついた 長 方 形 を 表 示 できる margin: 余 白 の 長 さ; margin-top: 上 余 白 の 長 さ; margin-bottom: 下 余 白 の 長 さ; margin-left: 左 余 白 の 長 さ; margin-right: 右 余 白 の 長 さ; 要 素 の 周 辺 に 余 白 を 作 る それぞれ 全 周 上 下 左 右 の 余 白 を 設 定 できる <div style="margin-left:2em;">...</div> <div> 範 囲 の 左 側 (left)に 2 文 字 分 (2em)の 余 白 を 作 る 字 下 げが 表 現 できる line-height: 行 間 ; 文 字 の 行 間 を 指 定 する <p style="line-height:1.5em">...</p> <p> 段 落 の 行 間 を 1.5 文 字 分 にする border-collapse: 設 定 値 ; 設 定 値 = collapse; separate; 隣 り 合 ったテーブルセルの 枠 線 の 描 画 方 法 を 指 定 します テーブル 専 用 のスタイル <table border="1" bordercolor="black" style=" border-collapse: collapse; "> <tr><td>1 時 間 目 </td><td>2 時 間 目 </td></tr> collapse 重 なり 合 わせて 表 示 </table> separate 離 して 表 示 collapse を 設 定 すると 罫 線 同 士 が 1 ピクセルの 線 のように 表 示 さ れ HTML の 表 特 有 の 立 体 的 デザインが 無 くなるため 平 面 的 でシンプルなデザインの 表 になります CSS のプロパティにはこの 他 にもたくさんの 種 類 があります 次 回 は CSS の 使 い 方 を 実 例 をまじえて 詳 しく 解 説 します 以 上

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

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

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

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

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

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

Microsoft PowerPoint - css [互換モード]

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

More information

CSSの基礎

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

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

文 書 構 造 とスタイル

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

(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

■新聞記事

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

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

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

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

More information

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

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

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

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

PowerPoint プレゼンテーション

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

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

演 習 室 の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

スタイルシートを 用 いた 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

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

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

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 Word - メディア技術基礎.docx

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

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

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

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

textbook.indd

textbook.indd 02 XHTML+CSS part2 CSS Topics 前 回 習 得 した 基 礎 CSS を 元 に ボックス CLASS ID の 概 念 を 習 得 ボックスレイアウトを 用 いた 2 カラムのサイト 構 築 をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24

More information

ホームページの作成

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

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

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............................ 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. ウェブの基本

コンピュータサイエンス 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 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

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

2. 画 面 の 分 割 <frame>タグを 使 用 することにより 1 つの 画 面 を 縦 横 複 数 に 分 割 することがでる 分 割 されたそれぞれ の 画 面 をフレームと 呼 ぶ 例 えば 目 次 を 常 に 画 面 上 の 決 まったフレームに 固 定 して 表 示 し 目 次 項 Web ページ 画 面 構 成 の 技 法 1. 配 置 の 制 御 基 本 的 なタグの 使 い 方 については はじめての 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

(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

目 次 本 書 について... 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

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

コンピュータ基礎実習(上級) 第二回

コンピュータ基礎実習(上級) 第二回 コンピュータ 基 礎 実 習 ( 上 級 ) 第 四 回 ウェブページの 作 成 について3 清 水 淳 紀 前 回 までの 内 容 ページの 作 成 方 法 ( 編 集 アップロード 確 認 ) ページはKompozer やメモ 帳 等 で 編 集 する ページを 公 開 するには アップロードをする 必 要 がある Internet Explorerなどでページを 開 き F5キーで 表 示 を

More information

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

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

More information

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

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

More information

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

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

More information

カゴラボ管理画面マニュアル(3.商品管理)

カゴラボ管理画面マニュアル(3.商品管理) カゴラボ 管 理 画 面 操 作 設 定 マニュアル CHAPTER 3 商 品 管 理 編 カゴラボバージョン4.0 系 お 問 い 合 せはこちらまで カゴラボサポートセンター 0120-713-362 ( 携 帯 電 話 からは 0985-23-3362 ) E-mail : support@cagolab.jp 受 付 時 間 : 平 日 10:00~12:00/13:00~18:00 (

More information

Microsoft PowerPoint - manualtachiyomi.pptx

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

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

18

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

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

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章) 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

スライド 1

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

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

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

p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge

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

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

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

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

html_text

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

More information

(1)

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

More information

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

1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3................... 0448051 1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3.................... 4 4........................ 6 5...........................

More information

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

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

More information

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

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

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

うさこ(うえだうさこ) usakororin 1999 年 imacdv 購 入 web 制 作 にハマる 2001 年 印 刷 会 社 に 入 社 2003 年 web 制 作 会 社 トゥーウェイズ 立 ち 上 げ 2004 年 大 阪 芸 術 大 デザイン 学 科 入 学 2010 年 電 子

うさこ(うえだうさこ) usakororin 1999 年 imacdv 購 入 web 制 作 にハマる 2001 年 印 刷 会 社 に 入 社 2003 年 web 制 作 会 社 トゥーウェイズ 立 ち 上 げ 2004 年 大 阪 芸 術 大 デザイン 学 科 入 学 2010 年 電 子 タグ 付 きテキストのお 話 1 時 間 目 WEB でのまーくあっぷらんげーじ うさこ(うえだうさこ) usakororin 1999 年 imacdv 購 入 web 制 作 にハマる 2001 年 印 刷 会 社 に 入 社 2003 年 web 制 作 会 社 トゥーウェイズ 立 ち 上 げ 2004 年 大 阪 芸 術 大 デザイン 学 科 入 学 2010 年 電 子 書 籍 の 勉 強

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

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます JavaScript サンプル function write(str) { document.write(str); } write('hello World!'); 上 例 のように

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます <TITLE>JavaScript サンプル</TITLE> function write(str) { document.write(str); } write('hello World!'); 上 例 のように 情 報 メディアとインターネット 授 業 資 料 (2011.7.4) 1.HTML の 基 本 HTML ファイルというのは 例 えば 以 下 のような 内 容 のテキストファイルです 拡 張 子 を.html また は.htm とするのが 普 通 で Web ブラウザで 読 み 込 まれて 中 身 の 表 示 が 行 われます Simple HTML File Hello

More information

目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザイン

目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザイン ジーンコード 設 計 要 件 定 義 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザインコンポーネントで

More information

1

1 目 次 はじめに... 2 音 声 ブラウザの 読 み 上 げ 手 順... 2 音 声 ブラウザへの 具 体 的 な 対 応 方 法... 3 1. 基 本 言 語 3 2.スペースの 挿 入 と 改 行 (タグ)の 挿 入 3 3. 取 り 消 し 線 4 4. 記 号 などの 表 記 4 5. 英 単 語 5 6. 数 字 5 7.イメージマップ 6 8. 表 組 み 6 9.PDF

More information

PowerPoint プレゼンテーション

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

More information

PowerPoint プレゼンテーション

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

More information

Microsoft PowerPoint - lecture1210.pptx

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

More information

4 背景の設定

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

More information

32bit または 64bit アーキテクチャに 対 応 快 適 な 操 作 性 を 得 るために 高 性 能 CPU を 推 奨 します HDD 容 量 は 約 1GB 以 上 1GB 以 上 にはコンテンツ 領 域 は 含 まれません またコンテンツの 増 大 に 比 例 してシステム 領 域

32bit または 64bit アーキテクチャに 対 応 快 適 な 操 作 性 を 得 るために 高 性 能 CPU を 推 奨 します HDD 容 量 は 約 1GB 以 上 1GB 以 上 にはコンテンツ 領 域 は 含 まれません またコンテンツの 増 大 に 比 例 してシステム 領 域 CMSKIT Ver.2.3 動 作 環 境 2015 年 10 月 20 日 株 式 会 社 ノア 本 書 は CMSKIT Ver.2.3 をサーバーに 導 入 して 実 行 させるとき お 客 様 にご 用 意 いただく 動 作 環 境 を 示 しています 動 作 環 境 とは 株 式 会 社 ノアが CMSKIT Ver.2.3 の 正 常 動 作 を 確 認 した 環 境 をいいます 本

More information

Microsoft Word - CMS操作説明会資料.docx

Microsoft Word - CMS操作説明会資料.docx 平 成 25 年 6 月 24 日 株 式 会 社 ネクストワン 1 今 回 の 操 作 説 明 会 では 次 のようなサンプル 記 事 を 作 成 してみたいと 思 います 2 管 理 画 面 にログインする 1. 九 重 町 役 場 ホームページにアクセスします 2.アドレスバーのホームページ URL の 後 ろに admin と 入 力 します http://www.town.kokonoe.oita.jp/admin/index.php

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

HTML文章作成

HTML文章作成 HTML 文 章 作 成 Web ページは HTML(Hyper Text Markup Language) という 言 語 を 使 っ て 欠 かれた HTML ファイルでできています ここでは 簡 単 な HTML 文 章 を 実 際 につくっていきます 参 考 文 献 :エクスナレッジ HTML とスタイルシートによる Web サイト 作 成 術 1. 簡 単 なホームページをつくりましょう

More information

はじめに PDFインフラストラクチャ 解 説 は: プリントオンデマンド( POD) 方 式 とKDPによるセルフ 出 版 の 事 例 であ り ワンソースマルチユース 方 式 制 作 の 実 践 事 例 でもある この 事 例 から 学 んだことや 今 後 の 課 題 を 報 告 する

はじめに PDFインフラストラクチャ 解 説 は: プリントオンデマンド( POD) 方 式 とKDPによるセルフ 出 版 の 事 例 であ り ワンソースマルチユース 方 式 制 作 の 実 践 事 例 でもある この 事 例 から 学 んだことや 今 後 の 課 題 を 報 告 する 専 門 的 書 籍 の 新 しい 制 作 流 通 のケーススタディとして PDFインフラストラクチャ 解 説 学 びと 課 題 2016 年 2 月 16 日 アンテナハウス 株 式 会 社 小 林 徳 滋 はじめに PDFインフラストラクチャ 解 説 は: プリントオンデマンド( POD) 方 式 とKDPによるセルフ 出 版 の 事 例 であ り ワンソースマルチユース 方 式 制 作 の 実

More information

HTML 講 座 1-4 HTML タグに 属 性 を 取 り 付 ける このマニュアルについて 推 薦 環 境 このレポート 上 に 書 かれている URL はクリック 可 能 です 出 来 ない 場 合 は 最 新 版 AdobeReader をダウンロードしてください ( 無 料 です) ht

HTML 講 座 1-4 HTML タグに 属 性 を 取 り 付 ける このマニュアルについて 推 薦 環 境 このレポート 上 に 書 かれている URL はクリック 可 能 です 出 来 ない 場 合 は 最 新 版 AdobeReader をダウンロードしてください ( 無 料 です) ht HTML 講 座 1-4 HTML タグに 属 性 を 取 り 付 ける HTML CSS 講 座 初 級 編 HTML セクション 4 時 限 目 HTML タグに 属 性 を 取 り 付 ける 著 :コスパ( 鈴 木 ) 1 HTML 講 座 1-4 HTML タグに 属 性 を 取 り 付 ける このマニュアルについて 推 薦 環 境 このレポート 上 に 書 かれている URL はクリック

More information

16. ペルソナ シナリオ 法 におけるペルソナとは ある 実 在 する 特 定 の 1 人 の 人 物 のことである 17. ユーザインタフェースの 分 野 での GUI とは ジオグラフィック ユーザ インタフェースの 略 称 で ある 18. HTML 4.01 Strict では XML 宣

16. ペルソナ シナリオ 法 におけるペルソナとは ある 実 在 する 特 定 の 1 人 の 人 物 のことである 17. ユーザインタフェースの 分 野 での GUI とは ジオグラフィック ユーザ インタフェースの 略 称 で ある 18. HTML 4.01 Strict では XML 宣 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 1. CSS において div, p のような 記 述 は 子 孫 セレクタの 指 定 である 2. URL 中 のパスにおいて ファイル 名 を 指 定 せずにディレクトリ 名 だけ 指 定 した 場 合 必 ずそのディ レクトリ 内 の index.html が 表 示 される

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

初 期 設 定... 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

Lecture/CompPracR2003/12th

Lecture/CompPracR2003/12th Lecture/CompPracR2003/12th 2016 年 7 月 17 日 コンピュータ 演 習 ( 再 ) 第 12 回 (1) Webページの 作 成 (1) Webページを 作 成 する 道 具 (1) テキストエディタを 使 うメリット デメリット (2) HTML (2) HTMLとは (2) HTMLの 書 き 方 (3) HTMLファイルの 構 造 (3) 空 白 と 改 行

More information

第 11 問 HTML5 において s 要 素 は 正 確 ではなくなった 部 分 や 関 係 なくなった 部 分 を 示 す 第 12 問 HTML で 文 字 コード(テキストエンコーディング)を 示 すための 文 字 列 は 大 文 字 小 文 字 のいずれで 記 述 して もよい 第 13

第 11 問 HTML5 において s 要 素 は 正 確 ではなくなった 部 分 や 関 係 なくなった 部 分 を 示 す 第 12 問 HTML で 文 字 コード(テキストエンコーディング)を 示 すための 文 字 列 は 大 文 字 小 文 字 のいずれで 記 述 して もよい 第 13 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 ウェブブラウザは ユーザエージェントの 一 つである 第 2 問 Apache などのウェブサーバが 動 作 しているかどうかは ping で 確 認 できる 第 3 問 労 働 基 準 法 では 使 用 者 は 労 働 時 間 が 6 時 間 を 超 える 場 合

More information

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

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

More information

Peace & Piece 画面設計書

Peace & Piece 画面設計書 ホームページ 仕 様 書 株 式 会 社 目 次 1. 更 新 履 歴 2. 構 成 図 3. 制 作 における 基 本 事 項 4. 画 面 設 計 の 定 義 ルール 5. 各 画 面 仕 様 設 計 6. 仕 様 書 確 定 の 合 意 更 新 履 歴 更 新 日 付 更 新 箇 所 更 新 内 容 構 成 図 A-1 トップページ 会 社 サービス 特 徴 コンテンツ サブコンテンツ その

More information

2 / 44 図 公 開 までの 作 業 フロー

2 / 44 図 公 開 までの 作 業 フロー 別 紙 病 院 情 報 の 公 表 ページの 作 成 手 順 I. 概 要 1. 公 開 形 式 病 院 情 報 の 公 開 は Web ページで 行 うこと 指 標 公 開 ページにおいては 各 指 標 に 規 定 の 属 性 等 の 情 報 を 付 加 すること また 各 指 標 はテキストデータの 形 式 での 公 開 も 行 い そ のデータは 指 標 公 開 ページからダウンロードできること

More information

(Microsoft Word - Easy\203y\201[\203W\221\200\215\354\203K\203C\203h.doc)

(Microsoft Word - Easy\203y\201[\203W\221\200\215\354\203K\203C\203h.doc) Easy ページ 操 作 ガイド http://359ch.com ところチャンネル( 資 ) Easy ページサービス 操 作 ガイド 2009.1.8 版 1. はじめに Easy ページサービスとは パソコンからブラウザを 利 用 して 簡 単 にホームページを 公 開 更 新 できるサービス です Docomo や AU SoftBank 等 の 携 帯 電 話 を 利 用 して 同 様 にホームページを

More information

第5回

第5回 情 報 教 育 演 習 II 第 5 回 HTML(4) 前 回 に 引 き 続 き Webの 中 心 的 な 技 術 HTML について 実 習 をします 今 回 で HTMLのまとめ になります HTML(4) 1. 水 平 線 をつくる( 復 習 ) 2.イメージを 貼 り 付 ける 今 回 の 課 題 1.HTMLファイルを 作 成 する 2.HTMLファイルの 文 法 をチェックする -

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

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

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

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に GC スクリプト 利 用 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に 追 加 してみよう...

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

モール管理者マニュアル 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

更 新 履 歴 更 新 日 更 新 内 容 2016 年 3 月 14 日 地 理 院 地 図 の 改 良 に 伴 い 本 マニュアルを 刷 新 2016 年 3 月 16 日 説 明 の 図 を 一 部 更 新 2016 年 5 月 12 日 Google Chrome の 仕 様 変 更 に 伴

更 新 履 歴 更 新 日 更 新 内 容 2016 年 3 月 14 日 地 理 院 地 図 の 改 良 に 伴 い 本 マニュアルを 刷 新 2016 年 3 月 16 日 説 明 の 図 を 一 部 更 新 2016 年 5 月 12 日 Google Chrome の 仕 様 変 更 に 伴 地 理 院 地 図 操 作 マニュアル 2016 年 7 月 19 日 更 新 国 土 地 理 院 1 更 新 履 歴 更 新 日 更 新 内 容 2016 年 3 月 14 日 地 理 院 地 図 の 改 良 に 伴 い 本 マニュアルを 刷 新 2016 年 3 月 16 日 説 明 の 図 を 一 部 更 新 2016 年 5 月 12 日 Google Chrome の 仕 様 変 更 に

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

立ち読みページ

立ち読みページ Chapter 4 4 CSS CSS CSS 69 STEP1 HTML 70 STEP2 79 STEP3 83 STEP4 88 STEP5 94 STEP6 103 STEP7 107 STEP8 ID 108 Chapter 4 1 4 CSS 69 Chapter 4 STEP1 HTML CSS http-equiv"content-style-type"content"text/css"

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