PowerPoint Presentation

Size: px
Start display at page:

Download "PowerPoint Presentation"

Transcription

1 LPI-Japan 主 催 HTML5プロフェッショナル 認 定 試 験 レベル1 ポイント 解 説 無 料 セミナー 2015 年 10 月 講 師 : 鈴 木 雅 貴 (NTTソフトウェア 株 式 会 社 )

2 自 己 紹 介 鈴 木 雅 貴 (すずきまさたか) ᵒ NTTソフトウェア 株 式 会 社 HTML5アカデミック 認 定 校 ᵒ HTML5 推 進 室 所 属 ᵒ HTML5アカデミック 認 定 校 セミナー 講 師 ᵒ レベル1はβ 試 験 にて 認 定 取 得 個 人 で 日 本 語 組 版 周 り 仕 様 の 翻 訳 ( 停 滞 中 ) ᵒ 2

3 本 日 お 話 すること 試 験 について ᵒ 試 験 概 要 範 囲 試 験 範 囲 のポイント 解 説 ᵒ Webの 基 礎 知 識 ᵒ 要 素 ᵒ CSS3 ᵒ レスポンシブWebデザイン 3 ᵒ オフラインWebアプリケーション 学 習 の 進 め 方

4 試 験 について

5 試 験 概 要 公 式 サイトに 情 報 があります ᵒ JavaScriptは 出 ません ᵒ ただ JavaScriptが 何 なのかや 使 い 方 などは 範 囲 に 含 まれ るので 知 っておいた 方 がよいでしょう 5

6 試 験 範 囲 公 式 サイトに 情 報 があります が ᵒ 長 っ 6 6

7 試 験 範 囲 は 広 い 時 間 も 限 られていますので 本 日 は 広 い 試 験 範 囲 を 学 習 する 上 でのとっかかりとなる 情 報 とポイントを 持 って 帰 ってもらうことを 目 的 とします (X)HTML4.01/CSS2.1までも 試 験 範 囲 には 含 まれ ますが ここでの 解 説 は 一 部 を 除 き 省 略 させていた だきます 7 7

8 0. HTML5とは

9 HTML5とは HTML4.01までは 静 的 なWebページを 作 成 するた めのものであった しかし Webの 世 界 は リッチなマルチメディアが 多 種 多 様 なデバイスで 実 行 されるアプリケーション のプラットフォームとなることが 求 められていた HTML5はそれを 実 現 するために 策 定 された 仕 様 9 9

10 HTML5 狭 義 と 広 義 狭 義 のHTML5は W3Cが 勧 告 したHTML5 仕 様 のみ ᵒ A vocabulary and associated APIs for HTML and XHTML 広 義 のHTML5は 狭 義 HTML5 仕 様 にとどまらず 関 連 するCSSや 各 種 JavaScript API 群 を 含 んだもの ᵒ あまりにも 広 大 なため W3Cでは 技 術 分 野 を8つに 分 類 して 整 理 セマンティクス/マルチメディア/オフライン&ストレージ/3D,グラフィッ クス,エフェクト/デバイスアクセス/パフォーマンス&インテグレーション /コネクティビティ/CSS

11 をふまえて

12 1. Webの 基 礎 知 識

13 Webの 基 礎 知 識 について tml#lv1_11 一 見 HTML5と 関 係 が 薄 いように 思 えますが HTML5によって デザイナ/コーダ Webプログラ マ サーバ/ネットワークエンジニアは 自 分 の 担 当 部 分 だけでなく 自 らの 領 域 を 越 えた 知 識 やスキルが 必 要 とされています 13

14 ポイント Webサイトがどのような 仕 組 みでWebブラ ウザに 表 示 されるかを 把 握 ᵒ IP, DNS, TCP, HTTP プロキシ2 種 14

15 Webサイト 表 示 の 仕 組 み

16 登 場 人 物 など PC: 略 Webブラウザ: PCやスマホ 上 で 動 作 する Webサイト 閲 覧 用 ブラウザ ( 以 降 ブラウザ) サーバマシン: サーバアプリケーションが 動 作 するコンピュータ 機 器 Webサーバ: サーバマシン 上 でWebサイトを 提 供 するサーバソフト ウェア ざっくり 概 要 で 説 明 します ブラウザ Webサーバ PC サーバマシン 16

17 まず対象のWebサーバへアクセスしたい 対象のWebサーバをどう識別する? ᵒ ネットワーク上には無数のサーバが存在 IPアドレスを使う ᵒ のような数字の羅列 ᵒ IPアドレスを住所代わりにして目的のサーバにデータを送信 ᵒ この仕組み(機器同士の通信)を規定しているのが IP(Internet Protocol) ᵒ IPは情報を目的地まで届けるためのプロトコル へ! ブラウザ PC 17 Webサーバ サーバマシン The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18 君はIPアドレスを覚えているのか 普段IPアドレスを入力してませんよね DNS(Domain Name System)を使う ᵒ "example.com"のようなドメイン名と呼ばれる名前を付け IPア ドレスと紐づけて覚えやすくする(この仕組みがDNS) ᵒ DNSサーバに聞けば紐づいたIPアドレスがわかる(名前解決) ᵒ 詳しくはJPNICの ドメイン名のしくみ https://www.nic.ad.jp/ja/dom/system.html example.comは? DNSサーバ ブラウザ Webサーバ です PC 18 サーバマシン example.com へ! The HTML5 Logo is licensed under Creative Commons Attribution

19 Webサーバはどれですか Webサーバ以外にもサーバプログラムが ᵒ サーバマシンにはSSHなどのサーバプログラムも動作しており IP アドレスだけではWebサーバを識別できない ポート番号を使う ᵒ サーバごとに既定のポート番号を指定(Webサーバは80番) ᵒ このあたりのアプリケーション間通信の仕組みを規定しているのが TCP(Transmission Control Protocol) ᵒ TCPはIPを利用し通信路を確立 そのうえで情報をやりとりする ᵒ TCPにはエラーチェックや再送など 情報を確実に送る仕組みがある ブラウザ 通信路確立 PC Webサーバ(80) サーバマシン example.com :80へ! The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20 ポート番号 指定してますか 普段はポート番号を入力しないですよね URLで通信プロトコル(ポート番号)を指定している ᵒ "http://example.com/"のhttp://で HTTP(HyperText Transfer Protocol)を使っての通信を宣言している ᵒ HTTPは80番ポートを使用する(前述のWebサーバは80番と同意) 80番ポートを指定したことになる これでブラウザとWebサーバが無事つながった ブラウザ 通信路確立 PC Webサーバ(80) サーバマシン example.com The HTML5 Logo is licensed under Creative Commons Attribution

21 つながったのでコンテンツのデータを 取 得 HTTPでコンテンツを 取 得 する 1. 確 立 されたTCP 通 信 路 上 で ブラウザからWebサーバへ x.htmlをくださいというリクエストを 送 信 する 2. Webサーバはブラウザへレスポンスとしてx.htmlの 中 身 を 返 す 3. TCPで 確 立 した 通 信 路 を 閉 じる 4. ブラウザはx.htmlを 表 示 する ブラウザ x.htmlください x.htmlです Webサーバ(80) x.html 21 見 えた! PC サーバマシン example.com

22 HTTPメッセージのポイント(1) HTTPメッセージはヘッダとボディに 分 かれる ᵒ ヘッダはリクエストやレスポンスがどのようなものかを 示 す 情 報 が 格 納 されている クライアントやサーバの 処 理 に 必 要 な 重 要 情 報 ᵒ ボディはデータ 送 信 時 にデータを 格 納 する 箇 所 リクエストで 使 用 可 能 なメソッド(ヘッダに 書 かれる) メソッド 名 GET POST PUT HEAD OPTIONS DELETE TRACE 説 明 サーバから 指 定 URIのリソースを 取 得 クライアントからサーバへデータを 送 信 送 信 後 サーバからデータが 送 られることもある サーバの 指 定 URIにデータを 保 存 GETと 同 様 だがヘッダのみ 取 得 指 定 URIがサポートするメソッドを 取 得 指 定 URIのリソース 削 除 サーバまでのネットワーク 経 路 チェック CONNECT TCPトンネル 接 続 (プロキシ 利 用 時 のSSLトンネリングなどに 使 う) 22

