Contents HTML5 概要 Lesson1: HTML5とは Lesson2: 以前の HTML からの変更点 5 HTML5基本の書き方 5 HTML5DOCTYPE 宣言 6 HTML 要素と文字のエンコーディング 6 ブラウザへ新要素への対応 7 HTML5 が対応していない IE な

Size: px
Start display at page:

Download "Contents HTML5 概要 Lesson1: HTML5とは Lesson2: 以前の HTML からの変更点 5 HTML5基本の書き方 5 HTML5DOCTYPE 宣言 6 HTML 要素と文字のエンコーディング 6 ブラウザへ新要素への対応 7 HTML5 が対応していない IE な"

Transcription

1

2 Contents HTML5 概要 Lesson1: HTML5とは Lesson2: 以前の HTML からの変更点 5 HTML5基本の書き方 5 HTML5DOCTYPE 宣言 6 HTML 要素と文字のエンコーディング 6 ブラウザへ新要素への対応 7 HTML5 が対応していない IE など HTML5に対応するリセット CSS の導入 7 HTML5基本の書き方まとめ 7 Lesson3: HTML5 新要素 9 HTML5新しいコンテンツ要素 9 HTML5で廃止された要素 11 HTML5 のマークアップチェックポイント 11 1

3 Lesson4: ページのアウトラインを 考 える 12 アウトラインの 確 認 13 Lesson5: 新 しい 要 素 を 使 ってみる(レイアウト 編 ) 14 header 要 素 14 hgroup 要 素 16 nav 要 素 20 article 要 素 22 section 要 素 24 aside 要 素 26 form の 新 しい 属 性 29 Lesson6: 新 しい 要 素 を 使 ってみる( 機 能 動 的 要 素 編 )4 video 要 素 40 audio 要 素 43 canvas 要 素 44 canvas 要 素 を 使 って 図 形 を 描 く 45 Lesson7: CSS と CSS3 52 拡 張 子 の 種 類 52 2

4 Lesson8: HTML5 新 しいタグと CSS3 の 連 携 54 Lesson9: CSS3 新 しい 機 能 を 使 ってみる 56 角 丸 (border-radius) 56 画 像 枠 (border-image) 57 変 形 (transform) 58 変 形 (background-clip) 59 背 景 画 像 のサイズ(background-size) 60 背 景 や 文 字 の 透 過 (opacity) 61 枠 にシャドーを 掛 ける(box-shadow) 61 文 字 にシャドーを 掛 ける(text-shadow) 62 Lesson10: CSS3 と HTML5でアニメーション 63 アニメーションとは 63 Transition の 内 容 63 サンプル 記 述 例 ( 角 丸 アニメーション) 64 サンプル 2 応 用 (ローテーションの 回 転 ) 66 サンプル3 応 用 (テキストシャドウと 傾 斜 ) 67 Animation の 内 容 68 サンプル 記 述 例 (DIV の 枠 が 拡 大 する) 68 3

5 サンプル 2 応 用 ( 文 字 が 1 文 字 づつ 表 示 ) 71 演 習 1:HTML5 CSS3 JS(canvas で 描 画 ページを 作 る)72 Lesson11: API の 基 礎 77 演 習 2:API の 実 装 (Google map API を 実 装 する) 78 Lesson12: HTML5 終 わりに 83 4

6 Lesson1: HTML5とは 現在 2014 年までの正式勧告を目指して策定が行われている HTML 言語の改訂版 改訂の主要目的のひとつとして人間にも 読解可能でコンピューターやディバイス ウェブブラウザ 構文解析器など にも矛盾せず理解されるとともに最新の マルチメディアをサポートする言語に向上することである HTML5 で作成されたサイトは 昨年末辺りから 現在までかなり増えてきています グーグルの特設サイトや海外のサイトなどで かなり難しい内容をテストしていて HTML5 は難しい と感じるかもしれません 確かにいきなり動的なサイトや API 関連をいきなりやるのはかなり大変です それより現状は ほとんどの人ですぐ必要になる通常のページをどうマークアップするかが大切で 既存のhtml Xhtml をどのように 変更 更新するかだとおもいます 構造の考え方が全く変わりましたが マークアップだけでしたら XHTML と HTML5 はいままで xhtml で マークアップしていた人にとっては簡単に乗り換えられるとおもいます Lesson2:以前の HTML からの変更点 HTML5 の基本の書き方 XHTML から5への移行は徐々に行われており 各ブラウザーも順次環境を整えている状況です そんな中で 大きな違いは 多くの新しいタグが加わり タグの記述が変わってくることです 構造面では 今までの xhtml ではブロックレベル要素とインライン要素という分類に分けていましたが HTML5 ではそれは無くなり 代わりに コンテンツ モデル という メタデータ フロー セクシ ョン ヘッディング フレージング エンベッド インタラクティブというコンテンツの種類が定義さ れています これは レイアウト要素というより 内容に合わせて要素を変え SEO などの検索エンジンに配慮した ページ作成を目的にしていると考えるといいようです 基本的には XHTML HTML5 の移行は数個の新規タグと知識があればすぐに移行できるとおもいます そこで HTML5 の基本の記事から XHTML から HTML5 への移行の際のタグの違いをまとめて簡単な構成を作 成してみましょう 5

7 ただし 正 式 な 勧 告 がまだな 状 態 の HTML5 なので 現 段 階 ( )での 考 えたマークアップなので 書 き 方 や 内 容 に 変 更 などが 出 る 可 能 性 があることはご 承 知 願 います XHTML1.0 と HTML5 の 基 本 の HTML の 違 いを 覚 えましょう HTML5 と XHTML の DOCTYPE 宣 言 XHTML1.0 と 比 べて HTML5 では 非 常 にシンプルになっていて これで 標 準 モードでレンダリングされ HTML5 に 準 拠 したページになります HTML 要 素 と 文 字 のエンコーディング XHTML1.0 では html 要 素 に xmlns 属 性 が 必 要 でしたが HTML5 では lang 属 性 を 記 述 して 言 語 を 指 定 しています 続 いてエンコーディングの 指 定 方 法 ですが HTML5 でもエンコーディング 指 定 をするのは 変 わりませんが 短 くなりました HTML5 が 対 応 していない IE などブラウザへ 新 要 素 への 対 応 IE6 から IE8 は HTML5 の 新 要 素 に 対 応 していないのでスタイルシートを 適 応 することができないようです 6

8 そこで JavaScript を 用 いて 新 たに 要 素 を 作 成 します document.createelement( 新 しい 要 素 ); を 使 い 指 定 するか すべての 新 しい 要 素 分 を 作 成 するのは 大 変 なので Remy Sharp 氏 が 公 開 した html5.js というライブラリをインポートすることで 一 部 は 解 決 することができるようです HTML5 に 対 応 したリセット CSS の 導 入 最 後 に HTML5 用 のリセット CSS を 読 み 込 みます こちらもいろいろリセット CSS が 公 開 されていますが ここでは Google の 提 供 するリセット CSS を 標 準 として html5doctor のリセット CSS を からダウンロードして 使 います 上 記 のリセットは 利 用 しているサイトも 多 く 数 バージョンがあります ここでは css を 利 用 してみましょう *リセット CSS とは ブラウザ 初 期 設 定 でのデザイン 表 示 の 違 いを 解 消 するために 各 ブラウザの 初 期 設 定 をクリアするための CSS になります HTML5 の 基 本 の 書 き 方 のまとめ HTML5 の 記 述 例 1 01 <!DOCTYPE html> 02 <html lang="ja"> 03 <head> 04 <meta charset="utf-8"> 05 <title>サイトのタイトル</title> 06 <link rel="stylesheet" type="text/css" href="css/html5reset.css" /> 07 <!--[if lt IE 9]> 08 <script src=" 09 <![endif]--> 10 </head> 11 <body> 12 7

9 13 //ここにサイトに 表 示 するコンテンツ 内 容 を 記 述 </body> 16 </html> XHTML1.0 の 記 述 例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 01 " 02 <html xmlns=" 03 <head> 04 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 05 <link rel="stylesheet" type="text/css" href="reset.css" /> 06 <title>サイトのタイトル</title> 07 </head> 08 <body> //ここにサイトに 表 示 するコンテンツ 内 容 を 記 述 </body> 13 </html> reset.css は 任 意 既 存 のコードをそのまま 使 用 する 場 合 は html5.js や html5reset.css を 使 う 必 要 はありません このように 上 の 4 行 を 変 えるだけで 一 応?HTML5 で 宣 言 されたコードになります 8

10 Lesson3: HTML5 新要素 現在の仕様において 完全に新しく導入されたコンテンツ要素は article 記事 を表すセクション要素 aside 補助的な情報を表すセクション要素 footer セクションのフッタ header セクションのヘッダ hgroup 見出し要素(h1 - h6) をまとめるための要素 nav ナビゲーションリンクを表すセクション要素 section 汎用的なセクション要素 figure キャプション付きのフロー要素 図表等の埋め込みが主な用途 source video/audio 内で使用され リソースの URL や MIME タイプの指定を行う video 動画埋め込みに使用する要素 audio 音声埋め込みに使用する要素 canvas JavaScript で操作可能なグラフィック要素 output 出力フォーム details ユーザが必要に応じて参照可能な詳細情報を表す要素 menu ツールバーや右クリック時などのメニューを表す要素 bb ブラウザの特殊な機能(Mozilla Prism のような Web アプリのスタンドアローン化など) を呼び出すコマンドボタン(Browser Button の略) command ユーザによって呼び出されるコマンドボタン menu とともに用いられる datagrid 2 次元のグリッド 9

11 datalist データのリストを 定 義 するための 不 可 視 の 要 素 option タグを 用 いて 個 々の データを 指 定 する dialog 対 話 形 式 のテキストを 表 す dt 要 素 と dd 要 素 を 用 いて 発 言 者 と 発 言 内 容 を 表 す progress プログレスバー meter メーター time 日 付 を 表 す 要 素 mark 他 の 部 分 から 参 照 されている という 意 味 合 いが 強 いテキストの 強 調 また s ruby/rt/rp(ルビ 要 素 )と embed(オブジェクトの 埋 め 込 み)は ブラウザ 固 有 の 実 装 が 進 んでいた 要 素 であるが 今 回 正 式 に 仕 様 の 一 部 となった 上 記 が 現 段 階 で 追 加 される 要 素 になっていますが 今 後 のテスト 状 況 で 利 用 方 法 や マークアップの 形 式 など 変 更 される 場 合 があります 汎 用 される 内 容 はこの 後 詳 しく 説 明 していきますので 今 はこのリストの 内 容 が 追 加 されるということと 簡 単 な 説 明 を 覚 えておくと 良 いと 思 います HTML 5 で 廃 止 された 要 素 以 下 の 要 素 は HTML 5 では 廃 止 されている acronym applet basefont bgsound big blink center dir font frame frameset isindex listing marquee nobr noembed noframes plaintext s spacer strike tt u wbr xmp 10

12 * 廃 止 になったからといって 今 まで 使 っていたタグが 急 に 見 れなくなったりする 訳 ではなく あくまでも 非 推 奨 という 内 容 が 多 い HTML5 のマークアップチェックポイント HTML では マークアップの 際 のタグで 閉 じタグを 必 要 とせず 省 略 できる 記 述 があります 空 要 素 とも 呼 ばれたりしていますが XHTML では 空 要 素 もタグの 最 後 に /> をつけて 閉 じることが 推 奨 されました HTML5では 終 了 タグを 必 要 としていたものでも 省 略 できたり 完 全 に 開 始 タグから 省 略 できるものも 存 在 します 基 本 の 考 え 方 は 1) 閉 じタグを 書 いてはいけない 要 素 2) 閉 じタグを 省 略 できる 要 素 3) 完 全 にタグを 省 略 できる 要 素 に 分 かれると 言 う 考 えでいいでしょう 1. 閉 じタグを 書 いてはいけない 要 素 area base br col command embed hr img input keygen link meta param source track wbr 2. 閉 じタグを 省 略 できる 要 素 li dt dd p rt rp optgroup option colgroup thead tbody tfoot tr td th 3. 完 全 にタグの 記 述 を 省 略 できる 要 素 html head body colgroup tbody 閉 じタグを 書 いてはいけない 要 素 は 特 別 にタグで 囲 まずに 空 要 素 の 閉 じタグ /> のみで 記 述 することが 可 能 です 例 えば <br></br> と 書 くのは 誤 りですが XHTML の 形 式 <br/> と 書 くのは 認 識 されています また HTML4 の <br> という 書 き 方 も 可 能 です 完 全 に 記 述 を 省 略 できる 要 素 は 省 略 したとしても 要 素 は 存 在 することをちゃんと 理 解 してください 例 えば <body> タグは 省 略 できますが データー 上 は 存 在 しますので document.body には 常 にアクセスできます ただし html や head body などは マークアップ 上 省 略 しない 方 がソースのメリハリも 付 くので 良 いと 思 います 11

13 Lesson4: ページのアウトラインを 考 える HTML5 のコーディングを 考 えるとき Section という 要 素 の 使 い 方 と それを 利 用 した アウトライン 構 造 が 重 要 視 されているように 思 います レイアウト 上 の 問 題 だけでなく 新 しい HTML5 での コンテンツモデルという 表 現 上 の 考 え 方 でも 必 要 な 知 識 だと 思 います 例 : アウトラインとは: 今 までの HTML では DIV を 使 って 入 れ 子 にしたり h1~6の タグを 使 い 分 けて 構 造 上 ではなく 表 現 とタグを 使 った 形 式 上 のアウトラインになっている という 感 覚 だったと 思 います これが HTML5 の 中 では レイアウトにも それぞれの 枠 に 意 味 合 いができ 記 述 する 内 容 によって 利 用 する 要 素 が 変 わってきます その 中 でも Section 要 素 は ページのアウトラインを 作 る 上 で 必 要 な 要 素 になります 簡 単 にいえば 本 と 同 じで まずタイトルがあり 目 次 があり 内 容 がある そうした 流 れを HTML の 中 で 作 成 する 意 識 です XHTML1.0 の 場 合 XHTML では 見 出 しの 要 素 がそのままアウトラインの 意 識 に 変 わります しかしこの 場 合 表 示 の 大 きさなどの 変 更 で 使 われる 内 容 もアウトラインと 取 られてしまいます 1 <h1>html5 の 学 習 </h1> 2 <h2>html5 で 作 るアウトライン</h2> 3 <p>html5 でアウトラインを 考 えると ページを 色 々 見 やすくできます </p> 4 <h3>html5 のアウトライン 概 要 </h3> 5 <p>html5 では 内 容 を 決 める 色 々な 要 素 があります <br> 6 その 中 でも SECTION 要 素 は アウトラインを 作 る 大 切 な 要 素 です</p> 7 <h4>section 要 素 </h4>> 8 <p>section は ページの 中 の 内 容 を 項 目 ごとに 仕 分 けし <br> 9 表 示 させるために 重 要 な 役 割 を 持 ちます </p> HTML5 の 場 合 01 <h1>html5 の 学 習 </h1> 02 <section> 03 <h2>html5 で 作 るアウトライン</h2> 04 <p> HTML5 でアウトラインを 考 えると ページを 色 々 見 やすくできます </p> 05 <section> 06 <h3>html5 のアウトライン 概 要 </h3> 12

14 07 <p>html5 では 内 容 を 決 める 色 々な 要 素 があります <br> 08 その 中 でも SECTION 要 素 は アウトラインを 作 る 大 切 な 要 素 です</p> 09 <section> 10 <h4>section 要 素 </h4>> 11 <p>section は ページの 中 の 内 容 を 項 目 ごとに 仕 分 けし <br> 表 示 させるために 重 要 な 役 割 を 持 ちます </p> 14 </section><! h4 見 出 しの Section 終 了 --> 15 </section><! h3 見 出 しの Section 終 了 --> 16 </section> <! h2 見 出 しの Section 終 了 --> HTML5では Section を 入 れ 子 にすることで どの 内 容 の 部 分 が 一 番 大 枠 になるのかを しっかり 理 解 させることができます また 見 出 しの 要 素 h を 入 れることで セクショニングタグの タイトルとして 意 識 することも 出 来 ます また h 要 素 を header タグで 囲 むことも 出 来 ます *セクショニングタグとは 記 事 や 内 容 の 記 述 を 定 義 するタグで 種 別 する 記 述 で おもに article,section,nav,aside 等 で 見 出 しやフッターの 範 囲 を 指 定 すると 捉 えてもいいでしょう アウトラインの 確 認 上 記 内 容 のソースを にある HTML 5 Outliner を 使 い 実 際 に 確 認 してみたいと 思 います どちらの 結 果 も 下 記 のようになります しかし 最 初 の XHTML の 場 合 は hの 見 出 しタグの 大 きさ( 数 字 )に よって 識 別 されているだけで 入 れ 子 (ネスティング)という 意 識 ではありません 13

