Web10.pptx

Size: px
Start display at page:

Download "Web10.pptx"

Transcription

1 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2)

2 2 HTML5 コンテンツモデル

3 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models 参 考 World Wide Web Guide: HTML5 コンテンツモデル

4 4 コンテンツモデル 見 取 り 図 フロー インタラクティブ フレージング ヘッディング エンベッディッド セクショニング メタデータ

5 各 カテゴリに 含 まれる 代 表 的 タグ 群 (ただしフローは 省 略 ) 5 メタデータ セクショニング ヘッディング インタラクティブ フレージング エンベッディッド link article a a img aside audio br audio style h1 h6 cite nav input em canvas title section menu strong iframe

6 (HTML4.01,XHTML) ブロック 要 素 とインライン 要 素 6 HTML 4.01 や XHTML には コンテンツモデルという 考 え 方 はなく 代 わりにブロック 要 素 とインライン 要 素 という 分 類 があった ブロック 要 素 タグを 閉 じると, 必 ず 改 行 がある 要 素 例 )h1,h2 h6, p, ul, li, hr など CSS は HTML のバージョン を 選 ばないため この 概 念 を 利 用 する インライン 要 素 タグを 閉 じても 改 行 されな い 要 素 例 )a, em, strong, cite など

7 7 <div>と<span>によるグループ 化 コンテンツ 中 の 任 意 の 部 分 に 対 して そこがひとつのグ ループであることを 示 す これらのタグは 構 造 上 特 定 の 意 味 を 持 たないため CSSと 組 み 合 わせて 利 用 されることが 多 い <div> フロー コンテンツ (HTML 4.01, XHTMLではブロック 要 素 ) <span> フレージング コンテンツ (HTML 4.01,XHTMLではインライン 要 素 )

8 8 margin padding border border-style border-color border-width ボックスモデル

9 9 ボックスモデル CSS では 余 白 や 枠 線 をボックスモデルで 表 現 する 外 側 の 余 白 :margin 内 側 の 余 白 :padding 幅 :width コンテンツ 枠 線 :border 高 さ:height

10 10 ブロックボックスとインラインボックス ブロックボックス ブロック 要 素 で 構 成 されるボックス 幅 (width)と 高 さ(height)が 設 定 できる インラインボックス インライン 要 素 で 構 成 されるボックス 幅 (width)と 高 さ(height)を 設 定 することは できない

11 このスライドは 講 義 では 扱 いません 11 CSSでのボックス 変 換 display プロパティで 異 なるボックスに 変 換 することができる 値 block ブロックボックス inline インラインボックス inline-block インラインブロックボックス 改 行 されないが 幅 と 高 さを 決 められる list-item 箇 条 書 きの 項 目 run-in ランインボックス 後 続 のブロックボックスにインラインとして 挿 入 される

12 12 マージンとパディング 内 側 の 余 白 をパディング 外 側 の 余 白 をマージン と 呼 ぶ それぞれの CSS でのプロパティ padding margin 値 は px などの 幅 をあらわす 単 位 を 用 いる

13 13 枠 線 (ボーダー) 枠 線 は, 枠 線 の 種 類, 枠 線 の 太 さ, 枠 線 の 色 を 決 定 できる それぞれ, border-style 枠 線 の 種 類 border-width 枠 線 の 太 さ border-color 枠 線 の 色 プロパティを 用 いる

14 14 border-style プロパティに 用 いる 値 none なし solid 実 線 dotted 点 線 dashed 破 線 inset 凹 ( 全 体 ) outset 凸 ( 全 体 ) groove 凸 ridge 凹 double 二 重 線

15 15 border の 一 括 指 定 border-width, border-style, border-color は border プロパティで 一 括 指 定 することもできる border-width:5px; border-style:solid; border-color:#666666; border:5px solid #666666;

16 16 背 景 色 background-color ボックスの 背 景 色 を 指 定 するプロパティ

17 17 クラスセレクタ

