18

Size: px
Start display at page:

Download "18"

Transcription

1 3.2.1 HTML,CSS 概 要 第 3 部 第 2 章 HTML,CSS 私 達 が 普 段 見 ている Web ページは そのほぼ 全 てが HTML(HyperText Markup Language)と CSS(Cascading Style Sheets)をはじ めとするいくつかの 技 術 の 組 み 合 わせによって 作 られています そして 私 達 でも 簡 単 に Web ページを 作 ることができます この 章 では HTML と CSS に 関 して 皆 さんが 初 めて Web ページを 作 る 際 に 覚 えておくべきことを 解 説 します 順 を 追 ってひとつひと つ 解 説 する チュートリアル や 各 々の 要 素 について 詳 しく 説 明 する リファレンス ではありませんので 注 意 してください なお 次 章 で HTML や CSS を 簡 単 に 入 力 できるソフトウェア Dreamweaver について 解 説 していますので この 章 で 基 礎 を 抑 えてから 次 章 に 進 みましょう 図 2-1 Web ページは HTML をはじめとする 複 数 のファイルで 構 成 される 図 2-2 HTML の 例 図 2-3 CSS の 例 1. HTML はテキストエディタで 簡 単 に 作 れる HTML は ただの 文 書 に 段 落 見 た 目 属 性 などの 要 素 を 付 け 加 える 言 語 です 元 々はただの 文 書 (テキストファイル)ですから それ に 要 素 を 付 け 加 えた HTML ファイル(および CSS ファイル)は 一 般 的 なテキストエディタで 編 集 できます つまり 特 別 なソフトウェアなどがなくても 魅 力 的 な Web サイトを 作 ることができるのです これは Word ファイルや PDF ファイルと 大 きく 異 なる 点 であり HTML が 普 及 した 要 因 のひとつと 言 えるでしょう Campus System Guide- 49

2 2. HTML は 時 代 とともに 変 化 している HTML は 1989 年 スイスの 研 究 所 が 大 量 のデータを 効 率 的 に 管 理 するために 開 発 しました そしてインターネットの 普 及 とともに 発 展 した 結 果 画 像 動 画 音 楽 などを 扱 えるようになったほか ブログ SNS のように 情 報 発 信 も 行 えるようになりました これらの 変 化 の 過 程 で HTML の 書 き 方 も 変 化 しています 新 しい 書 き 方 には デザイン 面 以 外 にも 維 持 管 理 しやすい 様 々な 装 置 でも 使 いやす い 視 覚 に 障 害 のある 方 も 使 えるといった 利 点 があります キャンパスシステムガイドでは 2014 年 現 在 よく 使 われる 書 き 方 を 解 説 しています(HTML5,CSS3 を 基 準 に 互 換 性 に 問 題 が 少 ない 要 素 を 説 明 しています) 3. CSS を 覚 えよう いまから Web ページの 作 り 方 を 学 ぶ 皆 さんにとって HTML と 同 時 に CSS を 学 ぶことは 必 須 です HTML が 登 場 してしばらくの 間 は 文 字 の 色 や 大 きさなどは 全 て HTML 内 に 書 いていました しかし 書 き 方 が 非 常 に 煩 雑 であること ソ ースコードが 見 難 くなること デザインの 修 正 が 面 倒 になることなどから HTML には 内 容 と 構 造 のみ 書 き デザイン 面 の 記 述 をすべて 他 のファイルに 分 離 することになりました そうして 生 まれたのが CSS です CSS は Web ページの 見 た 目 に 関 して HTML とは 別 に 用 意 します CSS 側 で この 部 分 は 太 字 で 赤 この 部 分 は 大 きい 文 字 とい った 具 合 で 指 定 します 具 体 的 な 記 述 方 法 は 後 ほど 説 明 します この 構 造 とデザインの 分 離 はとても 大 切 です CSS を 用 いて 構 造 とデザインを 分 離 することには 次 のような 利 点 があります HTML のソースコードがわかりやすくなる 複 数 のページ(HTML)で 統 一 したデザインを 使 うことができる デザインの 変 更 を 一 括 で 行 える( 維 持 管 理 の 省 力 化 ) CSS を 切 り 替 えることで 様 々なデバイスでも 最 適 な 表 示 を 行 える 検 索 エンジンや 視 覚 障 害 者 向 けのソフトウェアが 解 析 しやすい 特 に 理 由 がない 限 り 構 造 とデザインの 分 離 は 徹 底 するべきです 最 新 の HTML である HTML5 ではさらに 構 造 とデザインの 分 離 を 強 化 する 要 素 が 追 加 されています 興 味 がある 方 は 調 べてみてく ださい (header タグ section タグ 等 ) 4. 他 の 人 が 作 ったサイトを 見 て 学 ぼう ここでは 最 初 に 学 ぶべきごくごく 簡 単 な 事 のみ 解 説 しています 解 説 していない 要 素 や 使 い 方 などが 多 数 あります また HTML の 仕 様 やトレンドは 絶 えず 進 化 しており ここに 書 いてある 内 容 も 時 代 遅 れになっていくでしょう HTML や CSS に 関 しては すべてを 列 挙 した 情 報 サイトがとてもたくさんあります また 企 業 など 他 の 人 が 作 ったホームページのソース コードを 参 考 にしてもよいでしょう 自 分 の 作 りたいサイトに 合 わせ いろいろなことを 学 んでみてください 5. 正 しいコードを 心 がけよう 実 は HTML や CSS のコードに 多 少 ミスがあっても ブラウザーはうまく 解 釈 し それっぽく 表 示 してしまうことがあります しかしそうした コードはエラーの 原 因 になりますし ブラウザーによっては 正 しく 表 示 されません 常 に 正 しいコードを 書 くことを 心 がけましょう コードの 文 法 が 正 しいかは 以 下 のサイト 等 でチェックしましょう 例 : など 一 方 で 正 しい HTML にも 関 わらず ブラウザーのバグによって 正 しく 表 示 されないことがあります 特 に Internet Explorer の 古 いバー ジョンはバグが 多 いにも 関 わらず 利 用 者 が 多 く 問 題 になることもあります 場 合 によっては 他 の 方 法 を 使 うなど バグへの 対 応 が 必 要 になることもあります 50- Campus System Guide

3 3.2.2 HTML,CSS の 編 集 の 仕 方 第 3 部 第 2 章 HTML,CSS HTML や CSS は テキストエディタで 編 集 し ブラウザーで 確 認 する その 繰 り 返 しで 作 ります テキストエディタではただ 文 字 の 羅 列 だ ったものが ブラウザーではその 指 示 通 りレイアウトや 装 飾 がされ 表 示 されます HTML の 編 集 にはテキストエディタを 用 います Windows に 付 属 しているメモ 帳 では 力 不 足 なので Terapad や 秀 丸 エディタ Sublime text2 などを 使 用 してくだ さい これらのソフトウェアは 横 浜 キャンパスの 演 習 室 の PC にあらかじめインスト ールされています また 自 宅 等 で 使 いたい 場 合 は インターネットから 自 由 にダウ ンロード 可 能 です また Dreamweaver やホームページビルダーといったホームページ 作 成 ソフト を 使 用 することもできます なお Word はテキストエディタではありませんので 使 用 できません ここでは 例 として Terapad での 操 作 方 法 を 説 明 しますが 他 のテキストエディタ でも 編 集 方 法 は 変 わりません 図 2-4 Web 制 作 の 基 本 フロー 補 足 : 拡 張 子 の 表 示 この 設 定 は 学 外 の PC で HTML を 編 集 する 場 合 に 必 要 です 横 浜 キャンパスの PC では 初 めから 設 定 されています Windows でファイルを 扱 う 際 拡 張 子 が 表 示 されていないと 様 々なエラーの 原 因 となります ( 拡 張 子 とは ファイル 名 末 尾 の.html.css.txt.jpg といった 部 分 ) 画 像 を 参 考 に 拡 張 子 が 表 示 されるよう 設 定 して 下 さい 図 2-5 拡 張 子 の 表 示 1. Terapad の 起 動 それでは スタートメニューから Terapad を 起 動 し てみましょう 次 のように 操 作 します 図 2-6 Terapad の 起 動 ここで 文 字 を 書 き 始 めれば 新 しいファイルとして 編 集 をはじめることが 出 来 ます Campus System Guide- 51

4 2. ファイルを 開 く 既 存 のファイルを 開 くには 表 示 させたいファイルを Terapad のウィンドウにドラッグ&ドロップして 下 さい ファイルの 内 容 が 表 示 され 編 集 できるようになったはずです 3. ファイルの 新 規 保 存 図 2-7 Terapad でファイルを 開 く 新 規 ファイルの 場 合 次 のように 操 作 します 名 前 をつけて 保 存 から 保 存 すると 文 字 コードの 設 定 が 行 えず 文 字 化 けの 原 因 となります 注 意 してください 52- Campus System Guide 図 2-8 Terapad 文 字 / 改 行 コード 指 定 保 存

5 4. ファイルの 上 書 き 保 存 第 3 部 第 2 章 HTML,CSS 既 存 のファイルの 場 合 Terapad の 上 部 メニュー ファイル から 上 書 き 保 存 をクリックすれば 保 存 されます 図 2-9 Terapad 上 書 き 保 存 編 集 中 にキーボードの Ctrl キーと S キー(Save の S)を 押 すことで 素 早 く 保 存 することもできます 5. ブラウザーの 起 動 ブラウザーを 起 動 するには 画 面 最 下 部 にあるタスクバーの Internet Explorer ロゴマークをクリックします 図 2-10 InternetExplorer 起 動 方 法 6. ブラウザーで HTML を 開 く 表 示 させたいファイルを Internet Explorer のウィンドウにドラッグ&ドロップして 下 さい HTML ファイルが 表 示 されたはずです 7. ブラウザーの 画 面 を 更 新 する 図 2-11 InternetExplorer HTML を 開 く Internet Explorer でページを 表 示 した 場 合 その 後 にテキストエディタでファイルを 更 新 しても 自 動 的 には 反 映 されません 更 新 ボタンまたはキーボードの F5 キーを 押 し 再 読 み 込 みを 行 いましょう Campus System Guide- 53