15 Lesson5: 新 しい 要 素 を 使 ってみる(レイアウト 編 ) header 要 素 の 特 徴 header 要 素 は ページやセクションのヘッダーを 表 す 場 合 に 使 用 しますが 利 用 の 要 点 をまとめると: header 要 素 はページ 内 に 複 数 使 うことができます header 要 素 は 見 出 し 要 素 を 含 むことを 想 定 していますが 無 い 場 合 でも 間 違 えではありません header 要 素 はセクショニング コンテンツではないため アウトラインに 現 れることはありません header 要 素 内 に header 要 素 footer 要 素 を 使 うことはできません header 要 素 は 通 常 ページ 目 次 サイトロゴ 検 索 フォーム などを 入 れて 使 用 します header 要 素 のマークアップ 方 法 XHTML1.0 や HTML4 でのコーディングでは ページのヘッダーを 表 す 場 合 に div 要 素 に id 名 を header と 付 けてコーディングしていました header 要 素 を 簡 単 に 言 ってしまえば これに 変 わる 要 素 として 単 一 のタグとして 使 用 することができ ヘッダーとしての 意 味 をより 強 めることができます また header 要 素 の 特 徴 の 1 つでセクションのヘッダーとしてページ 内 に 複 数 使 用 することができます 例 えば 下 のページを 参 考 にしてみましょう header 要 素 を 複 数 使 った 例 01 <header> 02 <hgroup> 03 <h1>html5 の 学 習 </h1> 04 <h2>html5 の Header 要 素 </h2> 05 </hgroup> 06 <nav> 07 <ul> 08 <li>home</li> 09 <li><a href="#">tutorial</a></li> 10 <li><a href="#">question</a></li> 11 </ul> 12 </nav> 13 </header> 14 <article> 15 <section> 16 <header> 14

16 17 <h1> header 要 素 / HTML5 新 しい 要 素 </h1> 18 <p>ページや Section のヘッダーを 書 き 込 むエリアの 要 素 </p> 19 </header> 20 <article> 21 <h2>header 要 素 の 利 用 </h2> 22 <p>css を 使 ったりして 看 板 やヘッダーを 表 示 させます </p> 23 </article> 24 </section> 25 </article> 上 記 の 中 の 1~12 行 目 に 書 かれている header 要 素 はページのヘッダー( 見 出 し)を 表 し 14~17 行 目 の header 要 素 は 記 事 のヘッダー( 見 出 し)を 表 しています このように 各 セクションのヘッダー( 見 出 し)を 表 すために header 要 素 を 使 うことができます header 要 素 のアウトライン header 要 素 はセクショニング コンテンツではないので アウトラインには 現 れません ただし hの 要 素 を 入 れるとアウトラインとして 認 識 されます header 要 素 のアウトラインを 確 認 01 <header> 02 <h1>html5 の 学 習 </h1> 03 <p>html5 header 要 素 </p> 04 </header> 05 <section> 06 <h1> header 要 素 / HTML5 新 しい 要 素 </h1> 07 <article> 08 <h2>header 要 素 </h2> 09 <p>セクションのヘッダーを 表 す 場 合 に 使 用 します </p> 10 </article> 11 </section> 1. Untitled Section 1. header 要 素 / HTML5 新 要 素 一 覧 1. header 要 素 ( 上 記 と 同 列 のセクショニング 要 素 同 列 のセクションが 増 えると となる ) 15

17 header 要 素 だけでは セクショニング コンテンツとして 成 り 立 たず h1~6 の 要 素 や hgroup 等 の 見 出 しタグが 入 って 初 めて セクションとしてアウトライン 表 示 されます 上 記 アウトラインの1ヘッダー 要 素 は p の 段 落 しか 記 述 していないので 最 初 の 段 落 HTML5 の 学 習 部 分 を h1 のタグに 変 更 してみてください 下 記 のようになると 思 います 1. HTML5 の 学 習 1. header 要 素 / HTML5 新 要 素 一 覧 1. header 要 素 ( 上 記 と 同 列 のセクショニング 要 素 同 列 のセクションが 増 えると となる ) header 要 素 の 注 意 事 項 : 最 後 に header 要 素 の 中 に header 要 素 と footer 要 素 を 記 述 することはできません hgroup 要 素 セクションの 見 出 しを 表 し 見 出 し 要 素 の h1~h6 要 素 をグループ 化 します hgroup 要 素 の 特 徴 見 出 しと 関 連 する 小 見 出 しや 副 題 をグループ 化 して 使 用 する hgroup 要 素 ですが 使 用 時 に 注 意 しなければならないポイントがあります hgroup 要 素 内 には h1~h6 要 素 以 外 の 要 素 を 使 用 することができません hgroup 要 素 内 の 見 出 し 要 素 は レベルが 最 も 高 い 要 素 以 外 はアウトラインに 現 れません hgroup のマークアップ 方 法 サンプルソースを 書 きながら 確 認 していきたいと 思 います 間 違 ったマークアップの 例 01 <article> 02 <header> 03 <hgroup> 04 <h1>html5 の 学 習 </h1> 05 <p>html5 の Header 要 素 </p> 06 </hgroup> 16

18 07 <nav> 08 <ul> 09 <li>home</li> 10 <li><a href="#">tutorial</a></li> 11 <li><a href="#">question</a></li> 12 </ul> 13 </nav> 14 </header> 前 記 の 間 違 ったマークアップの 例 では hgroup 要 素 内 に p 要 素 が 存 在 しています hgroup 要 素 は h1~h6 要 素 以 外 の 要 素 を 入 れることができないので この 記 述 は 間 違 えになります 正 しいマークアップの 例 01 <article> 02 <header> 03 <hgroup> 04 <h1>html5 の 学 習 </h1> 05 <h2>html5 の Header 要 素 </h2> 06 </hgroup> 07 <nav> 08 <ul> 09 <li>home</li> 10 <li><a href="#">tutorial</a></li> 11 <li><a href="#">question</a></li> 12 </ul> 13 </nav> 14 </header> 正 しいマークアップの 例 では hgroup 要 素 内 に h1 h2 等 h の 見 出 し 要 素 のみ 存 在 しているので この 記 述 が 正 しいことを 確 認 できます 次 に hgroup 要 素 のアウトラインですが h 系 の 要 素 がある 場 合 は hgroup で 囲 めばよいのかと 考 えがちですが しかし hgroup 内 の 見 出 し 要 素 は 最 もレベルが 高 い 見 出 しの 要 素 以 外 は アウトライン 表 示 から 除 外 されます また header 要 素 の 中 に 入 れて 利 用 することもありますが hgroup が header に 代 わる 場 合 もあります それでは hgroup 要 素 の 有 無 でアウトラインがどのように 変 化 するのかを 確 認 していきたいと 思 います 17

19 hgroup 要 素 を 使 用 しない 例 01 <section> 02 <h1>html5 でサイトをつくろう</h1> 03 <section> 04 <h2>html5 と Wordpress の 情 報 ブログ</h2> 05 <p>html5 を 1 から 勉 強 し 始 めました </p> 06 <p>2014 年 の 勧 告 時 に 置 いていかれないように このブログで </p> 07 </section> 08 <section> 09 <h2> 当 ブログについて</h2> 10 <p>このブログは 学 習 した 内 容 をまとめて </p> 11 </section> 12 </section> 前 記 ソースのアウトライン 1.Untitled Section 1. HTML5 でサイトをつくろう 1. HTML5 と Wordpress の 情 報 ブログ 2. 当 ブログについて ページのテーマである h1 要 素 HTML5 でサイトをつくろう の 副 題 として 利 用 したい h2 要 素 HTML5 と Wordpress の 情 報 ブログ を hgroup 要 素 でグループ 化 しない 場 合 副 題 の h2 要 素 HTML5 と Wordpress の 情 報 ブログ は 同 じ h2 要 素 当 ブログについて と 同 一 レベルで 認 識 されます 続 いて hgroup 要 素 を 使 い h1 要 素 HTML5 でサイトをつくろう と h2 要 素 HTML5 と Wordpress の 情 報 ブログ をグループ 化 した 場 合 について 考 えてみます 18

20 hgroup 要 素 の 使 用 例 01 <section> 02 <hgroup> 03 <h1>html5 でサイトをつくろう</h1> 04 <h2>html5 と Wordpress の 情 報 ブログ</h2> 05 </hgroup> <p>html5 を 1 から 勉 強 し 始 めました </p> 08 <p>2014 年 の 勧 告 時 に 置 いていかれないように このブログで </p> <section> 11 <h2> 当 ブログについて</h2> 12 <p>このブログは 学 習 した 内 容 をまとめて </p> 13 </section> 14 </section> 上 記 ソースのアウトライン 1.Untitled Section 1. HTML5 でサイトをつくろう 1. 当 ブログについて hgroup 要 素 を 使 用 した 今 回 のソースでは 副 題 であった h2 要 素 HTML5 と Wordpress の 情 報 ブログ がアウトラインに 表 示 されず h1 要 素 HTML5 でサイトをつくろう のみが 採 用 されています このことから hgroup 要 素 内 では 最 も 見 出 しレベルが 高 い 要 素 が 採 用 され それ 以 外 はアウトラインから 除 外 されている ことが 確 認 できます hgroup 要 素 に 関 しては 以 上 になります 19

21 nav 要 素 ページ 内 などのグローバルナビボタンなどのナビゲーションリンクを 伴 うセクションのこと nav 要 素 の 特 徴 nav 要 素 は サイトやページの 主 要 なナビゲーションに 使 用 しなければなりません すべてのリンクグループに nav 要 素 を 使 ってはいけません 例 えば nav 要 素 はサイトにとって 主 要 ナビゲーションであるグローバルナビゲーション 等 に 使 います ページフッター 内 に 設 置 されているナビゲーション 等 には nav 要 素 を 使 わずに footer 要 素 で 対 応 します この 先 には 何 があるのか サイト 内 のページ 構 成 や 進 む 方 向 を 示 す 有 効 な 表 示 を 作 ることで クライアントの 使 い 勝 手 をより 快 適 にする 意 図 があります nav 要 素 のマークアップ 基 本 5 つのメニュー ホーム, ニュース, 商 品 一 覧, 会 社 案 内, お 問 い 合 わせ のグローバルナビを 例 に nav 要 素 の 使 用 方 法 を 確 認 したいと 思 います 1 <nav> 2 <ul> 3 <li><a href="#">ホーム</a></li> 4 <li><a href="#">ニュース</a></li> 5 <li><a href="#"> 商 品 一 覧 </a></li> 6 <li><a href="#"> 会 社 案 内 </a></li> 7 <li><a href="#">お 問 い 合 わせ</a></li> 8 </ul> 9 </nav> 従 来 どおり ul 要 素 で 各 ページへのリンクナビゲーションをマークアップし それを nav 要 素 で 囲 むことで 上 記 のリンクの 集 まりが 主 要 なナビゲーションであることを 表 すことができます nav 要 素 はセクショニング コンテンツに 属 していますので 新 たなセクションを 作 りますが デフォルトで Navigation 等 (UA によって 異 なる)の 見 出 しを 持 っているので 得 に 見 出 しをつける 必 要 は 無 いようです *UA(User Agent)ここでは ブラウザなどユーザーの 為 に WEB ページを 表 示 させるプログラム (アプリケーション)のこと 他 にもプロトコル 別 のアプリケーションをさすこともある 20

22 nav 要 素 のマークアップ 応 用 ( 複 数 のナビゲーション) ブログサイトのようにサイドエリアに 複 数 のナビゲーション リンクがある 場 合 は それぞれの ナビゲーション リンクをそれぞれ nav 要 素 でマークアップしてグループ 分 けするより 全 体 を 1 つの nav 要 素 でマークアップして section 要 素 などで 仕 分 けするほうがページ 内 の 整 理 がつきやすく SEO 上 の 対 応 にも 良 いと 思 われます 下 記 の 例 では 中 のグループを section 要 素 でマークアップし 階 層 化 してみました nav 要 素 の 中 に SECTION で 用 途 を 分 けた 2 種 類 のリンクメニューを 囲 んだ 場 合 の 例 01 <nav> 02 <section> 03 <h2>カテゴリー 一 覧 </h2> 04 <ul> 05 <li><a href="#">html5 基 礎 </a></li> 06 <li><a href="#">html5 新 要 素 一 覧 </a></li> 07 <li><a href="#">html5 記 述 練 習 </a></li> 08 <li><a href="#">css3 の 基 本 </a></li> 09 <li><a href="#">jqeury の 基 本 </a></li> 10 <li><a href="#">wordpress</a></li> 11 </ul> 12 </section> 13 <section> 14 <h2>リンク 一 覧 </h2> 15 <ul> 16 <li><a href="#">html5 関 連 </a></li> 17 <li><a href="#">css</a></li> 18 <li><a href="#">javascript</a></li> 19 <li><a href="#">wordpress</a></li> 20 <li><a href="#">wordpress プラグイン</a></li> 21 <li><a href="#">cg</a></li> 22 </ul> 23 </section> 24 </nav> 21

23 article 要 素 独 立 したコンテンツ( 読 み 物 記 事 など)として 成 り 立 つ 自 己 完 結 したものを 表 現 する 枠 article 要 素 を 使 ってみる サイトのニュースや 情 報 とは 具 体 的 になんでしょう 例 えば 商 店 なら 新 作 が 入 荷 しました! イベント 関 係 なら サイン 会 コンサート ダンスイベント 等 の 開 催 情 報 になるかと 思 います では 架 空 のカフェの 広 告 記 事 データーを 使 って サンプルを 記 述 してみます 01<article> 02 <h1>café Torino</h1> 03 <p> 当 店 オリジナルブレンドコーヒーに 04 ブルーマウンテンとコナエメラルド<br /> 05 が 期 間 限 定 でラインアップします </p> <section> 08 <h2>3つの 高 級 豆 を 使 ったニューブレンド 5 月 31 日 まで</h2> 09 <dl> 10 <dt>マウンテンブレンド:ブルーマウンテンブレンド</dt> 11 <dd>special Price: 360 円 </dd> 12 <dt>オーシャンブレンド:コナブレンド</dt> 13 <dd>special Price: 360 円 </dd> 14 <dt>スペシャル:コナコーヒー エメラルド</dt> 15 <dd>special Price: 480 円 </dd> 16 </dl> 17 </section> 18</article> 架 空 店 舗 の 新 サービス(Cafe Torino)を article 要 素 で 記 述 してみました この 部 分 はタイトルと 内 容 があり 一 つの 記 事 として 成 り 立 っているので RSS 配 信 しても 問 題 ないので 正 しい 記 述 といえるでしょう article 要 素 の 中 に article 要 素 が 入 る 場 合 ( 入 れ 子 にする) 22

24 article 要 素 の 中 に article 要 素 を 入 れた 場 合 は 外 側 の article 要 素 に 直 接 関 連 した 記 事 でないといけません 例 えば ブログのコメントなどがこれにあたると 考 えられているようです 01 <article> 02 <section> 03 <header> 04 <h1> article 要 素 / HTML5 新 要 素 一 覧 </h1> 05 </header> 06 <p>ここでは 新 要 素 を 組 み 合 わせて article を 入 れ 子 にします </p> 07 <section> 08 <h2>article 要 素 とは</h2> 09 <p> 独 立 したコンテンツです </p> 10 </section> 11 <footer>html5 Study Memo</footer> 12 </section> 13 <section> 14 <h2>コメント</h2> 15 <article> 16 <header> 17 <h3>a さんのコメント</h3> 18 </header> 19 <p> 一 つ 目 の 投 稿 : 文 章 をここに </p> 20 </article> 21 <article> 22 <header> 23 <h3>b さんのコメント</h3> 24 </header> 25 <p> 二 つ 目 の 投 稿 : 文 章 をここに </p> 26 </article> 27 </section> 26 </article> 27 外 側 の article 要 素 で 関 連 を 持 つ(この 場 合 投 稿 記 事 )をまとめて A と B さんのコメントをそれぞれ article 要 素 で 囲 っています ブログのコメントは RSS 等 フィードの 対 象 にもなることから article 要 素 の 中 に article 要 素 を 使 用 することが 可 能 となります この 要 素 は コーディングする 本 人 が 文 章 や 文 字 列 をどう 考 えるかで 変 わってくると 思 います 記 述 内 容 を 一 部 の 文 章 と 考 えるのか 記 述 部 分 が 単 独 で 成 り 立 つ 情 報 と 考 えるのかということです それぞれの 価 値 観 なので 決 してどちらが 正 解 というわけではありません 23