23 HTTPメッセージのポイント(2) レスポンスのステータスコード(ヘッダに 書 かれる) ᵒ リクエストの 結 果 がどうだったかの 情 報 が 3ケタの 数 字 で 書 かれている ステータスコード 1xx 2xx 3xx 4xx 5xx 概 要 と 代 表 例 サーバ 側 の 情 報 100: Continue 成 功 200: OK 転 送 301: Moved Parmanently / 304: Not Modified クライアントからのリクエストエラー 400: Bad Request / 401: Unauthorized / 403: Forbidden / 404: Not Found サーバでのリクエスト 処 理 エラー 500: Internal Server Error / 503: Service unavailable 23

24 プロキシ

25 プロキシ2 種 プロキシはWebブラウザ 等 クライアントとWebサーバとの 通 信 を 中 継 Webプロキシ(クライアント 側 に 配 置 ) ᵒ クライアントのインターネット 直 接 続 防 止 ᵒ キャッシュによる 速 度 向 上 リバースプロキシ(Webサーバ 側 に 配 置 ) ᵒ Webサーバのインターネットからの 直 接 続 防 止 ᵒ Webサーバの 負 荷 分 散 処 理 内 部 ネットワーク クライアント (webブラウザ) Webプロキシ 外 部 ネットワーク リバースプロキシ 内 部 ネットワーク Webサーバ 25

26 2. 要 素

27 要 素 について tml#lv1_13 HTML5はもちろんのこと HTML4.01 以 前 も 対 象 となっています 27

28 学 習 のポイント HTML4.01を 押 さえたうえで 5への 変 更 点 を 学 ぶ 何 が 変 わったの? ᵒ 定 型 句 がシンプルになっている ᵒ 要 素 に 意 味 を 持 たせられるようになっている ᵒ スタイル 的 な 機 能 は 排 除 されている ᵒ 新 しいインタフェースや 機 能 が 使 えるようになっている 28

29 定型句がシンプルに 文書型宣言 HTML4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> HTML5 <!DOCTYPE html> 文字エンコーディング HTML4.01 Transitional <meta http-equiv="content-type" content="text/html; charset=utf-8"> HTML5(一例) <meta charset="utf-8"> 他にもありますが いろいろ楽になりました 29

30 定 型 句 がシンプルに たとえばこのような 感 じです <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script> </head> <body> コンテンツ </body> </html> 30

31 要 素 に 意 味 を 持 たせられるように セクションを 明 示 する 要 素 によりアウトラインを 意 識 した 作 成 が 可 能 に セクションとは ᵒ 文 書 の 一 区 分 ᵒ アウトラインでは 一 階 層 を 形 成 アウトラインとは ᵒ HTML 文 書 では 目 次 のようなもの ᵒ アウトラインのイメージ あああ 2. いいい 1. いいいのあああ 2. いいいのいいい

32 セクションを 明 示 する 要 素 以 下 の 要 素 でセクションが 明 示 される 要 素 名 section 説 明 一 般 的 なセクションを 表 し 見 出 しとセットで 使 用 article 単 体 で 完 結 できるセクション(1フィードに 含 める 内 容 ) aside nav body あるコンテンツに 関 係 しているが 切 り 離 せるもの サイドバー 広 告 など 主 要 なナビゲーション body セクション 明 示 はないが 関 連 する 要 素 要 素 名 説 明 h1~h6 セクションの 見 出 し header セクションのヘッダ footer セクションのフッタ address 直 近 祖 先 のセクションに 関 する 連 絡 先 32

33 セクション 関 連 要 素 の 配 置 例 body header nav article section aside section footer 33

34 アウトライン生成の例 以下のHTMLがあったとする <body> <h1>apples</h1> <p>apples are fruit.</p> <section> <h2>taste</h2> <p>they taste lovely.</p> <section> <h3>sweet</h3> <p>red apples are sweeter than green ones.</p> </section> </section> <section> <h2>color</h2> <p>apples come in various colors.</p> </section> </body> アウトラインを確認してみよう demo ᵒ validator.nu 34

35 意 味 を 持 たせられるメリット 構 造 がページの 読 解 の 助 けとなる 人 々に 大 きな 利 点 をもたらす ᵒ いわゆるアクセシビリティの 向 上 これがオープンなプラットフォームとして 提 供 されているのが 大 きなポイント ᵒ 誰 でも 使 える! 構 造 はこうしなければダメ!という 答 えがあるわけではない ᵒ 構 造 には 作 成 者 の 主 張 が 反 映 される ᵒ 判 断 の 参 考 になるものとして HTML5 DoctorのHTML5 Sectioning Element Flowchartがある 35

36 スタイル 的 な 機 能 の 排 除 HTML5の 要 素 からは 要 素 および 属 性 によるスタイル 指 定 機 能 は 排 除 されている ᵒ スタイル 指 定 は 基 本 CSSでやることに 廃 止 された 要 素 例 : big, center, font, strike, tt ᵒ 排 除 された 主 要 な 理 由 は 以 下 アクセシビリティの 低 下 メンテナンスコストの 増 加 文 書 サイズの 増 大 ᵒ 残 ったのはstyle 要 素 および 属 性 スタイル 的 機 能 の 要 素 の 一 部 は 機 能 を 再 定 義 されているのもポイント 36 ᵒ b, i, hr, s, small, u

37 新 しいインタフェースや 機 能 フォームのinput 要 素 で 使 えるtype 属 性 が 大 幅 増 加 ᵒ s-of-the-type-attribute HTMLだけでマルチメディアコンテンツを 再 生 でき るaudio 要 素 /video 要 素 プラグインを 使 用 せずビットマップ 画 像 を 描 画 でき るcanvas 要 素 demo 37

38 他 のポイント HTML4.01からHTML5での 変 更 点 を 押 さえておく ᵒ 新 規 追 加 された 要 素 ᵒ 変 更 となった 要 素 属 性 ᵒ 削 除 された 要 素 属 性 各 要 素 のカテゴリを 把 握 しておく ᵒ ᵒ -content-categories ᵒ できればコンテンツモデルも 覚 えておけるとよいですが な かなか 大 変 です 38

39 3. CSS3

40 CSS3について s_lv1.html#lv1_12 CSS3はもちろんのこと CSS2.1 以 前 も 対 象 となっています 40

41 学 習 のポイント CSS2.1を 押 さえたうえで 3への 変 更 点 を 学 ぶ CSS2.1のポイント ᵒ カスケード ᵒ ボックスモデル CSS3で 何 が 変 わったの? ᵒ 画 像 が 必 要 だった 修 飾 がCSSで 可 能 に ᵒ 便 利 セレクタの 大 幅 追 加 ᵒ 簡 単 にマルチカラムレイアウト 実 現 ᵒ CSSのみで 変 形 アニメーション 実 現 41

42 カスケード

43 カスケード カスケード処理 ᵒ 継承などで1つの要素に対し複数の指定が起こりうるが 基本的に優 先度は直接指定>継承(近い指定の方が強い) ᵒ それが同じ場合の優先度判断をするのがカスケード処理 優先順位づけルールその1: CSSの種類 ᵒ 文章作成者CSS>ユーザCSS>ブラウザ標準CSS ユーザCSSは 利用者がWebブラウザに対して指定するCSS ブラウザ標準CSSは Webブラウザの持つデフォルトのCSS ᵒ ただし CSSの値に!important をつけると最優先される 例: pの文字サイズ指定に!importantを使用する p { font-size: 1em!important; } まとめると!important付きユーザCSS >!important付き文書作成者css > 文章作成 者指定CSS > ユーザ指定CSS > ブラウザ標準CSS 43

44 カスケード 優 先 順 位 づけルールその2: セレクタタイプ ᵒ CSSの 種 類 が 同 じである 場 合 セレクタをタイプ 別 に 分 類 し それ ぞれの 個 数 を 数 え 点 数 ( 詳 細 度 )を 算 出 し 高 い 方 を 優 先 する セレクタのタイプ タイプ A B C D 対 象 style 属 性 に 記 述 したCSS IDセレクタ クラスセレクタ 属 性 セレクタ 疑 似 クラス 要 素 セレクタ 疑 似 要 素 詳 細 度 の 算 出 詳 細 度 は 個 数 を 連 結 した A.B.C.D と 書 くとわかりやすい Aが0つ Bが1つ Cが2つ Dが1つの 場 合 の 詳 細 度 は 比 較 方 法 は 後 述 44