18 18 クラスセレクタ クラスセレクタ これまで CSS のセレクタには HTML のタグを 用 いて きたが,クラスセレクタを 用 いれば 任 意 の 要 素 に 対 してデザインを 適 用 することが 可 能 タグが 同 じ 場 合 にはすべて 同 じデザインが 適 用 さ れるが クラスセレクタを 用 いれば 場 合 分 けをする ことができる

19 19 クラスセレクタの 記 述 法 CSS での 記 述 すべての 要 素 で 利 用 可 能 なクラスセレクタの 場 合.クラス 名 { } 特 定 の 要 素 にのみ 機 能 するクラスセレクタの 場 合 タグ 名 称.クラス 名 { } クラス 名 には 半 角 の 任 意 の 文 字 列 が 利 用 可 能 ただし 数 字 とハイフンで 始 まってはいけない

20 20 クラスセレクタの 記 述 法 HTML での 呼 び 出 し class 属 性 を 設 定 し 値 にクラス 名 を 記 述 する <h1 class="クラス 名 "> </h1>

21 21 クラスセレクタへの 応 用 div.wakugumi{ border-style:dotted; border-color:#ffcccc; border-width:5px; } <div class="wakugumi">ここに 枠 組 み</div>

22 このスライドは 講 義 では 扱 いません 22 4 方 向 で 異 なるデザイン

23 このスライドは 講 義 では 扱 いません 23 4 方 向 異 なる 余 白 と 枠 線 border,padding,margin は それぞれ4 方 向 独 立 に 指 定 可 能 border-style は, border-top-style border-bottom-style border-left-style border-right-style 上 下 左 右 に 分 解 可 能 border-style と 併 用 しないこと

24 このスライドは 講 義 では 扱 いません 24 4 方 向 異 なる 余 白 と 枠 線 border-width は, border-top-width 上 border-bottom-width 下 border-left-width 左 border-right-width 右 に 分 解 可 能 border-width と 併 用 しないこと

25 このスライドは 講 義 では 扱 いません 25 4 方 向 異 なる 余 白 と 枠 線 border-color は, border-top-color 上 border-bottom-color 下 border-left-color 左 border-right-color 右 に 分 解 可 能 border-color と 併 用 しないこと

26 このスライドは 講 義 では 扱 いません 26 4 方 向 異 なる 余 白 と 枠 線 padding は, padding-top 上 padding-bottom 下 padding-left 左 padding-right 右 に 分 解 可 能 padding と 併 用 しないこと

27 このスライドは 講 義 では 扱 いません 27 4 方 向 異 なる 余 白 と 枠 線 margin は, margin-top 上 margin-bottom 下 margin-left 左 margin-right 右 に 分 解 可 能 margin と 併 用 しないこと

28 このスライドは 講 義 では 扱 いません 28 作 成 例 h1{ border-top-style:none; border-bottom-style:inset; border-left-style:solid; border-right-style:inset; border-top-width:0px; border-bottom-width:2px; border-left-width:40px; border-right-width:2px; border-top-color:#ffffff; border-bottom-color:#666666; border-left-color:#0000ff; border-right-color:#666666; background-color:#ffffff; color:#333333; text-indent:1em; }

29 このスライドは 講 義 では 扱 いません 29 作 成 例 工 夫 次 第 で 付 箋 紙 のようなデザインも 作 ること ができる

30 30 CSS3で 追 加 された 効 果

31 参 考 資 料 31 CSS3のプロパティについて ベンダプレフィックス 各 ブラウザベンダが 実 験 的 にサポートしている が 現 段 階 では 不 完 全 なプロパティもある 仕 様 が 確 定 していないが 採 用 されているものに ついては 接 頭 辞 (プレフィックス)をつける 確 認 のためのサイト ブラウザ Safari 系 (Safari,Google Chrome 等 ) Firefox 系 (Firefox 等 ) Opera Internet Expplorer ベンダプレフィックス -webkit- -moz- -o- -ms-

32 32 枠 線 効 果 角 丸 効 果 border-radius 値 は 半 径 の 長 さ

33 33 枠 線 効 果 ボックスの 影 効 果 box-shadow 値 は 右 方 向 の 距 離 下 方 向 の 距 離 ぼかす 範 囲 影 の 色 box-shadow:3px 3px 5px #666666;

34 34 文 字 の 影 効 果 文 字 の 影 効 果 text-shadow 値 は 右 方 向 の 距 離 下 方 向 の 距 離 ぼかす 範 囲 影 の 色 text-shadow:2px 2px 3px #999999;

35 35 文 字 の 影 効 果 文 字 の 影 効 果 ( 応 用 ) text-shadow:-1px -1px 1px #333333, 1px 1px 1px #ffffff; color:#666666; background-color:#cccccc;

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

Cascade Style Sheet

Cascade Style Sheet SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;

More information

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

第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 - 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 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6.....................

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6..................... web 0448039 1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6...................... 3 7 HTML CSS.................... 3 8....................

More information

CSSの基礎

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

More information

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

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

More information

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

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

More information

Adobe® Corporate Template 2005

Adobe®  Corporate Template 2005 Dreamweaver CS3 による CSS デザイン 入 門 小 松 学 史 アドビ 認 定 インストラクター(ACI) 1 Who is this guy? 小 松 学 史 アクティブファクター Dreamweaverおよび Flash アドビ 認 定 インストラク ター(ACI) 2000 年 よりフリーランスとして マルチメディアコン テンツ Web サイト 制 作 に 携 わる 現 在

More information

この 講 座 で 学 ぶこと 3の 概 要 現 時 点 で 大 体 使 える 機 能 2

この 講 座 で 学 ぶこと 3の 概 要 現 時 点 で 大 体 使 える 機 能 2 スマートフォンサイト 制 作 基 礎 11. 3 概 要 この 講 座 で 学 ぶこと 3の 概 要 現 時 点 で 大 体 使 える 機 能 2 3について 3は 2.1をベースに 様 々な 機 能 を 追 加 改 訂 するモジュールの 集 まり Color Values and Units Media Query Transforms Namespace Backgrounds and Borders

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

Microsoft PowerPoint - css [互換モード]

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

More information

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

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

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

More information

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

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

More information

Microsoft PowerPoint - css.ppt [互換モード]

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

More information

Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で

Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web プログラミング 1 20130508 演習

More information

PowerPoint プレゼンテーション

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

More information

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で 1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです

More information

文 書 構 造 とスタイル

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

More information

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23 Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 1/23 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111019 演習

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

Taro-CSS.jtd

Taro-CSS.jtd CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML

More information

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

More information

WORD 98 入力の手引き

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

More information

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

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

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc)

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc) ブログをカスタマイズ! ~HTML HTML CSS を 使 ってブログを 自 分 の 好 みにしちゃおう ~ ブログを 登 録 しよう! ブログってなんだろう? ブログとはインターネット 上 で 管 理 者 が 記 事 を 投 稿 する 私 的 ニュースサイト あるいは 日 記 的 なもののこと 個 人 のホームページを 持 たなくても 簡 単 に 自 分 が 書 きたいことを 作 って 載 せることができる