25 section 要 素 文 章 や スクリプトの 構 造 をまとめ ひとつのコンテンツ( 文 章 または アプリケーション)を 構 成 する 要 素 section 要 素 の 特 徴 章 や 節 といった 単 位 で 扱 うので セクション 内 容 を 表 す h1~h6 の 見 出 しが 基 本 伴 います コンテナ 要 素 ではありませんので レイアウト 目 的 に 使 用 することは 進 められていません スタイリング レイアウトに 使 う 要 素 が 必 要 になった 場 合 は div 要 素 が 推 奨 されています section 要 素 内 の 見 出 しについて 間 違 ったマークアップの 例 01 <section> 02 <h1>html5 でサイトをつくろう</h1> 03 <p>このサイトの 目 的 は </p> 04 <section> 05 <p>html5 の 新 要 素 について</p> 06 <p> 新 たに 追 加 された 要 素 には </p> 07 <section> 08 <p>section 要 素 とは<br /> 09 <span> 一 般 的 なセクションを 表 します </span></p> 10 </section> 11 </section> 12 </section> 間 違 ったマークアップ 例 では 最 初 のセクションに h1 の 見 出 しがありますが その 後 のセクションには 見 出 し 要 素 がなく p 要 素 や span 要 素 のみでマークアップされてしまっています 24

26 正 しいマークアップの 例 01 <section> 02 <h1>html5 でサイトをつくろう</h1> 03 <p>このサイトの 目 的 は </p> 04 <section> 05 <h2>html5 の 新 要 素 について</h2> 06 <p> 新 たに 追 加 された 要 素 には </p> 07 <section> 08 <h3>section 要 素 とは</h3> 09 <p> 一 般 的 なセクションを 表 します </p> 10 </section> 11 </section> 12 </section> 上 記 ソース 2 つの 違 いは 各 セクションごとに h1~h6 の 見 出 し 要 素 があるかどうかです 正 しいマークアップ 例 の 方 は 各 セクション 毎 に 見 出 し 要 素 があることで 記 事 の 内 容 に きちんと 章 や 節 を 表 せています section 要 素 と div 要 素 の 用 途 別 理 解 HTML5 では Section 要 素 を DIV の 代 わりに 使 ってレイアウトをするという 理 解 をしている 人 もいますが 実 際 には 中 に 書 かれている 内 容 によって 実 際 は 決 めるものであり レイアウトで 利 用 はしません 例 えば 2カラムのレイアウトがあって 横 に 並 べるような 場 合 下 記 のように 記 述 するのは 間 違 いです 25

27 コンテンツの 内 容 によってはありえるかもしれませんが 横 並 びにして 見 せる 意 識 がレイアウトと 考 えるほうが 自 然 なので この 場 合 は 2 カラムレイアウトに div 要 素 に float:left をそれぞれかけて この 後 に section 要 素 article 要 素 などコンテンツに 合 った 要 素 を 使 用 してレイアウトするのが SEO の 対 応 上 も 正 しい 記 述 といえるでしょう 下 記 の 例 が 上 記 の 内 容 を 書 き 換 えたものになります 状 況 に 合 わせて これを Wrapper や Container などで 纏 めると 良 いでしょう <div> <section> div に float:left; を CSS で 設 定 し section の 中 に 内 容 を 書 き 込 む </section> </div> <div> <section> div に float:left; を CSS で 設 定 し section の 中 に 内 容 を 書 き 込 む </section> </div> HTML5 では レイアウトの 新 要 素 に section や article 等 の 要 素 を 使 う 訳 ではなく 従 来 通 りの DIV レイアウトに コンテンツを 記 述 する 際 にその 内 容 に 合 わせたセクショニングタグの 利 用 が 必 要 になると 考 えるべきで ここまで 学 習 した article section aside nav 等 大 きく 分 けて 4 要 素 がそれに 値 し その 中 で header footer 等 の 指 定 をしていく 考 えがわかりやすいでしょう aside 要 素 メインコンテンツとは 関 連 性 が 薄 く 補 足 的 なコンテンツや 広 告 などの 表 示 に 使 います aside 要 素 の 特 徴 aside 要 素 は メインコンテンツとは 関 連 性 の 低 い 補 足 記 事 サイドバー 広 告 ブログロール などに 使 用 しますが メインコンテンツの 中 で 使 う 場 合 と 外 で 使 う 場 合 で 意 味 が 変 わってくるので 注 意 する 必 要 があります 例 えば メインコンテンツの 中 で 使 う 場 合 はメインコンテンツに 何 かしら 関 連 がなくてはなりません 逆 にメインコンテンツの 外 で 使 う 場 合 はサイトや ページ 全 体 に 関 連 性 があることを 示 します また aside 要 素 はセクショニング コンテンツの1つになります nav 要 素 のグループ 化 や 広 告 要 素 の 表 示 エリアだったりします しかし 他 のセクショニングコンテンツと 違 い 見 出 しが 26

28 無 い 場 合 でもデフォルトで Sidebar 等 の 見 出 しを 持 っているので 無 理 に 見 出 しをつける 必 要 は 無 いようです(UA によって 異 なる) aside 要 素 をメインコンテンツの 中 で 使 用 01 <article> 02 <h1>html5 の 学 習 </h1> 03 <section> 04 <h2> 新 しい 要 素 aside </h2> 05 <p>aside 要 素 は HTML5 の 新 要 素 の 一 つで 本 文 の 06 補 足 情 報 などメインコンテンツの 中 では 書 き 込 みます </p> 07 <aside> 08 <h3>html5 新 要 素 一 覧 </h3> 09 <p> article section </p> 10 </aside> 11 </section> 12 </article> 上 記 は ブログ 記 事 の 補 足 情 報 を aside 要 素 でマークアップした 例 です 上 記 補 足 情 報 を aside 要 素 でマークアップしても 問 題 ないかを 確 認 していきます まず 記 事 内 で 出 てきた HTML5 新 要 素 という 単 語 の 補 足 説 明 を 行 っているので 記 事 との 関 連 性 があることがわかります 次 に aside 要 素 内 の 文 章 を 切 り 離 した 場 合 記 事 内 容 は aside 要 素 についての 説 明 なので HTML5 新 要 素 一 覧 の 補 足 情 報 が 無 くても 成 り 立 ちます 記 事 に 関 連 性 が 有 る 文 章 でその 補 足 部 分 だけ 切 り 離 した 場 合 でもその 記 事 が 成 り 立 っていることから 補 足 記 事 を aside 要 素 でマークアップしても 問 題 ないと 判 断 できます aside 要 素 をメインコンテンツの 外 で 使 用 サイドバーエリアにあるバナー 広 告 を aside 要 素 でマークアップした 例 を 考 えてみます 1 <aside> 2 <ul> 3 <li><img src="./banner01.gif" alt="html5 関 連 の 広 告 01 です " /></li> 4 <li><img src="./banner02.gif" alt="html5 関 連 の 広 告 02 です " /></li> 5 <li><img src="./banner03.gif" alt="html5 関 連 の 広 告 03 です " /></li> 6 </ul> 7 </aside> 27

29 上 の 画 像 はサイトの 大 まかなレイアウトを 表 し 広 告 エリア のソースをその 下 に 記 述 しました 広 告 エリア 内 のバナー 画 像 を aside 要 素 でマークアップした 例 です 広 告 などの 情 報 が メインコンテンツ 外 側 で aside 要 素 を 使 用 しマークアップできるかを 確 認 したいと 思 いま す 通 常 バナー 広 告 はメインコンテンツに 直 接 的 に 関 わらないので メインコンテンツ 内 に aside 要 素 を 使 用 し てのマークアップには 適 していません そこで 今 回 のサンプルでは コンテンツエリアの 外 側 上 の 画 像 のよ うにサイドバーエリアに 出 してマークアップしています バナー 広 告 はページから 切 り 離 してもページに 問 題 が 起 こるとは 考 えにくいのでメインコンテンツから 切 り 離 すことができる 要 素 だとすぐにわかります また 広 告 は 間 接 的 にサイトやページに 関 連 していることから 上 記 のバナー 広 告 はメインコンテンツの 外 側 で aside 要 素 でマークアップしても 問 題 ないことが 分 かります 28

30 Form の新しい属性 search <input type="search" name= search /> type 属性の値に search を指定すると 検索ボックスになります 検索ボックスの機能は type="text"のテキストボックスと変わりませんが Mac 版 Chrome や Safari など一部のブラウザーでは角丸の入力フォームに変化します iphone では ソフトウェアキーボードの右下のボタンが 検索 に変化します tel <input type="tel" name="tel" /> type 属性の値に tel を指定すると 電話番号の入力欄になります 見た目は通常のテキストボックスと変わらず 入力内容が電話番号のみに制限されてもいません 正規の電話番号表現はハイフンを入れたりカッコが入ったりして決めかねている結果です iphone ではソフトウェアキーボードがテンキーに変わるので 番号を入力しやすくなります url <input type="url" name="url" /> url を指定すると URL の入力欄になります IE/Safari 等以外のブラウザでは url 以外の内容を入力して 送信しようとするとエラーが表示されます iphone ではソフトウェアキーボードに.com や / などのキーが表示されるので便利です 29

31 <input type=" " name=" " /> を 指 定 すると メールアドレスの 入 力 欄 になります IE/Safari 等 以 外 のブラウザではメールアドレス 以 外 の 内 容 を 入 力 して 送 信 しようとするとエラーが 表 示 されます iphone マークが 表 示 されるので 便 利 です multiple 属 性 を 記 述 すると 複 数 のメールアドレスをカンマ 区 切 りで 入 力 できるようになります <input type=" " name=" " multiple="multiple" /> datetime <input type="datetime" name="datetime" /> datetime を 指 定 すると グローバル 日 時 (UTC: 協 定 世 界 時 で 記 述 した 日 時 )の 入 力 欄 になりま す 対 応 しているブラウザーでは 年 月 日 と 時 分 を 入 力 するコントロールが 表 示 されます たとえば Opera では 年 月 日 を 入 力 するカレンダーと 日 時 を 入 力 するステップアップ ダウンボタン 付 き 入 力 ボッ クスが 表 示 されます min 属 性 と max 属 性 を 使 うと ユーザーが 選 択 可 能 な 期 間 を 指 定 できます たとえば ショッピングサイトの 配 達 指 定 で 3 日 後 以 降 1 か 月 以 内 といった 制 限 を 付 けたい 場 合 に 利 用 できます <input type="datetime" name="datetime" min=" t00:00z" max=" t00:00z" /> 30

32 step 属 性 に 数 値 を 指 定 すると 時 分 の 入 力 の 刻 みを 指 定 できます 単 位 は 秒 で 60 で 1 分 刻 みになるので 5 分 刻 みにしたいときは 300 と 指 定 します <input type="datetime" name="datetime" min=" t00:00z" max=" t00:00z" step="300" /> 現 状 は 未 対 応 のブラウザが 多 くテキストエリアと 機 能 も 余 り 変 わらないので 早 期 対 応 が 熱 望 されているタグの 一 つです POINT datetime はタイムゾーンが UTC で 設 定 されているため 送 信 の 時 間 は 日 本 時 間 から 9 時 間 前 になり ます 日 本 時 間 を 扱 うときには この 後 の datetime-local が 適 しています date <input type="date" name="date" /> date を 指 定 すると 年 月 日 の 入 力 欄 になります 対 応 しているブラウザーでは 年 月 日 を 入 力 するコントロールが 表 示 されます Opera では datetime と 同 じ 形 のカレンダー 型 コントロールが 利 用 できます <input type="date" name="date" min=" " max=" " step="7" /> min 属 性 と max 属 性 で 期 間 を 指 定 できる 点 や step 属 性 で 刻 みを 指 定 できる 点 も datetime と 同 様 です step 属 性 の 値 の 単 位 は 日 で 1 を 指 定 すると 1 日 刻 みになります month <input type="month" name="month" /> month を 指 定 すると 年 月 の 入 力 欄 になり 対 応 しているブラウザーでは 年 月 を 入 力 するコント ロールが 表 示 されます Opera では datetime と 同 様 のカレンダー 型 のコントロールが 利 用 できます min 属 性 や max 属 性 step 属 性 を 指 定 できます min 属 性 と 値 が 12 の step 属 性 を 同 時 に 指 定 す ると min 属 性 で 指 定 した 月 のみを 選 択 できるようになります たとえば min=" " step="12"とすると 2012 年 4 月 2013 年 4 月 2014 年 4 月 といった 具 合 に 毎 年 4 月 の みが 選 択 できるようになります <input type="month" min=" " step="12" /> 31

33 week <input type="week" name="week" /> week を 指 定 すると 週 の 入 力 欄 になります 対 応 しているブラウザーでは 週 を 入 力 するコント ロールが 表 示 されます Opera では datetime などと 同 様 のカレンダー 型 のコントロールが 利 用 で きます week の 値 は 西 暦 と 週 の 組 み 合 わせで 構 成 されます たとえば 2012-W04 は 2012 年 の 4 週 目 2099-W34 は 2099 年 の 34 週 目 という 意 味 です min 属 性 や max 属 性 step 属 性 も 指 定 できます <input type="week" min="2012-w04" max="2099-w34" step="1" /> time <input type="time" name="time" /> time を 指 定 すると 時 分 秒 の 入 力 欄 になります 対 応 しているブラウザーでは 時 分 秒 を 入 力 する コントロールが 表 示 されます Opera では datetime と 同 様 のステップアップ ダウンボタン 付 き 入 力 ボックスが 利 用 できます 以 下 のように min 属 性 と max 属 性 も 指 定 できます <input type="time" name="time" min="00:00" max="15:00" /> デフォルトでは 時 間 と 分 のみの 入 力 できますが step 属 性 の 値 を 1 などにすることで 秒 も 入 力 できるようになります step 属 性 の 単 位 が 秒 であり 初 期 値 が 60 なので 59 以 下 の 値 にすれば 秒 刻 みで 入 力 できることになります <input type="time" name="time" min="00:00" max="15:00" step="1" /> さらに step 属 性 を 0.1 などにすると Opera ではミリ 秒 も 入 力 できるボックスになります <input type="time" name="time" min="00:00" max="15:00" step="0.01" /> datetime-local <input type="datetime-local" name="datetime-local" /> datetime-local は タイムゾーンを 持 たない datetime です min 属 性 /max 属 性 /step 属 性 の 扱 いも datetime と 同 様 です <input type="datetime-local" name="datetime-local" min=" t00:00" max=" t00:00" step="300" /> 32

34 number <input type="number" name="num" /> number を指定すると 数値の入力欄となります 対応しているブラウザーでは ステップアップ ダウンボタン付き入力ボックスのコントロールが表示され クリックする ことで数値を上下に変更できます min 属性 max 属性 step 属性を使用すると それぞれ最小値 最大値 数値の刻みを指定できま す <input type="number" name="num" min="5" max="100" step="5" /> min 属性 max 属性 step 属性それぞれの値を小数点以下にすることで 小数点以下の値も扱えるようになります <input type="number" name="num" step="0.1" /> <input type="number" name="num" max="0.09" step="0.01" /> <input type="number" name="num" min="0.05" step="0.05" /> step で小数点以下の値を指定していない場合 手動で小数点以下の値を入力するとエラーになります range <input type="range" name="range" /> range を指定すると 数値の入力欄になります 入力できる値が数値なのは number と同様で すが range の場合は 数値の正確性は重要ではない 指定できる数値は上限と下限の範囲が必須 値の未指定 空 はできない という点が違います 対応しているブラウザーでは number よりも シンプルなコントロールで表示されます Opera や Chrome では スライダーで表示されます 数値の範囲は min 属性と max 属性で指定しますが 値を省略した場合は 初期値である 0 と 100 が設定されます 33

35 入 力 値 の 初 期 値 は value 属 性 で 指 定 しますが value 属 性 もしくはその 値 を 省 略 した 場 合 は 初 期 値 である min 属 性 値 +(max 属 性 値 -min 属 性 値 ) 2 が 設 定 されます たとえば min 属 性 値 が 0 で max 属 性 値 が 100 の 場 合 0+(100-0) 2 で 50 となります ユーザーがスライダーを 操 作 せずに 送 信 した 場 合 値 は 空 ではなく value 属 性 に 指 定 した 初 期 値 が 送 信 されます step 属 性 を 使 うと 数 値 の 刻 みを 指 定 できます 省 略 した 場 合 は 初 期 値 である 1 が 設 定 されます <input type="range" name="range" value="20" min="0" max="100" step="5" /> 通 常 は 整 数 のみ 指 定 できますが min 属 性 /max 属 性 /step 属 性 の 値 を 小 数 点 以 下 にすることで 小 数 点 以 下 の 値 も 扱 えるようになります <input type="range" name="range" step="0.1" /> <input type="range" name="range" max="0.09" step="0.01" /> <input type="range" name="range" min="0.05" step="0.05" /> また 初 期 値 が 必 ず 設 定 されるので 入 力 を 必 須 とする required 属 性 は 指 定 できません color <input type="color" name="color" /> color を 指 定 すると 色 指 定 の 欄 になります 対 応 しているブラウザーでは 色 を 入 力 するコントロールが 表 示 されます color は range と 同 じく 値 を 空 にできません ユーザーが 何 も 選 択 せずに 送 信 ボタンを 押 した 場 合 初 期 値 である# が 送 信 されます そのため 入 力 を 必 須 とする required 属 性 も 指 定 できません 34