45 カスケード 詳細度からの優先度算出 ᵒ A>B>C>Dの順で優先度が高い ᵒ 優先度が高いセレクタタイプの点数が高い方が優先される 詳細度からの優先度算出の例 #id { 装飾A } ul li.class { 装飾B } ui ol+li { 装飾C } この場合の優先度順は装飾A>装飾B>装飾Cとなり 装飾Aが適用される Specify Calculatorは詳細度を算出してくれるので参考に 45

46 カスケード 優先順位づけルールその3: 出現順 ᵒ 詳細度による優先度も同じ場合 後に出現したCSSが優先される 出現順からの優先度の例 #id { 装飾A } #id { 装飾B } この場合は後に出現した装飾Bが適用される 46

47 ボックスモデル

48 ボックスモデルとボックスサイズ 算 出 文 書 内 の 全 要 素 は 四 角 形 の 領 域 を 形 成 ᵒ コンテンツ 領 域 padding(ボックス 内 側 の 余 白 ) border( 境 界 線 ) margin(ボックス 外 側 の 余 白 )の4つから 成 り 立 つ margin border padding コンテンツ 領 域 (テキスト 画 像 ) 48 ボックスサイズの 算 出 ᵒ 幅 ならコンテンツ 領 域 の 幅 (width)+padding+border ᵒ プロパティbox-sizingの 値 をborder-boxにすると ボックスサイズが widthもしくはheightで 指 定 した 値 となる コンテンツ 領 域 のサイズはpaddingやborderの 値 も 使 って 自 動 算 出

49 CSS3 変 更 点