6 図 2-12 InternetExplorer 再 読 み 込 み これ 以 降 は 図 2-4 の 通 り エディタで 編 集 保 存 を 行 い ブラウザーで 再 読 み 込 み 内 容 の 確 認 を 行 うことの 繰 り 返 しで 作 っていきま す 8. アップロードと 確 認 作 った Web ページを 誰 にでも 見 られる 状 態 にするには Web サーバーにアップロードする 必 要 があります Web サーバーは Web サイトを 設 置 するのに 特 化 したコンピュータで 個 人 であれば 専 門 業 者 からレンタルして 使 うのが 普 通 です とい っても サーバー 自 体 を 借 りるのではなく 専 門 業 者 が 設 置 しているサーバーにデータをアップロードするだけです 企 業 であれば 自 社 でサーバーを 持 っていることもあります 普 通 のパソコンを Web サーバーとして 使 うことも 可 能 ですが セキュリティなどに 問 題 がある ためおすすめしません また 横 浜 キャンパスの 学 生 には 各 個 人 が 使 えるサーバーが 用 意 されていますので これを 使 うことも 可 能 です 使 い 方 に 関 しては 情 報 基 盤 センターHP 等 を 参 照 してください 54- Campus System Guide

7 3.2.3 HTML まずは HTML の 書 き 方 について 学 びましょう CSS で 装 飾 したり JavaScript で 動 かしたりするためにも 土 台 である HTML をしっかり 作 ることはとても 大 切 です 第 3 部 第 2 章 HTML,CSS 1. HTML の 基 本 HTML タグ HTML ファイルは 単 純 に 言 えば 文 書 の 各 所 を タグ で 囲 み 意 味 をもたせたものです 図 2-13 HTML の 表 示 例 <~>が 開 始 タグ </~>が 終 了 タグです ( br など 終 了 タグが 存 在 しないタグもあります) タグは 基 本 的 には 間 に 挟 んだもの( 文 字 や 画 像 )に 効 果 を 与 えます タグとそれに 囲 まれた 部 分 を 要 素 と 呼 びます ~ 部 分 の 示 す 役 割 を 知 れば 自 ずと HTML が 理 解 できることになります 上 の 図 では h1 タグは 見 出 し p タグは 段 落 strong タグは 強 調 を 表 します 開 始 タグ 内 には 複 数 の 属 性 を 付 けることができます たとえば 上 記 の 例 では html タグの lang が 属 性 名 ja が 属 性 値 です 属 性 値 は 基 本 的 にダブルクォーテーション で 囲 みます また タグは 入 れ 子 にすることができます 入 れ 子 にした 場 合 要 素 同 士 で 親 子 関 係 ができます 図 2-14 ツリー 構 造 を 成 す HTML Campus System Guide- 55

8 HTML 内 では 改 行 と 行 頭 の 半 角 スペース タブは 無 視 されます これらは 自 分 が 見 やすいコードを 書 くために 利 用 できます 上 記 の 画 像 のようにインデントを 行 い( 行 頭 にタブ 記 号 や 半 角 スペースを 入 れることで 入 れ 子 構 造 をわかりやすくする) 見 やすいコー ドにしておくことで タグの 対 応 関 係 がわかりやすくなり 管 理 修 正 が 楽 になります なおこの 解 説 では 行 頭 のインデントを 横 棒 で 表 し ています ハイフンではありませんので 入 力 しないでください 一 方 全 角 文 字 (スペース 含 む)の 扱 いには 注 意 しなければなりません HTML CSS ファイルや 画 像 ファイルの 名 前 に 全 角 文 字 は 使 えません また CSS 内 では 全 角 文 字 を 使 うことが 出 来 ません HTML 内 でも 全 角 文 字 を 使 えない 場 所 があります(コンピュータが 処 理 できないため そのまま 表 示 される 部 分 以 外 に 使 うことが 出 来 ない) 特 にタグを 全 角 文 字 で 書 いたり 行 頭 に 全 角 のスペースを 置 いたりすると 正 常 に 処 理 されなくなってしまいます HTML4.01 と 比 べ HTML5 で 意 味 が 変 化 するタグや 削 除 されたタグがあります 例 :hr タグ( 水 平 線 話 題 の 区 切 り) b タグ( 太 字 強 調 ではない 太 字 ) i タグ( 斜 体 特 に 意 味 のない 斜 体 ) small タグ( 文 字 を 小 さく 注 釈 など) em タグ( 強 調 強 勢 ) 一 部 タグは 省 略 可 能 ですが 理 解 を 深 めるため 省 略 しないほうがよいでしょう ここではすべて 省 略 せずに 解 説 しています 例 :head,body,p タグの 終 了 タグ 2. 骨 格 を 成 すタグ HTML ファイルは 図 2-15 のような 構 成 になっています 全 体 を html タグで 囲 み その 中 に head 要 素 と body 要 素 をおきます 各 々の 要 素 については 後 ほ ど 説 明 します この 他 html タグの 前 に doctype 宣 言 というものを 書 く 必 要 があります(<!DOCTYPE html>)の 部 分 ブラウザー 側 に HTML のバージョンを 認 識 させるために 書 きますが とりあえずこのように 書 いておけばよいでしょう 図 2-15 HTML の 全 体 像 3. HEAD タグの 中 には 文 書 の 情 報 を 書 く head 要 素 にはファイルに 関 する 情 報 を 書 きます 例 えばページのタイトルや 中 身 の 簡 単 な 説 明 などです また ページ 全 体 に 関 わる CSS や JavaScript なども head 要 素 内 に 書 きます title 要 素 :ページのタイトル title 要 素 (ページのタイトル)のみ 必 須 です title 要 素 を 指 定 すると ブラウザーで 表 示 した 際 にそのタイトルがタイトルバーに 表 示 さ れます meta charset: 文 字 コードの 指 定 また 文 字 化 けを 防 ぐため 文 字 コードに 関 する 指 定 も 行 ったほうがよいでしょう <meta charset="utf-8"> と 書 くことで ブラウザーはそのページが UTF-8 という 文 字 コードで 書 かれていることを 認 識 します UTF-8 以 外 の 文 字 コード(Shift-JIS 等 )を 使 用 することはおすすめしません meta タグは 文 書 に 関 する 様 々な 情 報 を 含 めることができるタグで 中 身 の 説 明 や 著 者 名 などを 書 くことも 出 来 ます 図 2-16 meta 要 素 56- Campus System Guide

9 4. BODY タグの 中 には 文 書 の 内 容 を 書 く 第 3 部 第 2 章 HTML,CSS いよいよ body 要 素 です body 要 素 に 書 いたことが ブラウザーに 表 示 されます しかし デザイン( 見 た 目 )に 関 することは HTML では 書 きません 見 た 目 はあとで CSS を 使 い 指 定 します p 要 素 : 段 落 文 章 を 書 く 際 は p タグを 使 います p タグは パラグラフ= 段 落 を 意 味 するタグです 文 章 の 段 落 ごとに p タグにおさめていくのが 正 しい 書 き 方 です br タグ: 改 行 HTML は 文 書 の 中 身 と 構 造 を 司 る 言 語 ですから 文 章 のどこで 改 行 するかというのは 本 来 ブラウザーが 判 断 するものです br タグ を 用 いれば 改 行 は 可 能 ですが 基 本 的 には 使 いません ちなみに br タグには 終 了 タグは 必 要 ありません 大 きな 間 隔 を 開 けたい 場 合 でも br タグは 連 続 して 使 ってはいけません なお HTML ファイルを 作 る 際 に Enter キー 等 で 改 行 しても その 改 行 は 無 視 されます 5. リンクを 作 ってみよう やはり Web ページといえば 他 のサイトやページへのリンクです そのリンクを 作 ってみましょう a 要 素 :リンク a タグで 囲 んだ 部 分 はリンクとなり クリックできるようになります また href 属 性 を 使 用 し リンク 先 の URL を 指 定 します a タグには 開 くウィンドウを 指 定 する target 属 性 マウスを 乗 せた 際 の 説 明 を 表 示 する title 属 性 などが 存 在 します 図 2-17 a 要 素 6. 画 像 を 貼 ってみよう 画 像 を 貼 るためには img タグを 使 用 します img 要 素 : 画 像 src 属 性 を 使 用 し 画 像 のアドレスを 指 定 します 終 了 タグは 必 要 ありません 図 2-18 img 要 素 alt 属 性 は 代 替 テキストです 画 像 を 表 示 できない 場 合 などに 表 示 されるもので 画 像 の 内 容 を 詳 細 に 説 明 する 必 要 があります バ リアフリーの 観 点 からも なるべく 書 き 込 むようにしましょう なお img 要 素 を a 要 素 の 中 におくことで 画 像 リンクを 作 成 することが 出 来 ます 補 足 : 絶 対 パス 相 対 パス ファイルの 場 所 の 指 定 として 絶 対 パス と 相 対 パス があります 絶 対 パスは 住 所 で 言 えば 日 本 国 神 奈 川 県 都 筑 区 牛 久 保 西 というようにどこからでも 唯 一 の 場 所 指 定 を 指 します ですから ネット 上 では のように 場 所 を 指 定 する 方 法 です 対 する 相 対 パスですが これは 相 対 的 なパス つまりファイル 自 身 から 見 た 別 のファイルの 位 置 の 指 定 方 法 です ですから 住 所 Campus System Guide- 57