More information

インターネットマガジン2004年3月号―INTERNET magazine No.110

インターネットマガジン2004年3月号―INTERNET magazine No.110 C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;

More information

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

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

第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 - 2016メディプロ1HTML統合版v1

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

More information

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

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

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

More information

スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年

スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年 Departmental Bulletin Paper / 紀 要 論 文 スタイルシートを 用 いたWebページの 運 用 太 田, 諭 之 ; 大 橋, 和 義 ; 後 藤, 克 嘉 ; 水 野, 保 則 技 術 職 員 による 技 術 報 告 集. 2009, 17, p. 24-27. http://hdl.handle.net/10076/10274 スタイルシートを 用 いた Web ページの

More information

初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ

初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ 日 本 情 報 処 理 検 定 協 会 主 催 1 級 編 (Expression Web 4 対 応 ) 2015 年 4 月 日 本 情 報 処 理 検 定 協 会 初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression

More information

(1)

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

More information

目 次 動 作 環 境 について... 2 土 砂 災 害 情 報 マップとは... 3 更 新 情 報 を 見 る... 4 熊 本 県 の 防 災 災 害 情 報 を 見 る... 5 関 連 サイトのリンク 情 報 を 見 る... 6 用 語 を 調 べる... 7 利 用 上 の 留 意