36 autocomplete <form action="#" method="post" autocomplete="off"> <input type="text" autocomplete="on" /> <input type="text" autocomplete="off" /> autocomplete 属 性 は その 名 の 通 りオートコンプリート 機 能 の 有 効 / 無 効 を 指 定 するものです 値 は on か off で 指 定 します autocomplete 属 性 は input 要 素 に 記 述 するとフォームパーツごとにオート コンプリートの 有 効 / 無 効 を 指 定 できます form 要 素 に 記 述 するとその 中 身 の フォームパーツをまとめて 指 定 できます input 要 素 の autocomplete 属 性 を 省 略 すると 親 要 素 である form 要 素 の autocomplete 属 性 が 適 用 されます form 要 素 の autocomplete 属 性 も 省 略 されている 場 合 は 初 期 値 である on が 適 用 さ れます そのため セキュリティ 上 の 理 由 などでオートコンプリートを 機 能 させたくない 場 合 は 明 示 的 に off を 指 定 する 必 要 があります dirname <dt>dirname 属 性 </dt> <input type="text" name="text" dirname="example.dir" /> dirname 属 性 は フォームパーツに 入 力 された 文 字 列 の 書 式 方 向 ( 左 から 右 に 書 く 文 字 列 か 右 か ら 左 に 書 くテキスト 化 )を 指 定 します 対 応 しているブラウザーでは サーバーに 送 信 する 値 に 書 式 方 向 を 示 すクエリを 追 加 します たとえば サーバーに 送 られる 値 が text=hello だった 場 合 dirname 属 性 の 値 に example.dir を 指 定 すると サーバーに 送 られる 値 は text=hello&example.dir=ltr となります 最 後 の ltr (Left to Roght)という 部 分 が 書 式 方 向 を 示 すクエリで 英 語 や 横 書 きの 日 本 語 のよ うな 左 から 右 を 表 しています アラビア 語 や 縦 書 きの 日 本 語 のような 右 から 左 に 記 述 する 書 式 の 場 合 は rtl となります 35

37 list <input type="search" name="q" placeholder="検索ワード" list="search_word_suggest" /> list 属性は フォームパーツをサジェスト候補と紐付けるために使用します サジェストを定義す る datalist 要素と組み合わせて使うので 詳しくは後述の datalist 要素の項目を参照してください コントロールはオートコンプリートと似ていますが list 属性は Web ページの制作者側があらかじ め候補を定義しておくものです required <input type="text" required="required" /> required 属性を指定すると その要素は入力が必須になります 空欄のまま送信すると 対応して いるブラウザーではエラーが表示されます required 属性は論理属性なので 値は省略するか 属性 名と同じ名前を記述します pattern <input type="text" pattern="( )-[0-9]{4-[0-9]{4" title="ハイフンも含めて携 帯電話番号を入力してください" /> pattern 属性には フォームパーツの値をチェックするための正規表現を指定します 正規表現とは 文字列のパターン 形式 を表現するための記述方法です たとえば 次のような パターンがあるとします 最初に 0 から 9 までの数字 次に a から z までのアルファベット さらに 0 から 9 までの数字 最後に A から Z までのアルファベット この場合 以下のような文字列がこのパターンにマッチします 0a9Z 3c8F 9g3U このパターンを正規表現で表すと 次のようになります [0-9][a-z][0-9][A-Z] もう少し具体的な例として 携帯電話の番号をパターン化してみます 36