10 で 言 えば お 隣 の さん や 隣 町 の 八 百 屋 さん といったような 他 の 場 所 へ 行 けば 違 うものを 指 すことになってしまうような 指 定 方 法 です 相 対 パスの 記 述 においては 最 初 に 現 在 の( 自 分 自 身 の)フォルダを 表 す./ を 書 き その 後 にディレクトリ(フォルダ) 名 やファイ ル 名 を 書 いていきます 自 分 より 上 のフォルダを 表 すには../ と 書 きます 1 自 分 自 身 (HTML ファイル 等 )と 同 じディレクトリにあるファイルを 指 定 するには 単 にファイル 名 のみを 書 きます 例 :../sample1.html 2 自 分 自 身 (HTML ファイル 等 )から 見 て 下 のディレクトリのファイルを 指 定 するには../ディレクトリ 名 /ファイル 名 と 書 きます 例 :../dir/sample2.html 3 自 分 自 身 (HTML ファイル 等 )から 見 て 上 のディレクトリのファイルを 指 定 するには../../ファイル 名 と 書 きます 例 :../../sample3.html 7. 表 を 作 ってみよう 表 を 作 るには table tr th td といったタグを 使 います table,tr,th,td:テーブル( 表 組 み) 表 組 みは 少 々 複 雑 です Table タグの 中 に 行 を 意 味 する tr タグを 入 れ その 中 にセルを 意 味 する th タグ( 見 出 し)または td タグ( 通 常 )を 入 れていきます また td タグに colspan 属 性 や rowspan 属 性 を 指 定 することで 複 数 のセルを 結 合 することも 出 来 ます 図 2-19 テーブル テーブル 要 素 をこのまま 設 置 しても 枠 線 は 表 示 されません 枠 線 の 表 示 は CSS で 行 います(このあと 解 説 しています) テーブルタグを 使 用 することでコンテンツを 容 易 に 上 下 左 右 に 並 べられますが テーブルをデザイン 目 的 で 用 いてはいけません 8. その 他 のタグ その 他 よく 使 うタグをご 紹 介 します strong,b,i,em,cite:テキストの 意 味 付 け strong 要 素 はその 部 分 が 重 要 であることを 意 味 します 一 方 b 要 素 は 太 字 で 表 示 するべき 内 容 であることを 意 味 し 重 要 という 意 味 は 持 ちません キーワードなどに 使 います(この 解 説 文 で もキーワードは 太 字 で 表 しています) 同 じく i 要 素 は 斜 体 で 表 示 するべき 内 容 であることを 意 味 し 何 らかの 意 味 は 持 ちません em 要 素 は 強 勢 を 意 味 します 日 本 語 文 書 では 通 常 使 いません 論 文 等 で 作 品 名 等 を 書 く 際 に 斜 体 で 表 記 することがありますが これには cite 要 素 を 使 います u 要 素 を 使 うと 下 線 が 引 かれます 58- Campus System Guide

11 第 3 部 第 2 章 HTML,CSS 図 2-20 テキストの 意 味 付 け いくつかのタグで 見 た 目 が 同 じになっていますが これはあくまで 一 般 的 なブラウザーでたまたま 同 じように 表 示 されるだけです 意 味 を 考 えて 使 うようにしましょう 単 純 に 見 た 目 を 変 えたいだけの 場 合 span タグで 囲 み CSS で 設 定 するべきです h1~h6: 見 出 し h1,h2,h3 などのタグを 使 うと 見 出 しを 作 ることができます h1 タグは 基 本 的 にページのタイトルとして その 下 の 小 見 出 しは h2 さらに 下 の 小 見 出 しには h3 を 使 います 見 出 しタグを 使 うと 文 字 の 大 きさが 変 わりますが 文 字 の 大 きさを 変 えるためだけに 使 ってはいけません ol,ul,li:リスト( 箇 条 書 き) ol 要 素 ( 順 序 の 関 係 ないリスト)または ul 要 素 ( 順 序 付 きリスト)の 中 に li 要 素 を 並 べると 箇 条 書 きのように 項 目 を 列 挙 することができ ます 箇 条 書 きを 行 う 際 には 基 本 的 にリストタグを 使 いましょう コメントアウト ソースコード 上 にコメントを 書 きたい 場 合 は <!-- -->という 表 記 を 使 いコメントアウトします 図 2-21 コメントアウト ソースコード 上 にこのように 書 くと ブラウザー 上 では 表 示 されません 自 分 のためのコメントの 他 一 時 的 に 消 しておきたい 項 目 などをコメントタグで 囲 うと 便 利 です 9. ブロック 要 素 とインライン 要 素 body タグ 内 に 書 く 要 素 のほとんどは ブロック 要 素 とインライン 要 素 に 分 類 されます 覚 えておきましょう ブロック 要 素 は ( 基 本 的 に) 縦 に 並 びます また 縦 横 の 大 きさを 決 めることもできます インライン 要 素 は 文 字 のように 横 に 並 びます 基 本 的 に 縦 横 の 大 きさを 決 めることはできません インライン 要 素 の 中 に ブロック 要 素 を 含 めることはできません 図 2-22 ブロック 要 素 とインライン 要 素 HTML5 では この 分 類 は 廃 止 され 7 種 類 のカテゴリに 分 類 されます これはとても 複 雑 であり 覚 えにくく 使 いにくいものです 使 い 方 はほとんど 変 わっていませんから 現 在 の 2 分 類 を 覚 えておくとよいでしょう Campus System Guide- 59

12 10. span 要 素 と div 要 素 次 は 汎 用 要 素 と 呼 ばれる span 要 素 と div 要 素 について 解 説 します div,span: 汎 用 要 素 div 要 素 は なんの 意 味 も 持 たないブロック 要 素 です span 要 素 は なんの 意 味 も 持 たないインライン 要 素 です その 部 分 を 囲 ってまとめてスタイルを 指 定 したい 場 合 や JavaScript で 操 作 したい 場 合 に 使 用 します 具 体 的 な 使 い 方 はこの 先 実 際 に Web ページを 作 る で 説 明 していきます 11. id と class ほぼすべての HTML タグには id と class という 属 性 をつけることができます id は 要 素 につける 名 前 です 複 数 の 要 素 に 同 じ id をつけることはできません その 要 素 の 固 有 の 名 前 になります class は 要 素 につける 種 別 名 です 複 数 の 要 素 に 同 じ class 名 をつけることができます イメージ としてはまさに 学 校 のクラス 分 けで 同 じ 仲 間 に 同 じ class 名 をつけ まとめて 操 作 する 際 に 使 いま 図 2-23 id と class す 具 体 的 な 使 い 方 はこの 先 実 際 に Web ページを 作 る で 説 明 しています 12. HTML のまとめ 以 上 で 紹 介 したものが 主 な HTML 要 素,タグです これらを 実 際 にどのように 使 うのかについては 実 際 に Web ページを 作 る にて 解 説 しています 今 回 紹 介 した 以 外 にも 要 素,タグには 沢 山 の 種 類 があります 興 味 がある 方 は 調 べてみてください ただし 構 造 とデザインの 分 離 に 反 するものなど 現 在 では 非 推 奨 とされているタグは 使 わないようにしましょう 非 推 奨 とされるタグの 例 :<font>( 文 字 の 色 などを 指 定 ) <center>( 中 央 揃 え) 60- Campus System Guide

13 3.2.4 CSS 第 3 部 第 2 章 HTML,CSS ここからは CSS について 説 明 します CSS は どの 部 分 をどのような 見 た 目 にするか を 設 定 していくシンプルな 言 語 です 1. 書 き 方 の 基 本 CSS はどのように 書 くか 次 のように 記 述 します 図 2-24 CSS の 表 示 例 画 像 のとおり どの 部 分 にどのようなスタイルを 適 用 するかを 書 いていきます CSS の 記 述 は 図 のようになっています 図 2-25 CSS の 書 き 方 2. どこに 書 くか CSS を HTML に 対 して 適 用 するには 3 パターンの 方 法 があります 別 ファイルに 書 く HTML ファイルとは 別 に CSS ファイルを 作 り そこに CSS を 書 くことができます この 場 合 link タグを 使 って HTML ファイルから CSS ファイルにリンクを 貼 ります 通 常 この 方 法 を 使 うべきです 図 2-26 別 の CSS ファイルを 参 照 している 例 head 内 に 書 く HTML の head 内 に style タグをおき 内 部 に CSS を 書 くことができます ページごとに CSS を 変 更 したい 時 に 使 います Campus System Guide- 61

14 図 2-27 head 要 素 内 に Style タグを 配 置 した 例 各 タグの style 属 性 に 書 く HTML 要 素 のスタイルを 個 別 に 書 く 場 合 要 素 の style 属 性 に CSS を 書 くことができます この 場 合 セレクタ( 後 述 )は 必 要 ありません 図 2-28 要 素 に 直 接 スタイルを 指 定 する 例 3. セレクタ スタイルを 適 用 する 対 象 を 指 定 するのがセレクタです ここで 先 ほど 説 明 した id と class が 登 場 します セレクタは 次 の 三 種 類 が 基 本 です タグを 指 定 : タグ 名 をそのまま 書 く id を 指 定 : #を 先 頭 に 書 く class を 指 定 :.(ドット)を 先 頭 に 書 く この 他 にもさまざまな 種 類 のセレクタがあります 図 2-29 セレクタ なお CSS で 指 定 したスタイルは 指 定 された HTML 要 素 の 子 孫 全 てに 継 承 されます( 例 外 あり) 62- Campus System Guide

15 第 3 部 第 2 章 HTML,CSS 図 2-30 CSS の 継 承 4. プロパティ セレクタで 対 象 の 要 素 を 選 んだら そのプロパティに 値 を 設 定 します プロパティには 様 々な 種 類 があり 様 々な HTML 要 素 に 対 して 使 えるものから 一 部 の HTML 要 素 専 用 のものまであります ここではいくつかのプロパティを 例 に 解 説 しますが その 他 のプロパティについても 必 要 に 応 じて 調 べ 使 用 してください 5. 文 字 の 見 た 目 を 変 えてみよう 文 字 の 見 た 目 を 変 えるには 次 に 挙 げるプロパティを 使 用 します 文 字 の 大 きさ : font-size 文 字 の 色 : color 文 字 の 太 さ( 太 字 ) : font-weight 図 2-31 文 字 の 装 飾 (CSS) この 他 斜 体 にする font-style 書 体 を 指 定 する font-family 下 線 や 取 消 線 をつける text-decoration などのプロパティがあります またこれらを 統 合 省 略 した font プロパティを 使 うことも 出 来 ます これらのプロパティを 文 字 を 含 む 要 素 に 指 定 すれば 見 た 目 を 自 由 に 変 えることができます ここで 設 定 できる 項 目 は 以 前 は HTML の font タグで 設 定 できたものです 構 造 とデザインの 分 離 に 従 い font タグは HTML5 で 削 除 されました 補 足 :カラーコード CSS 内 で 色 を 表 す 場 合 基 本 的 な 色 は 英 語 でその 色 の 名 前 を 書 くだけで 表 示 させることが 出 来 ます(red,green,orange 等 ) 色 名 には 多 くの 種 類 がありますから 興 味 がある 方 は 調 べてみてください 細 かい 色 を 表 したい 場 合 は #で 始 まる 16 進 数 6 桁 (または 3 桁 )のカラーコードで 表 します Campus System Guide- 63