目 次 動 作 環 境 について... 2 土 砂 災 害 情 報 マップとは... 3 更 新 情 報 を 見 る... 4 熊 本 県 の 防 災 災 害 情 報 を 見 る... 5 関 連 サイトのリンク 情 報 を 見 る... 6 用 語 を 調 べる... 7 利 用 上 の 留 意 熊 本 県 土 砂 災 害 情 報 マップ 操 作 ガイド 平 成 27 年 3 月 目 次 動 作 環 境 について... 2 土 砂 災 害 情 報 マップとは... 3 更 新 情 報 を 見 る... 4 熊 本 県 の 防 災 災 害 情 報 を 見 る... 5 関 連 サイトのリンク 情 報 を 見 る... 6 用 語 を 調 べる... 7 利 用 上 の 留 意 事 項 を 確

More information

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out 1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation

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

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説 明 )

More information

Microsoft PowerPoint - HTML1復習_1021.ppt

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

More information

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W Webデータ 管 理 HTML+CSS (4) (2 章 ) 2011/10/26( 水 ) 1/21 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z:

More information

<32303130208376838C835B8393332D348B89838F8393837C8343839383672E786477>

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

More information

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

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

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

< 入 力 にあたっての 注 意 事 項 > 応 募 基 本 情 報 の 申 請 は 代 表 申 請 方 式 の 場 合 は 代 表 申 請 を 行 う 応 募 者 が 連 名 申 請 方 式 の 場 合 は 連 名 申 請 する 応 募 者 のうちのいずれかの1 者 が 研 究 体 を 代 表 し

< 入 力 にあたっての 注 意 事 項 > 応 募 基 本 情 報 の 申 請 は 代 表 申 請 方 式 の 場 合 は 代 表 申 請 を 行 う 応 募 者 が 連 名 申 請 方 式 の 場 合 は 連 名 申 請 する 応 募 者 のうちのいずれかの1 者 が 研 究 体 を 代 表 し 平 成 24 年 度 地 域 イノベーション 創 出 実 証 研 究 補 助 事 業 e-rad 応 募 基 本 情 報 申 請 マニュアル 本 事 業 への 応 募 にあたっては 事 前 に e-rad( 府 省 共 通 研 究 開 発 管 理 システム) へ 研 究 機 関 の 登 録 研 究 者 の 登 録 を 行 ったう えで 応 募 基 本 情 報 を 申 請 することが 必 要 となります

More information

研究者情報データベース

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

More information

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード] COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css

More information

タイトル 画 像 の 挿 入 <1 行 目 > タイトル 挿 入 セルの 選 択 属 性 セルタブ 参 照 タイトル 画 像 (30title.jp g) 選 択 開 く <2 行 目 > < 左 側 > < 右 側 > < 中 央 > <3 行 目 > 挿 入 セルの 選 択 属 性 セルタブ 参

タイトル 画 像 の 挿 入 <1 行 目 > タイトル 挿 入 セルの 選 択 属 性 セルタブ 参 照 タイトル 画 像 (30title.jp g) 選 択 開 く <2 行 目 > < 左 側 > < 右 側 > < 中 央 > <3 行 目 > 挿 入 セルの 選 択 属 性 セルタブ 参 サムネール ページの 作 り 方 ビルダー 起 動 ファイル 標 準 モードで 新 規 作 成 ページタイトルを 入 れる 画 面 上 の BODY をクリック BODY の 属 性 ページ 情 報 タグ ページタイトル 紫 陽 花 と 入 力 OK 表 の 挿 入 表 の 挿 入 6 行 1 列 OK 属 性 表 タブ 表 の 幅 :750p x Ente r 属 性 セルタブ

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

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01 [ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01 オリエンテーション 約 40 分 01_ 学習の進め方 02_ リファレンスの紹介 約 09 分 03_

More information

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content: 記号や文字 ;} css とは web ページを構築する上で 主に見た目にかかわる部分を記述するものである 記述方法は html の に直接書く方法 のタグに一つ一つ書く方法と 別の ファイルとして書いておく方法がある 1つ目の方法は タグを に記述して起き その中に css で記述する 2つ目の方法は 例えば

