Size: px
Start display at page:

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

Transcription

1 Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング 演 習 1 演 習 2 Z: Webプログラミング 演 習 2 演 習 3 Z: Webプログラミング 演 習 3 演 習 4 Z: Webプログラミング 演 習 4 演 習 5 Z: Webプログラミング 演 習 5 演 習 6 Z: Webプログラミング 演 習 6 演 習 7 Z: Webプログラミング 演 習 7 講 義 で 使 うフォルダ 1/30 2/30 HTMLファイル index.html を 開 き 以 下 の 通 り 変 更 して 保 存 してください <h1> 辻 堂 案 内 にようこそ</h1> <p class= head > 辻 堂 案 内 は 辻 堂 周 辺 を 紹 介 するサイトです </p> <p class= contents > <a href= shuuhen.html > 辻 堂 周 辺 </a> 辻 堂 駅 と 湘 南 工 科 大 学 辻 堂 の 歴 史 作 者 について</p> ( 演 習 1)リンクを 設 定 する HTMLファイル shuuhen.html を 開 き 以 下 の 通 り 変 更 して 保 存 してください <title> 辻 堂 周 辺 </title> </head> <h1> 辻 堂 の 周 辺 にあるもの</h1> <div class= shoukai > <h2> 辻 堂 駅 </h2> <p class= honbun > 辻 堂 駅 は 大 正 5 年 12 月 1 日 に 開 業 したJR 東 日 本 東 海 道 線 の 駅 です 出 口 は 北 口 南 口 西 口 の3つがあります </p> </div> <div class= shoukai > <h2> 湘 南 工 科 大 学 </h2> <p class= honbun > 湘 南 工 科 大 学 は1963 年 に 創 立 した 工 学 部 のみの 単 科 大 学 で 機 械 工 学 科 電 気 電 子 工 学 科 情 報 工 学 科 コンピュータ 応 用 学 科 コンピュータデザイン 学 科 人 間 環 境 学 科 の6 学 科 から 構 成 されます </p> </div> <p class= contents ><a href= index.html >トップページへ 戻 る</a></p> ( 演 習 1)リンクを 設 定 する(つづき つづき) 3/30 4/30