16 図 2-32 カラーコードの 例 補 足 : 単 位 CSS で 文 字 や 要 素 を 設 定 する 際 いくつかの 単 位 を 使 用 することが 出 来 ます 基 本 的 には 以 下 の2 種 類 を 使 います 代 表 的 な 単 位 は px(ピクセル)です 基 本 的 に 1pxは 画 面 の 1 ドットを 表 します 行 間 の 指 定 などにはよく em を 利 用 します 1em はフォントの 大 きさを 基 準 とするので 行 間 (line-height)を 2em に 指 定 すれば 文 字 の 下 の1 行 分 の 行 間 があくことになります 6. ページの 背 景 を 変 えてみよう 図 2-33 CSS で 使 える 単 位 ページ 全 体 の 設 定 をするためには body 要 素 にスタイルを 設 定 します 背 景 に 関 するプロパティをいくつか 挙 げます 背 景 色 :background-color 背 景 画 像 :background-image 図 2-34 背 景 色 と 背 景 画 像 上 記 のほか 背 景 画 像 の 繰 り 返 しを 指 定 する background-repeat 背 景 画 像 の 位 置 を 指 定 する background-position などのプロ 64- Campus System Guide

17 パティがあります またこれらを 統 合 省 略 した background プロパティを 使 うことも 出 来 ます 第 3 部 第 2 章 HTML,CSS 画 像 を 指 定 する 場 合 は HTML ファイルを 基 準 に 画 像 ファイルを 指 定 する 必 要 があります これらのプロパティは 一 般 的 なブロック 要 素 では 概 ね 使 用 可 能 です 7. 枠 線 をつけてみよう ブロック 要 素 には 枠 線 をつけることも 出 来 ます 一 般 的 には border プロパティを 使 用 します border プロパティでは 太 さ 色 スタイルをまとめて 指 定 します 順 番 は 関 係 ありません 図 2-35 枠 線 border-left プロパティ 等 を 使 い 上 下 左 右 の 枠 線 を 別 々に 指 定 することも 出 来 ます また 最 近 のブラウザーでは 枠 線 の 角 を 丸 くす る border-radius プロパティを 使 える 場 合 があります 8. テーブルに 枠 線 を 表 示 しよう HTML でテーブル 要 素 を 設 置 しただけでは ブラウザーでは 枠 線 が 表 示 されません セレクタはカンマ 区 切 りで 複 数 記 述 することにより それぞれのセレクタに 合 致 する 要 素 すべてにスタイルを 適 用 することができます そこで ページ 内 の table 要 素 td 要 素 th 要 素 の 全 てに 枠 線 を 設 定 することで 表 に 枠 線 が 表 示 されるようにしてみましょう 図 2-36 テーブルに 枠 線 を 表 示 これで 枠 線 は 表 示 されますが 線 が 太 くなってしまいました これは 1px の 枠 線 をもったセル 同 士 が 並 ぶことで 見 た 目 上 2px になっ てしまったのが 原 因 です table 要 素 に border-collapse プロパティで 枠 線 同 士 を 重 ねるよう に 設 定 します 図 2-37 枠 線 同 士 を 重 ねる これで ページ 内 の 全 ての 表 に 正 しく 枠 線 が 表 示 されます Campus System Guide- 65

18 発 展 :いろいろなセレクタ セレクタはカンマ 区 切 り 以 外 にも 様 々な 指 定 方 法 があります 調 べてみてください 図 2-38 いろいろなセレクタ 9. マウスを 乗 せたら 見 た 目 が 変 わるようにしてみよう CSS を 使 えば 例 えばマウスポインタが 乗 った 時 だけ 色 が 変 わる 文 字 を 作 ることも 出 来 ます それには 擬 似 クラスを 使 います 以 下 に 例 を 載 せます 図 2-39 マウスオンで 見 た 目 が 変 わる 上 記 のように 書 くと class sample の 要 素 の 上 にマウスポインタを 乗 せた 時 だけ 文 字 が 緑 色 になります ここで 使 ったのが hover 擬 似 クラスです CSS のセレクタは 条 件 に 合 致 する 要 素 を 探 すものですが 例 えば 上 記 の 例 では class が sample で hover 状 態 にある(マウスが 乗 っ ている) 要 素 を 探 す セレクタになっていると 解 釈 してください 擬 似 クラスには クリックされている 要 素 を 表 す active 擬 似 クラスなどもあります 10. 要 素 の 大 きさを 変 えてみよう ブロック 要 素 は 自 由 に 大 きさを 変 えることが 出 来 ます 以 下 の 2 つのプロパティを 用 います 幅 : width 高 さ: height 図 2-40 要 素 の 大 きさを 変 える 大 きさをきっちりと 決 めず 最 小 値 や 最 大 値 のみを 定 める min-width,max-width といったプロパティもあります 66- Campus System Guide

19 11. margin と padding 第 3 部 第 2 章 HTML,CSS ブロック 要 素 には margin(マージン)と padding(パディング)をつけることが 出 来 ます margin は 外 側 の 余 白 padding は 内 側 の 余 白 です margin 同 士 は 重 なりあうという 特 性 を 持 っています 12. CSS のまとめ 図 2-41 margin と padding 以 上 で 紹 介 したものが 主 な CSS の 使 い 方 およびプロパティです 実 際 にどのように HTML と 組 み 合 わせて 使 うのかについては 次 の 章 にて 解 説 しています ここで 紹 介 した 以 外 にも CSS のプロパティには 様 々なものがあります 中 には 一 部 のブラウザーでしかサポートされていないものや 実 験 的 に 採 用 されている 先 進 的 なものなどもあります 興 味 がある 方 は 調 べてみてください Campus System Guide- 67

20 3.2.5 実 際 に Web ページを 作 る ここまでで 主 な HTML 要 素 および CSS プロパティを 紹 介 してきました この 章 ではそれらをどのように 組 み 合 わせて Web ページを 作 るのかについて 例 を 挙 げて 説 明 します 1. 完 成 形 をイメージする サイトを 作 る 際 は 早 速 HTML や CSS を 書 き 始 めるのではなく 完 成 形 をイメージすることが 大 事 です たとえば 図 2-43 のようなものを 紙 に 書 いてみましょう 2. div を 並 べていく 完 成 形 ができたら 今 度 はその 図 に 構 成 を 書 き 加 えていきま す ここで 登 場 するのが 汎 用 ブロック 要 素 div です 今 回 は まず 上 下 に header middle の2つの div を 配 置 し 図 2-42 まずは 紙 に 書 いてみる 後 者 の 中 に 左 右 に left content の div を 配 置 します おおまかな 構 成 が 決 まったら 細 かい 部 分 も 決 めていきましょう どこまで 細 かく 決 めておくかは 好 みで 問 題 ありません 3. 中 身 を 作 る 図 2-43 div の 配 置 を 考 える この 段 階 では いよいよパソコンを 使 い 実 際 に HTML を 打 ち 込 んでいきます 図 2-44 実 際 の HTML,CSS にしていく まず おおまかな 構 成 にそって 骨 組 みを 作 っていきます この 段 階 では 各 要 素 は 空 っぽ 構 いませんが ここではダミーとして を 並 べてあります まずは HTML を 作 り CSS で 並 べたのち 微 調 整 していきましょう 68- Campus System Guide

21 第 3 部 第 2 章 HTML,CSS 骨 組 みができたら 今 度 は 中 身 を 入 力 していきます HTML と CSS を 同 時 進 行 で 細 かい 部 分 を 調 整 しながら 完 成 させていきます 最 終 的 に 以 下 のようなソースになりました (div に 関 連 する 重 要 な 部 分 のみ 抜 粋 しています ) 図 2-45 ソースコード Campus System Guide- 69

22 3.2.6 付 録 ここでは 本 文 で 解 説 した 覚 えておくべき こと 以 外 に 覚 えておくとよいことをいくつか 説 明 しています 1. 文 字 実 体 参 照 HTML タグでは < > などの 記 号 を 用 います これらが 本 文 中 にあるとどこがタグなのか 分 からなくなってしまうため 使 うことがで きません ただし 本 文 中 に 文 字 実 体 参 照 という 形 で 記 入 すれば 表 示 することが 出 来 ます 主 な 文 字 実 体 参 照 には 次 のようなものがあります 2. よく 使 うファイル 名 について 図 2-46 文 字 実 体 参 照 の 例 Web サイトにおいて トップページは 通 常 index.html とします これは Web サーバーの 仕 様 で ファイル 名 を 省 略 してアクセスした 際 に 通 常 このファイルが 開 かれるためです サイト 全 体 で 統 一 して 使 う CSS は common.css や style.css とすることが 多 くあります 3. ディレクトリを 用 いたファイル 整 理 のすすめ Web サイトを 作 る 際 ファイルは 整 理 しておかなければなりません Web サイトは 様 々なページが 相 互 にリンクを 張 り 合 うことで 成 り 立 っています また HTML ファイル CSS ファイル 画 像 ファイル スクリ プトファイルなど 多 くのファイルを 管 理 する 必 要 があります サイト 全 体 で 使 うものに 関 しては image,css,script といったディレクトリを 用 意 し まとめて 管 理 しましょう 4. CSS の 優 先 度 同 じ 項 目 に 違 うスタイルを 適 用 した 場 合 どのスタイルが 優 先 されるのでしょうか 答 えは より 後 に 読 み 込 まれたスタイル になりま す 同 じファイルの 中 では 下 の 方 で 書 いた CSS が 優 先 されます また HTML 内 に 直 接 スタイルを 記 述 した 場 合 でも 後 から 指 定 したも のが 優 先 されます 5. デフォルト CSS 図 2-47 CSS を 用 意 しなくても 例 えば h1 タグ 内 の 文 字 は 大 きくなりますし p( 段 落 )タグは 適 当 な 間 隔 を 開 けて 並 びます これはユーザーが 指 定 していない 項 目 のデフォルトの 値 ( 初 期 値 )を 決 めるデフォルト CSS によるものです 70- Campus System Guide