More information

PowerPoint プレゼンテーション

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

More information

GMO MobileHomePage

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

More information

<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

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)

More information

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i ModifiableWeb レイアウトデザインガイド 1. 基 本 構 成 ModifiableWeb を 使 用 したWebサイトの 基 本 構 成 は 以 下 のようになっています ModifiableWeb iframe の 外 側 の Page Header Page Footer 及 び 全 体 の 背 景 は 普 通 のWebサ イト 同 様 自 由 にデザインすることができます ModifiableWeb

More information

(Microsoft Word - \215u\213`\203m\201[\203g20090703.doc)

(Microsoft Word - \215u\213`\203m\201[\203g20090703.doc) 2009/07/03 前 回 のおさらい 関 数 確 認 問 題 水 尾 作 成 の Excel 基 本 動 作 練 習 用 ファイルの 表 タイトルなし を 用 いて 次 の 指 示 を 実 際 に 完 成 させよ 1 セル M50 に セル L50:L54 の 合 計 数 値 をセル K50 の 数 値 で 割 った 結 果 を 表 示 できるよう に 関 数 を 設 定 せよ 2 M50 に

More information

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

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

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

2016 年 度 情 報 リテラシー 次 に Excel のメニューから[ 挿 入 ]タブをクリックし 表 示 されたメニュー 内 の[グラフ]にある[ 折 れ 線 グラフ]のボタンをクリックする するとサブメニューが 表 示 されるので 左 上 の[ 折 れ 線 ]を 選 択 する [ 挿 入 ]

2016 年 度 情 報 リテラシー 次 に Excel のメニューから[ 挿 入 ]タブをクリックし 表 示 されたメニュー 内 の[グラフ]にある[ 折 れ 線 グラフ]のボタンをクリックする するとサブメニューが 表 示 されるので 左 上 の[ 折 れ 線 ]を 選 択 する [ 挿 入 ] ( 第 10 回 )2016/06/20 Excel によるグラフ 作 成 この 回 では Excel を 用 いたグラフ 作 成 の 演 習 を 行 う 新 聞 記 事 等 で 利 用 されているような 一 般 的 なグラ フを 題 材 にし Excel に 備 わっているグラフ 作 成 機 能 を 知 る 1. 課 題 の 確 認 いくつかのグラフの 例 を 参 考 に Excel の 機 能

More information

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

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

More information

PowerPoint プレゼンテーション

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

More information

Web 設計入門

Web 設計入門 情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi

More information

(Microsoft Word - \221\346\202P\202U\201@\214i\212\317.doc)

(Microsoft Word - \221\346\202P\202U\201@\214i\212\317.doc) (1) 1 ア 調 査 すべき の 手 法 情 報 できる 主 要 な 眺 望 地 点 及 び 主 要 で 身 近 な 視 点 の 状 況 な 実 視 施 点 地 ( 区 点 不 域 のうち 特 周 定 辺 の 多 主 数 の 要 な なものをいう 人 々 眺 望 又 地 は 点 周 ( 辺 の 不 以 住 特 下 民 定 が 同 多 じ ) 数 の する 人 及 々が 場 び 所 対 利 で 象

More information

Microsoft Word - ppt_1.docx

Microsoft Word - ppt_1.docx パワポ 講 習 会 ~ひとつ 上 の 発 表 を 目 指 して~ PowerPoint は 研 究 発 表 会 会 社 でのプレゼンなどでよく 使 われているプレゼンテーションソフトの 定 番 中 の 定 番 で す! 一 つ 上 の 発 表 を 目 指 して 使 いこなせるようになろう 今 回 は 2 部 構 成 の 講 習 会 うちの 1 つです 入 門 編 として Power Point の

More information

平成19年9月改定

平成19年9月改定 参 考 建 設 工 事 に 係 る 資 源 の 再 資 源 化 等 に 関 する 法 律 ( 建 設 リサイクル 法 )に 基 づく 通 知 及 び 契 約 書 の 記 載 事 項 等 に 関 する 取 扱 要 領 技 術 計 画 課 作 成 平 成 14 年 5 月 30 日 改 正 平 成 15 年 5 月 30 日 1. 建 設 リサイクル 法 の 目 的 特 定 の 建 設 資 材 について

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 自 由 HTMLでコンテンツを 追 加 する Copyright Diverta inc. All right reserved. 目 次. 自 由 HTMLとは - 自 由 HTMLとは - 機 能 概 要. 自 由 HTMLでコンテンツを 追 加 する - 自 由 HTMLを 開 く - カテゴリを 追 加 する - 自 由 HTMLでコンテンツを 作 成 する -4 閲 覧 編 集 制 限 を

More information

スライド 1

スライド 1 e 研 修 PDCA 運 用 チェック Simple e-learning Management System Plus 操 作 説 明 書 管 理 者 機 能 ( 運 用 チェックテーマ 資 材 作 成 管 理 編 ) 05 年 月 Ver..7 アーチ 株 式 会 社 機 能 e 研 修 管 理 機 能 LOGIN 画 面 (PC 環 境 用 ) 説 明 e 研 修 管 理 機 能 LOGIN

More information

スライド 1

スライド 1 2014.10.28 スタディライター 教 材 動 作 確 認 設 定 手 順 Java Runtime Environment のセキュリティ 強 化 により スタディライターで 作 成 したJavaを 利 用 するアプリケーションの 動 作 確 認 及 び 動 作 のために 各 種 設 定 が 必 要 になりました ここではWindows 8.1 Internet Explorer 11を 例

More information

Microsoft Word - 第3章.doc

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

More information

おすすめページ

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

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

Microsoft Word - P10-0001.doc

Microsoft Word - P10-0001.doc はじめに 1 PowerPoint の 概 要 2 1 PowerPoint とは 2 2 プレゼンテーションとは 2 3 PowerPoint でできること 3 4 プレゼンテーション 作 成 の 流 れ 4 5 PowerPoint の 起 動 5 6 PowerPoint の 画 面 6 第 1 章 新 しいプレゼンテーションを 作 ろう 1 レッスン1 文 字 を 入 力 しよう 3 1 文

More information

改 版 履 歴 版 数 日 付 内 容 担 当 V.1.0 2015/4/1 初 版 NII

改 版 履 歴 版 数 日 付 内 容 担 当 V.1.0 2015/4/1 初 版 NII Webブラウザへの インストールマニュアル 2015/4/1 国 立 情 報 学 研 究 所 改 版 履 歴 版 数 日 付 内 容 担 当 V.1.0 2015/4/1 初 版 NII 目 次 1. はじめに... 1 1-1. 本 マニュアルの 目 的... 1 1-2. 本 書 の 範 囲... 1 1-3. 動 作 環 境 について... 1 2. OS: Windows での 証 明 書

More information

SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000

More information

1

1 Excelファイルアクセス 1. 概 要 Excel ファイルアクセスコンポーネントは Microsoft Excel のファイルを 開 いてセルの 値 や 書 式 を 取 得 変 更 したり テーブル 全 体 を 新 しいファイルと して 保 存 したりするために 用 います Excel ファイルアクセスコンポーネントは アプリケーションビルダーのメニューから 以 下 のように 選 びます [コンポーネント

More information

<4D F736F F D F5A91EE8BC F368C8E3393FA8DC48D F C8E323893FA916493C B95AA8D CE3816A>

<4D F736F F D F5A91EE8BC F368C8E3393FA8DC48D F C8E323893FA916493C B95AA8D CE3816A> 平 成 25 年 度 国 土 交 通 省 税 制 改 正 事 項 ( 住 宅 関 係 抜 粋 ) 平 成 25 年 5 月 国 土 交 通 省 住 宅 局 平 成 25 年 度 住 宅 関 連 税 制 の 改 正 概 要 ( 主 要 事 項 目 次 ) 1. 消 費 税 率 引 上 げを 踏 まえた 住 宅 取 得 対 策 P2 1 住 宅 ローン 減 税 P2 2 投 資 型 減 税 ( 現 金

More information

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の

More information

CSS3

CSS3 オレたちAndroid CSS @media only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;!

More information

1/2

1/2 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (4) 1 スタイル指定 1-1 段落を罫線 ( ボーダー ) で囲む 前回はスタイル指定を行なって段落に色をつけた 今度は罫線で囲んで見よう これまでと同様に 開始タグの中に罫線の指定を行なえばよい HTML 文書は次の通りである 下線部が罫線を引くためのスタイル指定である

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 記 事 を 作 成 する Copyright Diverta inc. All right reserved. 1 目 次 1. 記 事 とは 1-1 記 事 とは 1-2 記 事 モジュール 概 要 2. 記 事 の 内 容 を 書 く 2-1 記 事 モジュール 2-2 記 事 グループの 作 成 2-3 記 事 グループを 編 集 する 2-4 記 事 を 編 集 する 2-5 記 事 編 集

More information

Microsoft Word - word_05.docx

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

More information

目 次 表 紙... 1 目 次... 2 改 訂 記 録... 3 1. 目 的... 4 2. 対 象... 4 3. 製 造 部 門 品 質 部 門 組 織... 4 4. PET 薬 剤 製 造 施 設 ( 施 設 長 )の 責 務... 4 5. 製 造 管 理 者 の 責 務... 7

目 次 表 紙... 1 目 次... 2 改 訂 記 録... 3 1. 目 的... 4 2. 対 象... 4 3. 製 造 部 門 品 質 部 門 組 織... 4 4. PET 薬 剤 製 造 施 設 ( 施 設 長 )の 責 務... 4 5. 製 造 管 理 者 の 責 務... 7 PET 薬 剤 製 造 管 理 総 則 施 設 長 : 印 年 月 日 承 認 登 録 発 行 日 : 年 月 日 V 大 学 PET 薬 剤 製 造 施 設 独 立 行 政 法 人 放 射 線 医 学 総 合 研 究 所 1 目 次 表 紙... 1 目 次... 2 改 訂 記 録... 3 1. 目 的... 4 2. 対 象... 4 3. 製 造 部 門 品 質 部 門 組 織... 4

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

企業結合ステップ2に関連するJICPA実務指針等の改正について③・資本連結実務指針(その2)

企業結合ステップ2に関連するJICPA実務指針等の改正について③・資本連結実務指針(その2) 会 計 監 査 企 業 結 合 ステップ2に 関 連 するJICPA 実 務 指 針 等 の 改 正 について3 資 本 連 結 実 務 指 針 (その2) 公 認 会 計 士 長 ながぬま 沼 ようすけ 洋 佑 1.はじめに 平 成 26 年 2 月 24 日 日 本 公 認 会 計 士 協 会 (JICPA)は 企 業 会 計 基 準 委 員 会 (ASBJ)によ り 平 成 25 年 9 月

More information

<4D6963726F736F667420506F776572506F696E74202D208E9197BF322D31208C9A90DD835283938354838B835E8393836782CC8A88977082C982C282A282C4>

<4D6963726F736F667420506F776572506F696E74202D208E9197BF322D31208C9A90DD835283938354838B835E8393836782CC8A88977082C982C282A282C4> 平 成 23 年 9 月 5 日 国 際 的 な 発 注 契 約 方 式 の 活 用 に 関 する 懇 談 会 資 料 2-1 2. 設 計 施 工 一 括 発 注 方 式 等 における 建 設 コンサルタント 活 用 に 関 する 運 用 ガイドライン( 案 )について Ministry of Land, Infrastructure, Transport and Tourism 0. 本 資 料

More information

かんたんQR

かんたんQR 楽 々Excel ツール Excel 用 便 利 ツール WindowsXP/Vista/7/8/10 対 応 Excel2007/2010/2013/2016 対 応 ユーザーマニュアル 氷 川 情 報 システム 株 式 会 社 2015-0800-0001 1. 楽 々Excel ツール の 概 要... 3 1.1.セルの 文 字 列 置 換... 3 1.2. 重 複 セルチェック... 3

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Cybersecurity-Frameworkを 用 いた 対 策 案 合 意 形 成 手 法 の 提 案 東 京 電 機 大 学 情 報 セキュリティ 研 究 室 福 島 章 太 目 次 2 背 景 課 題 提 案 実 装 今 後 の 方 針 まとめ 目 次 3 背 景 課 題 提 案 実 装 今 後 の 方 針 まとめ 背 景 4 現 状 Cybersecurity-Frameworkについて

More information

SENZOKUポータル

SENZOKUポータル SENZOKU ポータル ポップアップブロック 解 除 手 順 書 2015/06/15 作 成 : 洗 足 学 園 音 楽 大 学 IT 統 括 部 < 更 新 情 報 > 2013/10/25 作 成 2015/06/15 作 成 部 署 名 の 変 更 ( 変 更 前 )IT 推 進 室 ( 変 更 後 )IT 統 括 部 SENZOKU ポータルにログインした 際 掲 示 情 報 や メール

More information

公 的 年 金 制 度 について 制 度 の 持 続 可 能 性 を 高 め 将 来 の 世 代 の 給 付 水 準 の 確 保 等 を 図 るため 持 続 可 能 な 社 会 保 障 制 度 の 確 立 を 図 るための 改 革 の 推 進 に 関 する 法 律 に 基 づく 社 会 経 済 情

公 的 年 金 制 度 について 制 度 の 持 続 可 能 性 を 高 め 将 来 の 世 代 の 給 付 水 準 の 確 保 等 を 図 るため 持 続 可 能 な 社 会 保 障 制 度 の 確 立 を 図 るための 改 革 の 推 進 に 関 する 法 律 に 基 づく 社 会 経 済 情 資 料 2-1 公 的 年 金 制 度 の 持 続 可 能 性 の 向 上 を 図 るための 国 民 年 金 法 等 の 一 部 を 改 正 する 法 律 案 の 概 要 厚 生 労 働 省 年 金 局 平 成 28 年 4 月 21 日 公 的 年 金 制 度 について 制 度 の 持 続 可 能 性 を 高 め 将 来 の 世 代 の 給 付 水 準 の 確 保 等 を 図 るため 持 続 可

More information

1 章.パソコンの 共 有 フォルダを 作 成 する 下 記 に パソコン 側 で 共 有 フォルダを 作 成 する 方 法 を 説 明 します パソコンのOSによって 作 成 する 方 法 が 異 なるので WindowsVista/7/8それぞれの 場 合 について 説 明 します 1.1.Wi

1 章.パソコンの 共 有 フォルダを 作 成 する 下 記 に パソコン 側 で 共 有 フォルダを 作 成 する 方 法 を 説 明 します パソコンのOSによって 作 成 する 方 法 が 異 なるので WindowsVista/7/8それぞれの 場 合 について 説 明 します 1.1.Wi MC780dn/MC780dnf スキャンTo 共 有 フォルダの 設 定 スキャン To 共 有 フォルダは スキャン 画 像 を 指 定 したネットワーク 上 のパソコンの 共 有 フォルダに 保 存 する 機 能 です 利 用 するには パソコンおよび MC780dn/MC780dnfの 設 定 が 必 要 です 本 手 順 書 の 構 成 は 以 下 の 通 りです 1 章 パソコンの 共

More information