2 クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルにリンク <a href= folder/hoge.html > 隣 のフォルダ 内 のファイルにリンク <a href=../folder/hoge.html> ( 演 習 1) 結 果 リンクを 張 るためのタグ 5/30 6/30 シート tsujido.css を 下 記 の 通 り 修 正 してください.honbun{background-color:#fff;line-height:1.5;padding:0.8em;text-indent:1em;margin:0;}.shoukai{border-left:solid 20px #ccc;margin:1em 0;} a{text-decoration:none;} a:link{color:#170;text-decoration:underline;} a:visited{color:#3a0;} a:hover{color:#fff;background-color:#f80;font-weight:bold;} a:active{color:#f00;background-color:#ffa;font-weight:bold;border:solid 1px #f00;} HTMLファイル index.html を 下 記 の 通 り 修 正 してください <p class="head"> 辻 堂 案 内 は 辻 堂 周 辺 を 紹 介 するサイトです </p> <p class="contents"><a href="shuuhen.html"> 辻 堂 周 辺 </a> 辻 堂 駅 と 湘 南 工 科 大 学 <a href="history.html"> 辻 堂 の 歴 史 </a> 作 者 について</p> ( 演 習 2)リンクスポットの 見 栄 えを 調 整 する ( 演 習 2) 結 果 7/30 8/30

3 a:link まだクリックしていないリンクスポットのを 指 定 する フォント 文 字 色 背 景 色 枠 線 など a:visited クリック 済 みのリンクスポットのを 指 定 する フォント 文 字 色 背 景 色 枠 線 など a:hover リンクスポットにマウスポインタが 置 かれた 時 のを 指 定 する フォント 文 字 色 背 景 色 枠 線 など リンクの 文 字 の 下 線 をなくすには text-decoration: 装 飾 指 定 文 字 の 装 飾 を 指 定 する underline 文 字 に 下 線 を 引 いて 表 示 する overline 文 字 の 上 部 に 線 を 引 いて 表 示 する line-through 文 字 に 取 り 消 し 線 を 引 いて 表 示 する none 文 字 を 装 飾 せずに 表 示 する a:active 選 択 中 のリンクスポットのを 指 定 する フォント 文 字 色 背 景 色 枠 線 など リンクに 指 定 できる 9/30 リンクの 文 字 の 下 線 をなくすには 10/30 HTMLファイル shuuhen.html を 開 き 下 記 の 通 り 修 正 してください <h1> 辻 堂 の 周 辺 にあるもの</h1> <p class="honbun"><a href="#eki"> 辻 堂 駅 </a>/<a href="#univ"> 湘 南 工 科 大 学 </a></p> <div class="shoukai"> <h2 id="eki"> 辻 堂 駅 </h2> <p class= honbun > 辻 堂 駅 は 大 正 5 年 12 月 1 日 に 開 業 したJR 東 日 本 東 海 道 線 の 駅 です 出 口 は 北 口 南 口 西 口 の3つがあります </p></div> <div class="shoukai"> <h2 id="univ"> 湘 南 工 科 大 学 </h2> <p class= honbun > 湘 南 工 科 大 学 は1963 年 に 創 立 した 工 学 部 のみの 単 科 大 学 で 機 械 工 学 科 電 気 電 子 工 学 科 情 報 工 学 科 コンピュータ 応 用 学 科 コンピュータデザイン 学 科 人 間 環 境 学 科 の6 学 科 から 構 成 されます </p></div> <p class="contents"><a href="index.html">トップページへ 戻 る</a></p> ( 演 習 3)ページ 内 にリンクを 設 定 する ( 演 習 3) 結 果 11/30 12/30

4 ページ 内 のリンクを 張 るためのタグ タグ < 要 素 名 id= 場 所 名 > タグ 場 所 名 の 名 前 をつけ リンク 先 として 利 用 できる ようにする <a href = # 場 所 名 > ~ </a> 場 所 名 にジャンプするリンクを 張 る HTMLファイル index.html を 開 き 下 記 の 通 り 修 正 してください <h1> 辻 堂 案 内 にようこそ</h1> <p class="head"> 辻 堂 案 内 は 辻 堂 周 辺 を 紹 介 するサイトです </p> <p class="contents"><a href="shuuhen.html"> 辻 堂 周 辺 </a> <a href="shuuhen.html#eki"> 辻 堂 駅 </a>と<a href="shuuhen.html#univ"> 湘 南 工 科 大 学 </a> <a href="history.html"> 辻 堂 の 歴 史 </a> 作 者 に ついて</p> ページ 内 のリンクを 張 るためのタグ 13/30 ( 演 習 4) 別 のページの 特 定 箇 所 へリンクを 張 る 14/30 別 のページの 特 定 箇 所 にリンクを 張 るためのタグ タグ <a href = リンク 先 のURLやファイル 名 # 場 所 名 > ~ </a> URLやファイル 名 で 指 定 されたページ 内 の 場 所 名 にジャンプするリンクを 張 る ( 演 習 4) 結 果 別 のページの 特 定 箇 所 にリンクを 張 るためのタ グ 15/30 16/30

5 HTMLファイル index.html を 開 き 下 記 の 通 り 修 正 してください <h1> 辻 堂 案 内 にようこそ</h1> <p class="head"> 辻 堂 案 内 は 辻 堂 周 辺 を 紹 介 するサイト です <img src="tsujido.jpg" title=" 辻 堂 " alt="[ 写 真 / 辻 堂 ]" width="200" height="155"></p> <p class="contents"><a href="shuuhen.html"> 辻 堂 周 辺 </a> <a href="shuuhen.html#eki"> 辻 堂 駅 </a>と<a href="shuuhen.html#univ"> 湘 南 工 科 大 学 </a> <a href="history.html"> 辻 堂 の 歴 史 </a> 作 者 について</p> JPGファイル tsujido.jpg を 作 業 フォルダにコピーしてください ( 演 習 5) 画 像 データを 表 示 する ( 演 習 5) 結 果 17/30 18/30 画 像 を 表 示 するためのタグ タグ <img src= 画 像 ファイル 名 title= 画 像 の 説 明 alt= 画 像 の 代 替 文 字 列 width= 横 幅 height= 縦 幅 > ファイル 名 で 指 定 された 画 像 を 表 示 する 表 示 サイズを 横 幅 縦 幅 で 指 定 する 画 像 形 式 の 違 い 画 像 形 式 特 長 画 像 を 表 示 するためのタグ 色 数 JPEG 写 真 の 表 示 に 向 く 1,600 万 色 PNG イラストの 表 示 に 向 く 280 兆 色 GIF イラストの 表 示 に 向 く 256 色 19/30 tsujido.css を 開 き 下 記 の 通 り 修 正 してください a{text-decoration:none;} a:link{color:#170;text-decoration:underline;} a:visited{color:#3a0;} a:hover{color:#fff;background-color:#f80;font-weight:bold;} a:active{color:#f00;background-color:#ffa;font-weight:bold;border:solid 1px #f00;} img.top{vertical-align:middle;} index.html を 開 き 下 記 の 通 り 修 正 してください <h1> 辻 堂 案 内 にようこそ</h1> <p class="head"> 辻 堂 案 内 は 辻 堂 周 辺 を 紹 介 するサイト です <img src="tsujido.jpg" title=" 辻 堂 " alt="[ 写 真 / 辻 堂 ]" width="200" height="155" class="top"></p> 後 略 ( 演 習 6) 行 内 の 画 像 データの 高 さを 指 定 する 20/30

6 画 像 を 表 示 する 高 さを 指 定 する ( 演 習 6) 結 果 vertical-align: 高 さ 位 置 文 字 や 画 像 を 表 示 する 高 さを 調 整 する top 親 要 素 のボックスの 上 辺 に 合 わせる middle 親 要 素 のボックスの 中 間 に 合 わせる bottom 親 要 素 のボックスの 下 辺 に 合 わせる em pxなどの 数 下 方 向 への 移 動 量 を 指 定 する % 親 要 素 との 比 率 で 指 定 する text-top 親 要 素 のフォントの 上 辺 に 合 わせる text-bottom 親 要 素 のフォントの 下 辺 に 合 わせる super やや 高 く 表 示 する sub やや 低 く 表 示 する baseline 親 要 素 のベースラインに 揃 える 画 像 を 表 示 する 高 さを 指 定 する 21/30 22/30 shuuhen.html を 下 記 の 通 り 修 正 し history.html で 保 存 してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="tsujido.css" type="text/css"> <title> 辻 堂 の 歴 史 </title> </head> <h1> 辻 堂 が 辻 堂 になるまで</h1> <div class="shoukai"> <h2> 辻 堂 の 名 前 の 由 来 </h2> <p class= honbun ><img src= history.jpg width= 240 height= 180 title= お 寺 alt= [ 写 真 /お 寺 ] > 村 の 中 心 ( 現 在 の 辻 堂 元 町 )の 鎌 倉 道 との 十 字 路 に 寺 があり 四 ッ 辻 のお 堂 から 転 じて 辻 堂 と なったといわれている 十 字 路 の 場 所 は 諸 説 ある( 写 真 は 宝 珠 寺 ) </p> </div> <p class="contents"><a href="index.html">トップページへ 戻 る</a></p> ( 演 習 7-1) 画 像 を 左 右 の 端 に 表 示 する 23/30 tsujido.css を 開 き 下 記 の 通 り 修 正 してください a{text-decoration:none;} a:link{color:#170;text-decoration:underline;} a:visited{color:#3a0;} a:hover{color:#fff;background-color:#f80;font-weight:bold;} a:active{color:#f00;background-color:#ffa;font-weight:bold;border:solid 1px #f00;} img.top{vertical-align:middle;} p.honbun img{float:right;margin-left:1em;} JPGファイル history.jpg を 作 業 フォルダにコピーしてください ( 演 習 7-1) 画 像 を 左 右 の 端 に 表 示 する(つづき つづき) 24/30

7 画 像 を 左 右 の 端 に 表 示 する float: 表 示 位 置 要 素 を 左 右 に 配 置 して 文 字 を 回 り 込 ませる right ブロックを 右 に 配 置 する left ブロックを 左 に 配 置 する none ブロックに 文 字 を 回 り 込 ませない ( 演 習 7-1) 結 果 画 像 を 左 右 の 端 に 表 示 する 25/30 26/30 tsujido.css を 開 き 下 記 の 通 り 修 正 してください.contents{background-color:#fc6;padding:0.5em;margin:0;clear:both;} 中 略 img.top{vertical-align:middle;} p.honbun img{float:right;margin-left:1em;} p.photo{min-height:180px;} history.html を 下 記 の 通 り 修 正 してください <p class= honbun photo ><img src= history.jpg width= 240 height= 180 title= お 寺 alt= [ 写 真 /お 寺 ] > 村 の 中 心 ( 現 在 の 辻 堂 元 町 )の 鎌 倉 道 との 十 字 路 に 寺 があり 四 ッ 辻 のお 堂 から 転 じて 辻 堂 と なったといわれている 十 字 路 の 場 所 は 諸 説 ある( 写 真 は 宝 珠 寺 ) </p> 後 略 ( 演 習 7-2) 画 像 のはみ 出 しを 修 正 する ( 演 習 7-2) 結 果 27/30 28/30

8 左 右 に 配 置 された 要 素 の 下 に 表 示 する clear:フロート 化 された 要 素 の 扱 い フロート 化 された 要 素 への 回 り 込 みを 解 除 するかどうかを 指 定 する right 右 に 配 置 された 要 素 への 回 り 込 みを 解 除 する left 左 に 配 置 された 要 素 への 回 り 込 みを 解 除 する both 配 置 された 要 素 への 回 り 込 みを 解 除 する none 何 もしない 要 素 の 高 さや 幅 の 最 大 最 小 を 指 定 する min-height: 要 素 の 最 小 限 の 高 さ 要 素 の 高 さの 最 小 を 指 定 する em pxなどの 数 要 素 の 最 小 限 の 高 さを 数 で 指 定 する % 親 要 素 の 高 さに 対 する 比 で 指 定 する min-height, min-width, max-height, max-widthなどがある 画 像 のはみ 出 しを 修 正 する 29/30 本 日 の 演 習 内 容 について 復 習 してください 演 習 内 容 HTML+CSS(5)まとめ 作 成 ファイル 演 習 1 リンクを 設 定 する index.html shuuhen.html 演 習 2 リンクスポットの 見 栄 えを 調 整 する index.html tsujido.css 演 習 3 ページ 内 にリンクを 設 定 する shuuhen.html 演 習 4 別 のページの 特 定 箇 所 へリンクを 張 る index.html 演 習 5 画 像 データを 表 示 する index.html 演 習 6 行 内 の 画 像 データの 高 さを 指 定 する index.html tsujido.css 演 習 7 画 像 を 左 右 の 端 に 表 示 する history.html tsujido.css 30/30

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

CSSの基礎

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

More information

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

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

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

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

CONTENTS 0 1 2 3 4 5 6 7 8 9 10 0 viii ix x http://www.vector.co.jp/vpack/filearea/win/writing/edit/hm/index.html http://hidemaru.xaxon.co.jp/lib/macro/index.html ftp://ftp.m17n.org/pub/mule/windows/ http://www.yatex.org/

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

html_text

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

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

1/2

1/2 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト (2) 1 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト HTMLの 基 礎 知 識 (2) 1 画 像 の 表 示 HPに 画 像 を 表 示 させてみる まず HTML 文 書 と 同 じフォルダ 内 にJPEGファイル( 拡 張 子.jpg )を1 個 準 備 する ( 画

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

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

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

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

<4D6963726F736F667420506F776572506F696E74202D2053454F82CC92B48AEE9162819591CE8DF4837D836A83858341838B2E707074>

<4D6963726F736F667420506F776572506F696E74202D2053454F82CC92B48AEE9162819591CE8DF4837D836A83858341838B2E707074> 2 3 4 5 6 http://jprs.co.jp/ 7 8 9 10 11 https://adwords.google.co.jp/select/keywordtoolexternal 12 13 14 http://www.pythagoras.bz/ Pythagoras 15 16 17 18 19 20

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

第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

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

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

More information

Microsoft Word - chap2.doc

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

More information

スライド 1

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

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

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

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

More information

ホームページの仕組み

ホームページの仕組み 見 やすいホームページを 作 ろう! 跡 見 学 園 女 子 大 学 公 開 講 座 文 学 部 准 教 授 福 田 博 同 平 成 23 年 5 月 7 日 14 日 目 次 5 月 7 日 1. ショートカットキー 2. HTMLの 仕 組 み 3. XHTMLとCSS 4. W3C 標 準 5. 見 本 に 書 き 込 む 6. 単 語 登 録 5 月 14 日 1. ブログを 試 そう 2.

More information

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

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

More information

■新聞記事

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

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

68 69

70 71 72 73

68 <td valign=top class=c8> 69 <p class=c13><a name=マーク0><span class=c9>⓪</span></a></p> 70 </td> 71 </tr> 72 <tr> 73 <td valign=top class ページ 内 のリンクでページ 内 に 移 動 の html のページの 追 加 方 法 三 宅 節 雄 Html 文 書 を TeraPad で 開 きます 1 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

文 書 構 造 とスタイル

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

More information

第5回

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

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

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

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

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

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

Microsoft PowerPoint - manualtachiyomi.pptx

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

More information

ホームページの仕組み

ホームページの仕組み 分 かりやすいホームページを 作 ろう! 跡 見 学 園 女 子 大 学 公 開 講 座 文 学 部 准 教 授 福 田 博 同 平 成 24 年 4 月 28 日 5 月 12 日 目 次 4 月 28 日 1. ショートカットキー 2. ブログ 等 を 試 そう 3. ホームページの 仕 組 み 4. XHTMLとCSS 5. W3C 標 準 6. 単 語 登 録 5 月 12 日 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

Taro-ホームページB5.jtd

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

More information

Microsoft Word - wsample.docx

Microsoft Word - wsample.docx 2013.10 情 報 科 学 A 補 足 資 料 Web ページ 作 成 のポイントとサンプルデータ HTML 作 成 のポイント テキストエディタ (EmEditor, メモ 帳 など) でテキストファイルとして 作 成 する Microsoft Expression Web など,Web ページ 作 成 専 用 のソフトウエア (オーサリングソフト) を 用 いるこ ともできる HTML(HyperText

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

OpenCity2説明

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

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

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

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

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

3. 管 理 画 面 (ダッシュボード) ログインすると 下 図 のダッシュボードの 画 面 となります ( 権 限 によって 左 のメニューが 異 なります ) 4.ブログの 投 稿 方 法 管 理 画 面 の 左 側 のメニューから 投 稿 をクリックします ここに 投 稿 された 公 開 記

3. 管 理 画 面 (ダッシュボード) ログインすると 下 図 のダッシュボードの 画 面 となります ( 権 限 によって 左 のメニューが 異 なります ) 4.ブログの 投 稿 方 法 管 理 画 面 の 左 側 のメニューから 投 稿 をクリックします ここに 投 稿 された 公 開 記 2011.12.8 カメリア パルの 会 ホームページ 編 集 マニュアル http://pal.nono1.jp 1.はじめに カメリア パルの 会 のホームページは フリーのブログシステム(WORDPRESS)を 使 用 してい ます このシステムの 特 徴 としては ブログの 基 本 的 使 用 方 法 である 日 記 を 追 加 するだけでなく 固 定 的 なページを 作 成 することができ

More information

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

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

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

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

More information

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

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

More information

1. 新 しくページを 作 成 する( 無 制 限 タイプ) デザイン 変 更 検 索 1 左 のメニューから デザイン 変 更 をクリックします 2ページタイプが 3 種 類 あります ここでは 無 制 限 タイプ を 選 びます テーマとカラーがありますので ここでデザインを 絞 り 込 むこと

1. 新 しくページを 作 成 する( 無 制 限 タイプ) デザイン 変 更 検 索 1 左 のメニューから デザイン 変 更 をクリックします 2ページタイプが 3 種 類 あります ここでは 無 制 限 タイプ を 選 びます テーマとカラーがありますので ここでデザインを 絞 り 込 むこと ウェブ 作 成 システム Web Factory 1 1. 新 しくページを 作 成 する( 無 制 限 タイプ) デザイン 変 更 検 索 1 左 のメニューから デザイン 変 更 をクリックします 2ページタイプが 3 種 類 あります ここでは 無 制 限 タイプ を 選 びます テーマとカラーがありますので ここでデザインを 絞 り 込 むことが 出 来 ます 1ページタイプ では 情 報

More information

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

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

第 1 章 インターネットとホームページの 基 礎 知 識 この 章 では 日 常 的 に 使 っている 用 語 の 意 味 や 使 い 方 の 確 認 をします よくわからずに 使 っていたり 間 違 って 覚 えていたりすることは 珍 しくありません 最 初 に 正 しい 知 識 と 用 語 の

第 1 章 インターネットとホームページの 基 礎 知 識 この 章 では 日 常 的 に 使 っている 用 語 の 意 味 や 使 い 方 の 確 認 をします よくわからずに 使 っていたり 間 違 って 覚 えていたりすることは 珍 しくありません 最 初 に 正 しい 知 識 と 用 語 の Web クリエイター 能 力 認 定 試 験 初 級 テキスト HTML 4.01 対 応 1 / 278 第 1 章 インターネットとホームページの 基 礎 知 識 この 章 では 日 常 的 に 使 っている 用 語 の 意 味 や 使 い 方 の 確 認 をします よくわからずに 使 っていたり 間 違 って 覚 えていたりすることは 珍 しくありません 最 初 に 正 しい 知 識 と 用

More information

スライド 1

スライド 1 株 式 会 社 アジタス コーディングレギュレーション 改 訂 履 歴 初 版 2009/10/01 一 部 修 正 2010/12/06 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2011/05/02 対 応 ブラウザ 修 正 2013/04/12 文 言 内 容 一 部 修 正 2014/02/25 対 応 メーラーの 追 加 2014/04/08 メールアドレスの

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

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

More information

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ 株 式 会 社 クロノドライブ コーディングガイドライン 改 訂 履 歴 2009/10/01 初 版 2010/12/06 一 部 修 正 2011/05/02 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2013/04/12 対 応 ブラウザ 修 正 2014/02/25 文 言 内 容 一 部 修 正 2014/04/08 対 応 メーラーの 追 加 2014/06/05

More information

130 11 A B C A B C Ctrl (S) 5 A B C 11.2: 11.1.2 2 11.2 (F) (A) ( OK ) 3 (E) ( ) (E) 11.1.3 3

130 11 A B C A B C Ctrl (S) 5 A B C 11.2: 11.1.2 2 11.2 (F) (A) ( OK ) 3 (E) ( ) (E) 11.1.3 3 129 11 Web IT ( 11.1) 1990 2004 2006 JIS 1 Windows 2 Web Web 11.1: 11.1 11.1.1 1 Ctrl ( ) 11.2 (U) (A) ( OK ) (S) 1 (JIS X 8341-2) (JIS X 8341-3) FAX (JIS X 8341-4) 8341 JIS JIS X8341 http://www.jisc.go.jp/

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

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

11

11 ( 40 ) 1 ipad ) LAN (Local Area Network) WAN (Wide Area Network) 2 TCP/IP 3 LAN LAN EMOBILE WiMAX WILLCOM ) 4 ( www(world wide web,) ) 5 6 7 8 9 10 index.html Web IE, FireFox, Safari ( ) 11 IP IP xx.xx.xx.xx

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

HTMLとは HyperText Markup Language ハイパーテキスト:テキストを 超 えたもの マークアップ:<...>で 指 示 する 規 格 厳 密 には htttp://www.w3.org/tr/html4/strict.dtd 他 に loose.dtd,frameset.d

HTMLとは HyperText Markup Language ハイパーテキスト:テキストを 超 えたもの マークアップ:<...>で 指 示 する 規 格 厳 密 には htttp://www.w3.org/tr/html4/strict.dtd 他 に loose.dtd,frameset.d 第 10 回 HTMLの の 基 礎 HTMLとは 作 成 手 順 基 本 形 改 行 と 段 落 整 形 済 みテキスト 横 線 見 出 し リスト1(UL,OL) リスト2(DL) インライン 画 像 リンク HTMLとは HyperText Markup Language ハイパーテキスト:テキストを 超 えたもの マークアップ:で 指 示 する 規 格 厳 密 には htttp://www.w3.org/tr/html4/strict.dtd

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

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文書の作成

HTML文書の作成 99 C HTML 1 1 2 HTML 1 3 2 4 HTML 2 4.1... 2 4.2... 3 4.3... 5 5 HTML 8 5.1... 8 5.2... 10 5.3... 12 6 HTML 13 7 13 1 HTML HTML [1] 2 HTML HTML Hyper-Text Markup Language World Wide Web (WWW)[2] HTML Hyper-Text

More information

WORD 98 入力の手引き

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

More information

2 / 15 リンクバナーの 輪 (DWKS 提 唱 ) 団 体 A サイト 団 体 B サイト 団 体 E サイト 団 体 C サイト 団 体 D サイト

2 / 15 リンクバナーの 輪 (DWKS 提 唱 ) 団 体 A サイト 団 体 B サイト 団 体 E サイト  団 体 C サイト 団 体 D サイト 1 / 15 第 5 回 セミナー/ 全 12 (2014/02/27) 画 像 の 加 工 処 理 実 習 :リンクバナーの 作 成 88 31px 160 70px 200 60px

More information

(4) ppblog188 フォルダの 名 前 を 変 更 する ここで 設 定 したフォルダ 名 は,Web ページ 上 でブログの URL(アドレ ス)に 使 用 するものとなる 半 角 英 数 字 で 分 かりやすく 設 定 する 本 資 料 では,centerblog として 設 定 する

(4) ppblog188 フォルダの 名 前 を 変 更 する ここで 設 定 したフォルダ 名 は,Web ページ 上 でブログの URL(アドレ ス)に 使 用 するものとなる 半 角 英 数 字 で 分 かりやすく 設 定 する 本 資 料 では,centerblog として 設 定 する ppblog188 の 設 定 1 ppblog188 のダウンロードと 展 開 (1) 圧 縮 ファイルをデスクトップにダウンロードする (http://www.sendai-c.ed.jp/hoka.html) 仙 台 市 教 育 センター (2) WindowsVista の 場 合 圧 縮 ファイルを 展 開 すると,デスクトップに ppblog188 フォルダが 生 成 される (2 )

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

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

GMO MobileHomePage

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

More information

Microsoft Word - 2009.06.doc

Microsoft Word - 2009.06.doc 情 報 基 礎 実 習 第 6 回 HTML の 仕 組 み 2009 年 5 月 28 29 日 長 谷 川 秀 彦 逸 村 裕 本 日 のメニュー HTML ( Hyper Text Markup Language ) を 使 って 箇 条 書 き 画 像 他 のファイルへ のリンクなどを 組 み 込 んだ Web ページを 作 成 する Word, Excel や 専 用 の Web ページ

More information

第 5 部 コンピューターの 仕 組 み 保 存 ができたら 第 21 章 で 作 っていた hello.html に 手 を 加 えて 上 書 き 保 存 し ブラウザーで 確 認 してみよう 例 7: 画 像 を 入 れる

背 景

第 5 部 コンピューターの 仕 組 み 保 存 ができたら 第 21 章 で 作 っていた hello.html に 手 を 加 えて 上 書 き 保 存 し ブラウザーで 確 認 してみよう 例 7: 画 像 を 入 れる <html> <body bgcolor=yellow> <p> 背 景 第 22 章 ウェブページの 作 成 2 画 像 の 表 示 HTMLの 細 かいタグ 自 己 紹 介 ページの 作 成 1. 画 像 を 入 れる Word の 画 面 で 画 像 ( 写 真 や 絵 )を 入 れるときは イメージそのものを 表 示 し たが ウェブページに 画 像 を 入 れるには メモ 帳 の 画 面 で 直 接 画 像 を 表 示 させることはできない 作 業 している HTML

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

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

Microsoft PowerPoint - HTML1復習_1021.ppt

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

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

( Web セーフカラーで 検 索!) などなど タグ で 表 示 できることや 使 っているパソコンの 環 境 によって Web デザイ ンにはさまざまな 制 約 がかかります ほかにもたくさんあるのでしょうが とにかく 上 記 2 点 は 抑 えながらデザインをしたほうが 後 でやり 直 し!な

( Web セーフカラーで 検 索!) などなど タグ で 表 示 できることや 使 っているパソコンの 環 境 によって Web デザイ ンにはさまざまな 制 約 がかかります ほかにもたくさんあるのでしょうが とにかく 上 記 2 点 は 抑 えながらデザインをしたほうが 後 でやり 直 し!な Web サイト 作 成 の 心 得 ( 入 門 ) 下 準 備 1.Web サイトの 構 造 について Web サイトには 見 た 目 の 情 報 と そのような 見 た 目 に 表 示 させるための 文 字 情 報 があ ります 2013 年 度 NHK 講 座 Web サイトの 見 た 目 は 左 図 のようになっています このよ うに 表 示 するために インターネットでは 右 図 のような

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

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

More information

Microsoft PowerPoint - css [互換モード]

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

More information

おすすめページ

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

More information

Microsoft Word - 2010.09.doc

Microsoft Word - 2010.09.doc 情 報 基 礎 実 習 9 回 HTML の 仕 組 み 2010 年 6 月 17 18 日 長 谷 川 秀 彦 逸 村 裕 本 日 のメニュー HTML ( Hyper Text Markup Language ) を 使 って 箇 条 書 き 画 像 他 のファイルへ のリンクなどを 組 み 込 んだ Web ページを 作 成 し Word, Excel, PowerPoint や 専 用 の

More information

pixiv 63 はじめまして ピクシブ 株 式 会 社 でエンジニアをやってい ます 金 子 と 申 します 本 書 を 手 にとってくださり あり がとうございます この 本 では 画 像 投 稿 掲 示 板 を 作 ってみる という シン プルな 作 業 を 通 して プログラミングの 基 礎 を 学 んで 頂 き たいと 思 っています 本 書 は エンジニアでない 人 のためのプログラミング

More information

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

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

More information

本棚表示キット

本棚表示キット 14 製 -SU010436-02 第 2 版 :2015 年 5 月 26 日 第 1 章 はじめに... 3 1-1. 本 棚 表 示 キットとは?... 4 1-2. 動 作 環 境 ( 閲 覧 側 )... 5 第 2 章 基 本 的 な 使 い 方... 6 2-1. テンプレートの 構 成... 7 2-2. 作 成 手 順... 11 2-3. コンテンツの 格 納... 12 2-4.

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

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

<925393968ED28CA48F438E9197BF875428303731313031292E786C73>

<925393968ED28CA48F438E9197BF875428303731313031292E786C73> NECユーザー 会 実 務 担 当 者 研 修 会 資 料 平 成 19 年 11 月 1 日 - NECユーザー 会 ユーザーシステム 研 究 会 - 於 仙 台 市 情 報 産 業 プラザ 東 日 本 硝 子 業 厚 生 年 金 基 金 目 次 ~ 本 研 修 のテーマ Yahoo(ヤフー)のブリッフケースがあれば FDUもCD- ROMもいらない P2~3 ~ 無 料 インターネット 上 に300メガの

More information

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

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

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

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

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