23 第 3 部 第 2 章 HTML,CSS 各 ブラウザーにはそれぞれデフォルト CSS が 設 定 されているため ユーザーが 何 らかの 設 定 をしなくてもある 程 度 のスタイルを 適 用 し てくれます しかしデフォルト CSS にはブラウザーごとに 差 異 があるため たとえば Internet Explorer での 表 示 と Firefox での 表 示 が 違 うといったことはよくあります 6. 開 発 ツール HTML や CSS は エディタで 書 いて 保 存 して その 都 度 ブラウザーで 確 認 する 必 要 があります これを 面 倒 に 感 じる 場 合 は 専 門 の 開 発 ツールを 使 うことで 楽 になるかもしれません Adobe Dreamweaver( 前 章 で 解 説 )やホームページビルダーといった 有 料 ソフトを 使 えば 見 た 目 を 確 認 しながら HTML を 書 くことが できます また Google Chrome や Firefox にも 拡 張 機 能 として Web 制 作 支 援 ツールがあります 興 味 がある 方 は 調 べてみてください コラム:HTML4 HTML5 と XHTML 文 中 で 何 度 か 登 場 した HTML5 とはなんでしょうか HTML は 登 場 後 何 度 か 改 良 が 加 えられ 1999 年 に 勧 告 (リリース)されたものが HTML4.01 です それから 約 15 年 かけ 満 を 持 して 登 場 したが HTML5 です 検 索 サイトや SNS Web アプリケーションなど 最 新 の Web 動 向 を 反 映 し それらを 便 利 に 使 える ように 作 られているのです HTML5 は 正 式 に 勧 告 (リリース)されたばかりです そのためブラウザーごとに 対 応 の 度 合 いが 異 なります 実 は HTML5 の 前 に HTML4.01 の 後 継 として 作 られた XHTML1.0 という 規 格 がありました XHTML1.0 は 厳 密 な 文 法 が 必 要 と され またブラウザーの 対 応 にも 問 題 が 多 いものでした 結 果 として 移 行 が 進 まず 改 良 版 の XHTML2.0 の 開 発 は 打 ち 切 られ HTML5 に 統 合 されてしまったのです この 裏 には 従 来 HTML や XHTML を 開 発 してきた Web の 中 心 的 な 団 体 W3C と それに 対 立 し 作 られ HTML5 を 提 案 した 団 体 WHATWG(Apple,Mozilla,Opera が 設 立 )の 対 立 や 協 力 といった 事 情 があるようです Campus System Guide- 71

CSSの基礎

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

More information

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

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

More information

ホームページとは何?

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

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

簡単なアイコンの説明

簡単なアイコンの説明 Joruri CMS 1.3.2 基 本 マニュアル (2013.6.28) 付 録 内 容 の 入 力 内 容 文 字 装 飾 表 の 挿 入 添 付 ファイルのアップロード リンク 設 定 株 式 会 社 アイ ディ エス Joruri 操 作 マニュアル/ 内 容 の 入 力 機 種 依 存 文 字 はご 利 用 しないでください 下 記 のようなウィンドウズに 依 存 する 機 種 依 存

More information

2.3 本学でよく使う基本ツール

2.3 本学でよく使う基本ツール 2.3.1 テキストエディタ(TeraPad) 第 2 部 第 3 章 本 学 でよく 使 う 基 本 ツール 1.はじめに 学 内 の 演 習 室 PC には Windows 標 準 のメモ 帳 以 外 にも TeraPad や 秀 丸 Sublime Text といった 複 数 のテキストエディタがインスト ールされています これらのテキストエディタはメモ 帳 と 同 じように 速 く メモ 帳

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

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

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

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

More information

Microsoft Word - 内容の入力.doc