50 CSS3で 可 能 になった 修 飾 の 例 ボックスの 角 丸 ᵒ border-radiusプロパティ(http://www.w3.org/tr/css3- background/#corners) グラデーション ᵒ linear-gradient, radial-gradient(http://www.w3.org/tr/css3- images/#gradients) ボックスに 影 ᵒ box-shadowプロパティ(http://www.w3.org/tr/css3- background/#the-box-shadow) demo 50

51 便 利 セレクタの 大 幅 追 加 ( 以 下 は 一 部 ) 属 性 セレクタに 前 方 / 後 方 / 部 分 一 致 が 追 加 ᵒ [attr^="val"], [attr$="val"], [attr*="val"] ᵒ 結 合 子 に 兄 弟 セレクタ"~"が 追 加 ᵒ 構 造 を 利 用 した 疑 似 クラスが 大 幅 追 加 ᵒ nth-child(), nth-of-type(), last-childなど ᵒ demo 51

52 簡 単 にマルチカラムレイアウト Multi-column Layout Moduleで 複 数 段 組 みレイアウトを 簡 単 に 実 現 可 能 ᵒ column-count, coloum-gapプロパティなど ᵒ Flexible Box Layout Moduleで floatを 使 わずにボックス を 横 並 びにできる ᵒ display: flexとflex-directionプロパティなど 52 ᵒ CSSによるレイアウトの 自 由 度 が 増 しています demo

53 CSSで 変 形 アニメーション transformプロパティでボックスを 移 動 変 形 できる ᵒ translate(), rotate(), scale(), skew()など ᵒ transition 関 連 プロパティで 要 素 の 変 化 を 滑 らかにできる ᵒ 例 えば :hoverでの 変 化 を 滑 らかにするなど ᵒ animation 関 連 プロパティで 要 素 の 変 化 を 連 続 して 行 指 定 するのが 特 徴 ᵒ demo 53

54 4. レスポンシブ Webデザイン

55 レスポンシブWebデザインについて tml#lv1_14 タイトルはレスポンシブWebデザインですが ス マートデバイスに 特 化 した 内 容 も 盛 り 込 まれている ので 要 注 意 55

56 学 習 のポイント レスポンシブWebデザインがどういうものか を 押 さえる 実 現 方 法 を 押 さえる 56

57 レスポンシブWebデザインとは 多 種 多 様 なデバイスが 登 場 し 続 ける 状 況 の 中 デバ イスごとに 対 応 サイトを 開 発 するのはコストがかか り また 将 来 登 場 する 端 末 への 対 応 も 不 明 そこで レスポンシブWebデザインと 呼 ばれるWeb サイト 開 発 手 法 が 登 場 ᵒ 広 い 意 味 では 利 用 中 であるユーザの 状 況 や 環 境 に 合 わせ そのユー ザにより 良 い 体 験 を 提 供 しようという 考 え 方 ᵒ 手 法 を 表 す 場 合 には 1つのHTMLで デバイスの 特 性 ( 主 に 画 面 横 幅 )に 応 じてレイアウトやデザインを 変 更 する 手 法 を 指 す 57

58 デバイス特性に応じてレイアウトを変更する方法 レスポンシブWebデザインでは デバイス特性を利用してCSS を切り替えるMedia Queriesを利用し デバイスごとにレイア ウトを変更する CSS スマートフォン demo タブレット HTML CSS CSS PC 58

59 メリットとデメリット メリット ᵒ 将 来 登 場 するデバイスも 見 越 して 対 応 可 能 ᵒ URLが 同 じとなるため SEO 的 に 有 利 ᵒ リダイレクトが 発 生 しないため 読 み 込 み 時 間 を 短 縮 可 能 ᵒ HTMLが1つで 済 むのでコストを 削 減 できる( 可 能 性 ) デメリット ᵒ 設 計 製 造 の 難 易 度 が 高 い 逆 にコスト 高 になることも ᵒ モバイル 向 けには 動 画 や 画 像 も 切 り 替 える 必 要 モバイルは 回 線 が 不 安 定 で 画 面 は 小 さい ᵒ 画 面 フローの 変 更 には 対 応 できない ᵒ スマホ 用 にPC 向 けサイトを 表 示 できない ᵒ HTML/CSSのサイズが 増 加 し ページ 表 示 や 動 作 が 重 くなる 可 能 性 59

60 レスポンシブWebデザインの 実 現 手 法 Media Queries( 前 述 ) Fluid Grid ᵒ 画 面 サイズにあわせてグリッドの 幅 を 変 更 する Fluid Image ᵒ 画 面 サイズに 合 わせて 画 像 サイズを 変 更 する これ 以 外 にもあるが 基 本 はこの3つ フレームワークをベースに 作 ることも 多 い demo 60

61 5. オフラインWeb アプリケーション ( 概 要 とマニフェスト)

62 オフラインWebアプリケーションについて tml#lv1_15 62

63 学 習 のポイント 概 要 と マニフェスト 63

64 オフラインWebアプリケーションとは ブラウザがオフラインでも 静 的 コンテンツを 閲 覧 可 能 なWebアプリ ケーション ブラウザは キャッシュマニフェストというファイルを 読 み 取 り キャッシュマニフェストに 指 定 されたコンテンツをローカルに 保 存 この 仕 組 みによりオフライン 閲 覧 が 可 能 クライアント (Webブラウザ) サーバ クライアントからのリクエスト 一 部 コンテンツは ローカルに 保 存 ファイルダウンロード 64

65 オフラインWebアプリケーション 利 用 時 の 動 作 次 回 からは ローカルへ 保 存 したコンテンツを 閲 覧 ᵒ オンラインでなくてもコンテンツを 閲 覧 できる ᵒ オンラインであってもサーバアクセスが 不 要 クライアント (Webブラウザ) サーバ 65

66 メリットとデメリット メリット ᵒ オフライン 状 態 でもWebアプリケーションを 閲 覧 させることが 可 能 ᵒ (2 回 目 のアクセス 以 降 )ローカルファイルはネットワーク 経 由 のファ イルより 速 く 読 み 込 まれる ᵒ 全 ファイルをサーバから 取 得 しないため サーバ 負 荷 の 軽 減 が 可 能 デメリット ᵒ サーバ 側 のファイルを 更 新 した 場 合 ユーザのローカルキャッシュ ファイルも 更 新 が 必 要 ᵒ キャッシュマニフェストの 記 述 を 誤 った 場 合 変 更 ファイルが 更 新 されないことがある 66

67 実 現 のために 必 要 な 作 業 Webサーバの 設 定 ᵒ ".manifest"のmimeタイプを"text/cache-manifest"に ᵒ これがないとキャッシュマニフェストファイルが 認 識 されない Apacheや.htaccessの 設 定 キャッシュマニフェストファイルの 作 成 ᵒ どのファイルをキャッシュする/しないをなどを 設 定 する ᵒ 書 き 方 は 後 述 ファイルを 作 成 してWebサーバ に 配 置 キャッシュ 対 象 HTMLファイルでのmanifest 属 性 指 定 ᵒ html 要 素 のmanifest 属 性 に 利 用 するキャッシュマニフェストファ イルのパスを 指 定 ᵒ HTMLファイルのみでよい(CSS/JavaScript 等 は 不 要 ) HTMLに 追 記 67

68 キャッシュマニフェストファイルの 記 述 方 法 CACHE MANIFEST # 先 頭 文 字 を#で 始 めることにより コメントを 記 述 可 能 # 本 例 ではパスをキャッシュマニフェストからの 相 対 パスで 記 載 # ここはCACHE:セクション # このセクションにはローカルキャッシュするファイルを 記 載 index.html app.js NETWORK: # このセクションにはキャッシュしないファイルを 記 載 submit.cgi FALLBACK: # このセクションには 代 替 ファイルを 記 載 / offline.html SETTINGS: # キャッシュの 利 用 方 法 を 設 定 可 能 prefer-online 68

69 最 後 に: 学 習 の 進 め 方

70 学 習 の 進 め 方 実 際 に 試 してみよう ᵒ JSFiddleやJS Binならブラウザから 書 いてすぐ 確 認 できる ᵒ 特 にCSSは 動 かして 確 認 することで 理 解 が 深 まる 仕 様 書 を 見 よう ᵒ CSSのプロパティなどはそうするのが 確 実 ᵒ 全 部 を 見 る 必 要 はありません 暗 記 も 必 要 ᵒ 合 格 ラインは70%であることも 考 慮 して 効 率 的 に 受 験 中 にあせらない 心 構 えを ᵒ 70%なので 少 々わからなくても 平 気 70

71 役 に 立 つ 情 報 源 など Mozilla Developers Network(MDN)の Web technology for developers ᵒ https://developer.mozilla.org/ja/docs/web ᵒ ここからHTMLやCSSの 技 術 情 報 が 見 られる ᵒ かなり 日 本 語 化 されています W3C CSSプロパティ 一 覧 ᵒ ᵒ プロパティに 関 連 する 仕 様 とその 標 準 化 進 行 状 況 がわかる 71 資 格 関 連 情 報 ᵒ 公 式 サイト ᵒ ᵒ Facebook https://www.facebook.com/html5exam 71

72 ふりかえり: 本 日 お 話 したこと 試 験 について ᵒ 試 験 概 要 ᵒ 試 験 範 囲 試 験 範 囲 のポイント 解 説 ᵒ Webの 基 礎 知 識 ᵒ 要 素 ᵒ CSS3 ᵒ レスポンシブWebデザイン ᵒ オフラインWebアプリケーション 学 習 の 進 め 方 72 72

73 おまけ

74 ベンダプレフィックス CSSで 標 準 化 の 進 む 機 能 がブラウザで 先 行 実 装 された 場 合 プロパティ や 値 の 先 頭 にベンダプレフィックスと 呼 ばれる 特 定 の 接 頭 語 を 付 ける 必 要 がある 例 えば Firefoxのベンダプレフィックスは 以 下 -moz-プロパティa: 値 ; ᵒ どのようなベンダプレフィックスがあるかはベンダ 固 有 の 話 なので 試 験 には でないと 思 われます 現 状 は 次 のようになっている ᵒ MozillaやGoogleは 今 後 ベンダプレフィックスをつけないと 表 明 ᵒ ベンダプレフィックスは 標 準 化 がある 程 度 進 むと 外 すことが 推 奨 ᵒ ただ 昔 のブラウザを 対 象 にすることはある 現 状 はベンダプレフィックスあり/なしを 併 記 しておくのがよいでしょう 74

75 ブラウザでの 対 応 状 況 調 査 方 法 各 ブラウザにおける 要 素 やCSS 機 能 の 対 応 状 況 ベンダプレフィック スの 有 無 などは 頻 繁 に 変 更 される ᵒ 自 分 で 調 べているとつらい caniuseで 調 査 するとよい ᵒ 使 い 方 は 検 索 フォームで 使 いたい 機 能 を 検 索 するか 一 覧 から 選 ぱっと 調 べるには 非 常 に 便 利 です 試 験 には 出 ません 75

76 Open the Future with HTML5. 76

Microsoft PowerPoint - HTML5seminor20140315

Microsoft PowerPoint - HTML5seminor20140315 HTML5プロフェッショナル 認 定 試 験 Level.1 学 習 のポイント 2014.03.15 HTML5プロフェッショナル 認 定 試 験 ポイント 解 説 無 料 セミナー@ 大 阪 NTTソフトウェア 株 式 会 社 鈴 木 雅 貴 自 己 紹 介 鈴 雅 貴 (すずきまさたか) NTTソフトウェア 株 式 会 社 HTML5アカデミック 認 定 校 になりました HTML5 推 進

More information

NEC マネジメントパートナーラーニング事業のご紹介 ヒューマンスキルから IT スキルまで さまざまな人材開発研修をご提供 ( 例 )HTML5 関連コース HTML5/CSS3 基礎 HTML5 マークアップ編 HTML5 API 編 HTM

NEC マネジメントパートナーラーニング事業のご紹介  ヒューマンスキルから IT スキルまで さまざまな人材開発研修をご提供 ( 例 )HTML5 関連コース HTML5/CSS3 基礎 HTML5 マークアップ編 HTML5 API 編 HTM LPI-Japan 主催 HTML5 プロフェッショナル認定試験レベル 1 ポイント解説無料セミナー 2015 年 2 月 28 日 NEC マネジメントパートナー株式会社 横馬場和子 NEC マネジメントパートナーラーニング事業のご紹介 http://www.neclearning.jp/ ヒューマンスキルから IT スキルまで さまざまな人材開発研修をご提供 ( 例 )HTML5 関連コース HTML5/CSS3

More information

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

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

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

(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

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

CSSの基礎

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

More information

おすすめページ

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

More information

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

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

More information

別 紙 釧 路 公 立 大 学 ホームページリニューアル 業 務 CMS 要 件 一 覧 NO ( 大 分 類 ) NO ( 中 分 類 ) NO ( 小 分 類 ) 3 静 的 HTML 作 成 4 HTMLソース 直 接 編 集 5 CSSソース 直 接 編 集 6 画 像 掲 載 7 アクセシ

別 紙 釧 路 公 立 大 学 ホームページリニューアル 業 務 CMS 要 件 一 覧 NO ( 大 分 類 ) NO ( 中 分 類 ) NO ( 小 分 類 ) 3 静 的 HTML 作 成 4 HTMLソース 直 接 編 集 5 CSSソース 直 接 編 集 6 画 像 掲 載 7 アクセシ 別 紙 釧 路 公 立 大 学 ホームページリニューアル 業 務 CMS 要 件 一 覧 NO ( 大 分 類 ) NO ( 中 分 類 ) NO ( 小 分 類 ) 説 明 利 用 者 組 織 管 理 パスワード 管 理 登 録 修 正 削 除 パスワード 期 限 管 理 組 織 名 組 織 ID 組 織 パスワードを 登 録 修 正 削 除 する 管 理 者 自 身 がパスワードの 設 定 変

More information

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

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

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

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

More information

0序文‐1章.indd

0序文‐1章.indd 本 書 に 記 載 されたURL 等 は 執 筆 時 点 でのものであり 予 告 なく 変 更 される 場 合 があります 本 書 の 使 用 ( 本 書 のとおりに 操 作 を 行 う 場 合 を 含 む)により 万 一 直 接 的 間 接 的 に 損 害 が 発 生 し ても 出 版 社 および 著 者 は 一 切 の 責 任 を 負 いかねますので あらかじめご 了 承 下 さい Microsoft

More information

WebコアCMSご紹介資料

WebコアCMSご紹介資料 FUJITSU Enterprise Application WebコアCMS:Webコンテンツ 管 理 システム 株 式 会 社 富 士 通 ソーシアルサイエンスラボラトリ WebコアCMSとは WebコアCMSの 概 要 WebコアCMSの 優 位 性 1 WebコアCMSの 概 要 WebコアCMS( 1) は 散 在 するWebコンテンツを 一 元 管 理 し 簡 単 編 集 承 認 フロー

More information

2 2-1 HTMLの 構 造 等 公 開 URLが 静 的 なHTMLであること 判 読 不 可 能 な 文 字 を 含 むものや 文 字 数 が 多 すぎるURL(いわゆる 動 的 なHTML)は 原 則 として 不 可 とする 2-2 任 意 なURLが 使 用 でき コンテンツ 作 成 時

2 2-1 HTMLの 構 造 等 公 開 URLが 静 的 なHTMLであること 判 読 不 可 能 な 文 字 を 含 むものや 文 字 数 が 多 すぎるURL(いわゆる 動 的 なHTML)は 原 則 として 不 可 とする 2-2 任 意 なURLが 使 用 でき コンテンツ 作 成 時 1 1-1 サイト 全 般 デザイン 等 サイト 全 体 が 標 準 化 統 一 化 されたページデザインとすること ただし サイトで 異 なるデザインで 作 成 表 示 することができること 1-2 ヘッダー フッターは 原 則 すべてのページで 統 一 したデザインとすること 1-3 ロゴ イラスト バナーなどサイトに 応 じたデザインで 作 成 すること 1-4 スマートフォンやタブレット 端

More information

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

World Wide Webの 始 まり CREN( 欧 州 合 同 原 子 核 研 究 機 構 )には 多 く の 科 学 者 が 訪 れ それぞれが 異 なる 文 書 シス テムを 使 っていた 情 報 の 共 有 が 大 きな 課 題 12/05/09 2

World Wide Webの 始 まり CREN( 欧 州 合 同 原 子 核 研 究 機 構 )には 多 く の 科 学 者 が 訪 れ それぞれが 異 なる 文 書 シス テムを 使 っていた 情 報 の 共 有 が 大 きな 課 題 12/05/09 2 第 8 回 WWW 動 的 コンテンツ グループ6 西 尾 優 山 本 風 歌 尾 立 誠 弥 宇 野 則 文 藤 原 敏 明 12/05/09 1 World Wide Webの 始 まり CREN( 欧 州 合 同 原 子 核 研 究 機 構 )には 多 く の 科 学 者 が 訪 れ それぞれが 異 なる 文 書 シス テムを 使 っていた 情 報 の 共 有 が 大 きな 課 題 12/05/09

More information

PowerPoint Presentation

PowerPoint Presentation 2 3 4 HTML 5 Level.1 Markup Professional HTML 5 Level.2 Application Development Professional 5 6 7 8 9 http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam http://www.pearsonvue.com/japan/registration/

More information

HTTPの 規 格

HTTPの 規 格 第 5 回 の 内 容 HTTPの 規 格 HTTPメッセージの 基 本 HTTPの 規 格 HTTPの 規 格 Internet Engineering Task Force (IETF) Request for Comments (RFC) 年 バージョン RFC 1996 年 HTTP/1.0 RFC 1945 Hypertext Transfer Protocol -- HTTP/1.0 1997

More information

HTML5Lv1_ key

HTML5Lv1_ key HTML5 1 The HTML5 Logo is licensed under Creative Commons Attribution 3.0.Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ The HTML5 Logo is licensed under Creative Commons Attribution

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション HTML5レベル1ポイント 解 説 セミナー 業 務 Webアプリ 開 発 スタートアップナビゲーション - HTML5 はじめの2~3 歩 - 2015 年 10 月 25 日 株 式 会 社 カサレアル 王 子 東 HTML5プロフェッショナル 認 定 試 験 レベル1 対 象 マルチデバイスに 対 応 した 静 的 なWebコンテ ンツをHTML5を 使 ってデザイン 作 成 できる Webデザイナー

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

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

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

More information

第48回 技能五輪全国大会

第48回 技能五輪全国大会 第 50 回 技 能 五 輪 全 国 大 会 ウェブデザイン 職 種 競 技 課 題 The 50th National Skills Competition Web Design Competition Test Project ( 事 前 公 表 ) 2012 年 10 月 9 日 1 1. MODULE 1 課 題 モジュール 1 制 限 時 間 6.5 時 間 ( 競 技 1 2 日 目 )

More information

『HTML5プロフェッショナル認定資格 レベル1 教科書』サンプルPDF

『HTML5プロフェッショナル認定資格 レベル1 教科書』サンプルPDF 本 書 について HTML5 NTT 2014 2 18 免 責 事 項 2013 12 URL HTML5 Level.1 http://www.html5exam.jp/outline/objectives.html#lv1 LPI-Japan HTML5 HTML5 ATM LPI-Japan LPI-Japan Contents 1 章 Webの 基 礎 知 識... 1 1.1 HTTP/HTTPS

More information

Microsoft PowerPoint - css [互換モード]

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

More information

(1) 多 言 語 においては 日 本 語 英 語 韓 国 語 中 国 語 ( 繁 体 字 簡 体 字 )の4 言 語 以 上 に 対 応 し て 選 択 表 示 選 択 音 声 を 可 能 とすること 音 声 ガイダンス 用 のデータは 発 注 者 より 提 供 する (2)PC スマートフォン

(1) 多 言 語 においては 日 本 語 英 語 韓 国 語 中 国 語 ( 繁 体 字 簡 体 字 )の4 言 語 以 上 に 対 応 し て 選 択 表 示 選 択 音 声 を 可 能 とすること 音 声 ガイダンス 用 のデータは 発 注 者 より 提 供 する (2)PC スマートフォン 宇 城 市 観 光 情 報 WEB アプリケーション 設 計 構 築 保 守 運 用 委 託 業 務 公 募 型 プロポーザルに 係 る 仕 様 書 1 業 務 名 宇 城 市 観 光 情 報 WEB アプリケーション 設 計 構 築 保 守 運 用 委 託 業 務 ( 以 下 本 業 務 という ) 2 業 務 の 目 的 世 界 遺 産 三 角 西 港 をはじめとした 宇 城 市 の 魅 力 をPRして

More information

Mobile Access簡易設定ガイド

Mobile Access簡易設定ガイド Mobile Access Software Blade 設定ガイド チェック ポイント ソフトウェア テクノロジーズ ( 株 ) アジェンダ 1 SSL VPN ポータルの設定 2 3 4 Web アプリケーションの追加 Check Point Mobile for iphone/android の設定 Check Point Mobile for iphone/android の利用 2 変更履歴

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

slide.key

slide.key Responsive Web Design Adaptive Web Design マルチ 環 境 対 応 の 考 え 方 考 え 方は? 違 いは? Responsive Web Design.content {! position: absolute;! }! @media screen and (min-width: 768px) {!.content {! position: relative;!

More information

スライド 1

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

More information

textbook.indd

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

More information

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

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

More information

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

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

More information

03 CMS機能審査表.xls

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

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

HTML5Lv1_ key

HTML5Lv1_ key HTML5 1 The HTML5 Logo is licensed under Creative Commons Attribution 3.0.Unported by the W3C; http://creativecommons.org/licenses/by/3.0/ The HTML5 Logo is licensed under Creative Commons Attribution

More information

Web のクライアントサーバモデル

Web のクライアントサーバモデル 第 2 回の内容 クライアントサーバモデル URI HTTP Web のクライアントサーバモデル クライアントサーバモデル ユーザークライアントサーバ 処理要求の入力 処理要求 結果の提示 処理結果 処理 Web のクライアントサーバモデル ユーザー Web ブラウザ Web サーバ URI の指示 HTTP リクエスト Web ページの描画 HTTP レスポンス URI Web ブラウザのアドレスバー

More information

文 書 構 造 とスタイル

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

More information

■新聞記事

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

More information

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

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

More information

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

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

More information

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

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

More information

策 を 掲 載 し 検 索 閲 覧 することができるようにする 開 発 したサイトを 平 成 29 年 3 月 1 日 ( 水 )までに 公 開 する また 公 開 にあたっ て 2 月 初 旬 には 必 要 な 動 作 検 証 を 行 えるスケジュールとすること 機 能 設 計 構 築 の 内 容

策 を 掲 載 し 検 索 閲 覧 することができるようにする 開 発 したサイトを 平 成 29 年 3 月 1 日 ( 水 )までに 公 開 する また 公 開 にあたっ て 2 月 初 旬 には 必 要 な 動 作 検 証 を 行 えるスケジュールとすること 機 能 設 計 構 築 の 内 容 ( 仮 称 ) 草 津 市 子 育 て 応 援 サイトおよびアプリ 構 築 業 務 仕 様 書 1 業 務 名 ( 仮 称 ) 草 津 市 子 育 て 応 援 サイトおよびアプリ 構 築 業 務 2 履 行 期 間 システム 運 用 構 築 導 入 業 務 契 約 締 結 日 から 平 成 29 年 2 月 28 日 まで システム 利 用 にかかる 業 務 平 成 29 年 3 月 1 日 から

More information

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

More information

情報通信の基礎

情報通信の基礎 情報通信の基礎 2016 年 5 月 19 日 ( 木 ) 第 4 回授業 1 本日の予定 グローバルIPアドレスとプライベートIPアドレス DHCPサーバ (IPアドレスの自動割り当て等) DNSサーバ ( 名前解決 ) MACアドレス ARP( アドレス解決プロトコル ) ネットワークの階層モデル アプリケーションを識別するポート番号 2 TCP/IP (Transmission Control

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

19 2. アクセシビリティ 20 3. アクセシビリティ 21 2. アクセシビリティ 22 2. アクセシビリティ 23 2. アクセシビリティ 24 2. アクセシビリティ 25 2. アクセシビリティ 26 2. アクセシビリティ 27 2. アクセシビリティ 28 2. アクセシビリティ

19 2. アクセシビリティ 20 3. アクセシビリティ 21 2. アクセシビリティ 22 2. アクセシビリティ 23 2. アクセシビリティ 24 2. アクセシビリティ 25 2. アクセシビリティ 26 2. アクセシビリティ 27 2. アクセシビリティ 28 2. アクセシビリティ 1 1. 導 入 実 績 機 2 1. 導 入 実 績 機 3 1. 機 機 熱 海 市 ホームジリニューアル 業 務 委 託 CMS 機 要 件 一 覧 既 に 市 町 で1 件 以 上 ホームジの 再 構 築 及 び 運 用 の 実 績 があるこ 導 入 するCMSは 熱 海 市 と 同 規 模 以 上 の 自 治 体 へ 導 入 された 実 績 が あり 現 在 も 稼 動 しているこ 閲 覧

More information

intra-mart Accel Platform

intra-mart Accel Platform 目次目次 Copyright 2014 NTT DATA INTRAMART CORPORATION クイック検索検索 1 Top 目次 改訂情報はじめに本書の目的対象読者本書の構成概要 OAuthとは で提供している認証フロー認可コードによる認可インプリシットグラントアクセストークンの更新 で提供しているエンドポイントアクセストークンの有効期限と更新方法アクセストークンの有効期限の設定方法 2 改訂情報

More information

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

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション スマートフォン 向 けサイトを 変 換 して 携 帯 でも 表 示 させるASP/SaaSサービス roundabout cloud ラウンドアバウト クラウド Last update 2012.02.28 What is roundabout cloud? ラウンドアバウト クラウドとは? スマートフォン 対 応 が 今 すぐ 始 められるASP/SaaSサービス スマートフォン 向 けのサイト1つで

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

第 10 問 取 得 したドメインでウェブサイトを 公 開 する 場 合 共 用 サーバは 一 切 使 えないので 専 用 サーバを 用 意 する 必 要 が ある 第 11 問 WaSP とは Web accessibility Standard Project の 略 称 である 第 12 問

第 10 問 取 得 したドメインでウェブサイトを 公 開 する 場 合 共 用 サーバは 一 切 使 えないので 専 用 サーバを 用 意 する 必 要 が ある 第 11 問 WaSP とは Web accessibility Standard Project の 略 称 である 第 12 問 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 グローバルナビゲーションとは 水 平 方 向 に 配 置 されるものを 指 し 垂 直 方 向 に 配 置 されるものはローカルナビ ゲーションと 呼 ばれる 第 2 問 イーサネットとは 1000BASE-T の 規 格 のみをさす 第 3 問 IPv6 で 定

More information

PowerPoint プレゼンテーション

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

More information

Untitled

Untitled VPN 接 続 の 設 定 AnyConnect 設 定 の 概 要, 1 ページ AnyConnect 接 続 エントリについて, 2 ページ ハイパーリンクによる 接 続 エントリの 追 加, 2 ページ 手 動 での 接 続 エントリの 追 加, 3 ページ ユーザ 証 明 書 について, 4 ページ ハイパーリンクによる 証 明 書 のインポート, 5 ページ 手 動 での 証 明 書 のインポート,

More information

388-356697252-2.pdf

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

More information

(Microsoft PowerPoint - D-SPA_NTML\224F\217\330\202\311\202\302\202\242\202\30420120621.pptx)

(Microsoft PowerPoint - D-SPA_NTML\224F\217\330\202\311\202\302\202\242\202\30420120621.pptx) option i-filter for D-SPA NTLM 認 証 - 基 本 設 定 説 明 資 料 デジタルアーツ 株 式 会 社 営 業 部 セールスエンジニア 課 NTLM 認 証 のメリット シングルサインオンによるWebアクセス 管 理 を 実 現! 認 証 サーバー 上 のグループ 情 報 を 用 いたルール 振 り 分 けも 可 能 ユーザー 追 加 削 除 時 などの 運 用 管

More information

What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私 ) ぜひ 名 前 を 覚 えていってくださ

What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私 ) ぜひ 名 前 を 覚 えていってくださ HeartRails APIs for MA5 ハートレイルズの 提 供 API について http://www.heartrails.com/ What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私

More information

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

More information

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

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込

More information

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

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

More information

第9回

第9回 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利

More information

Microsoft Word - K_仮想共用サーバVer WEBサーバ_rev2.docx

Microsoft Word - K_仮想共用サーバVer WEBサーバ_rev2.docx マイサーバーサービス 利 用 マニュアル (VPS 共 用 サーバー 用 Web サーバー 設 定 ) マイサーバーVPS compact RIMNET http://www.rim.or.jp/support/ Members Guide Book 2010/07 はじめに 本 利 用 マニュアルでは マイサーバーVPS compactのvps 共 用 サーバー 用 の Webサーバ の 設 定

More information

新 規 就 農 支 援 Webサイト 制 作 業 務 委 託 公 募 型 プロポーザル 仕 様 書 1 業 務 の 名 称 新 規 就 農 支 援 Webサイト 制 作 業 務 委 託 2 業 務 の 目 的 福 井 県 若 狭 町 における 就 農 の 魅 力 や 就 農 支 援 を 広 くPRし

新 規 就 農 支 援 Webサイト 制 作 業 務 委 託 公 募 型 プロポーザル 仕 様 書 1 業 務 の 名 称 新 規 就 農 支 援 Webサイト 制 作 業 務 委 託 2 業 務 の 目 的 福 井 県 若 狭 町 における 就 農 の 魅 力 や 就 農 支 援 を 広 くPRし 平 成 27 年 度 次 世 代 就 農 リーダー 育 成 事 業 新 規 就 農 支 援 Webサイト 制 作 業 務 委 託 公 募 型 プロポーザル 仕 様 書 平 成 27 年 11 月 福 井 県 若 狭 町 1 新 規 就 農 支 援 Webサイト 制 作 業 務 委 託 公 募 型 プロポーザル 仕 様 書 1 業 務 の 名 称 新 規 就 農 支 援 Webサイト 制 作 業 務

More information

期 待 できる HTML UI Design Patterns の 位 置 づけを 図 1 に 示 す Designing Interfaces [1]は Web というメディアに 限 らない 汎 用 的 な UI を 網 羅 したデザイン パターンである Web で 使 用 される UI パターン

期 待 できる HTML UI Design Patterns の 位 置 づけを 図 1 に 示 す Designing Interfaces [1]は Web というメディアに 限 らない 汎 用 的 な UI を 網 羅 したデザイン パターンである Web で 使 用 される UI パターン UI 設 計 のための HTML デザイン パターン 日 野 克 哉 株 式 会 社 東 芝 ソフトウェア 技 術 センター 鷲 崎 弘 宜 早 稲 田 大 学 基 幹 理 工 学 研 究 科 情 報 理 工 学 専 攻 HTML は 本 来 文 書 を 記 述 するための 言 語 であり 現 在 の Web アプリケー ションやサイトに 見 られるような 高 度 なインタラクションを 伴 う UI

More information

アイデアマンズ 株 式 会 社 について 2005 年 11 月 設 立 パッケージソフトウェアの 開 発 ケータイキット for Movable Type キャプチャツール WebScan PHP Perlなどによるシステム 開 発 Webサイトの 制 作 2

アイデアマンズ 株 式 会 社 について 2005 年 11 月 設 立 パッケージソフトウェアの 開 発 ケータイキット for Movable Type キャプチャツール WebScan PHP Perlなどによるシステム 開 発 Webサイトの 制 作 2 Movable Typeによるブログの 携 帯 対 応 と イントラブログへの 活 用 2010 年 3 月 15 日 ~WEB 社 内 報 で 情 報 共 有 をもっと 簡 単 に~ アイデアマンズ 株 式 会 社 代 表 取 締 役 宮 永 邦 彦 1 アイデアマンズ 株 式 会 社 について 2005 年 11 月 設 立 パッケージソフトウェアの 開 発 ケータイキット for Movable

More information

■コンテンツ

■コンテンツ Joruri CMS 1.3.2 基 本 マニュアル (2013.6.28) 2012.2.15 コンテンツ 記 事 コンテンツ 記 事 では 以 下 のような 機 能 特 徴 を 備 えた 記 事 ページの 作 成 を 行 うこと が 出 来 ます TinyMCE の 使 用 で HTML 等 の 複 雑 な 知 識 を 必 要 とせず WORD のような 感 覚 でページを 作 成 ページの 公

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ページ 作 成 フローについて ページの 構 造 について(レイアウト/ 共 通 ヘッダー フッター) 1 共 通 ヘッダー フッターのレイアウトパターン * 共 通 ヘッダー フッター サイドバーのパターンは 複 数 作 成 することが 可 能 です * 基 本 上 層 ページの 共 通 パーツを 引 き 継 ぎますが 任 意 に 変 更 することも 可 能 です ページの 構 造 について(コンテンツ

More information

Microsoft PowerPoint - 08回目.pptx

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

More information

スライド 1

スライド 1 Webプログラミング2 2012 年 版 第 1 回 ガイダンス/Webプログラミング 概 要 (1) 担 当 : 斉 藤 典 明 (NTT セキュアプラットフォーム 研 究 所 ) ガイダンス 自 己 紹 介 現 職 : 日 本 電 信 電 話 ( 株 ) セキュアプラットフォーム 研 究 所 主 任 研 究 員 これまでの 経 歴 : グループウェア 系 ネットワークサービス 知 識 共 有 の

More information

<837D836A83858341838B2E6169>

<837D836A83858341838B2E6169> ご 利 用 マニュアル KASMAPHO サポートセンター :0120-949-067 ( 受 付 時 間 : 平 日 10 時 ~16 時 ) Mail:support@kasmapho.com もくじ KASMAPHO とは? P2~ 5 まずはじめに 代 表 者 様 にしていただくこと 1. 新 規 登 録 からサービス 開 始 まで 2. グループ 作 成 3. メンバー ID 発 行 P9~12

More information

目 次 1. 提 案 依 頼 にあたって... 3 1.1. 本 件 の 目 的... 3 2. 岩 手 県 立 大 学 ウェブサイトリニューアルの 概 要... 3 2.1. 概 要... 3 2.2. スケジュールの 目 安... 3 2.3. 契 約 期 間... 3 2.4. 費 用...

目 次 1. 提 案 依 頼 にあたって... 3 1.1. 本 件 の 目 的... 3 2. 岩 手 県 立 大 学 ウェブサイトリニューアルの 概 要... 3 2.1. 概 要... 3 2.2. スケジュールの 目 安... 3 2.3. 契 約 期 間... 3 2.4. 費 用... 公 立 大 学 法 人 岩 手 県 立 大 学 岩 手 県 立 大 学 ウェブサイトリニューアル 業 務 に 係 る 提 案 仕 様 書 1 目 次 1. 提 案 依 頼 にあたって... 3 1.1. 本 件 の 目 的... 3 2. 岩 手 県 立 大 学 ウェブサイトリニューアルの 概 要... 3 2.1. 概 要... 3 2.2. スケジュールの 目 安... 3 2.3. 契 約 期

More information

SciFinder エラーへの対処法

SciFinder エラーへの対処法 SciFinder エラーへの 対 処 法 2016 年 3 月 18 日 改 訂 SciFinder でエラーが 起 きた 場 合 は,まずはご 利 用 環 境 が 推 奨 環 境 下 にあるかどうかをご 確 認 ください. http://www.jaici.or.jp/scifinder/require.html 目 次 ケース 1:SciFinder にアクセスできない... 2 ケース 2:ID

More information

事例でわかる!スマートフォン対応手法カタログ

事例でわかる!スマートフォン対応手法カタログ お 役 立立ち 資 料料 事 例例 でわかる! スマートフォン 対 応 手 法 カタログ 本 資 料料 が 提 供 される 目 的 以 外 の ならびに 御 社 ( 御 社 関 連 会 社 を 含 む) 以 外 の 第 3 者 による 利利 用 複 製 はご 遠 慮 願 います IMAGICA Imageworks, Inc. All rights reserved. 2014. 07. 18 はじめに

More information

はじめに 相 模 原 市 では 青 年 団 などの 活 動 によって 最 初 に 大 沢 上 溝 両 公 民 館 が 設 置 された 昭 和 24 年 から 一 貫 して 地 域 住 民 が 主 体 となった 公 民 館 活 動 を 展 開 し てきています 独 立 館 として 地 域 ごとに 公

はじめに 相 模 原 市 では 青 年 団 などの 活 動 によって 最 初 に 大 沢 上 溝 両 公 民 館 が 設 置 された 昭 和 24 年 から 一 貫 して 地 域 住 民 が 主 体 となった 公 民 館 活 動 を 展 開 し てきています 独 立 館 として 地 域 ごとに 公 相 模 原 市 教 育 委 員 会 はじめに 相 模 原 市 では 青 年 団 などの 活 動 によって 最 初 に 大 沢 上 溝 両 公 民 館 が 設 置 された 昭 和 24 年 から 一 貫 して 地 域 住 民 が 主 体 となった 公 民 館 活 動 を 展 開 し てきています 独 立 館 として 地 域 ごとに 公 民 館 を 整 備 する 中 で それぞれの 館 では 体 育 部

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (6) ~POST (2011/06/22) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 入 力 された 文 字 を 受 け 取 りPOSTで 送 信 する 部 分 (post.htm)

More information

HTML5がもたらすWeb の新展望について

HTML5がもたらすWeb の新展望について 技 術 動 向 レポート HTML5がもたらすWebの 新 展 望 について コンサルタント 情 報 通 信 研 究 部 井 上 敬 介 今 日 重 要 なインフラとなっているWebを 支 える 技 術 の1つに HTMLがある 現 在 この HTMLの 最 新 仕 様 であるHTML5の 策 定 が 進 められており 注 目 が 集 まっている 本 稿 では HTML5 の 誕 生 に 至 る 歴

More information

サポート技術方法

サポート技術方法 キャッシュと 同 期 の 推 奨 設 定 イントロダクション このドキュメントでは Curl RTE のパフォーマンスを 最 大 限 に 活 用 できるように Curl RTE の 設 定 と Web ブラウザのキャッシュの 特 徴 について 説 明 します この 設 定 を 採 用 することで 正 確 なプログラムの 動 作 を 維 持 しながら Curl アプリケー ションにおいて 最 も 効

More information

Microsoft Word - 仕様書

Microsoft Word - 仕様書 住 まいの 情 報 一 元 化 ホームページ 制 作 等 業 務 委 託 仕 様 書 1 業 務 名 住 まいの 情 報 一 元 化 ホームページ 制 作 等 業 務 2 期 間 契 約 締 結 日 から 平 成 28 年 3 月 31 日 まで 3 ホームページ 公 開 時 期 平 成 28 年 1 月 予 定 4 目 的 北 陸 新 幹 線 の 金 沢 開 業 により 交 流 人 口 が 増 え

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

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

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

More information

SciFinder (Web 版) エラーへの対処法

SciFinder (Web 版) エラーへの対処法 SciFinder (Web 版 ) のエラーへの 対 処 法 化 学 情 報 協 会 2012 年 4 月 改 訂 ケース1:SciFinder (Web 版 ) にアクセスできない 症 状 : ブラウザの お 気 に 入 り から SciFinder (Web 版 ) にアクセ スしている 場 合, 左 記 のエラ ー (HTTP 500 内 部 サーバー エラー)によりアクセスできな い. 解

More information

A

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

More information

スライド 1

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション HTML5 プロフェッショナル認定試験 レベル 1 ポイント解説セミナー アシアル株式会社 Copyright Asial Corporation. LPI-Japan 2016. All Rights All rights Reserved. reserved. 目次 HTML5 プロフェッショナル認定試験とは 概要 試験範囲 カテゴリ毎の頻出ポイント解説 Webの基礎知識 HTML 要素 CSS3

More information

Googleカレンダーを使った 図書館会議室予約の可視化

Googleカレンダーを使った 図書館会議室予約の可視化 Googleカレンダーを 使 った 図 書 館 会 議 室 予 約 の 可 視 化 平 成 24 年 9 月 20 日 図 書 系 職 員 のための アプリケーション 開 発 講 習 会 東 京 大 学 柏 図 書 館 の 会 議 室 使 用 の 可 視 化 が なぜ 必 要 だったか? 東 京 大 学 柏 図 書 館 の 会 議 室 はどのようなもの? セミナー 室 1 セミナー 室 2 メディアホール

More information

Press Release english

Press Release english モバイル クライアントの 基 本 認 証 QlikView テクニカル ブリーフ Published: November, 2011 www.qlikview.com はじめに QlikView Server をインストールする 際 標 準 セキュリティ 構 成 ではユーザー 表 示 に Windows アカウントが ユー ザーの 認 証 に NTLM が 使 用 されます ローカル エリア ネットワーク

More information

chapter1 Web デザインへのアプローチ chapter1 Web デザインへのアプローチ 1-1 Web デザイン 1-1-1 インターネットと Web 1-1-2 Web サイトの 目 的 とデザイン 1-1-3 Web ページの 表 現 手 法 1-2 Webサイトの 種 類 1-2-

chapter1 Web デザインへのアプローチ chapter1 Web デザインへのアプローチ 1-1 Web デザイン 1-1-1 インターネットと Web 1-1-2 Web サイトの 目 的 とデザイン 1-1-3 Web ページの 表 現 手 法 1-2 Webサイトの 種 類 1-2- Ver.1 2015/12/18 ( 仮 称 )のご 案 内 表 紙 デザイン 改 訂 中 2016 年 ( 前 期 後 期 )Webデザイナー 検 定 ベーシック 出 題 範 囲 について 2016 年 3 月 の 入 門 Webデザイン 第 三 版 ( 仮 称 ) の 発 行 にともない 2016 年 の 出 題 範 囲 は 改 訂 版 の 内 容 から 出 題 いたします 書 名 ( 仮 称

More information

目 次 1.スマートフォン 最 適 化 について 2.shuttoについて 4.タブレットPC 対 応 について 5.よくあるご 質 問 2

目 次 1.スマートフォン 最 適 化 について 2.shuttoについて 4.タブレットPC 対 応 について 5.よくあるご 質 問 2 スマホ 変 換 ツール スマホ 変 換 ツールshuttoのご 紹 介 2015/11/5 株 式 会 社 イー エージェンシー 1 目 次 1.スマートフォン 最 適 化 について 2.shuttoについて 4.タブレットPC 対 応 について 5.よくあるご 質 問 2 1.スマートフォン 最 適 化 について 3 スマートフォン 最 適 化 の 手 法 1.スマートフォン 最 適 化 について

More information

<4D6963726F736F667420506F776572506F696E74202D2081798DC58F4994C5817A8349838A83578393834183568358836782CC82B28FD089EE5F32303136303430382E70707478>

<4D6963726F736F667420506F776572506F696E74202D2081798DC58F4994C5817A8349838A83578393834183568358836782CC82B28FD089EE5F32303136303430382E70707478> 高 性 能 コンテンツ 配 信 サービス オリジンアシストのご 紹 介 スリーハンズ 株 式 会 社 2016 年 4 月 8 日 2 本 サービスの 位 置 付 け 3 1. 開 発 者 の 目 線 と 運 用 者 の 立 場 で 最 適 な 開 発 運 用 環 境 を 提 供 します 2. WEBアプリケーションのパフォーマンスを 常 に 監 視 し 性 能 を 最 大 限 に 引 き 出 すソリューションを

More information

1 本 書 の 目 的 及 び 用 語 1.1 本 書 は Tap Style Cloud 利 用 約 款 ( 以 下 本 利 用 約 款 という )に 規 定 される サービスの 詳 細 を 定 めるものです なお 本 書 に 使 用 される 用 語 は 以 下 の 1.1 用 語 集 での 記

1 本 書 の 目 的 及 び 用 語 1.1 本 書 は Tap Style Cloud 利 用 約 款 ( 以 下 本 利 用 約 款 という )に 規 定 される サービスの 詳 細 を 定 めるものです なお 本 書 に 使 用 される 用 語 は 以 下 の 1.1 用 語 集 での 記 Tap Style Cloud サービス 仕 様 書 Ver2.0.0 大 日 本 印 刷 株 式 会 社 1 本 書 の 目 的 及 び 用 語 1.1 本 書 は Tap Style Cloud 利 用 約 款 ( 以 下 本 利 用 約 款 という )に 規 定 される サービスの 詳 細 を 定 めるものです なお 本 書 に 使 用 される 用 語 は 以 下 の 1.1 用 語 集 での

More information

目 次 機 能 概 要 -------------------------------------------------------------- 3 1. 配 信 管 理 1. メールの 配 信 履 歴 と 予 約 を 確 認 する -------------------------------

目 次 機 能 概 要 -------------------------------------------------------------- 3 1. 配 信 管 理 1. メールの 配 信 履 歴 と 予 約 を 確 認 する ------------------------------- 月 額 900 円 からはじめるメールマーケティング 一 斉 メール 配 信 サービス 機 能 ガイド 2015/6/1 更 新 目 次 機 能 概 要 -------------------------------------------------------------- 3 1. 配 信 管 理 1. メールの 配 信 履 歴 と 予 約 を 確 認 する ----------------------------------------------

More information

CMS操作手順書

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

More information

必 要 に 応 じて,システムのチューニング,リソースの 追 加 等 の 提 案 及 び 対 策 の 実 施 を 行 う テレビ 等 の 影 響 によりアクセスが 急 激 に 集 中 した 場 合 でも,サーバがダウンすることのな いよう 留 意 する 6バグフィクス,セキュリティパッチ 等 の 適

必 要 に 応 じて,システムのチューニング,リソースの 追 加 等 の 提 案 及 び 対 策 の 実 施 を 行 う テレビ 等 の 影 響 によりアクセスが 急 激 に 集 中 した 場 合 でも,サーバがダウンすることのな いよう 留 意 する 6バグフィクス,セキュリティパッチ 等 の 適 平 成 28 年 度 観 光 いばらき ホームページ 保 守 等 に 関 する 業 務 委 託 仕 様 書 1 業 務 の 名 称 平 成 28 年 度 観 光 いばらき ホームページ 保 守 等 に 関 する 業 務 委 託 2 業 務 の 目 的 インターネットによる 情 報 発 信 の 重 要 性 に 鑑 み, 本 県 の 豊 かな 観 光 資 源 や 県 産 品 を 広 く 県 内 外 に

More information

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ユーザーアクセス 記 録 の 収 集 5. 制 限 解 除 キー 6. 利 用 規 定 7. 更 新 履 歴

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ユーザーアクセス 記 録 の 収 集 5. 制 限 解 除 キー 6. 利 用 規 定 7. 更 新 履 歴 BASIC 認 証 管 理 L-TOOL BasicAuth (ver 2.2) 取 扱 説 明 書 Little Net http://l-tool.net/ - 2015 年 7 月 22 日 版 - 目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ユーザーアクセス 記 録 の 収 集 5. 制 限 解 除 キー 6. 利 用 規 定 7. 更 新 履 歴 1. 概 要 この

More information