38 最初に 070 か 080 か 090 次にハイフンを 1 つ 続いて 4 桁の任意の数字 さらにハイフンを 1 つ 最後に 4 桁の任意の数字 となります このパターンを正規表現で表すと 次のようになります ( )-[0-9]{4-[0-9]{4 このような 文字列のパターン 形式 を記述できるのが 正規表現です ポイント 正規表現の文法は プログラミング言語によって細かな違いがあります HTML5 で使われる正規表 現は JavaScript と同じものです 上記は単純な正規表現の説明ですが 実際には様々なバリエーションが使えます JavaScript の正規表現を探してみるといいでしょう 参考サイト HTML5 の pattern 属性では 属性値を正規表現で記述することで そのフォームパーツに 入力された値をチェックできます マッチしなければエラーが表示され 対応している ブラウザでは title 属性の値がヒントとして表示されます ただし title 属性の値には エラー用の説明を入れるのではなく あくまでそのフォーム パーツを説明する内容を記述しましょう title 属性の値は マウスオーバー時にツール チップとして表示されることもあり エラー専用の属性ではありません max,min <input type="datetime" name="datetime" min=" t00:00z" max=" t00:00z" /> <input type="number" name="num" min="5" max="100" /> max 属性と min 属性は フォームパーツに入力可能な最大値と最小値を指定します 値は フォ ームパーツのタイプに合わせた形式で記述します min 属性は 次に紹介する step 属性と組み合わせることで ステップベースを指定できます 37

39 step <input type="number" name="num" value="" step="5" /> <input type="time" name="time" value="" step="60" /> step 属 性 は 指 定 された 値 を ステップ ( 単 位 刻 み)として フォームパーツへの 入 力 を 許 可 し ます たとえば タイプが number の input 要 素 に 対 して step 属 性 の 値 を 5 とすると 入 力 可 能 な 値 は 0,5,10,15,20...のように 0 からスタートして 5 刻 みとなります step 属 性 は min 属 性 を 組 み 合 わせることで 入 力 可 能 な 最 小 値 である ステップベース を 指 定 できます <input type="number" name="num" value="" min="5" step="5" /> min 属 性 の 値 を 5 にすると ステップベースは 5 になります そのため 入 力 可 能 な 値 は 5,10,15,20... となり 0 は 含 まなくなります min 属 性 を 指 定 しない 場 合 は ステップベースにはそれぞれの 初 期 値 が 適 用 されます ステップに 入 力 可 能 な 数 を 越 えた 値 を 送 信 しようとすると 対 応 しているブラウザーではエラーが 表 示 されます placeholder <input type="search" name="q" placeholder=" 検 索 ワード" /> placeholder 属 性 は ユーザーの 助 けになるような 短 いヒントを 指 定 します 短 いヒントとは 単 語 フレーズのサンプルや 予 想 される 形 式 の 簡 単 な 説 明 のことです 仕 様 書 には 長 いヒントを 指 定 したい 場 合 には title 属 性 が 適 切 であると 書 かれています これまでは JavaScript を 使 って 実 装 するケースが 見 られましたが placeholder 属 性 に 対 応 してい るブラウザーでは placeholder 属 性 の 値 がフォームパーツのデフォルトテキストとして 表 示 され テキスト 入 力 を 開 始 するとデフォルトテキストは 消 えます autofocus <input type="search" name="q" autofocus="autofocus" /> autofocus 属 性 をフォームパーツに 指 定 すると ページが 表 示 された 瞬 間 にその 要 素 にフォーカス します autofocus 属 性 は 同 一 ページ 内 のフォームパーツに 1 つだけ 指 定 できます 38

40 ポイント オートフォーカスの仕組みは 現在でも検索サイトなどで見かけますが 必ずしも便利とは言えない 面があります たとえば 普段 スペースキーでページスクロール操作をしているユーザーの場合な ど ユーザーが期待した結果にならないことがあります form <form action="./" method="post" id="sampleform">... 省略... </form> <input type="submit" form="sampleform" /> フォームパーツに form 属性を指定し その値を form 要素の id 属性値と同じにすると 両者を関 連付けることができます これにより 対応しているブラウザーでは form 要素の外にフォームパ ーツを記述しても 正常に動作させることができます 39

41 Lesson6: 新しい要素を使ってみる 機能 動的要素編 メディア関連の要素 HTML5 のメディア 新要素とは 一般的に video 要素と audio 要素を指します video 要素 video 要素は Flash などのプラグインや Youtube などの iflame を使用することなく動画を ウェブ ページに表示することができます しかし 未だ IE8 までは 対応しておらず JS など補助的なデーターが必要になることから動画コンテンツはまだ Flash や 動画サイトの iflame を使ったものが多いようです Video の再生 video 要素をただ再生するには src 属性に再生する動画ファイルを指定するだけです 試しに src 属性に MP4 形式のファイルを指定しブラウザでの表示確認をしてみましょう 1 <video src= images/sample.mp4 controls></video> また controls 属性を指定することで再生 停止ボタンなどのインターフェースを 表示することができます 40

42 video 要 素 の 主 な 属 性 属 性 説 明 src poster 再 生 したい 動 画 ファイルへのパスを 指 定 します 動 画 が 再 生 可 能 になる 前 に 動 画 のサムネイルのように 表 示 しておく 画 像 ファイルを 用 意 し ておいて その 画 像 をタグの 中 で 指 定 します 動 画 ファイルの 読 み 込 みを 値 によって 制 御 します none の 時 は 動 画 の 再 生 時 まで 読 込 まない preload metadata の 時 は 動 画 ファイルのメタ 情 報 のみ 先 に 読 込 む auto 動 画 ファイルを 先 に 読 み 読 込 んで 自 動 再 生 これらの 指 定 は 今 のところ 完 全 に 制 御 されるものではなく UAによって 違 いがあるよう です また autoplay 属 性 が 指 定 されているときは 無 視 されます autoplay 動 画 ファイルが 再 生 可 能 になった 場 合 に 自 動 で 再 生 を 行 うかを 指 示 する 論 理 属 性 loop 再 生 が 終 了 後 に 再 び 最 初 から 再 生 するかを 指 示 する 論 理 属 性 controls 再 生 や 停 止 ボタンなどのユーザーインターフェースの 表 示 を 指 示 する 論 理 属 性 source Video 要 素 の 中 に 複 数 のデーターを 記 述 し 出 力 可 能 なデータータイプを 提 示 する 属 性 width height 値 をセットすることで 動 画 の 横 幅 を 指 定 できます 値 をセットすることで 動 画 の 縦 幅 を 指 定 できます コーデックの 問 題 対 応 UAの 種 類 によっては 表 示 されるビデオデーターに 制 限 があったりします その 際 には 属 性 の poster などを 使 った 一 時 的 に 画 像 を 表 示 させておく 処 置 をすることは できますが 根 本 的 な 解 決 ではなく VIDEOとしての 機 能 は 使 えないこともあります その 際 まずは 複 数 の video ソースと エラーメッセージを 読 み 込 ませることも 可 能 です コーデックとは PC の 様 々なデーターの 形 式 ( 符 号 化 )の 違 いによる 表 示 処 理 と 対 応 ソフトなどの 問 題 で ここでは VIDEO 形 式 と AUDIO の データー 圧 縮 形 式 の 違 いのことを 言 う WebM ファイル - Vp8 動 画 コーデックと Vorbis 音 声 コーデック.MP4 3ogv MOV ファイル - H.264 MP4 動 画 コーデック AAC 音 声 コーデックを 通 常 サポート.AVI - 多 くのカメラでこの 形 式 を 出 力 通 常 は MJPEG 動 画 コーデックと PCM 音 声 コーデック.WMV- Windows Media Player 用 の 動 画 コーデックと 音 声 コーデック 41

43 .FLV - Adobe FLV1 動 画 コーデック MP3 音 声 コーデック 通 常 は 上 記 の 上 3 つのデーターを 利 用 することが 多 い 1 <video controls> 2 <source src="video/sample.mp4" type="video/mp4"> 3 <source src="video/sample.flv" type="video/flv"> 4 <source src="video/sample.webm" type="video/webm"> 5 <p> ご 利 用 のブラウザでは 再 生 することができません </p> 6 </video> 前 記 のようなコードの 場 合 上 から 順 にソースを 読 み 込 み 表 示 可 能 なものを 表 示 し すべて 表 示 できないときには 最 後 のエラーコメントを 表 示 させます video 要 素 を 実 装 する 1. <video width="640" height="360" preload="auto" 2. poster="aaa.png" controls> 3. <!-- mp4 形 式 の 動 画 に 対 応 しているブラウザ 用 --> 4. <source src="hoge.mp4" type="video/mp4;"> 5. <!-- ogv 形 式 の 動 画 に 対 応 しているブラウザ 用 -> 6. <source src="hoge.ogv" type="video/ogg;"> 7. <!-- WebM 形 式 の 動 画 に 対 応 しているブラウザ 用 --> 8. <source src="hoge.webm" type="video/webm;"> 9. <!-- video 要 素 に 対 応 していないブラウザ 用 --> 10. <p>お 使 いのブラウザーでは 動 画 を 再 生 できません 11. <a href="sample_dl.html">ダウンロード </a></p> 12. </video> 実 際 に 実 装 してみると 上 記 のような 記 述 が 多 くなるように 思 います また 開 くと 自 動 的 に Video が 流 れるようにするなら autoplay を 記 述 してください 42

44 audio 要 素 audio 要 素 もプラグインや Youtube など 様 々な 音 声 データーを 手 軽 にオンラインで 再 現 表 示 させるための 新 しい 要 素 です 基 本 的 に video 要 素 の 使 い 方 と 変 わりません audio の 再 生 audio 要 素 と video の 相 違 点 もちろん 取 り 扱 うデーターの 違 いはありますが それ 以 外 音 声 データーは 表 示 する 為 の 幅 などサイズを 記 述 する 必 要 はありません 1 <audio src= music/sample.mp3 controls></audio> 上 記 の 表 現 一 行 で 再 生 できますが Video 同 様 audio ソース 種 別 対 応 と エラーの 際 の メッセージも 用 意 しておくといいでしょう 1 <audio controls> 2 <source src="audio/sample.mp3" type="audio/mp3"> 3 <source src="audio/sample.ogg" type="audio/ogg"> 4 <source src="audio/sample.wav" type="audio/wav"> 5 <p> ご 利 用 のブラウザでは 再 生 することができません </p> 6 </audio> Audio 要 素 で 使 えるファイル 形 式 WAV (16bit/44.1kHz/stereo) AIFF (16bit/44.1kHz/stereo) MP3 (16bit/44.1kHz/128kbps/stereo) OGG (16bit/44.1kHz/128kbps/stereo) AAC (16bit/44.1kHz/128kbps/stereo) FLAC (16bit/44.1kHz/stereo) 一 般 的 なものは MP3 ですが これも 聴 くことのできないブラウザがあります 上 記 のソースのように 2~3 種 類 選 ぶことで ほとんどのブラウザをカバーすると 良 いでしょう 43

45 描画エリア要素 canvas 要素 Canvas とは ブラウザ上に図を描くために策定された仕様です これまで HTML 上で図を表現するためには GIF や JPEG といったフォーマットの画像を 用意する必要がありました また 条件に応じて表示する図を変化させたり アニメーションを 実現するために Flash や Java アプレットが使われてきました Canvas は Flash や Java のようにプラグインを使わずに JavaScript ベースで図を描くことがで きます Canvas を使う準備 Canvas を利用して2D のグラフィック 図形 を書いてみます canvas 内で 2D グラフィックを描画する大まかなステップ 1. HTML タグ canvas をマークアップ 記述する 2. canvas の DOM(ドキュメントオブジェクトモデル) を getelementbyid または document.queryselector にて取得 DOM プログラミング記述をインターフェイスに表示させる要素を参照する為の機能 3. 描画コンテキストを getcontext()メソッドで 引数 2d を渡して取得 4. 描画に関するメソッドでグラフィックスを表現 このような流れで進めていきます まずは HTML タグで canvas のエリアを指定します <canvas width= ピクセル数値 hright= ピクセル数値 > </canvas> このようにキャンバスに利用する範囲を記述します 次に JavaScript の書きだして キャンバス内に DOM の記述を入れます var canvas = document.queryselector("canvas"); 描画の JS を直接記述する場合は document.queryselector("canvas"); 描画の JS に ID を引用する場合は getelementbyid ("id 名"); を利用します 次にキャンバス内に描画する為のコンテキストの設定を記述します var context = canvas.getcontext("2d"); 2d の平面図形を描画する為の準備を記述します 44

46 canvas 要素を使って 図形を描く 丸を書く ctx.arc(x, y, radius, startangle, endangle, anticlockwise) x は 円の中心の x 座標 y は 円の中心の y 座標そして radiuss で円の半径を決める startangle 円弧を描き始める角度 x 軸の向き 右方向 からみて右回りの角度をラジアンで指定 endangle 円弧を描き終える角度 x 軸の向き 右方向 からみて右回りの角度ラジアンで指定 anticlockwise 円弧を描く向きを真偽値で指定 true を指定すると反時計回り 左回り に false を指定すると時計回り 右回り で円弧を描きます startangle と endangle で指定する角度の単位はラジアンで 180 を基準にします 360 であれば 任意の度数をラジアンに変換する場合は 例えば 15 であれば 15 * Math.PI / 180 となります 角度を指定して塗りの弧を描いた場合 角度の視点と終点の中が全部が塗られます Math.PI * 2 となります 度数 * Math.PI / 180 となります 扇形のような塗りにはなりません 下記参照 ラジアン 弧度法 ラジアン 弧度法 は 弧の長さと 円の半径を基に角度を求める方法 です では その 弧 とはそもそもなんなのかを想像してみましょう 弧 とは 円周の一部 円周の中で A 点と B 点を作り その間に選択された範囲のことで ここでは それが 始点と終点という考え方と言っていいでしょう 45

47 次 のような 図 形 を 書 く 時 のソースを 前 記 の 内 容 をもとに JavaScript で 記 述 します 円 を 書 く 場 合 の 記 述 例 : 1 <!-- 図 形 を 書 くエリアの 指 定 HTML--> 2 <canvas width="600" height="400"></canvas> 3 <!--DOM の 取 得 と 描 く 円 のサイズ 位 置 など 指 定 JS--> 4 <script> 5 var canvas = document.queryselector("canvas"); 6 var context = canvas.getcontext("2d"); 7 /* 赤 の 塗 り 円 を 描 く*/ 8 context.fillstyle = "red"; // 円 の 色 9 context.beginpath(); // 作 図 開 始 10 context.arc(150, 150, 100, 0, Math.PI*2, true); // 円 の 規 定 11 context.fill(); // 塗 り 円 線 の 円 指 定 12 /* 青 の 塗 り 円 を 重 ねて 描 く*/ 13 context.fillstyle = "blue"; 14 context.beginpath(); 15 context.arc(150, 150, 50, 0, Math.PI*2, true); 16 context.fill(); 17 /* 線 の 真 円 を 描 く*/ 18 context.beginpath(); 19 context.arc(350, 80, 60, 0, Math.PI*2, false); 20 context.stroke(); 21 /* 緑 の 塗 りで200 の 円 を 書 く*/ 22 context.beginpath(); 23 context.arc(350, 200, 60, 10 * Math.PI / 180, 160 * Math.PI / 180, true); 24 context.fillstyle = "green"; 25 context.fill(); 26 </script> 1) ちょっと 長 めのソースですが まずは 最 初 から 11 行 目 までの 赤 く 塗 られた 円 を 描 いてみましょう Context は 図 形 のことを 指 します 8 行 目 の 文 は 図 形 の 塗 り 色 の 設 定 を 指 し 9 行 目 は 46

48 塗 り 込 むための 線 画 のスタートを 指 定 10 行 目 で 円 の 中 心 をもとに 左 から150px 上 から150pxの 位 置 を 中 心 点 にして 中 心 から 半 径 50pxで PI(180 度 )*2 という 指 定 の 円 (360 )を 描 いて 最 後 に 塗 りを 指 定 しています 2) 次 に 残 りを 書 きこんでみましょう コーディングをしながら 前 記 説 明 を 読 み 何 をしているのか 理 解 していきましょう 12 行 目 からの 青 い 円 は 赤 の 円 に 重 ねて 作 成 しています 17 行 目 からは 線 だけ( 塗 りの 入 っていない) 円 を 描 いているので 最 後 の 実 行 文 が context.stroke()になり さっきと 違 い 塗 りの 円 ではないものが 描 かれています 最 後 の 21 行 目 からは 360 の 円 ではなく 一 部 の 弧 が 欠 けた 円 になっています 完 成 画 像 四 角 を 書 く: ctx.fillstyle = "blue"; cxt.beginpath(); ctx. Rect(x, y, width, height); cxt.fill(); ctx は 円 の 時 の context と 同 じで どちらでも 使 えます fillstyle =は 塗 りつぶす 色 の 指 定 で fill()で 塗 りつぶした 矩 形 を 描 きます x, y には 矩 形 の 左 上 端 の 座 標 を width に 矩 形 の 横 幅 を height に 縦 幅 を 引 数 として 与 えます 47

49 ctx. Rect(x, y, width, height) cxt.stroke(); 矩 形 を 描 きますが 枠 線 のみとなります 引 数 は fillrect メソッドと 同 じです ctx. clearrect(x, y, width, height) 矩 形 を 削 除 します 削 除 された 部 分 は 透 明 になります 引 数 は fillrect メソッドと 同 じです 1 <!-- 図 形 を 書 くエリアの 指 定 HTML--> 2 <canvas width="600" height="400"></canvas> 3 <!-- 描 く 円 のサイズ 位 置 など 指 定 JS--> 4 <script> 5 var canvas = document.queryselector("canvas"); 6 var context = canvas.getcontext("2d"); 7 /* 青 の 塗 り 四 角 を 描 く*/ 8 context.fillstyle = "#000099"; 9 context.beginpath(); 10 context.rect(150, 150, 180, 100); 11 context.fill(); 12 /* 赤 の 塗 り 四 角 を 重 ねて 描 く*/ 13 context.fillstyle = "red"; 14 context.beginpath(); 15 context.arc(200, 180, 80, 40); 16 context.fill(); 12 /* 線 の 四 角 を 描 く*/ 14 context.beginpath(); 15 context.rect(290, 260, 200, 120); 16 context.stroke(); 26 </script> 48

50 ID を 指 定 して Canvas に 円 と 四 角 の 図 形 を 書 く JS のハンドラーと ID を 利 用 して 図 形 を 描 くことも 出 来 ます 1 <script> onload = function() { 2 draw1(); /* 決 めた 関 数 (function)に 図 形 を 描 く 実 行 文 を 記 述 */ 3 draw2(); 4 draw3(); 5 draw4(); 6 draw5(); 7 draw6(); 8 ; 9 function draw1() { /* c1 の ID で 線 の 円 を 描 く */ 10 var canvas = document.getelementbyid('c1'); 11 if (! canvas! canvas.getcontext ) { return false; 12 var ctx = canvas.getcontext('2d'); 13 ctx.beginpath(); 14 ctx.arc(70, 70, 60, 0, Math.PI*2, false); 15 ctx.stroke(); function draw2() { /*c2 の ID で 円 弧 を 描 く */ 19 var canvas = document.getelementbyid('c2'); 20 if (! canvas! canvas.getcontext ) { return false; 21 var ctx = canvas.getcontext('2d'); 22 ctx.beginpath(); 23 ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true); 24 ctx.stroke(); function draw3() { /*c3 の ID で 円 弧 を 塗 りつぶす */ 28 var canvas = document.getelementbyid('c3'); 49

51 29 if (! canvas! canvas.getcontext ) { return false; 30 var ctx = canvas.getcontext('2d'); 31 ctx.beginpath(); 32 ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true); 33 ctx.fill(); function draw4() { /* c4 の ID で fillrect() 塗 りの 四 角 例 */ 37 var canvas = document.getelementbyid('c4'); 38 var ctx = canvas.getcontext('2d'); 39 ctx.fillstyle = "blue"; 40 ctx.beginpath(); 41 ctx.fillrect(20, 20, 80, 40); function draw5() { /*c5 strokerect() 線 の 四 角 例 */ 46 var canvas = document.getelementbyid('c5'); 47 var ctx = canvas.getcontext('2d'); 48 ctx.beginpath(); 49 ctx.strokerect(20, 20, 80, 40); function draw6() { /* clearrect() 四 角 く 塗 りを 消 す 例 */ 53 var canvas = document.getelementbyid('c6'); 54 var ctx = canvas.getcontext('2d'); 55 ctx.beginpath(); 56 ctx.fillrect(20, 20, 110, 110); 57 ctx.beginpath(); 58 ctx.clearrect(50, 50, 50, 50); 59 </script> 50

52 上記では function draw () の関数に対し ID をc1 6まで決めて 動作を作っています まず最初の draw1()では if 文で canvas の有無をチェックしています if (! canvas! canvas.getcontext ) の は false で無いなどの意味になります ID の呼び出し c1 6の ID は上記の Script 参照 円を描く stroke(); 真円を線で描く <canvas id="c1" width="140" height="140"></canvas> stroke(); 280 の円を線で描く <canvas id="c2" width="140" height="140"></canvas> stroke(); 280 の塗り円を塗ってみる 塗りを指定すると始点から終点までの中が全部塗られる <canvas id="c3" width="140" height="140"></canvas> 四角を描く fillrect(); で青い塗の四角を描く <canvas id="c4" width="140" height="140"></canvas> strokerect(); で線の四角を描く <canvas id="c5" width="140" height="140"></canvas> clearrect(); で塗りの中を消す四角を描く <canvas id="c6" width="140" height="140"></canvas> 51

53 Lesson7: CSS と CSS3 CSS とは スタイルシートの 一 つで HTML 文 書 の 装 飾 ( 表 示 ) 方 法 を 指 定 するためのものとして *W3C から 使 用 を 勧 告 された 言 語 のこと CSS は Web ページのレイアウト 指 定 に 標 準 的 に 用 いられ スタイルシート と 呼 ぶ 場 合 CSS のことを 指 す 場 合 が WEB 制 作 などではほとんどである CSS では Head の 中 で 単 一 ページごとに 文 字 の 色 や 大 きさ 背 景 色 ボックスの 描 画 といった 文 書 の 装 飾 やレイアウトを 指 定 したり 外 部 ファイルを 作 成 し 枚 数 ページにリンクをつけ サイト 全 般 に 関 する 装 飾 など 指 定 ができ 文 書 内 で CSS の 指 定 を 反 映 させたい 箇 所 の HTML タグに セレクター( 選 択 子 )と 呼 ばれる 識 別 子 を 与 えておくことによって 指 定 された 箇 所 のみに 対 象 を 限 定 しつつ また 同 一 のセレクタが 与 えられた 箇 所 は 一 括 して 表 示 を 変 更 することができる 外 部 ファイルに 記 述 した CSS ファイルを 呼 び 出 す 方 法 では CSS ファイルに 修 正 を 加 えると その CSS ファイルを 呼 び 出 しているすべての HTML 文 書 に 変 更 が 反 映 されるという 利 点 がある CSS を 利 用 することによって HTML などで 定 義 されている 文 書 の 構 造 に 関 する 情 報 から 装 飾 やレイアウトに 関 する 要 素 を 分 離 して 扱 うことが 可 能 となっている CSS を 記 述 する 方 法 としては HTML 文 書 や XML 文 書 の 中 に 記 述 する 方 法 と 外 部 ファイルに 記 述 した CSS ファイルを 呼 び 出 す 方 法 がある なお Web ブラウザの CSS の 解 釈 にはわずかな 差 があり ブラウザによっては CSS で 指 定 したとおりに 表 示 が 反 映 されないというケースもしばしば 存 在 する CSS3 とは?:HTML5 とともによく 聞 く CSS3 とは 何 でしょうか? これは CSS(スタイルシート)の 最 新 版 Cascading Style Sheets Level-3 の 略 です CSS3 は まったく 新 しい 言 語 ではなく 従 来 の CSS と 共 通 の 物 もおおく これまでの CSS に 新 しく 便 利 な 仕 様 を 加 えたもの が CSS3 です 基 本 的 な 文 法 ( 記 述 方 法 )に 変 化 がないので 今 までの 知 識 はす べてそのまま 使 えます 変 更 点 CSS3 の 場 合 変 更 という 意 識 を 持 つより 追 加 されるという 意 識 の 方 が 入 りやすいと 思 います 追 加 される 部 分 は 機 能 的 なものも 多 いのですが 大 きな 違 いは CSS 表 記 の 中 で UA や 表 示 する 対 象 を 設 定 対 応 した 拡 張 子 が 加 わる 部 分 ではないでしょうか UA:ユーザーエージェント(User Agent)とは WEB ページを 表 示 する 為 のプログラム( 一 般 的 にブラウザと 呼 ばれるもの)を 指 します 一 般 的 なグーグルクロームや IE ファイヤーフォックスなどを 識 別 する 為 の 拡 張 子 を 持 ちます 52

54 拡 張 子 の 種 類 : border-radius: 30px; /* 通 常 の CSS3 表 記 */ -webkit-border-radius: 30px; /* webkit を 使 っている Chrome/Safari 等 用 */ -moz-border-radius: 30px; /* firefox 用 */ -o-border-radius: 30px; /* Opera 用 */ -ms-border-radius: 30px; /* IE 用 */ 他 にもデジタル TV 等 のモニター 表 示 用 の- ATSC- 等 の 拡 張 子 ができています CSS ソースの 中 で 新 旧 の CSS が 混 在 していても 問 題 なく 従 来 のソースをそのまま 残 し その 中 で 必 要 な 要 素 を 書 き CSS のブラウザ 拡 張 子 などを 書 き 加 えたりするのが CSS3 の 対 応 と 言 えるでしょう 53

55 Lesson8:HTML5 の新しいタグと CSS3の連携 HTML5 の新しいページ構成要素では header/nav/section/article/hgroup/aside/他 CSS3 の記述で HTML5で新しく加わった要素の記述をする場合 基本は今までと同じルールが適用されます HTML5 のセクショニング要素等の要素名を指定して の中でターゲットと 属性や値を決定します また ID や CLASS についての意識も今までのものと基本は同じです ただし 新しいタグ要素の header 等は 今までの header と ID 指定していた時のように各ページ 1 回しか 使えないものではなく 各セクショニングで複数回使用するものになるので 全体に ID より CLASS を利用するターン が目立つように思います セクショニングのタグと レイアウトの DIV の使い分けがチェックポイント 1 まずは下記の完成図のようなコーディングをしてみましょう 54

56 基 本 例 HTML: 01 <div id="wrapper"> 02 <article> 03 <header> 04 <h1> HTML5/CSS3 の 学 習 </h1> 05 </header> 06 <section> 07 <header> 08 <h2>html5 コーディング </h2> 09 </header> 10 <p>ここでは 新 要 素 を 組 み 合 わせて 簡 単 なコーディングをします </p> 11 <p> 最 初 のセクションの 記 事 をここに 記 入 していきます </p> 12 </section> 13 <section> 14 <header> 15 <h2> 新 しい 要 素 に CSS をつける</h2> 16 </header> 17 <p> 新 しい 要 素 に 直 接 CSS を 記 述 して 行 きます </p> 18 <p>2 つ 目 のセクションの 記 事 をここに 記 入 していきます </p> 19 </section> 20 <footer>html5 Study Memo</footer> 21 </article> 22 </div> CSS: body { background:#999; margin:0px; padding:0px; #wrapper{ background:#fcf; width:600px; height:420px; margin:30px auto; padding:10px 20px; header { background:#00f; color:#3ff; padding:0px 20px; line-height:36px; h1 {font:32px bold; article { background:#ffc; border:#f00 solid thick; padding:0px 20px 20px 20px; color:#000; width:540px; margin:auto; section { background:#3f9; color:#006; width:500px; margin:auto; padding:10px; footer { background:#c33; color:#3ff; text-align:center; margin-top:10px; line-height:2em 55

57 article で記事全体の指定をして 最初に記事全体の見出しを header でつけ 最初の section に HTML のコーディング という中見出しがつき 次の section では 新しい要素に CSS をつける という中見出しをつけて 記事を書き 最後に footer をつけて 一つの大きな記事として成立させています Lesson9:CSS3 の新しい機能を使ってみる 枠に影響する新しい要素 角丸 border-radius HTML5 のセクショニング要素や Div 等ボックス要素の4つのコーナーの角丸を指定できます また それぞれのコーナーを別に指定することもでき border-上下 左右 radius ピクセル を指定します 左上 border-top-left-radius 右上 border-top-right-radius 右下 border-bottom-left-radius 左下 border-bottom-right-radius のように記述して 丸くする弧の角度をピクセル数値で指定します また 上記の拡張子で紹介したように UA の対応として それぞれの拡張子の記述もします UA の拡張子ごとに 多少記述が変わるので上記を参考にしてください 角丸記述の例 CSS の記述 div { width:480px; height:360px; background:#ffff00; padding:25px; margin:auto; border-radius: 30px; /* 通常 の CSS3角丸指定の記述(4 角を指定)*/ -webkit-border-radius: 30px; /* webkit を使っている Chrome/Safari 等用 */ -moz-border-radius: 30px; /* firefox 用 */ -o-border-radius: 30px; /* Opera 用 */ -ms-border-radius: 30px; /* IE 用 */ HTML 記述 <div><h1>このエリアの角が丸くなります </h1></div> 画像をボーダー 枠線に 表示 56

58 上記角丸図形完成図 画像の枠 border-image 色々な要素に適応するボーダーを画像で指定できます 1) 画像ファイルの指定(border-image-source) 2 画像の使用範囲を左上から決める(border-image-slice) 3 ボーダーの太さ(border-image-width) 4 ボーダーエリアをボックスの外へ広げるとき(border-image-outset) 5 繰り返しのスタイルを値に入れる(border-image-repeat) 値の種類 repeat 画像の繰り返し stretch=ボックスの幅に画像が繰り返さず拡大する 引き伸ばし round repeat のように繰り返すが 整列しないで画像が途中で切れないように 拡大して整列する 実際の記述の際には 下記の内容のプロパティ を値のみ一括で記述します border-image :url("イメージ画像パス") border-image-slice:上右下左の px; border-image-outset:ホックス範囲外へ広げるサイズ px; border-image-repeat:繰り返しのスタイル; 別々にプロパティ と値を記述しても表示がうまくいかないブラウザがあります 記述の例 border-image: url(sample.jpg) repeat; border-image-width:太さの px; で 枠線の太さだけは別途記述します 57

59 UA の拡張子で画像を指定する場合 border-image: url("画像パス"); -moz-border-image: url("画像パス"); -webkit-border-image: url("画像パス"); -o-border-image: url("画像パス"); -ms-border-image: url("画像パス"); Border-image の記述や スライスの値上下左右の設定が判りにくいので イメージを利用して ボーダーイメージジェネレーターで練習してみましょう サイトで作成したサンプルを HTML に張り付けて 実際の div などで反映してみてください 現状では 表示エリアのボーダー枠内も同じ画像の背景になってしまうと思います ボーダー 枠の変形 transform: ボーダーで囲んだエリアを2D 3D の形で変形させることができるようになった要素です transform の要素に対して 属性で変形を指定します 属性の種類 translate 位置を指定して移動させる属性 X 軸 Y 軸 の数値で移動します 単一方向の指定もできます 例 transform: translate(50px,10px); scale エリアの拡大縮小を X 軸 Y 軸 の数値で設定します 単一方向の指定もできます 例 transform: scale(0.9,1.2); 各軸に対し 1を堺に拡大縮小, で区切って3つめの値を入れると3D 方向への拡大縮小もできる rotate エリアの回転を X 軸 Y 軸 の数値で設定します 単一方向の指定もできます 例 transform: rotate(5deg); skew 角度の値は px ではなく deg エリアの傾斜を X 軸 Y 軸 の数値で設定します 単一方向の指定もできます 例 transform: skew(30deg,0deg); 角度の値は px ではなく deg 58

60 ボーダー 枠の変形2 background-clip: 画像を枠の背景に指定する時の範囲を指定できる 属性の種類 border-box ボーダーを含む範囲を画像で埋める padding-box ボーダー外周から padding を計算し その内側の範囲を画像で埋める content-box 文章エリア等コンテンツの範囲のみ画像で埋める 便利な応用 下記のようなコーティングでクリッピングマスクと同じ効果を出すことができます 文字に影響するタグ h1 6 1 h1 / p 等 の CSS を下記のように記述する {color ffffff //色は付いていれば何色でも問いません 2 background :url(背景に億画像のパス) norepeat; 3 background-clip: text; 4 -webkit-background-clip: text; 5 -webkit-text-fill-color: transparent; 6 上記 CSS は body 内の h1 要素に対して有効になります 前記は 現状 Crome 等の Webkit 拡張子のもので利用できますが 他の UA に対応して いなかったりするので サポートのために JQuery Modernizr をダウンロードしてブラウザの 判別をさせ JS で同じ効果を表示させます 59

61 1 <script src="modernizr-1.6.min.js"></script> 2 <script> 3 Modernizr.addTest('backgroundclip',function(){ 4 var div = document.createelement('div'); 5 6 if ('backgroundclip' in div.style) return true; 7 8 'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){ 9 if (val+'backgroundclip' in div.style) return true; 10 ); ); </script> 背景画像のサイズ background-size: 画像を枠の背景に指定する時の範囲やサイズを指定できる 属性の種類 auto 自動的に算出される 初期値 contain cover 縦横比は保持して 背景領域に収まる最大サイズになるように背景画像を拡大縮小する 縦横比は保持して 背景領域を完全に覆う最小サイズになるように画像を拡大縮小する X 軸 Y 軸を 内に px で指定する 背景画像の幅 高さを指定する X 軸 Y 軸を 内に背景領域に対する背景画像の幅 高さのパーセンテージを指定する CSS の記述 div { width:400px; height:150px; padding:25px; margin:auto; border:solid 8px #000000; background-image:url(border.jpg); background-size:contain; HTML 記述 <div><h1>このエリアの角が丸くなります </h1></div> 60

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

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63>

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63> 商 品 管 理 商 品 管 理 を 行 うためのメニューです 4.1 商 品 管 理 のサイドメニュー 商 品 管 理 には 以 下 のサイドメニューがあります 商 品 一 覧 登 録 済 みの 商 品 の 一 覧 を 表 示 します 既 に 登 録 済 みの 商 品 の 検 索 検 索 した 商 品 を 編 集 する 際 に 使 用 します 新 規 作 成 商 品 を 新 規 登 録 する 画 面

More information

PowerPoint プレゼンテーション

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

More information

Web 設計入門

Web 設計入門 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models

More information

SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 文 言 変 更 p.12(1. 基 本 事 項 ) (5)SXF 入 出 力 バージョン Ver.2 形 式 と Ver.3.0 形 式 および Ver.3.1 形 式 の 入 出 力 機 能 を

SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 文 言 変 更 p.12(1. 基 本 事 項 ) (5)SXF 入 出 力 バージョン Ver.2 形 式 と Ver.3.0 形 式 および Ver.3.1 形 式 の 入 出 力 機 能 を SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 改 訂 の 要 因 旧 新 (2013 年 4 月 版 ) 文 言 削 除 p.11(1. 基 本 事 項 ) (2) 保 証 すべき 実 数 の 精 度 p.5(1. 基 本 事 項 ) (2) 保 証 すべき 実 数 の 精 度 1. 用 紙 系 ( 線 種 ピッチ 等 用 紙 上 の 大 きさで

More information

Microsoft PowerPoint - webサイト更新マニュアル20150306.ppt [互換モード]

Microsoft PowerPoint - webサイト更新マニュアル20150306.ppt [互換モード] 目 次 目 次 2 全 体 概 要 3 管 理 画 面 へのログイン 4 ページの 種 類 5 新 規 投 稿 の 流 れ 7 記 事 を 投 稿 する( 各 要 素 のパターン) 8 記 事 を 投 稿 する( 要 素 の 順 番 入 れ 替 え 削 除 の 方 法 ) 10 画 像 追 加 11 投 稿 の 編 集 14 サイドエリアの 編 集 16 投 稿 の 削 除 17 新 規 カテゴリの

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 履 修 履 歴 データベースの 仕 組 み 学 生 が 履 修 履 歴 を 登 録 して 企 業 へデータを 送 信 すると 企 業 担 当 者 が 履 修 履 歴 データを 見 られるようになります 不 特 定 の 企 業 に 履 修 履 歴 データが 閲 覧 されるわけではありません < 基 本 的 な 流 れ> A 社 データ ベース 応 募 企 業 へ データを 送 信 学 生 A 専

More information

スライド 1

スライド 1 HTML5 と 関 連 API はじめに 一 般 的 に HTML5 と 呼 ばれている 範 囲 ( 広 義 ) HTML5 という 仕 様 Web Workers キャンバス ドラッグ&ドロップ Data Cache API オフライン コミュニケーション File API など Server-Sent API Web SQL Database Web Sockets Web Storage Indexed

More information

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2 目 次 動 作 環 境 特 長 方 法 方 法 起 動 終 了 方 法 方 法 操 作 方 法 使 方 使 方 使 方 詳 細 設 定 使 方 KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2 KINGSOFT Office 2016 特 長 主 特 長 以

More information

SchITコモンズ【活用編】

SchITコモンズ【活用編】 2016 SchIT コモンズ 活 用 編 株 式 会 社 スキット 1. 画 像 のサイズ 変 更 (リサイズ) 1. 画 像 の 大 き さ( 幅 )を 変 更 (ア) 画 像 を 挿 入 する 場 合 は[ 画 像 の 挿 入 ]のマークをクリックします [ 参 照 ]をクリックし 任 意 の 場 所 から 挿 入 したい 画 像 を 選 択 し [ 画 像 の 挿 入 ]をクリックします (イ)

More information

■新聞記事

■新聞記事 PowerPoint2013 基 本 操 作 P.1 PowerPoint2013 基 本 操 作 1.PowerPoint2013 の 起 動... 2 2.スライドのサンプル... 3 3.スライドの 作 成... 4 4. 文 字 の 入 力 とテキストボックス... 5 5. 図 の 作 成 と 書 式 設 定... 5 6.グラフの 作 成... 6 7. 背 景 デザインと 配 色...

More information

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

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 楽 天 市 場 Yahooショッピング! 商 品 複 製 マニュアル 1 在 庫 連 携 を 行 うためには 事 前 に 各 モールのコード 合 わせの 作 業 が 必 要 です 詳 しくは 各 モールとの 在 庫 連 携 に 必 要 なコード 連 携 マニュアルをご 覧 ください 2 楽 天 Yahooショッピング!の 仕 様 は 変 更 になっている 場 合 があります 各 モールの 仕 様 も

More information

TIPS - 棚 割 りを 開 始 するまで Liteを 起 動 し 企 業 情 報 の 追 加 を 行 い 棚 割 を 行 う 企 業 の 追 加 をして 下 さい 企 業 情 報 の 追 加 時 に エラーメッセージが 表 示 された 場 合 別 途 TIPS トラブルが 発 生 した 場 合

TIPS - 棚 割 りを 開 始 するまで Liteを 起 動 し 企 業 情 報 の 追 加 を 行 い 棚 割 を 行 う 企 業 の 追 加 をして 下 さい 企 業 情 報 の 追 加 時 に エラーメッセージが 表 示 された 場 合 別 途 TIPS トラブルが 発 生 した 場 合 TIPS 目 次 TIPS 項 目 棚 割 りを 開 始 するまで 商 品 画 像 の 追 加 方 法 商 品 情 報 の 一 括 更 新 登 録 方 法 棚 割 情 報 の 連 携 方 法 小 売 様 棚 割 ソフトとの 棚 割 情 報 連 携 について 他 棚 割 ソフトとの 棚 割 情 報 連 携 について 棚 割 情 報 のExcel 取 込 について 棚 板 設 定 の 詳 細 商 品 設

More information

1.2. ご 利 用 環 境 1.2.1. 推 奨 ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7

1.2. ご 利 用 環 境 1.2.1. 推 奨 ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7 1. アーカイブデータベースを 検 索 / 閲 覧 する 1.1. データの 検 索 方 法 東 京 アーカイブ では 以 下 に 分 類 されるカテゴリの 画 像 データ 資 料 データを 閲 覧 できます 江 戸 城 浮 世 絵 双 六 和 漢 書 江 戸 東 京 の 災 害 記 録 絵 葉 書 写 真 帖 近 代 の 地 図 東 京 府 東 京 市 関 係 資 料 番 付 建 築 図 面 書

More information

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378>

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

More information

MetaMoJi ClassRoom/ゼミナール 授業実施ガイド

MetaMoJi ClassRoom/ゼミナール 授業実施ガイド 本 書 では 管 理 者 向 けに MetaMoJi ClassRoom/ゼミナールで 年 度 更 新 を 実 施 する 手 順 について 説 明 して います 管 理 者 ガイドと 合 わせてご 覧 ください Excelは 米 国 Microsoft Corporationの 米 国 およびその 他 の 国 における 登 録 商 標 または 商 標 です Apache OpenOffice Apache

More information

スライド 1

スライド 1 セキュリティ 安 心 ブラウザ Android 版 WEBフィルタリングソフト 簡 単 マニュアル 本 マニュアルはAndroid4.2.2をベースに 構 成 しております 端 末 やOSのバージョンによって 名 称 が 違 う 場 合 があります ファイナル スマホ セキュリティのインストール ファイナル スマホ セキュリティの 初 期 設 定 ファイナル スマホ セキュリティの 使 い 方 (ブラウザ)

More information

著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はカラバオに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 をいかなる 手 段 においても 複 製 転 載 流 用 転 売 等 すること

著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はカラバオに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 をいかなる 手 段 においても 複 製 転 載 流 用 転 売 等 すること seesaa ブログの カスタマイズで 成 約 率 が 驚 くほど 高 まる 方 法 カラバオ 著 著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はカラバオに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 をいかなる 手 段 においても 複 製 転 載 流 用 転 売 等 することを

More information

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を メールテンプレート 編 集 ユーザーマニュアル Ver1.0 2016/5/1 株 式 会 社 シャノン 1 1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封

More information

目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7.

目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7. Web メール 操 作 説 明 書 京 都 与 謝 野 町 有 線 テレビ 0 目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7. メール 一 覧 画 面...

More information

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt)

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt) 平 成 23 年 度 技 術 研 究 会 HTML5 部 会 HTML5を 使 ったWebアプリの 開 発 ~HTML4.0とHTML5の 比 較 ~ メンバー 富 士 通 九 州 システムズ 三 角 瞳 オーガス 大 分 シーイーシー オーイーシー オーイーシー 老 川 翔 太 行 部 佑 希 西 角 幸 恵 下 郡 剛 九 州 東 芝 エンジニアリング 渡 邉 泰 三 大 分 交 通 松 迫 翔

More information

1/2

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

More information

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378>

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378> 1. 基 本 事 項 1.1. システムで 行 えること デジタルライブラリー では データベース 上 に 登 録 されている 様 々なカテゴリのデータを 検 索 閲 覧 できます データを 検 索 する キーワード 検 索 全 データをフリーワードで 検 索 できます 簡 易 検 索 データの 共 通 項 目 に 条 件 を 指 定 し 全 データを 横 断 して 検 索 できます 詳 細 検 索

More information

スライド 1

スライド 1 新 機 能 マニュアル( 事 業 者 向 け) 平 成 22 年 7 月 新 機 能 概 要 携 帯 電 話 メールアドレス 入 力 項 目 追 加 ( 詳 細 2P) ページデザイン 選 択 (5パターン) ページレイアウトが 選 択 可 能 になります ( 詳 細 3P) Googleマップ 設 定 Googleマップを 自 動 表 示 します ( 詳 細 4P) QRコードの 表 示 / 非

More information

Microsoft Word - Jimdo基礎編(8版)

Microsoft Word - Jimdo基礎編(8版) 目 次 第 1 章 本 書 について... 1 1-1 JIMDO とは... 1 1-2 自 分 でホームページを 作 るメリット... 1 1-3 JIMDO の 料 金 プラン... 2 1-4 本 書 で 制 作 するサンプルのホームページ... 3 1-5 サンプルのデータについて... 4 第 2 章 ホームページを 開 設 する... 7 2-1 ホームページを 開 設 する... 7

More information

【試用版】AppStudioクイズアプリ作成手順

【試用版】AppStudioクイズアプリ作成手順 2014 年 08 月 18 日 最 終 更 新 クイズアプリをつくろう Dacoon, Inc. 目 次 1. APP STUDIO で 作 れるクイズについて... 3 2. クイズアプリを 作 ってみよう... 4 3. 画 像 の 設 定... 22 4. CSS 編 集 について... 25 5. パブリッシュについて... 27 2 1.App Studio で 作 れるクイズについて

More information

戦略担当者のための

戦略担当者のための アーカイブに 登 録 するための ナレッジ 作 成 方 法 1.ナレッジの 整 理 2.ナレッジの 文 章 化 (1)タイトルと 目 次 の 設 定 (2) 本 文 の 作 成 (3) 体 裁 の 整 備 と 校 正 (4)PDFの 作 成 2008 年 8 月 http://www.darecon.com 1.ナレッジの 整 理 初 めにナレッジ( 知 識 ノウハウ)を 整 理 します 以 下 の4

More information

治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.3 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバン

治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.3 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバン 2014 年 1 月 7 日 治 験 依 頼 者 各 位 新 潟 市 民 病 院 治 験 管 理 室 Excel 形 式 の 電 子 プロトコール 提 出 の 御 依 頼 当 院 では 効 率 的 で 正 確 な 治 験 の 実 施 のため 電 子 カルテ 内 に 専 用 の Excel 形 式 による 電 子 プロトコールを 導 入 しております つきましては 治 験 依 頼 の 際 に 下 記

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 楽 天 市 場 ヤフオク! 商 品 複 製 マニュアル 1 在 庫 連 携 を 行 うためには 事 前 に 各 モールのコード 合 わせの 作 業 が 必 要 です 詳 しくは 各 モールとの 在 庫 連 携 に 必 要 なコード 連 携 マニュアルをご 覧 ください 2 楽 天 ヤフオク!の 仕 様 は 変 更 になっている 場 合 があります 各 モールの 仕 様 も 合 わせてご 確 認 ください

More information

Gmail 利用者ガイド

Gmail 利用者ガイド Gmail 利 用 者 ガイド 目 次 1. はじめに... 1 2. Gmail を 利 用 する 前 に... 2 3. 初 めてのログイン... 4 3.1. ログイン... 4 3.2. CAPTCHA の 入 力... 5 4. メールボックスの 説 明... 8 5. メールの 受 信... 9 6. メールの 送 信 返 信... 10 6.1. メールの 新 規 作 成... 10

More information

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な アメブロ ~ヘッダー 画 像 メニューバーの 設 定 方 法 ~ 本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 なヘッダー 画 像 を 作 成 する

More information

Microsoft Word - 資料5-1_資料掲載_ver201603.docx

Microsoft Word - 資料5-1_資料掲載_ver201603.docx ( 資 料 5-1) 授 業 資 料 の 掲 載 授 業 資 料 を 掲 載 する 手 順 について 説 明 します. ここでは,PDF と Powerpoint ファイルを 例 に 説 明 しますが, 他 の 形 式 のファイルも 資 料 として 掲 載 可 能 です. 1. コースメニュー 画 面 のコンテンツ 一 覧 から, 資 料 の 新 規 作 成 を 選 択 あるいは, 編 集 / 削

More information

目 次 1.はじめに... 3 2. 書 式 の 説 明... 3 3. 表 紙... 4 4.スケジュール... 5 5. 組 入 れ 基 準... 9 6. 併 用 禁 止 薬... 10 7. 併 用 注 意 薬... 10 8. 同 種 同 効 薬... 10 9. 医 師 モニタリング..

目 次 1.はじめに... 3 2. 書 式 の 説 明... 3 3. 表 紙... 4 4.スケジュール... 5 5. 組 入 れ 基 準... 9 6. 併 用 禁 止 薬... 10 7. 併 用 注 意 薬... 10 8. 同 種 同 効 薬... 10 9. 医 師 モニタリング.. 治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.4 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバンストエンジニアリング 2010 目 次 1.はじめに... 3 2. 書 式 の 説 明... 3 3.

More information

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

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

More information

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

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

More information

WEB保守パック申込

WEB保守パック申込 保 守 パックWeb 受 付 システム 操 作 ガイド はじめに 1. 本 サイトについて 2. 本 操 作 ガイドについて 3. 動 作 環 境 4. 注 意 事 項 5. 登 録 の 流 れ 仮 IDでのログインから 登 録 まで 6. 登 録 書 について 7. 登 録 書 記 載 の 仮 IDおよびパスワードでのログイン 8. 登 録 情 報 の 確 認 変 更 9. 機 器 情 報 の 確

More information

1-1 一覧画面からの印刷

1-1 一覧画面からの印刷 第 7 章 公 報 の 印 刷 7-1 一 覧 画 面 からの 印 刷 検 索 された 公 報 は 印 刷 することができます 目 次 印 刷 や 公 報 全 文 複 数 件 の 公 報 印 刷 も 可 能 です はじめに 検 索 画 面 から 結 果 一 覧 ボタンを 押 して 検 索 結 果 一 覧 画 面 を 表 示 させます 印 刷 方 法 をご 確 認 ください 一 括 選 択 ( 反 転

More information

[1]メッセージ

[1]メッセージ Joruri Video 1.0.0 基 本 マニュアル (2012.11.29) Joruri Video Joruri Video では 動 画 のアップロード 再 生 共 有 分 類 検 索 が 可 能 です ログイン すると 次 の 画 面 が 表 示 されます [1]メッセージ Joruri Video を 利 用 するユーザに 通 知 するメッセージを 表 示 します [2] 動 画 アップロード

More information

Office 10 パッケージ版「リンク集」

Office 10 パッケージ版「リンク集」 Office 10 パッケージ 版 リンク 集 バージョン 10.3 Copyright (C) 2013-2015 Cybozu リンク 集 リンク 集 は よく 利 用 するWebサイトのURLを 登 録 するアプリケーションです リンク 集 には 次 の2 種 類 のリンクを 管 理 できます 共 有 リンク: すべてのユーザーが 共 有 して 使 用 できるリンクです システム 管 理 者

More information

<4D6963726F736F667420576F7264202D20574254816995B68F918DEC90AC89898F4B899E977095D2816A2E646F63>

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

More information

A

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

More information

年齢別人数計算ツールマニュアル

年齢別人数計算ツールマニュアル 年 齢 別 人 数 計 算 ツールの 使 用 手 引 本 ツールは 学 校 基 本 調 査 の 調 査 項 目 である 年 齢 別 入 学 者 数 を 学 生 名 簿 等 の 既 存 データを 利 用 して 集 計 するものです < 対 象 となる 調 査 票 > 1 学 校 調 査 票 ( 大 学 ) 学 部 学 生 内 訳 票 ( 様 式 第 8 号 ) 2 学 校 調 査 票 ( 短 期 大

More information

目 次 目 次 1 ログイン ログアウト...1 1.1 ログインする...1 ログイン 画 面 が 表 示 されないときは?... 1 初 めてログインするときのパスワードは?... 2 初 期 パスワードを 忘 れてしまったときは?... 2 変 更 したパスワードを 忘 れてしまったときは?.

目 次 目 次 1 ログイン ログアウト...1 1.1 ログインする...1 ログイン 画 面 が 表 示 されないときは?... 1 初 めてログインするときのパスワードは?... 2 初 期 パスワードを 忘 れてしまったときは?... 2 変 更 したパスワードを 忘 れてしまったときは?. よこしん 外 為 インターネットバンキング 基 本 操 作 編 最 終 更 新 日 :2014 年 12 月 25 日 目 次 目 次 1 ログイン ログアウト...1 1.1 ログインする...1 ログイン 画 面 が 表 示 されないときは?... 1 初 めてログインするときのパスワードは?... 2 初 期 パスワードを 忘 れてしまったときは?... 2 変 更 したパスワードを 忘 れてしまったときは?...

More information

目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5. 操 作 方 法 (ワークシート 取 込 ) 3.

目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5. 操 作 方 法 (ワークシート 取 込 ) 3. カシオグリーン 調 達 調 査 (ProChemist) カシオ 調 査 票 回 答 マニュアル Ver.20131116 カシオ 計 算 機 株 式 会 社 目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5.

More information

CSI情報管理システム

CSI情報管理システム 発 行 2012/07/23 情 報 システム 課 松 本 概 要 勤 務 スケジュール 管 理 画 面 の 機 能 を 一 新 し 未 来 の 予 定 をスケジュールできる ようになりました また CSI にて 登 録 するアクション 勤 務 予 定 結 果 車 両 運 行 記 録 が 連 動 している SFI の 日 報 に 自 動 的 に 書 かれる 仕 組 みを 強 化 しまし た データの

More information

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

Microsoft Word - Start Up Guide1 .docx

Microsoft Word - Start Up Guide1 .docx 日 報 共 有 ツール スタートアップガイド 1.ログインをしてみましょう 2.ユーザ 名 の 登 録 ( 変 更 )/プロフィール 写 真 を 登 録 3.グループを 作 成 してみましょう 4.グループへメンバーを 招 待 してみましょう 5.アカウントへ 新 規 ユーザを 招 待 してみましょう 6. 日 報 を 提 出 してみましょう 7. 今 日 の 予 定 をGoogleカレンダーから

More information

参加表明書・企画提案書様式

参加表明書・企画提案書様式 秋 田 市 道 路 除 排 雪 車 両 運 行 管 理 システム( 仮 称 ) 導 入 業 務 委 託 公 募 型 プロポーザル 参 加 表 明 書 企 画 提 案 書 様 式 平 成 25 年 7 月 秋 田 市 建 設 部 道 路 維 持 課 ( 様 式 1) 参 加 表 明 書 業 務 の 名 称 秋 田 市 除 排 雪 車 両 運 行 管 理 システム( 仮 称 ) 導 入 業 務 委 託

More information

01_07_01 データのインポート_エクスポート_1

01_07_01 データのインポート_エクスポート_1 データのインポート/エクスポートについて 概 要 スタッフエクスプレスでは 他 のソフトウェアで 作 成 されたスタッフデータ 得 意 先 データなどを 取 り 込 む(インポートする)ことができます また スタッフエクスプレスに 登 録 済 みのデータを Excel 形 式 CSV 形 式 で 出 力 (エクスポート)す ることができます 注 意 インポートできるデータは 次 の 条 件 を 満

More information

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

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

More information

<32303130208376838C835B8393332D348B89838F8393837C8343839383672E786477>

<32303130208376838C835B8393332D348B89838F8393837C8343839383672E786477> 日 本 情 報 処 理 検 定 協 会 主 催 ワンポイント 3 4 級 (Microsoft PowerPoint 2010 対 応 ) 2012 年 4 月 日 本 情 報 処 理 検 定 協 会 0 試 験 前 にすること... 2 ファイルの 保 存... 2 試 験 本 番... 3 標 準 フォント 文 字 色... 3 色 について... 3 配 置 について... 3 図 形 描 画

More information

Microsoft Word - ML_ListManager_10j.doc

Microsoft Word - ML_ListManager_10j.doc メーリングリスト 利 用 の 手 引 き(リスト 管 理 者 編 ) for LyrisSynaptive ListManager 10j 第 5 版 目 次... 1 1. メーリングリストとは?... 2 2. メーリングリストの 開 設... 2 2-1 管 理 者 画 面 へのログイン... 2 2-2 リスト 管 理 者 自 身 のパスワードの 変 更... 4 3. メンバーの 登 録...

More information

Microsoft Word - linkad_manual【110418】.doc

Microsoft Word - linkad_manual【110418】.doc リンクアド 設 定 マニュアル リンクアドLLC 1 LinkAd 概 要 図 媒 体 サイト 2 INDEX リンクアド 設 定 の 流 れ 1. 広 告 掲 載 ページに 広 告 配 信 タグを 設 置 する CSVのアップロードを 行 う p.5~p.6 タグが 設 定 されたHTMLをダウンロードする p.7 2. 配 信 したい 広 告 を 登 録 する 媒 体 に 掲 載 する 広 告

More information

目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの

目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの Google Blogger 入 門 目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの 編 集... 9 テンプレートの 設 定... 10 ブログの

More information

項 目 設 定 設 置 可 能 項 目 数 100 項 目 投 票 フォームの 設 置 可 能 投 票 項 目 数 1 項 目 (10 選 択 肢 ) 必 須 項 目 設 定 条 件 項 目 設 定 添 付 ファイル 合 計 容 量 入 力 項 目 を 必 須 項 目 に 設 定 できます フォーム

項 目 設 定 設 置 可 能 項 目 数 100 項 目 投 票 フォームの 設 置 可 能 投 票 項 目 数 1 項 目 (10 選 択 肢 ) 必 須 項 目 設 定 条 件 項 目 設 定 添 付 ファイル 合 計 容 量 入 力 項 目 を 必 須 項 目 に 設 定 できます フォーム 更 新 日 :2015 年 4 月 14 日 料 金 初 期 費 用 月 額 料 金 無 料 サーバーの 初 期 セットアップ 時 以 外 または 複 数 フォームメーラーを インストールする 場 合 には 別 途 費 用 が 必 要 となります 無 料 スペック 100 個 作 成 可 能 フォーム 数 一 般 投 票 注 文 フォームに 対 応 設 置 可 能 項 目 数 100 項 目 添 付

More information

設定フロー ★印は必須の設定です

設定フロー ★印は必須の設定です AutoBiz StartUp Manual オートビズ 基 本 設 定 マニュアル ( 一 括 登 録 ~ メルマガ 配 信 編 ) 目 次 1. 登 録 用 アドレスリスト(CSV ファイル)の 作 成... 2 2.シナリオ 名 の 変 更...4 3. 登 録 ページ 作 成 でフォームを 作 成... 5 4. 完 了 ページ 作 成 で 解 除 完 了 ページの 設 定... 7 5.

More information

1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に 基 づいた 試 験 の 特 徴 1-2. 試 験 の 基 本 的 な 流 れ 1-3. 規 格 本 文 と 関 連 文 書 1-4. ウェブアクセシビリティ 基 盤 委 員 会 (

1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に 基 づいた 試 験 の 特 徴 1-2. 試 験 の 基 本 的 な 流 れ 1-3. 規 格 本 文 と 関 連 文 書 1-4. ウェブアクセシビリティ 基 盤 委 員 会 ( JIS X 8341-3:2010に 基 づいた ウェブの 試 験 方 法 2010 年 9 月 22 日 富 士 通 デザイン 株 式 会 社 近 藤 真 太 郎 ウェブアクセシビリティ 基 盤 委 員 会 WG3 委 員 Copyright 2010 FUJITSU LIMITED 1. JIS X 8341-3:2010に 基 づいた 試 験 概 要 1-1. JIS X 8341-3:2010に

More information

Microsoft Word - 第3章.doc

Microsoft Word - 第3章.doc 第 3 章 関 数 この 章 では 日 付 と 時 刻 を 扱 う 関 数 や 検 索 条 件 に 一 致 するデータを 取 り 出 す 関 数 の 使 い 方 また 複 数 の 関 数 を 組 み 合 わせてエラー 値 を 非 表 示 にする 方 法 を 学 習 します STEP 1: 日 付 / 時 刻 関 数 TODAY 関 数 NOW 関 数 TODAY 関 数 は パソコンの 内 蔵 時

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション インターネット 出 願 手 引 き (システムWAKABA 継 続 入 学 申 請 手 引 き) 目 次 1.システムWAKABAトップ 画 面 2 2. 学 生 種 選 択 画 面 3 3. 出 願 申 請 画 面 (1) 全 科 履 修 生 の 場 合 4 (2) 全 科 履 修 生 以 外 の 場 合 6 4.オンライン 授 業 8 5. 科 目 登 録 申 請 画 面 (1) 授 業 種 別

More information

<4D6963726F736F667420506F776572506F696E74202D20938A8D65837D836A83858341838B8162918A926B82CB82C182C6944692E846508354834383672E70707478>

<4D6963726F736F667420506F776572506F696E74202D20938A8D65837D836A83858341838B8162918A926B82CB82C182C6944692E846508354834383672E70707478> サイトURLの 末 尾 に wp-login.php を 付 けるとログインURLに 移 動 します URL 例 http://wiselife.biz/fp/sample/wp-login.php (!) ユーザー 名 とパスワードは 別 配 布 資 料 参 照 管 理 バー クイック 統 計 欄 は サイトのアクセス 数 が 分 かります サポート 連 絡 先 マニュアルや 依 頼 方 法 など

More information

...... ......

More information

スライド 1

スライド 1 Android 版 目 視 録 運 用 操 作 マニュアル 作 成 2012/03/22 更 新 2014/09/26 目 視 録 とは 携 帯 またはパソコンで 施 工 写 真 を 登 録 確 認 できるシステムです ご 利 用 の 為 にはIDとパスワードが 必 要 です TEG ログインID ( ) パスワード ( ) https://teg.mokusiroku.com/

More information

Acrobat早分かりガイド

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

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

MATRIX TRADER(インストール版) 取扱説明書

MATRIX TRADER(インストール版) 取扱説明書 インストール 版 MATRIX TRADER チャート 取 扱 説 明 書 目 次 タイトル ページ タイトル ページ チャート メニューの 呼 び 出 し 2 チャートの 追 加 3 画 面 の 説 明 4 MENU の 説 明 6 画 面 表 示 方 法 7 クロスラインの 表 示 8 チャートからの 新 規 注 文 9 コメント 入 力 10 アラートの 設 定 11 左 側 アイコンの 説

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

 

  オーパス スポーツ 施 設 情 報 システム ガイドブック 操 作 編 インターネット 携 帯 ウェブ http://opas.jp/ http://opas.jp/m/ 豊 中 市 スポーツ 施 設 情 報 システム 大 阪 地 域 情 報 サービスネットワーク 目 次 インターネットでの 利 用 1 パスワードの 登 録 と メール 通 知 サービスの 設 定 について

More information

POWER EGG V2.01 ユーザーズマニュアル ファイル管理編

POWER EGG V2.01 ユーザーズマニュアル ファイル管理編 POWER EGG V2.0 ユーザーズマニュアル ファイル 管 理 編 Copyright 2009 D-CIRCLE,INC. All Rights Reserved 2009.4 はじめに 本 書 では POWER EGG 利 用 者 向 けに 以 下 の POWER EGG のファイル 管 理 機 能 に 関 する 操 作 を 説 明 しま す なお 当 マニュアルでは ファイル 管 理 機

More information

計算式の取り扱い

計算式の取り扱い 4.データ 入 力 と 表 計 算 4-1 計 算 式 の 取 り 扱 い 1) 数 式 の 基 本 Excelのような 表 計 算 ソフトでは セルに 入 力 されたデータ( 定 数 )を 計 算 式 ( 数 式 )によって 計 算 することで さまざまな 処 理 が 行 えます 数 式 バーには 数 式 の 内 容 が 表 示 されます セルには 計 算 結 果 が 表 示 されます 数 式 の

More information

Microsoft Word - TCⅡマニュアル_第6章_ doc

Microsoft Word - TCⅡマニュアル_第6章_ doc .1 章 -1 .1 様 々な 機 能 を 利 用 し 簡 単 にイメージ 通 りの 加 工 が 行 えます した は 元 を 残 し 新 規 として 保 存 されます また 再 できる 加 工 内 容 の 場 合 は 上 書 き 保 存 することができます.1.1 面 について 配 置 面 ( 第 4 章 ) ペンスコープ 面 ( 第 5 章 ) 一 覧 面 ( 第 12 章 )( 複 数 選 択

More information

2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が 表 示 されます [ 研 究 者 ログイン]をクリック します 掲 載 している 画 面 は 例 示 です 随 時 変 更 されます 3 科 研 費 電 子 申 請 システムの 応 募 者 ログイン 画 面 が 表 示 されます e

2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が 表 示 されます [ 研 究 者 ログイン]をクリック します 掲 載 している 画 面 は 例 示 です 随 時 変 更 されます 3 科 研 費 電 子 申 請 システムの 応 募 者 ログイン 画 面 が 表 示 されます e 2.2.1 科 研 費 電 子 申 請 システム( 交 付 申 請 手 続 き)へログイン 1 Web ブラウザを 起 動 し 日 本 学 術 振 興 会 の 電 子 申 請 のご 案 内 サイト (http://www-shinsei.jsps.go.jp/)を 表 示 し 科 学 研 究 費 助 成 事 業 をクリックします 8 2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が

More information

Flash基礎Chapter1_3稿.indd

Flash基礎Chapter1_3稿.indd Chapter 1 Flashの 概 要 PREPARATION Chapter1 で 使 用 するフォルダー 本 講 座 で 使 用 するデータは 映 像 教 材 ページからダウンロードしてください ダウンロードしたデータは 展 開 し デスクトップに 用 意 してください Flas hの 概 要 Chapter 1 1-1 Flashとは Flash は アニメーションや RIA を 作 成 することができるアプリケーションです

More information

Microsoft Word - 修正_作業手順書.docx

Microsoft Word - 修正_作業手順書.docx 論 文 PDF OCR 作 業 手 順 書 国 立 情 報 学 研 究 所 阿 辺 川 武 2014 年 1 月 24 日 目 次 1.はじめに 2.OCR の 仕 様 2.1 認 識 領 域 2.2 領 域 の 種 類 と 機 能 2.3 認 識 誤 りの 修 正 対 象 3. 基 本 設 定 3.1 ソフトウェアアップデートの 確 認 3.2 ツールバーの 設 定 3.3 認 識 オプションの

More information

機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連 携 機 能 院 内 で 撮 影

機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連 携 機 能 院 内 で 撮 影 厚 生 労 働 省 シームレスな 健 康 情 報 活 用 基 盤 実 証 事 業 地 域 連 携 システム システム 仕 様 書 1 機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連

More information

MapDK3のインストール

MapDK3のインストール ExifEditor Version 4.6 サポートアドレス:kaneda_supp@yahoo.co.jp 目 次 1. メイン 画 面... 3 1.1. 画 像 表 示... 6 2. Exif 情 報 編 集... 8 2.1. 付 帯 情 報 の 編 集... 10 2.2. 日 付 データの 一 括 編 集... 10 2.3. タイムスタンプ... 11 2.3.1. タイムスタンプ

More information

Microsoft Word - 03accessデータベース演習レジメ.doc

Microsoft Word - 03accessデータベース演習レジメ.doc Access データベース 演 習 1ワードでデータベースの 基 礎 になるテキストデータを 整 形 し 2Excel でのデータベースの 基 本 的 な 扱 いに 慣 れ さらに3Access を 用 いて クエリやリレーションシップの 概 念 を 理 解 し Excel との 連 携 を 実 践 することを 目 的 とする 題 材 としては 定 期 試 験 対 策 用 の 英 単 語 リストを

More information

2. データを 検 索 する なごやコレクションのデータを 検 索 するための 方 法 として キーワード 検 索 詳 細 検 索 の 二 通 りの 検 索 方 法 が あります 2.1. キーワードから 探 す キーワードを 入 力 する トップページの 入 力 ボックスに 検 索

2. データを 検 索 する なごやコレクションのデータを 検 索 するための 方 法 として キーワード 検 索 詳 細 検 索 の 二 通 りの 検 索 方 法 が あります 2.1. キーワードから 探 す キーワードを 入 力 する トップページの 入 力 ボックスに 検 索 1. なごやコレクション 基 本 事 項 1.1. なごやコレクションで 行 えること なごやコレクション では 登 録 されているカテゴリの 画 像 データ 資 料 データを 検 索 閲 覧 できます 資 料 データを 検 索 する キーワード 検 索 全 データをフリーワードで 検 索 できます 詳 細 検 索 カテゴリ 別 にデータをタイトル/ 作 者 / 刊 行 年 等 で 絞 り 込 んで

More information

ワープロソフトウェア

ワープロソフトウェア プレゼンテーションソフト (PowerPoint) プレゼンテーションソフト プレゼンテーションソフト 発 表 会 や 会 議 などで 使 用 する 資 料 を 作 成 表 示 するため のアプリケーションソフト PowerPoint Microsoftによって 提 供 されているプレゼンテーションソフト 比 較 的 簡 単 に 見 映 えのするスライドが 作 れる 2 PowerPointの 起

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Yahoo!ショッピング Amazon 商 品 複 製 マニュアル 1 在 庫 連 携 を 行 うためには 事 前 に 各 モールのコード 合 わせの 作 業 が 必 要 です 詳 しくは 各 モールとの 在 庫 連 携 に 必 要 なコード 連 携 マニュアルをご 覧 ください 2 楽 天 Yahoo!ショッピングの 仕 様 は 変 更 になっている 場 合 があります 各 モールの 仕 様 も

More information

目 次 1.ログイン 方 法 P2 2.ログアウト 方 法 P3 3. 基 本 設 定 変 更 サイトネーム スローガンの 設 定 P10~11 カラーバリエーションの 選 択 P12 メニュースタイル 色 の 設 定 P12 4.トップページの 画 像 編 集 画 像 の 変 更 P13~14 T

目 次 1.ログイン 方 法 P2 2.ログアウト 方 法 P3 3. 基 本 設 定 変 更 サイトネーム スローガンの 設 定 P10~11 カラーバリエーションの 選 択 P12 メニュースタイル 色 の 設 定 P12 4.トップページの 画 像 編 集 画 像 の 変 更 P13~14 T ホームページングサービス G o o d P a g e E a s y GoodPageASPシリーズ 操 作 マニュアル 基 本 操 作 編 (EASY+のメニュー 操 作 については メニュー 操 作 編 をご 覧 下 さい) ASPシリーズ(SUPERLITE EASY EASY+)の 基 本 操 作 手 順 は 共 通 ですが マニュアルではGoodPageEASYの 画 面 で 説 明

More information

研究者情報データベース

研究者情報データベース 研 究 者 情 報 管 理 システム 研 究 者 向 けデータ 一 括 登 録 機 能 操 作 マニュアル 2013 年 6 月 4 日 目 次 1. はじめに... 1 1.1 本 マニュアルの 注 意 事 項... 1 2. 操 作 手 順... 2 2.1 データ 登 録 手 順... 2 2.2 データ 読 み 込 みエラー 時 の 対 応 手 順... 13 3. 登 録 データ 一 覧...

More information

5-2.操作説明書(支店連携)_xlsx

5-2.操作説明書(支店連携)_xlsx お 客 さま 向 け 送 り 状 発 行 システム 5-2. 操 作 説 明 書 ( 支 店 連 携 ) ゆうパックプリントR は 日 本 郵 便 株 式 会 社 がお 客 さまに 無 料 で 提 供 する ゆうパックや 郵 便 商 品 の 送 り 状 をパソコンで 印 刷 するためのソフトウェアです ゆうパックプリントRを 以 降 ゆうプリR と 表 記 します 本 マニュアルは 支 店 連 携

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 受 講 ガイド 講 座 によって ご 利 用 可 能 な 機 能 が 異 なります ご 受 講 いただく 前 に gaccoの 講 座 は インターネットに 接 続 した 状 態 でご 利 用 いただくeラーニング 講 座 です 学 習 にはパソコンやタブレット スマートフォン およびインターネットに 接 続 できる 環 境 が 必 要 です また gaccoではシステム 動 作 環 境 の 公 表

More information

本 マニュアルでは 今 回 のリニューアルにより 従 来 のブログ 管 理 画 面 から 変 更 になった 動 作 および 操 作 についてご 案 内 いたします 全 体 的 な 操 作 説 明 については 別 冊 の 必 読 マニュアルその1~ブログの 基 礎 知 識 ~ 必 読 マニュアルその2~ 初 めての 更 新 ガイド~ 必 読 マニュアルその3~よく 使 う 操 作 ガイド~ をご 覧

More information

R4財務対応障害一覧

R4財務対応障害一覧 1 仕 訳 入 力 仕 訳 入 力 時 摘 要 欄 で. + Enter を 押 すと アプリケーションでエラーが 発 生 しまインデックスが 配 列 の 境 界 外 です が 出 る 場 合 がある 問 題 に 対 応 しま 2 仕 訳 入 力 仕 訳 入 力 主 科 目 と 補 助 科 目 を 固 定 にすると2 行 目 以 降 の 補 助 科 目 コピーが 動 作 しない 問 題 に 対 応

More information

第 1 章 PowerPoint を 始 める 前 に 第 1 章 PowerPoint を 始 める 前 に 1. 最 初 に 考 えること 2. PowerPoint の 画 面 -1- IBR2012-V1.0

第 1 章 PowerPoint を 始 める 前 に 第 1 章 PowerPoint を 始 める 前 に 1. 最 初 に 考 えること 2. PowerPoint の 画 面 -1- IBR2012-V1.0 パワーポイント 基 礎 講 習 PowerPoint を 始 める 前 に PowerPoint を 始 めよう アニメーションを 活 用 する PowerPoint 2010 対 応 NPO インターネットビジネス 研 究 所 Copyright IBR 2012 第 1 章 PowerPoint を 始 める 前 に 第 1 章 PowerPoint を 始 める 前 に 1. 最 初 に 考

More information

(Microsoft Word - Excel\211\236\227p2\217\315.docx)

(Microsoft Word - Excel\211\236\227p2\217\315.docx) この 章 では 日 付 と 時 刻 を 扱 う 関 数 や 複 数 の 関 数 を 組 み 合 わせてエラーを 非 表 示 にする 方 法 また 検 索 条 件 に 一 致 するデータを 取 り 出 す 関 数 の 使 い 方 などについて 学 習 します 1 日 付 と 時 刻 の 関 数 TODAY 関 数 NOW 関 数 TODAY 関 数 は パソコンの 内 蔵 時 計 を 利 用 して 現

More information

確 定 申 告 書 作 成 システム 操 作 手 順 書 ~ 個 人 利 用 者 向 け 操 作 説 明 書 ~ 平 成 27 年 1 月 JA 長 野 県 営 農 センター ( 株 ) 長 野 県 協 同 電 算 目 次 1.システムの 起 動... 1 ... 1 ... 2 2.ログインとログアウト... 2 ... 3 ...

More information

<5461726F2D93648E718E868EC58B8F30332E6A7464>

<5461726F2D93648E718E868EC58B8F30332E6A7464> PowerPointで 電 子 紙 芝 居 を 作 ろう! Microsoft Office Power Point 2003 を 用 いて 電 子 紙 芝 居 を 作 成 します 主 に, 画 像 の 挿 入 や オートシェイプ, クリップアート, アニメーションの 設 定, 画 面 の 切 り 替 え 効 果 機 能 を 用 います また,プロジェクタで 投 影 して 電 子 紙 芝 居 として

More information

スライド 1

スライド 1 CSVファイルによる 利 用 者 情 報 設 定 ガイド NTTレゾナント( 株 ) ビジネスgoo 事 務 局 1 当 ガイドについて ビジネスgooへ 利 用 者 の 情 報 を 登 録 または 更 新 を 行 う 際 数 名 程 度 の 設 定 であれば 設 定 画 面 への 手 入 力 で 問 題 はないと 思 いますが 数 十 人 単 位 となりますと 手 入 力 では 大 変 です ビジネスgooではCSVファイルを

More information

おすすめページ

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

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

Microsoft Word - Active.doc

Microsoft Word - Active.doc 利 マニュアル 梅 校 メールサーバをご 利 されていた 教 員 の 皆 さまへ 2009 年 1 7 のメールサーバ 移 に 伴 い 学 外 からの 電 メールの 送 受 信 はウェブメール(Active!mail) からのみ 可 能 となりました Active!mail の 利 法 については 本 マニュアルをご 確 認 ください 次 Active!mail にログインする...2 Active!mail

More information

Microsoft Word - 生物学技研報告ONLINE ガイドブック.doc

Microsoft Word - 生物学技研報告ONLINE ガイドブック.doc 生 物 学 技 研 報 告 ONLINE ガイドブック 基 礎 生 物 学 研 究 所 技 術 課 2010 年 2 月 第 1 版 1. 生 物 学 技 研 報 告 ONLINE へのアクセス URL 生 物 学 技 研 報 告 ONLINE は 基 生 研 技 術 課 Web サイト TechDivWeb(techdiv.nibb.ac.jp) のコンテンツです 上 記 よりリンクをたどるか 下

More information

目 次 1. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5. 検 索...9 (1) 氏 名

目 次 1. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5. 検 索...9 (1) 氏 名 特 許 取 得 済 み 平 成 26 年 9 月 15 日 株 式 会 社 メディケア 名 刺 ネットクラブ 画 面 説 明 書 1 目 次 1. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5.

More information

目 次 1. 物 件 入 力 とページ 作 成 1.1. ドリームXジグソーの 一 覧 画 面 の 見 方...3 1.2. 基 本 情 報...4 1.3. 画 像 登 録...5 1.4. 地 図 情 報...6 1.5. SEO 対 策...7 1.6. 非 公 開 情 報...8 1.7.

目 次 1. 物 件 入 力 とページ 作 成 1.1. ドリームXジグソーの 一 覧 画 面 の 見 方...3 1.2. 基 本 情 報...4 1.3. 画 像 登 録...5 1.4. 地 図 情 報...6 1.5. SEO 対 策...7 1.6. 非 公 開 情 報...8 1.7. ドリームXジグソー マニュアル 最 終 更 新 日 :2016 年 2 月 8 日 目 次 1. 物 件 入 力 とページ 作 成 1.1. ドリームXジグソーの 一 覧 画 面 の 見 方...3 1.2. 基 本 情 報...4 1.3. 画 像 登 録...5 1.4. 地 図 情 報...6 1.5. SEO 対 策...7 1.6. 非 公 開 情 報...8 1.7. テーマ 設 定...9

More information

GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの 方 のみ 操 作 可

GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの 方 のみ 操 作 可 GRIDY SFA カスタム 項 目 操 作 ガイド 2016 年 1 月 20 日 ナレッジスイート 株 式 会 社 1 GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの

More information

(3) 小 単 元 の 指 導 と 評 価 の 計 画 小 単 元 第 11 章 税 のあらまし の 指 導 と 評 価 の 計 画 ( 四 次 確 定 申 告 制 度 抜 粋 ) 関 心 意 欲 態 度 思 考 判 断 技 能 表 現 知 識 理 解 小 単 元 の 評 価 規 準 税 に 関 す

(3) 小 単 元 の 指 導 と 評 価 の 計 画 小 単 元 第 11 章 税 のあらまし の 指 導 と 評 価 の 計 画 ( 四 次 確 定 申 告 制 度 抜 粋 ) 関 心 意 欲 態 度 思 考 判 断 技 能 表 現 知 識 理 解 小 単 元 の 評 価 規 準 税 に 関 す (1) 単 元 の 評 価 規 準 と 小 単 元 の 評 価 規 準 科 目 名 会 計 実 務 単 位 数 4 単 位 研 究 事 例 国 税 庁 Webサイトを 利 用 した 授 業 展 開 例 単 元 名 第 4 編 税 と 会 計 第 11 章 税 のあらまし 第 12 章 法 人 税 の 計 算 第 13 章 法 人 税 の 申 告 と 納 付 税 の 意 義 種 類 体 系 のあらましを

More information

Microsoft Word - word_05.docx

Microsoft Word - word_05.docx 第 1 章 葉 書 き 作 成 と 外 国 語 の 入 力 縦 書 きのはがき 作 成 1. ページレイアウト タブの ページ 設 定 グループから 起 動 ツールボタン をク リックする 2. ページ 設 定 ダイアログボックスの 用 紙 余 白 文 字 数 と 行 数 タブをクリッ クして 指 定 されたとおり 設 定 を 行 う( 用 紙 :はがき 余 白 : 上 下 15 ミリ 左 右 :10

More information