Microsoft Word - 内容の入力.doc Joruri 操 作 マニュアル/ 内 容 の 入 力 機 種 依 存 文 字 はご 利 用 しないでください 下 記 のようなウィンドウズに 依 存 する 機 種 依 存 文 字 については 他 のパソコン 環 境 やブラウザにより 表 示 されません 記 事 の 保 存 時 にシステムでエラーが 出 るように 設 定 されています 利 用 しないようにお 願 いします 機 種 依 存 文 字 (

More information

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

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

More information

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

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

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

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

PowerPoint プレゼンテーション

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

More information

A

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

More information

卒 論 のためのWord03 目 次 ページ 設 定 の 方 法 - 用 紙 サイズの 設 定 - 余 白 印 刷 形 式 の 設 定 -3 文 字 数 行 数 の 設 定 ページ 番 号 のつけ 方 5 - ページ 番 号 をつける - ページ 番 号 を 途 中 からつける -3 ページ 番 号

卒 論 のためのWord03 目 次 ページ 設 定 の 方 法 - 用 紙 サイズの 設 定 - 余 白 印 刷 形 式 の 設 定 -3 文 字 数 行 数 の 設 定 ページ 番 号 のつけ 方 5 - ページ 番 号 をつける - ページ 番 号 を 途 中 からつける -3 ページ 番 号 卒 論 のためのWord03 目 次 ページ 設 定 の 方 法 - 用 紙 サイズの 設 定 - 余 白 印 刷 形 式 の 設 定 -3 文 字 数 行 数 の 設 定 ページ 番 号 のつけ 方 5 - ページ 番 号 をつける - ページ 番 号 を 途 中 からつける -3 ページ 番 号 を 途 中 から 消 す -4 一 部 のページのみページ 番 号 を 消 す 3 目 次 のつくり

More information

Microsoft Word - 309DW_END

Microsoft Word - 309DW_END 9.1 Web サイト 作 成 の 手 順 第 9 章 Web サイト 作 成 前 章 ではインターネットの 利 用 について 解 説 してきました Web サイトの 公 開 は 世 界 中 に 情 報 を 発 信 することのできる 手 段 です こ の 章 では いよいよ 自 分 で Web サイトを 作 成 し 公 開 してみましょう 1.Web サイトの 作 成 から 公 開 までの 流 れ

More information

PowerPoint プレゼンテーション

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

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

2.ページ 作 成 機 能 2-13 Wordデータを 取 り 込 める(もしくはコピー&ペーストできる)こその 際 アプリケーション 特 有 のHTML(CSS) 表 現 を 自 動 的 に 削 除 できるこ 他 データの 流 用 表 2-14 Excelデータを 取 り 込 める(もしくはコピー

2.ページ 作 成 機 能 2-13 Wordデータを 取 り 込 める(もしくはコピー&ペーストできる)こその 際 アプリケーション 特 有 のHTML(CSS) 表 現 を 自 動 的 に 削 除 できるこ 他 データの 流 用 表 2-14 Excelデータを 取 り 込 める(もしくはコピー 1. 基 本 情 報 1-1 CMS 利 用 にあたって 各 職 員 のPC 端 末 に 特 別 なアプリケーションなどをインストールす る 必 要 が 無 いこと(ウェブブラウザから 利 用 できること) 1-2 各 職 員 PC 端 末 から InternetExplorerを 通 じ ID PASSWORD 認 証 にてログインできるこ 1-3 閲 覧 者 のパソコン 機 種 OS ブラウザ

More information

目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示..

目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示.. Cform カレンダー 予 約 システム 機 能 解 説 マニュアル 目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示... 9 4. 予 約 申 込 管

More information

CMS操作手順書

CMS操作手順書 モーハワイ ブログ 操 作 マニュアル 目 次 No タイトル 1 フォルダ ファイル 構 成 2 Wordpress の 操 作 3 その 他 のページの 編 集 4 用 語 集 P1 1 フォルダ ファイル 構 成 この 項 ではウェブサイトを 構 成 するフォルダ ファイルについて 説 明 します 1.1 フォルダ 構 造 ファイル 名 フォルダ/ファイル 名 ページ 名 称 フォルダ 内 容

More information

3.コンテンツの 作 成 機 能 3-1 IDごとに 編 集 権 限 を 設 け 権 限 に 応 じたメニューが 表 示 されること 3-2 管 理 者 はすべてのページにおいて 編 集 する 権 限 があること 3-3 複 数 のユーザーが 同 時 に 同 一 のページを 更 新 できないこと 基

3.コンテンツの 作 成 機 能 3-1 IDごとに 編 集 権 限 を 設 け 権 限 に 応 じたメニューが 表 示 されること 3-2 管 理 者 はすべてのページにおいて 編 集 する 権 限 があること 3-3 複 数 のユーザーが 同 時 に 同 一 のページを 更 新 できないこと 基 ( 別 紙 ) 志 摩 市 ホームページ 構 築 業 務 CMS 機 能 調 査 表 対 応 欄 : 本 業 務 の 委 託 費 用 内 で 対 応 可 能 : 代 替 案 により 本 業 務 の 委 託 費 用 内 で 対 応 可 能 ( 代 替 案 欄 に 代 替 案 をご 記 入 ください ) : 対 応 不 可 項 目 番 号 要 件 対 応 代 替 案 1-1 1.システム 基 本 要 件

More information

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

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

More information

Microsoft Word - 311Tools_END

Microsoft Word - 311Tools_END 11.1 テキストエディター(TeraPad) 第 11 章 さらに 使 いこなすためのツール Windows の 標 準 で 搭 載 されているテキストエディターのメモ 帳 Word などに 比 べて メモ 帳 は 軽 く ちょっとした 文 章 を 書 くのに 非 常 に 便 利 です しかし メモ 帳 は 軽 いだけに 機 能 性 はそれほど 高 くありません この 章 で 紹 介 する TeraPad

More information

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

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

More information

Microsoft Word - ws-0002.doc

Microsoft Word - ws-0002.doc Word 2016 はじめに 1 Word の 概 要 Word はすぐれた 文 書 作 成 ソフト 2 1 このテキストで 学 ぶこと 2 2 Word の 起 動 4 3 Word の 画 面 6 4 画 面 の 表 示 倍 率 について 8 5 編 集 記 号 の 表 示 / 非 表 示 8 6 ルーラーを 表 示 させたい 時 は 9 7 行 番 号 を 表 示 させたい 時 は 9 8 リボンが

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

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

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

More information

03 CMS機能審査表.xls

03 CMS機能審査表.xls 厚 真 町 ホームページ 構 築 業 務 CMS 機 能 調 査 表 ( 別 紙 ) 対 応 欄 : 本 業 務 の 委 託 費 用 内 で 対 応 可 能 : 代 替 案 により 本 業 務 の 委 託 費 用 内 で 対 応 可 能 ( 代 替 案 欄 に 代 替 案 をご 記 入 ください ) : 対 応 不 可 項 目 番 号 要 件 対 応 代 替 案 1 1.システム 基 本 要 件 Windows

More information

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

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

More information

WORD 98 入力の手引き

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

More information

Peace & Piece 画面設計書

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

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

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

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

More information

Untitled

Untitled 地 域 ポータルサイト ータルサイト こむねっと ひろしま 地 域 のホームページ 管 理 者 向 け 操 作 手 順 書 ( 基 本 編 ) 初 版 :00 年 0 月 日 広 島 市 役 所 市 民 局 市 民 活 動 推 進 課 目 次 目 次. 地 域 のホームページ 作 成 手 順 概 要... 4.. 全 体 構 成...4.. 地 域 のホームページのサイズ 制 限...4. 利 用

More information

HTML文章作成

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

More information

ノートをクラウドで 管 理 する [ 共 有 ] タブについて OneNote を 初 めて 起 動 すると クラウドに 接 続 するように 求 められ そのクラウドに 最 初 のノートブックが 作 成 されます OneNote では Microsoft アカウント (MSN Hotmail Mes

ノートをクラウドで 管 理 する [ 共 有 ] タブについて OneNote を 初 めて 起 動 すると クラウドに 接 続 するように 求 められ そのクラウドに 最 初 のノートブックが 作 成 されます OneNote では Microsoft アカウント (MSN Hotmail Mes クイック スタート ガイド Microsoft OneNote 2013 は レイアウトがこれまでのバージョンから 変 わりました このガイドは 少 しでも 早 く 慣 れることができるようにそれらの 違 いをまとめたものです タッチとマウスを 切 り 替 える タッチ デバイスで OneNote を 使 う 場 合 クイック アクセス ツール バーにこのスイッチを 追 加 できます リボンの 表

More information

Taro-01_Web_html自習テキストⅠ.

Taro-01_Web_html自習テキストⅠ. 平 成 18 年 度 学 校 Web ページ 作 成 研 修 講 座 HTML の 基 礎 Ⅰ ~メモ 帳 で Web ページを 作 ろう!!~ 今 回 の 勉 強 内 容 メモ 帳 /ファイルの 保 存 / 文 字 入 力 /ページタイトルの 設 定 文 字 色 の 設 定 / 文 字 サイズの 設 定 / 水 平 線 /リンクの 設 定 岩 手 県 立 総 合 教 育 センター 情 報 教 育

More information

1. アクセスする 2. 簡 易 検 索 画 面 (fig. 1) アクセスすると 最 初 に 出 る 画 面 です 検 索 語 入 力 ボックスにキーワードを 入 力 して 論 文 検 索 ボタンをクリックし ます 3. ボックス 下 部 のチェック 項

1. アクセスする  2. 簡 易 検 索 画 面 (fig. 1) アクセスすると 最 初 に 出 る 画 面 です 検 索 語 入 力 ボックスにキーワードを 入 力 して 論 文 検 索 ボタンをクリックし ます 3. ボックス 下 部 のチェック 項 CiNii Articles を 使 う 2013 芳 野 明 / 京 都 嵯 峨 芸 術 大 学 西 洋 美 術 史 博 物 館 学 研 究 室 1. アクセスする http://ci.nii.ac.jp/ 2. 簡 易 検 索 画 面 (fig. 1) アクセスすると 最 初 に 出 る 画 面 です 検 索 語 入 力 ボックスにキーワードを 入 力 して 論 文 検 索 ボタンをクリックし

More information

Section: 01 ログイン トップページ ( ) のページ 右 上 部 ログイン ボタンをクリックし スポンサー ログインページ へとお 進 みください 1に ID を 2にパスワードを 入 力 しログインしてください ID PASS は 別

Section: 01 ログイン トップページ (  ) のページ 右 上 部 ログイン ボタンをクリックし スポンサー ログインページ へとお 進 みください 1に ID を 2にパスワードを 入 力 しログインしてください ID PASS は 別 2009.01 改 定 マニュアルは 変 更 することがございます Copyright(C) 検 島 誌.com All Rights Reserved 検 島 誌.com スポンサーマニュアル Section 01 ログイン 2 02 詳 細 ページ 更 新 3 03 MiniData 更 新 4 04 検 索 結 果 表 示 ページ 内 容 修 正 5 05 週 間 PR 版 ページ 更 新 6

More information

すると 記 事 の 投 稿 画 面 に 移 ります 投 稿 画 面 には ビジュアルモード と テキストモード がありま すが 慣 れないうちはビジュアルモードでの 記 事 作 成 をオススメし ます 一 番 上 の 欄 に 記 事 のタイトルを 入 力 し その 下 の 大 きな 空 欄 の 所

すると 記 事 の 投 稿 画 面 に 移 ります 投 稿 画 面 には ビジュアルモード と テキストモード がありま すが 慣 れないうちはビジュアルモードでの 記 事 作 成 をオススメし ます 一 番 上 の 欄 に 記 事 のタイトルを 入 力 し その 下 の 大 きな 空 欄 の 所 第 9 章 記 事 投 稿 編 ここからは 実 際 に 記 事 を 書 いていく 方 法 を 解 説 します 基 本 的 な 説 明 ばかりで 面 白 くないと 感 じるかもしれませんが 最 初 の 仕 組 みづくりができているか 否 かで その 後 の 作 業 効 率 がかなり 変 わってきます 応 用 編 ではアクセスを 集 めるためのノウハウを これでもかというほどお 伝 えしていくので ここでは

More information

1 平 成 24 年 度 夏 期 コンピュータ 講 座 Microsoft Excel( 初 級 ) このテキストは Microsoft Excel 2007 の 解 説 文 書 です 浦 添 市 立 教 育 研 究 所 エクセルの 基 本 1. 画 面 の 構 成 Office ボタン 数 式 バー タブ リボン 全 セ ル 選 択 ボ タン アクティブセル 2.セルと 行 列 名 前 ボックス 行

More information

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

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

More information

2 Web ページの 文 字 サイズを 変 更 する Microsoft Internet Explorer 8 では 文 字 のサイズを 変 更 して Web ページをより 見 やすくする ことができます 文 字 のサイズを 変 更 する 場 合 は 画 像 やコントロールは 元 のサイズが 維

2 Web ページの 文 字 サイズを 変 更 する Microsoft Internet Explorer 8 では 文 字 のサイズを 変 更 して Web ページをより 見 やすくする ことができます 文 字 のサイズを 変 更 する 場 合 は 画 像 やコントロールは 元 のサイズが 維 Windows が 提 供 する Web ブラウザ(Microsoft Internet Explorer 8)の 機 能 1.Web ページをズームする 2.Web ページの 文 字 サイズを 変 更 する 3.Web ページで 使 用 される 色 を 選 択 する 4.Web ページやドキュメントで 使 用 されるフォントのスタイルやサイズを 選 択 する 5.Web ページのユーザー 補 助

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

■新聞記事

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

More information

Microsoft PowerPoint - 110427b.ppt

Microsoft PowerPoint - 110427b.ppt はじめに 統 計 と 情 報 処 理 第 02 回 後 半 はじめに パスワードの 変 更 キーボードの 特 殊 なキー MS-Wowdの 基 礎 課 題 の 提 出 パスワードの 変 更 パスワードの 変 更 (2) 前 回 計 算 機 実 習 室 のパソコンにログイン するため のパスワードを 変 更 しました 今 回 は メール Web 学 生 サービス 支 援 システム 等 で 利 用 するパスワードを

More information

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

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

More information

教員用

教員用 高 知 大 学 教 員 用 moodle2 1.1.moodle を 利 用 するためには 1.2.コースの 保 全 1.3.moodle へのログイン 1.4.ログアウト 2.1.コースの 説 明 2.2.ブロック 一 覧 2.3.HTML テキストエディタを 利 用 する 2.4.アイコン 編 集 アイコンの 説 明 3.1.ユーザを 登 録 する 3.2.ユーザを 削 除 する 4.1.ファイルのアップロード

More information

Microsoft PowerPoint - 140423b.ppt

Microsoft PowerPoint - 140423b.ppt はじめに 統 計 と 情 報 処 理 第 02 回 後 半 はじめに キーボードの 特 殊 なキー MS-Wowdの 基 礎 課 題 の 提 出 キーボードの 見 方 ファンクションキー Enterキー キーボードの 特 殊 なキー CapsLock キー Shiftキー コントロールキー スペースキー カーソルキー テンキー Shiftキー 特 殊 なキー 他 のキーとの 組 み 合 わせにより

More information

やさしくPDFへ文字入力 PRO v.9.0 かんたん操作マニュアル

やさしくPDFへ文字入力 PRO v.9.0 かんたん操作マニュアル 1 はじめに... 3 1.やさしくPDFへ 文 字 入 力 で 出 来 ること... 4 2.やさしくPDFへ 文 字 入 力 を 起 動 しよう... 6 3. 画 像 を 読 み 込 んでみよう... 8 4. 読 み 込 んだ 元 画 像 をなおしてみよう... 15 5. 文 字 入 力 する 場 所 を 指 定 しよう... 19 6. 文 字 を 入 力 しよう... 24 7. 入

More information

<4D6963726F736F667420576F7264202D20574254816995B68F918DEC90AC89898F4B899E977095D2816A2E646F63>

<4D6963726F736F667420576F7264202D20574254816995B68F918DEC90AC89898F4B899E977095D2816A2E646F63> 文 書 作 成 演 習 ( 応 用 編 ) (Word007,Excel007) 文 書 作 成 演 習 ( 応 用 編 ) のテキストを 参 考 にしながら, 次 の 学 級 だよりを 作 成 してみましょう IPA 教 育 用 画 像 素 材 集 より < 演 習 のための 準 備 > 演 習 用 素 材 のフォルダをデスクトップ 上 に 作 成 します IPA 教 育 用 画 像 素 材 集

More information

必 要 としている 人 を 対 象 として, 広 範 囲 の 情 報 提 供 をすることを 目 標 としています なお, 平 成 23 年 度 ~ 平 成 26 年 度 までの4 年 間 は, 教 養 学 科 の 部 局 活 性 化 経 費 の 支 援 を 受 けました 本 稿 は,この HTML5

必 要 としている 人 を 対 象 として, 広 範 囲 の 情 報 提 供 をすることを 目 標 としています なお, 平 成 23 年 度 ~ 平 成 26 年 度 までの4 年 間 は, 教 養 学 科 の 部 局 活 性 化 経 費 の 支 援 を 受 けました 本 稿 は,この HTML5 HTML5 による Web ページ 作 成 のための 基 本 資 料 HTML5 & CSS3 リファレンス について 大 阪 教 育 大 学 教 養 学 科 情 報 科 学 講 座 武 内 良 樹 1.はじめに 皆 さんは Web ページはどのようにして 作 成 されていますか? 現 在 では, 大 学 の Web ページもほとんどが 外 注 で, 専 門 業 者 により 作 成 されているようです

More information

学生用_目次

学生用_目次 メーリングリストを 削 除 する 1.メーリングリストの 管 理 画 面 にログインします 2. このメーリングリストを 削 除 する のリンクをクリックします 3.リストのパスワードを 入 力 して [このリストを 削 除 ]をクリックしま す * 一 度 削 除 したメーリングリストは 元 に 戻 せませんので 十 分 注 意 してください 自 分 のためのデータの 保 存 場 所 それが ホームディレクトリ

More information

スライド 1

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

More information

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

メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受 信 したメールが 一 覧 表 示 されます メール 受 信 タブをクリックすると 受 信 箱 フ

メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受 信 したメールが 一 覧 表 示 されます メール 受 信 タブをクリックすると 受 信 箱 フ .3 1...3 メール 受 信 タブのサブメニューから 直 接 受 信 箱 以 外 のフォルダを 表 示 することもできます 共 有 メー ルボックスのフォルダは 指 定 できません 3. 35 メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受

More information

0.CMSホームページについて 1 ブラウザで 学 校 ホームページを 開 いて ログインする! 2 データを 登 録 したいページをメニューから 選 んで 移 動 する 3 編 集 操 作 を 行 い 決 定 ボタンを 押 してデータを 登 録 する 1 入 力 が 終 わったら 必 ず 決 定

0.CMSホームページについて 1 ブラウザで 学 校 ホームページを 開 いて ログインする! 2 データを 登 録 したいページをメニューから 選 んで 移 動 する 3 編 集 操 作 を 行 い 決 定 ボタンを 押 してデータを 登 録 する 1 入 力 が 終 わったら 必 ず 決 定 CMSホームページ 作 成 マニュアル 初 級 編 0.CMSホームページについて 1.. 活 動 報 告 ページへ 記 事 を 登 録 する 2. 文 字 の 色 を 変 える 3. 写 真 など 画 像 を 挿 入 する 4. 画 像 の 右 側 に 文 字 を 配 置 する 5.( 番 外 編 )PDF 文 書 の 作 成 について 6.PDF 文 書 を 登 録 する 7.( 番 外 編 )

More information

Acrobat早分かりガイド

Acrobat早分かりガイド Adobe PDF を 加 工 編 集 する PDF を 再 利 用 する PDF ファイルの Word 文 書 書 き 出 し [ 名 前 を 付 けて 保 存 ] ダイアログが 開 くので ファイルの 書 き 出 し 先 を 指 定 し [ 保 存 ] ボタンをクリックします Acrobat を 使 用 すると Adobe PDF から Word の フォーマットに 書 き 出 してファイルを

More information

OpenCity2説明

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

More information

高知大学 学生用

高知大学 学生用 高 知 大 学 学 生 用 moodle2 moodle(ムードル)は Web を 通 じて 利 用 する 授 業 サポートのシステムです 学 生 ユーザは 参 加 している 科 目 (コース)の 授 業 コンテンツを 使 って 受 講 ( 活 動 ) することができます ご 利 用 の 推 奨 ブラウザ Internet Explorer 8 以 上 Firefox 4 以 上 Google Chrome

More information

スライド 1

スライド 1 Hos-CanR 3.0 運 用 マニュアル Hos-CanR 3.0 運 用 マニュアル 登 録 作 業 者 用 Ver. 2 バージョン 改 訂 日 付 改 訂 内 容 Ver. 1 2010/3/15 初 版 Ver. 2 2010/8/9 ファイル 取 り 込 み 時 の 同 一 レコードの 判 定 についての 記 載 を 追 記 Hos-CanR 3.0 運 用 マニュアル 目 次 1.

More information

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 Active! mail 6.54 ユーザーズマニュアル(スマートフォン 版 ) Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 権 の 侵 害 とな

More information

サイボウズ Office 8 ファイル管理マニュアル

サイボウズ Office 8 ファイル管理マニュアル ファイル 管 理 マニュアル Copyright (C) 20 10 Cybozu, Inc. 目 次 管 理 者 マニュアル はじめに 1 ファイル 管 理 のシステム 管 理 について 2 システム 管 理 の 設 定 ファイル 管 理 の 一 般 設 定 を 変 更 する 3 フォルダにアクセス 権 を 設 定 する 5 ファイルサイズの 制 限 を 設 定 する 6 ファイルを 一 括 削

More information

日 付 部 分 を 入 力 する 今 回 は 3 月 のカレンダーを 作 ります 3 月 は 水 曜 日 からはじまりますので 1 水 曜 日 第 1 週 目 にあたるセル D2 に 1 その 隣 の E2 に 2 と 入 力 しましょう 2 1 2 と 入 力 したセル D2:E2 をドラッグして

日 付 部 分 を 入 力 する 今 回 は 3 月 のカレンダーを 作 ります 3 月 は 水 曜 日 からはじまりますので 1 水 曜 日 第 1 週 目 にあたるセル D2 に 1 その 隣 の E2 に 2 と 入 力 しましょう 2 1 2 と 入 力 したセル D2:E2 をドラッグして デジカメ 写 真 を 使 ったカレンダー 作 り 今 回 このテキストでは Word2003 Excel2003 の 画 像 を 使 って 説 明 していますが 中 の 手 順 の 説 明 は どのバージョンをお 使 いの 方 でも 対 応 ができるようにしています 新 しいバージョンで 簡 単 にできる 作 業 もありますが ご 了 承 ください Excel でカレンダー 部 分 を 作 る Excel

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

もくじ

もくじ AutoBiz StartUp Manual オートビズ スタートアップマニュアル (メルマガ) 1 目 次 管 理 画 面 の 構 成 と 基 礎 知 識 を 理 解 しよう... 4 管 理 画 面 の 構 成 について... 4 基 礎 知 識 について... 5 シナリオとは?... 5 メルマガ( 一 斉 配 信 )とは?... 5 メルマガとシナリオの 関 係... 6 読 者 の 登

More information

でんきやさん操作手順_ppt [互換モード]

でんきやさん操作手順_ppt [互換モード] でんきやさん せつびやさん for Windows 簡 易 操 作 手 順 最 初 の 起 動 で 商 品 をインストールし IDキー 入 力 の 後 商 品 を 起 動 して 見 ましょう 一 番 最 初 の 起 動 の 時 には でんきデータ 設 備 データ 単 価 地 区 選 択 画 面 が 出 てきます 全 国 8ブロックの 中 より 該 当 する 箇 所 を 選 んで OKボタン を 押

More information

1. 会 計 報 告 の 部 分 1-1. 項 目 文 字 を 入 力 する 一 番 初 めは A1 のセルがアクティブ( 選 ばれた 状 態 )になっています 収 入 の 部 から 書 き 始 めましょう 2 行 目 は 項 目 の 行 にします 項 目 単 価 数 量 の 列 をつくり 合 計

1. 会 計 報 告 の 部 分 1-1. 項 目 文 字 を 入 力 する 一 番 初 めは A1 のセルがアクティブ( 選 ばれた 状 態 )になっています 収 入 の 部 から 書 き 始 めましょう 2 行 目 は 項 目 の 行 にします 項 目 単 価 数 量 の 列 をつくり 合 計 エクセルに 挑 戦! Microsoft Excel で 会 計 報 告 をしましょう 会 員 から 徴 収 した 大 事 な 会 費 会 計 報 告 は 正 確 に また わかりやすくなければなりません Excel を 使 って また Word も 応 用 して 書 き 換 えも 簡 単 な 会 計 報 告 をつくりましょう エクセル を 起 動 させるとたくさんのマスがあります セル( 細 胞

More information

石 川 県 結 婚 支 援 ポータルサイト( 仮 称 ) 調 達 仕 様 書 1 事 業 の 目 的 いしかわ 子 育 て 支 援 財 団 では 進 行 する 未 婚 化 晩 婚 化 に 対 応 し 平 成 17 年 度 より 各 種 結 婚 支 援 事 業 に 取 り 組 んでいるところであるが

石 川 県 結 婚 支 援 ポータルサイト( 仮 称 ) 調 達 仕 様 書 1 事 業 の 目 的 いしかわ 子 育 て 支 援 財 団 では 進 行 する 未 婚 化 晩 婚 化 に 対 応 し 平 成 17 年 度 より 各 種 結 婚 支 援 事 業 に 取 り 組 んでいるところであるが 石 川 県 結 婚 支 援 ポータルサイト( 仮 称 ) に 係 る 調 達 仕 様 書 平 成 27 年 10 月 公 益 財 団 法 人 いしかわ 子 育 て 支 援 財 団 石 川 県 結 婚 支 援 ポータルサイト( 仮 称 ) 調 達 仕 様 書 1 事 業 の 目 的 いしかわ 子 育 て 支 援 財 団 では 進 行 する 未 婚 化 晩 婚 化 に 対 応 し 平 成 17 年 度

More information

Microsoft PowerPoint - manualtachiyomi.pptx

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

More information

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 Active! mail 6.52 ユーザーズマニュアル(スマートフォン 版 ) Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 権 の 侵 害 とな

More information

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

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

More information

ソトログ管理画面マニュアル

ソトログ管理画面マニュアル WordPress2.9 管 理 マニュアル 1 2 3 4 5 1 新 規 投 稿 ( 新 着 情 報 トピックス 等 の 新 規 投 稿 ) ショートカットです コメントの 確 認 下 書 きの 確 認 新 規 ページ 作 成 画 像 などのアップロードが 可 能 です ユーザー 名 (ここではadminとなっております) ターボ ログインしているユーザー 名 が 表 示 されます クリックするとプロフィール

More information

Microsoft Word - XOOPS_input_m.doc

Microsoft Word - XOOPS_input_m.doc 学 校 WebサイトへのXOOPS 導 入 マニュアル (コンテンツ 入 力 ) Ver.0.9 (2008.6.24) 愛 媛 県 総 合 教 育 センター 情 報 教 育 研 究 室 目 次 第 1 章 このマニュアルについて... 1 1 はじめに... 1 2 このマニュアルの 使 い 方... 2 第 2 章 編 集 するためのサイトへのログイン 方 法... 3 第 3 章 各 モジュールへの

More information

Microsoft Word - tb01.doc

Microsoft Word - tb01.doc 第 1 章 プログラムを 動 かそう 概 要 ここでは 情 報 処 理 センターの 計 算 機 環 境 を 使 用 してプログラミングを 勉 強 するために 覚 えておかなければならな い 種 々のソフトウェアの 使 用 方 法 について 学 びます また C 言 語 を 用 いて 書 いたプログラムのソースコードをコンパイルし 実 行 する 方 法 について 学 びます この 章 の 目 標 テキストエディタを

More information

訪問介護勤務スケジュール作成

訪問介護勤務スケジュール作成 訪 問 介 護 勤 務 スケジュール 作 成 勤 務 表 作 成 編 (Ver. 6.0.0) Microsoft Excel 2003 対 応 Microsoft Excel 2007 対 応 Microsoft Excel 2010 対 応 こんなことができます!! 登 録 者 情 報 のチェック ( 基 本 登 録 情 報 のチェック) 対 象 月 の 情 報 チェック 勤 務 表 作 成 勤

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

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

新規文書1

新規文書1 知 っているようで 知 らない 機 能 が 盛 りだくさん 普 段 のエクセル 業 務 をもっと 効 率 的 に 毎 月 のなでしこジャーナルに 連 載 しております Satisfaction to Hospitality Business Solution of the TOYO co.,ltd 1.Excelを 並 べて べたい 列 幅 の 動 調 節 2. 少 しでも を 楽 にする 便 利

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Netto ホームページ 作 成 マニュアル 2015 年 4 月 21 日 作 成 ver8.01 管 理 画 面 URL http://netto.jp/usr/index.php ログインE-mail ( ) パスワード ( ) PC/スマートフォン 対 応 スマートフォンでは 一 部 使 用 出 来 ない メニューがございます ホームページURL http://netto.jp/アカウント

More information

スライド 1

スライド 1 2014 年 2 月 20 日 vibit CMS 開 発 / 販 売 元 ヴィビットインタラクティヴ 株 式 会 社 Webスタンダード 事 業 部 vibit CMS はヴィビットインタラクティヴ 株 式 会 社 の 登 録 商 標 です 2012 vibit interactive inc. All rights reserved. 本 書 の 無 断 複 製 及 び 配 布 を 固 く 禁

More information

目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4 2.4 地 図 を 拡 大 / 縮 小 す

目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4 2.4 地 図 を 拡 大 / 縮 小 す 地 図 情 報 とよなか 操 作 手 順 書 Copyright (C) Toyonaka City, All rights reserved. 目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4

More information

(Microsoft Word - \203e\203L\203X\203g.doc)

(Microsoft Word - \203e\203L\203X\203g.doc) ? Windows フォトストーリー3とは? 静 止 画 像 から 擬 似 ムービーを 作 成 できる Microsoft の 無 料 のソフトです 音 楽 をつけたり ナレーションを 入 れたり 切 り 替 え 効 果 をつけたりでき 手 軽 にスライドショーが 作 れます それをネット 上 で 見 せることや ビデオ CD に 焼 いて 他 の 人 に 見 せる 事 もできます http://www.geocities.jp/sweet_cherry_1102/rose.html

More information

9章 Excel の使い方

9章 Excel の使い方 情 報 処 理 センター 品 川 地 区 Excel の 使 い 方 1. はじめに Excel は よく 用 いられている 表 計 算 ソフトの 一 つです 表 計 算 はスプレッドシート(Spread Sheet)を 使 って ビジネスはもとより 家 庭 においても 家 計 簿 や 住 所 録 などに 広 く 用 いられています これから 皆 さ んが 受 講 する 実 験 や 観 察 で 得

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

推 奨 環 境 このレポート 上 に 書 かれている URL はクリックできます できない 場 合 は 最 新 の AdobeReader をダウンロードしてください ( 無 料 ) 著 作

推 奨 環 境 このレポート 上 に 書 かれている URL はクリックできます できない 場 合 は 最 新 の AdobeReader をダウンロードしてください ( 無 料 )  著 作 無 料 バージョン 1.01 推 奨 環 境 このレポート 上 に 書 かれている URL はクリックできます できない 場 合 は 最 新 の AdobeReader をダウンロードしてください ( 無 料 ) http://www.adobe.co.jp/products/acrobat/readstep2.html 著 作 権 について 当 教 材 は 著 作 権 法 で 保 護 されている

More information

「エクセルで遊ぼう」

「エクセルで遊ぼう」 エクセルについて エクセルで 遊 ぼう エクセルに 慣 れる:カレンダーの 作 成 エクセルの 画 面 エクセルの 画 面 はメニューとシートの2つの 部 分 から 出 来 ています 1つは 画 面 の 上 にある ファイル 編 集 表 示 という 文 字 の 部 分 と アイコン (ボタン)が 並 んでいる 部 分 のことです ここにある 文 字 やアイコンで エクセルのシートに 対 していろいろな

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

Microsoft Word - 貼り付け2010pdf用.docx

Microsoft Word - 貼り付け2010pdf用.docx Word への 貼 り 付 け (2010) 図 写 真 の 貼 り 付 け ディジタルカメラなどで 撮 った 写 真 自 分 で 作 成 した 図 などを Word の 文 書 中 に 貼 り 付 けること ができる それがファイルの 形 で 存 在 する 場 合 には 挿 入 図 にある 図 ( 右 図 ) をクリックし 開 いたダイアログボックスで 文 書 ファイルと 同 じように 読 み 込

More information

コⅡ8-2 段 組 みとセクション 区 切 り 文 書 の 途 中 で 段 組 み 設 定 を 変 更 すると その 部 分 の 前 後 に セクション 区 切 り が 自 動 的 に 挿 入 され セ クション 付 けが 変 わる セクション 区 切 り 1 段 組 み セクション 区 切 りを

コⅡ8-2 段 組 みとセクション 区 切 り 文 書 の 途 中 で 段 組 み 設 定 を 変 更 すると その 部 分 の 前 後 に セクション 区 切 り が 自 動 的 に 挿 入 され セ クション 付 けが 変 わる セクション 区 切 り 1 段 組 み セクション 区 切 りを コⅡ8-1 [ コンピュータ 実 習 Ⅱ (No.8) ] [1] 段 組 み 段 組 みとは 1 ページ 内 で 文 字 を 書 く 範 囲 を 横 や 縦 にいくつかに 分 割 して 配 置 するものです 1 ページに 小 さな 文 字 で 左 右 ( 横 書 きの 場 合 )や 上 下 ( 縦 書 きの 場 合 )にびっしり 書 いてあると 読 む 際 に 1 行 ごとの 視 線 の 移 動

More information

006-021_責)Wordトレ2-1章_斉

006-021_責)Wordトレ2-1章_斉 . Wordの 起 動 Wordの 基 礎 知 識. Wordの 起 動 Wordの 起 動 は 次 のように 行 います 他 のアプリケーションソフトのように いくつかの 起 動 方 法 があります スタートメニューからの 起 動 スタートメニューから 起 動 する 方 法 は 次 の 通 りです [スタート]メニューの[すべてのプログラム]から[Microsoft-Office]の [Microsoft-Word]を

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

Microsoft Word - No9_word3_lit_r.doc

Microsoft Word - No9_word3_lit_r.doc コンピュータ リテラシー (R クラス) 2011 年 度 第 9 回 : Word の 基 本 (3) 担 当 : 千 葉 庄 寿 (schiba@reitaku-u.ac.jp) http://www.fl.reitaku-u.ac.jp/~schiba/lit_r/ 1. 表 (テーブル table) 表 は 次 の 手 順 で 作 成 する 挿 入 タブの 表 ボタンを 押 してマウスで 表

More information

2.4 箇 条 書 のスタイルを 変 更 する 右 クリックして 箇 条 書 と 番 号 付 け を 選 択 する. あとは 少 し 遊 べば, このようなことをやりたい 人 は 理 解 できると 思 います 3 いろいろな 入 力 ワープロを 使 う 上 で 肝 心 な 点 は, 空 白 調 整

2.4 箇 条 書 のスタイルを 変 更 する 右 クリックして 箇 条 書 と 番 号 付 け を 選 択 する. あとは 少 し 遊 べば, このようなことをやりたい 人 は 理 解 できると 思 います 3 いろいろな 入 力 ワープロを 使 う 上 で 肝 心 な 点 は, 空 白 調 整 目 次 1 標 準 の 行 間 隔...1 2 箇 条 書 き...1 2.1 箇 条 書 を 開 始 する...1 2.2 箇 条 書 を 終 了 する...1 2.3 箇 条 書 のレベルを 変 更 する...1 2.4 箇 条 書 のスタイルを 変 更 する...2 3 いろいろな 入 力...2 3.1 段 落 を 指 定 する...2 3.2 強 制 的 に 改 ページをする...2 3.3

More information

untitled

untitled 25 10 12 11 24 (1) 14 (2) 26 10 44 (3) (4) (5) 27 10 68 (6) (7) (8) 25 10 ( ) (1) (2) (3) ) city.yokohama.lg.jp city.yokohama.jp WEB WEB WEB WEB WEB WEB 1 25 10 WEB WEB (1) (2) (3) (4) 25 10 (1) WEB (2)

More information

Microsoft Word - Authoring Tool の利用ver2.docx

Microsoft Word - Authoring Tool の利用ver2.docx 1 Authoring Tool の 利 2013/10/04 初 めに Authoring Tool は, 四 つのタブと 仕 上 がりイメージを 表 するパネルで 構 成 されています 以 下, 下 記 の 順 で 説 明 を 書 いてみます (a) 各 タブの 概 説 (b) コンテンツ 作 成 のチュートリアル (c) 数 式 以 外 の 評 価 法 (d) 詳 細 Authoring Tool

More information