IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

Size: px
Start display at page:

Download "IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation"

Transcription

1 IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere

2 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践 Coach レイアウト制御の実現 3.1 CSS レイアウトに対するよくある要望 3.2. レイアウト実現例 4. 参照情報 4.1 ブラウザ開発ツールによる HTML/CSS 要素の調べ方 2

3 1. はじめに WebSphere

4 1. はじめに ( 資料の目的 ) 目的 IBM BPM では Coach View の組み合わせによって ユーザー インタフェース ( 画面 ) を構築する IBM BPM は HTML/CSS の技術に基づいているため レイアウト装飾の変更を うだけであれば 標準の Coach View に対して CSS を適用することにより実現が可能である (Coach View の動作そのものを変更 定義したい場合にはカスタム Coach View の追加開発が必要となる ) 本資料では CSS の指定によって可能となるレイアウト装飾方法の基本と よくある要望に基づく実現例を提供することによって 画面の開発や標準化作業をより迅速に えるための情報を提供することを目的とする 対象者 新規に BPM を用いて開発を う開発担当者 (Process Designer の使用法や Coach View の開発方法を理解している方 ) 想定バージョン 製品 :Business Process Manager ブラウザ :Internet Explorer 10 4

5 2.Coach View 構造の基本 WebSphere

6 2.1 CSS の基礎 CSS とは HTML データ構造とは分離した形で スタイル ( 書の え方 ) を指定する 語 / 仕組みです 基本的な書式 < セレクタ > { < プロパティ > : < 値 >; < セレクタ >: HTMLデータ構造内における特定の要素を選択する例 名前セレクタ書式スタイルの適用対象 要素型セレクタ要素名同要素名のタグ全てが対象になります class セレクタ. クラス名同クラス名が付与された要素全てが対象になります id セレクタ #ID 名 Id 属性が一致する要素全てが対象になります 子孫セレクタ セレクタ1 セレクタ2 セレクタ1で選択される要素の子 孫要素についてセレクタ 2で選択される要素全てが対象になります < プロパティ >: スタイルの種類 ( 例 : 字色 要素の高さなど ) を指定する例 color ( 字色 ), width( 幅 ) < 値 >: プロパティで指定されたスタイルの具体的な値 ( 赤色 高さ 100pt など ) を指定する例 : red ( 赤色 ), 100px (100 ピクセル ) 6 CSS そのものの詳細は 専門書 /Web ページなどでご確認ください

7 2.2 Coach における CSS 記述場所 Coach View 定義内の インライン CSS Coach View をテンプレートとして使用し CSS もテンプレートの一部として提供したい場合 新規 Coach View 部品を作成し その Coach View 部品に依存する CSS を提供したい場合 カスタムHTML テキスト にて <style> タグを挿入可能 特定のページにのみ定義したい場合あるいは 管理対象ファイルでCSSファイルを選択することが可能 cssファイルをwebファイルとして準備し 共有したい場合 ( ファイルと組み合わせて使用 ) 7

8 2.3 標準 Coach View 構造の基本 DIV CLASS= CoachView <CV 種別 > < ユーザ指定クラス > ID= < コントロールID> DIV CLASS= textlabel LABEL CLASS= controllabel DIV CLASS= content CoachView 依存コンテンツ DIV CLASS= coachvalidationdiv <CV 種別 >: Coach View ごとに事前定義された CSS クラス名 10 進数 Decimal ボタン Button 選択 Select イメージ Image ラジオ ボタン Radio_Buttons テーブル Table チェック ボックス Checkbox 出 テキスト Output_Text 垂直セクション Vertical_Section テキスト Text 整数 Integer 水平セクション Horizontal_Section テキスト域 Text_Area 日付ピッカー Date_Time_Picker タブ Tabs < ユーザー指定クラス >: Process Designer において HTML 属性のオーバーライドにより指定する CSS クラス名 < コントロールID>: Process Designerにおいて Coach Viewごとに開発者が指定するID 8 Coach View 部品化により重複の可能性があるが プロジェクト単位では重複しない命名規則とすることを推奨

9 2.4 Coach における CSS セレクター指定の基本 1. 全体セレクター指定適用範囲をしぼらず 全ての HTML タグ対して直接 CSS が適用されるよう記述する 2. Coach View 種別を利用したセレクター指定 Coach Viewの種類に範囲を限定して CSSが適用されるよう記述する 3. ユーザー指定クラスを利用したセレクター指定 Process Designer において Coach View の HTML 属性に CSS のクラス名を指定した上で それが指定された Coach View の範囲に限定し CSS が適用されるよう記述する 4. コントロールIDを利用したセレクター指定 Process Designerにおいて Coach Viewに指定されたコントロールIDに限定し CSSが適用されるよう記述する 9 body { color: red;.decimal.controllabel{ color: red;.myclass.textlabel { color: red; #MyControl.textLabel { color: red; 全体の 字色を赤に変更 ( 他の優先 CSS がある場合 反映されないケースはあり ) Coach View 10 進数 のテキストラベルの 字色を赤に変更 HTML 属性に MyClass が指定された Coach View のテキストラベルの 字色を赤に変更 コントロールIDがMyControlであるCoach Viewのテキストラベルの 字色を赤に変更

10 3. 実践 Coach レイアウト制御の実現 WebSphere

11 3.1 Coach レイアウトに対するよくある要望 # よくある要望 適用対象 1 ボディーの背景色を変更したい 全般 2 フォントの種類 サイズを変更したい 全般 3 ラベルの位置 幅を設定したい ラベル全般 4 入 項目の幅を設定したい 入 域全般 5 入 項目の角に丸みをつけたい 入 域全般 6 右寄せで表示したい 入 域全般 7 テキスト域の幅 高さを固定化したい テキスト域 8 水平 垂直セクションのマージンを設定したい セクション 9 タブの幅 高さを設定したり 色を変更したい タブ 10 表のヘッダーやスクロールを制御したい 表 11

12 3.2 レイアウト実現例 #1 ボディーの背景色を変更したい デフォルトの表示 body{ background-color: #b2cfec; 12

13 3.2 レイアウト実現例 #2 フォントの種類 サイズを変更したい ブラウザによって表示可能なフォントタイプが異なるため 複数のフォントタイプを指定する デフォルトの表示 body{ font-family: " メイリオ ", Meiryo," ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN"; font-size:15pt; 13

14 3.2 レイアウト実現例 #3 ラベルの位置 幅を設定したい デフォルトの表示 ブラウザによっては チェックボックスのラベルに対してこのスタイル定義が動作しない.controlLabel{ float:left; width:200px; その場合 チェックボックスのラベル用のスタイルを定義する.Checkbox { position:relative; height:20px;.checkboxnowrap >.controllabel{ position:absolute; left:0; width:200px;.checkboxnowrap >.dijitcheckbox{ position:absolute; left:200px; 14

15 3.2 レイアウト実現例 #4 入 項目の幅を設定したい デフォルトの表示.dijitTextBox{ width:400px; margin: 0 0-5px; 15

16 3.2 レイアウト実現例 #4 入 項目の幅を設定したい クライアント サイド ヒューマン サービスでは 位置決め の機能により 項目単位に幅やマージンを設定することが可能である Coach ビュー インスタンスの位置決めオプション 01.ibm.com/support/knowledgecenter/SSFTDH_8.5.5/com.ibm.wbpm.wle.editor.doc/top ics/c_coach_view_style.html?lang=ja 16

17 3.2 レイアウト実現例 #5 入 項目の角に丸みをつけたい デフォルトの表示.dijitTextBox { border-radius: 4px; 17

18 3.2 レイアウト実現例 #6 右寄せで表示したい.dijitTextBox{ text-align:right; デフォルトの表示 Decimal と Integer の入 を右寄せにする.dijitInputInner{ text-align:right; Text Date Time Picker Select の入 を右寄せにする 18

19 3.2 レイアウト実現例 #7 テキスト域の幅 高さを固定したい デフォルトの表示.dijitTextArea{ width:400px; min-height:500px; 19

20 3.2 レイアウト実現例 #8 水平 垂直セクションのマージンを設定したい デフォルトの表示.Horizontal_Section > div >.ContentBox { margin: 0px 0px!important; スタイルを適用し 赤矢印のマージン幅を調整する 20

21 3.2 レイアウト実現例 #8 水平 垂直セクションのマージンを設定したい.Horizontal_Section > div > div > *{ margin: 0px; padding: 0px; スタイルを適用し 赤矢印のマージン幅を調整する 21

22 3.2 レイアウト実現例 #8 水平 垂直セクションのマージンを設定したい.Vertical_Section > div > div > *{ margin: 0px; padding: 0px; スタイルを適用し 赤矢印のマージン幅を調整する 22

23 3.2 レイアウト実現例 #8 水平 垂直セクションのマージンを設定したい.Vertical_Section > div >.ContentBox { margin: 0px 0px!important; スタイルを適用し 赤矢印のマージン幅を調整する 23

24 3.2 レイアウト実現例 #9 タブの幅 高さを設定したり 色を変更したい デフォルトの表示.BPMTabControl{ width:100%; height:100px;.dijittabchecked{ background-color:red!important;.dijittabpane{ background-color:red!important; BPMTabControl クラスは タブ全体に作用する dijittabchecke d クラスは 選択されたタブのタイトルに作用する dijittabpane クラスは 選択されたタブに作用する 24

25 3.2 レイアウト実現例 #10 表のヘッダーやスクロールを制御したい.dojoxGridMasterHeader.dojoxGridHeader table.dojoxgridrowtable { background-color: #FF0000; color: white; テーブルのヘッダー に作用する.dojoxGridMasterView.dojoxGridView.dojoxGridScrollbox{ height:300px; overflow-y:auto: テーブルのデータ に作用する 25

26 3.2 レイアウト実現例レイアウト実現例の前提条件 サンプル画面は以下の環境において動作確認したものであり 他のブラウザや BPM のバージョンが異なる環境で動作する保証はありません BPM Standard Edition Internet Explorer 10 クライアント サイド ヒューマン サービス レイアウト実現例で示した CSS は 単一の CSS のみを適用した場合の動作を確認したものであり 他の CSS と組み合わせた場合の挙動を確認していません 26

27 3.2 レイアウト実現例サンプルアプリケーションの説明 動作環境 BPM Standard Edition Internet Explorer 10 クライアント サイド ヒューマン サービス 概要 レイアウト実現例の #1 から #10 の動作を確認することができる クライアント サイド ヒューマン サービスを含む 27

28 4. 参照情報 WebSphere

29 4.1 ブラウザ開発ツールによる HTML/CSS 要素の調べ方 1. Web ブラウザで解析対象の HTML を開いたうえで 設定アイコン F12 開発者ツール を開く ( または F12 を押下する ) 29

30 4.1 ブラウザ開発ツールによる HTML/CSS 要素の調べ方 2. 開発者ツールにて 選択アイコン をクリックする 30

31 4.1 ブラウザ開発ツールによる HTML/CSS 要素の調べ方 3. 元のブラウザ画面において 解析対象の要素を選択する ブラウザ上 選択している要素がハイライトされます 31

32 4.1 ブラウザ開発ツールによる HTML/CSS 要素の調べ方 4. 開発者ツールにて 選択された要素を HTML タブで閲覧 解析する 32 HTML タブ側に選択された HTML 要素を確認可能 スタイル タブ側で 現在適用されているスタイルの確認や スタイルのon/off 属性値の変更を試すことが可能

33 End WebSphere

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

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

Web 設計入門

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

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

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

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

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

More information

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

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

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する)

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する) 1232 セレクタを使う (selector) CSS でスタイルを指定する時に セレクタ (selector) でスタイルを適用する対象を特定することができます セレクタには次のようなものがあります もうすでに使用してきた #box1 のような指定は id セレクタ と呼ばれるセレクタです また フォントの指定で使用してきた.font1 は class セレクタ と呼ばれるセレクタです セレクタ

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

サンプル 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

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1 合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 2018 6.12 The. 1 前回の復習 n ブラウザ って何? n Web サイト のキホンを作ってみよう 2 ブラウザ とは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text

More information

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

More information

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation

More information

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ [SP 改 ] フォームレイアウトデザイナー FOR SHAREPOINT 2013 ユーザーマニュアル 1.0 版 2014 年 04 月 11 日 株式会社アンク 目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18

More information

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

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

More information

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt 1338-1 ボーダーのアニメーション (1) border のアニメーションは web ページを作るときにボタンのアニメーションとして使えそ うです アニメーションで変化させることができる border 関係のプロパティ border-color animation で色を滑らかに変化させることができます border-width animation で幅を滑らかに変化させることができます border-radius

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します

More information

トリガーをわかり易くする方法

トリガーをわかり易くする方法 1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが

More information

IBM Cloud Social Visual Guidelines

IBM Cloud  Social Visual Guidelines IBM Business Process Manager 連載 : 事例に学ぶパフォーマンスの向上 第 3 回 画面描画の高速化 概要 IBM BPM は Coach フレームワークと呼ばれる画面のフレームワークを提供し CoachView と呼ばれる画面部品を組み合わせることによって効率よく画面を実装していくことが可能です しかしながら 1 画面に数百の単位の CoachView を配置した場合

More information

extChatText.pdf

extChatText.pdf 拡張機能ユニット チャット風テキストユニット マニュアル シフトテック株式会社 発行 :2018/12/19 チャット風テキストユニット マニュアル - 1 概要 チャットのような会話形式でテキストを表示するユニットです ール ー ア ン ンテ ー 特徴 アイコン用画像 + 名前 + 吹き出し付テキストで構成されたユニットです 表示位置を左右に出し分けることで チャットのような会話形式でテキストを表示できます

More information

2 目次 1. 基本操作 ウィジェットとは何か ウィジェットの目的と構成 ウィジェットの設置 ウィジェットのカスタマイズ ウィジェットコードの構成 ウィジェットの外観を変更する..

2 目次 1. 基本操作 ウィジェットとは何か ウィジェットの目的と構成 ウィジェットの設置 ウィジェットのカスタマイズ ウィジェットコードの構成 ウィジェットの外観を変更する.. Newdea Inc. プロジェクトセンター ユーザーガイド ウィジェット 2 目次 1. 基本操作... 3 1.1. ウィジェットとは何か... 3 1.2. ウィジェットの目的と構成... 3 1.3. ウィジェットの設置... 5 2. ウィジェットのカスタマイズ... 10 2.1. ウィジェットコードの構成... 10 2.2. ウィジェットの外観を変更する... 11 2.2.1. 個別のウィジェットの外観を変更する...

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

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

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

More information

extCountdown.pdf

extCountdown.pdf 拡張機能ユニット カウントダウンユニット マニュアルシフトテック株式会社 発行 :2018/11/21 改定 :2018/12/13 カウントダウンユニット マニュアル - 1 概要 指定された日時までカウントダウンを行うユニットです ール ー ア ン ンテ ー 特徴 指定した日時までカウントダウンし 終了後は自動で停止します 任意の URL を設定すると カウント終了後にページにアクセスがあった場合

More information

Web09

Web09 情報処理技法 ( マルチメディアと表現 )I 第 9 回 CSS(1) D.Mitsuhashi 1 HTML と CSS D.Mitsuhashi 2 HTML と CSS の役割 HTML 書の構造を すための 語 CSS 書に視覚デザインを与える 語 HTML( 構造化 書 ) が 組みとすると, CSS( スタイルシート ) は外装にあたる D.Mitsuhashi 3 HTML に CSS

More information

オリエンテーション

オリエンテーション 課題 14 ホームページを作る ( 発展 ) top 目次 1. 画像ファイルを縮小して表示する教材 A01,A02... 1 2. 文字の書式を設定する ( フォント, サイズ, 行間 ) 教材 A03... 3 3. 文章表示の横幅を指定する, テキストを右寄せにする教材 A04... 5 4. 見出しに背景色を付けて白抜きで表示する教材 A05... 7 5. ページの背景色を設定する教材 A06...

More information

Color Change

Color Change 1227 Text の 2D トランジション (text-shadow, white-sp, letter-sp, word-sp) テキストを変化させるトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover または Click ボタンを クリックすると テキストのトランジションが動きます プロパティ text-shadow テキストの影を指定します

More information

IBM Cloud Social Visual Guidelines

IBM Cloud  Social Visual Guidelines IBM Business Process Manager 連載 : 事例に学ぶパフォーマンスの向上 第 4 回 SPARK UI Toolkit 活用による画面描画の高速化 概要 第 3 回画面描画の高速化 では CoachView の数に起因するパフォーマンス問題について その原因と改善策を解説しました 本ドキュメントでは SPARK UI Toolkit を用いて CoachView の描画コストを削減する具体的な実装アプローチについて説明します

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

Web 設計入門

Web 設計入門 情報処理技法 ( マルチメディアと表現 )I 第 11 回 CSS によるレイアウトデザイン (1) D.Mitsuhashi 1 擬似クラスと疑似要素 D.Mitsuhashi 2 擬似クラス 要素名のセレクタだけでは指定できない特定の状況下でのデザインを指定するには擬似クラスを用いる ポインタが重なった時 クリックした時 N 番目の小要素 a:hover li:last-child :root

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

JavaScript 演習 2 1

JavaScript 演習 2 1 JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript

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

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

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

More information

Web概論

Web概論 HTML/CSS Chapter 04 スタイルシートを使う Copyright 2011 ZDRIVE, K.K. All rights reserved. 4.1 CSS の仕組みと書式 CSS とは Cascading Style Sheet の略 単に スタイルシート と呼ばれることもある HTML で作ったページにレイアウトや装飾などのデザインを施すための仕組み CSS を記述したファイルは.css

More information

コンピュータ基礎実習 ( 上級 ) 第 12 週例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文字

コンピュータ基礎実習 ( 上級 ) 第 12 週例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文字 コンピュータ基礎実習 ( 上級 ) 第 12 週 コンピュータ基礎実習 ( 上級 ) 第 12 週スタイルシートの基礎今回の授業は スタイルシート (CSS) の使い方を解説します 1. CSS の基本 ( 教科書第 3 章 ) 1.1. CSS とは CSS は Cascading Style Sheets の略で ウェブページの見栄えを設定するための言語です CSS はウェブページにとって比較的新しい規格ですが

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

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

要素にフォーカスが当たったときは 例えば以下のように記述する 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

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています

More information

brieart変換設定画面マニュアル

brieart変換設定画面マニュアル 変換設定画面マニュアル Ver. 1.1 更新日 :2012/11/19 株式会社アイ エヌ ジーシステム Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 目次 1. brieartとは? 3 ラベル 26 リスト 29 brieartとは 3 開閉 ( アコーディオン ) 32 注意事項 制限事項など 4 ボタン 35 パネル

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1256 Reflect プロパティ (-webkit-box-reflect) -webkit-box-reflect プロパティを使用して反射画像を作ってみましょう webkit の仕様なので Safari Chrome で適用されますが それ以外のブラウザは未対応です (2015 年 11 月 25 日現在 ) -webkit-box-reflect プロパティは 画像が鏡に映って反転 ( 反射画像

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

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ 1. はじめの準備 (1) フォルダの作成 ホームページ作成の基礎 これから作るホームページのデータを ホームページ用 として保存 ( 保管 ) するフォルダを作成します ホームページで使う作成したファイル画像 写真 音楽などファイルは すべて同じフォルダに保存します デスクトップやマイドキュメントの中 ( 任意 ) で 右クリック 新規作成 (N) フォルダ (F) で新しいフォルダができます (

More information

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf 1346-6 応用 2 Falling Leaves 落ち葉が舞い散る様子をアニメーションにしてみましょう できるだけリアルに再現して みます さらに秋のイメージアニメーションを作ってみましょう 落ち葉が舞い散るアニメーション サンプル CSS1 紅葉 ( もみじ ) 銀杏 ( いちょう ) 栗の葉がひらひら舞いながら落ちてきます FallingLeavesAnime の説明 HTML の記述 (FallingLeavesAnime.html)

More information

目次 1. PDF 変換サービスの設定について )Internet Explorer をご利用の場合 )Microsoft Edge をご利用の場合 )Google Chrome をご利用の場合 )Mozilla Firefox をご利

目次 1. PDF 変換サービスの設定について )Internet Explorer をご利用の場合 )Microsoft Edge をご利用の場合 )Google Chrome をご利用の場合 )Mozilla Firefox をご利 PDF 変換サービス セキュリティ設定マニュアル 第 21 版 2018 年 2 月 目次 1. PDF 変換サービスの設定について...2 1-1)Internet Explorer をご利用の場合...2 1-2)Microsoft Edge をご利用の場合... 14 1-3)Google Chrome をご利用の場合... 18 1-4)Mozilla Firefox をご利用の場合...

More information

Microsoft PowerPoint - css-3days 互換モード

Microsoft PowerPoint - css-3days 互換モード 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,

More information

目次 1. プロフィール画像工房の概要 3 2. プロフィール画像の作成 8 3. プロフィール画像の登録 まとめ 27 レッスン内容 プロフィール画像工房 インターネット上に提供されているさまざまなサービス ( これ以降 サービス と記述します ) を利用するときには 利用するユーザー

目次 1. プロフィール画像工房の概要 3 2. プロフィール画像の作成 8 3. プロフィール画像の登録 まとめ 27 レッスン内容 プロフィール画像工房 インターネット上に提供されているさまざまなサービス ( これ以降 サービス と記述します ) を利用するときには 利用するユーザー 本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Word 2013( テキスト内では Word と記述します ) Internet Explorer 11 画面の設定( 解像度 ) 1024 768 ピクセル テキスト内の解説で利用しているマイクロソフト社の Web メールサービス Outlook.com については 2014 年 9 月時点で提供している内容にもとづいています

More information

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

目次 更新履歴... 1 画面設計書の目的... 3 必要な内容... 3 画面一覧... 4 必要な内容... 4 画面遷移... 5 画面レイアウト... 6 入力パラメータ... 7 必要な内容... 7 項目定義... 8 必要な内容... 8 部品の種類... 9 ( 参考 ) 部品指定と

目次 更新履歴... 1 画面設計書の目的... 3 必要な内容... 3 画面一覧... 4 必要な内容... 4 画面遷移... 5 画面レイアウト... 6 入力パラメータ... 7 必要な内容... 7 項目定義... 8 必要な内容... 8 部品の種類... 9 ( 参考 ) 部品指定と 画面設計書の作成 作成日 : 2015/06/30 作成者 : 西村 更新履歴 更新日 更新 作業者 2015/06/30 新規作成 ( 仮 ) 西村 2015/11/09 部品の種類 にカラーピッカーとグラフを追加 コンボボックスの HTML の説明の 西村 追加 2017/12/01 公開用の体裁調整 西村 1 目次 更新履歴... 1 画面設計書の目的... 3 必要な内容... 3 画面一覧...

More information

目次 1. プロフィール画像工房の概要 3 2. プロフィール画像の作成 9 3. プロフィール画像の登録 まとめ 29 レッスン内容 プロフィール画像工房 インターネット上に提供されているさまざまなサービス ( これ以降 サービス と記述します ) を利用するときには 利用するユーザー

目次 1. プロフィール画像工房の概要 3 2. プロフィール画像の作成 9 3. プロフィール画像の登録 まとめ 29 レッスン内容 プロフィール画像工房 インターネット上に提供されているさまざまなサービス ( これ以降 サービス と記述します ) を利用するときには 利用するユーザー 本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Word 2013( テキスト内では Word と記述します ) Internet Explorer 11 画面の設定( 解像度 ) 1024 768 ピクセル テキスト内の解説で利用しているマイクロソフト社の Web メールサービス Outlook.com については 2014 年 6 月時点で提供している内容にもとづいています

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 1 本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック

More information

Microsoft PowerPoint - css-3days 互換モード

Microsoft PowerPoint - css-3days 互換モード 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,

More information

Cisco Jabber for Windows のカスタマイズ

Cisco Jabber for Windows のカスタマイズ インストール後にカスタマイズできる機能を確認します 組織の要件を満たすようにこれらの 機能をカスタマイズする方法について学習します カスタム顔文字の追加, 1 ページ カスタム埋め込みタブの作成, 5 ページ カスタム顔文字の追加 カスタム顔文字を Cisco Jabber for Windows に追加するには XML ファイルで顔文字の定義を作成 し ファイル システムに保存します 注 最適な結果を得るには

More information

1. 信頼済みサイトの設定 (1/3) この設定をしないとレイアウト ( 公報 ) ダウンロードなどの一部の機能が使えませんので 必ず設定してください 1 Internet Explorer を起動し [ ツール ]-[ インターネットオプション (O)] を選択します 2 [ セキュリティ ] の

1. 信頼済みサイトの設定 (1/3) この設定をしないとレイアウト ( 公報 ) ダウンロードなどの一部の機能が使えませんので 必ず設定してください 1 Internet Explorer を起動し [ ツール ]-[ インターネットオプション (O)] を選択します 2 [ セキュリティ ] の Internet Explorer の初期設定 信頼済みサイト の設定や ポップアップブロック の設定を確認する必要があります 以下の手順で設定してください 1. 信頼済みサイトの設定 2. タブブラウズの設定 3. セキュリティ設定の変更 4. ポップアップブロックの設定 5. 推奨する文字サイズの設定 6. 規定のブラウザに設定 7. 互換表示の無効の設定 8. ランキングやハイライトの印刷設定

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

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div 1334 テキストのアニメーション animation プロパティを使ってテキストに係わるプロパティのアニメーションを作ってみ ましょう ( 注 )Safari(webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color

More information

1/2

1/2 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (3) 1. スタイル指定 フォントの大きさや種類 行間 ページ上のレイアウトなどを文書の スタイル と呼び このスタイルを指定するためのデータを スタイルシート と呼ぶ 以下では CSS(Cascading Style Sheets) と呼ばれるスタイルシート言語を使用する

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Page 1/ 13 講義一覧講義回講義タイトル講義概要 第 1 回 3 級実技試験について ガイダンス 第 2 回 HTMLによる文書構造化 HTML 言語の復習 第 3 回 CSSスタイルシートのプロパティ 値 CSSスタイルシートの復習 第 4 回 実技実習作業 1 問題 1 ディレクトリとファイルの配置位置に関する問題 第 5 回 実技実習作業 2 問題 2 HTMLファイルの修正 ( リンク設定

More information

CSS Taichi Kaminogoya 2007-05-26T14:00:00+09:00 design de sign coration デザイン サイン 情報 をデコレーション 装飾 どれが重要なのかのサイン メッセージ CSS CSS CSS CSS デザイン 線や色でサイン 情報をイイトコロに配置 CSS CSS CSS { : ; { : ; { : ; { : ; CSS

More information

Shareresearchオンラインマニュアル

Shareresearchオンラインマニュアル Chrome の初期設定 以下の手順で設定してください 1. ポップアップブロックの設定 2. 推奨する文字サイズの設定 3. 規定のブラウザに設定 4. ダウンロードファイルの保存先の設定 5.PDFレイアウトの印刷設定 6. ランキングやハイライトの印刷設定 7. 注意事項 なお 本マニュアルの内容は バージョン 61.0.3163.79 の Chrome を基に説明しています Chrome の設定手順や画面については

More information

css.pdf

css.pdf 1 2 Web (2) HTML ( ) HTML CSS CSS = Cascading Stye Sheet (CSS) W3C (Word Wide Web Consortium, Web ) 2006-2018 Harumi Murakami and Kota Abe HTML&CSS 3 1990 Web HTML Web 1993 Web , , HTML HTML&CSS

More information

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ このテキストについて このテキストは おもに下記の方を対象にしています Windows パソコンを使い 基本的なキーボード操作 マウス操作のできる方 アメブロを自分だけのデザインにカスタマイズしたい方 アメブロにメニューバーなどを設置して 使いやすいデザインにしたい方 本書はパソコン教室での個別学習を想定して作成されたテキストです インターネットにつながる環境が必要です テキストの作成環境 OS:

More information

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11 CSS について ( 概要 ) 作成日 : 2016/01/21 作成者 : 西村 はじめに この資料は HTML がある程度 ( 少しでも ) わかる人に CSS の仕組みを少しだけわかってもらえるように書いています この資料では 下記を説明します CSS とは何か CSS の基本の形 CSS の読み込み方 セレクタとは何か / 最低限覚えるとよいセレクタ プロパティと値 / 最低限覚えるとよいスタイル

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Seijo.Tokyo のコンテンツ作成 管理方法基本編 大江将史 初版 2017.7.3 2 版 2017.7.10 seijo.tokyo 1 コンテンツ作成 管理のイメージ コンテンツとは サイト上で作成する文章やイメージ リンクなどで構成されるもの 複数のコンテンツを組み合わせて seijo.tokyo という WEB サイト が作られている コンテンツは サイト上で ログイン をしなければ

More information

クライアント証明書インストールマニュアル

クライアント証明書インストールマニュアル クライアント証明書更新マニュアル クライアント証明書更新の流れ step1 証明書の更新 P.2~ step2 古い証明書の削除 P.5~ クライアント証明書は 有効期限が切れる 30 日前から更新することができます 更新作業は有効期限の切れる証明書に対して行います 複数のパソコンに証明書をインストールしていて どのパソコンの証明書を更新するか分からない場合は P.11 の方法でご確認ください 目次

More information

1

1 6. スタイルシートとは 6.1. デザインはスタイルシートで 1 学期は ホームページを作成するための HTML の基礎と コンテンツのパーツである画像を加工 作成する基本的な技術を学びました 次のステップとして ホームページに多くの色を統一的に付けたり レイアウト配置を細かく設定するための方法を学んでいきます HTML でも色やサイズを指定したりする方法を学びましたが ホームページの保守性などの面から

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

フォト アルバム

フォト アルバム 操作説明書 ESCORT 目次 ESCORT 目次 ESCORT 操作の流れログイン / ログアウト方法ホーム ( メニュー ) ユーザー管理 ユーザー登録 / ユーザー修正方法 ユーザー削除方法ディレクトリ管理 ディレクトリ登録 / ディレクトリ修正方法 ディレクトリ削除方法ディレクトリ切替テンプレート管理 テンプレート登録 / テンプレート再設定方法 テンプレート削除方法 特殊タグ設定方法定数タグ設定

More information

Expander for ASP.NET Web Forms

Expander for ASP.NET Web Forms 2018.04.12 更新 グレープシティ株式会社 目次 製品の概要 2 ComponentOne for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: ページへのコントロールの追加 4-5 手順 2: コントロールへのコンテンツの追加 5-6 手順 3: コントロールの外観と動作のカスタマイズ 6-7 C1Expander の要素 8 ヘッダー要素

More information

インターネット社会の発展

インターネット社会の発展 インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト

More information

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

1.WebClass( ウェブクラス ) とは WebClass を利用される前に 学生の立場で WebClass を利用してみましょう... 4 開始方法... 4 資料を閲覧する 先生の立場で WebClass を利用してみましょう... 8 資料を

1.WebClass( ウェブクラス ) とは WebClass を利用される前に 学生の立場で WebClass を利用してみましょう... 4 開始方法... 4 資料を閲覧する 先生の立場で WebClass を利用してみましょう... 8 資料を WebClass 体験コースマニュアル 資料機能編 ( 先生用 ) 2018 年 作成者 : 日本データパシフィック株式会社 1.WebClass( ウェブクラス ) とは... 3 2.WebClass を利用される前に... 3 3. 学生の立場で WebClass を利用してみましょう... 4 開始方法... 4 資料を閲覧する... 6 4. 先生の立場で WebClass を利用してみましょう...

More information

目次 1. 写真と文字を使用したコンテンツスライドの作成 3 2. コンテンツスライドの自動切り替え まとめ 課題にチャレンジ 19 レッスン内容 写真と文字を使用したコンテンツスライドの作成 第 8 回では写真と文字を使用したコンテンツスライドを作成します コンテンツスライ

目次 1. 写真と文字を使用したコンテンツスライドの作成 3 2. コンテンツスライドの自動切り替え まとめ 課題にチャレンジ 19 レッスン内容 写真と文字を使用したコンテンツスライドの作成 第 8 回では写真と文字を使用したコンテンツスライドを作成します コンテンツスライ PowerPoint で楽しむムービー作成講座 第 8 回 コンテンツスライドの作成写真編 PowerPoint で楽しむムービー作成講座 では 12 回に分けて デジタルカメラの写真や動画を 素材に ムービー作成ソフトを使用せずに PowerPoint 2010 だけでオリジナルムービーを作成す る方法を紹介します 本テキストの作成環境は 次のとおりです Windows 7 Home Premium

More information

1. WebShare 編 1.1. ログイン / ログアウト ログイン 1 WebShare の URL にアクセスします xxxxx 部分は会社様によって異なります xxxxx. 2 ログイン名 パスワードを入力し

1. WebShare 編 1.1. ログイン / ログアウト ログイン 1 WebShare の URL にアクセスします   xxxxx 部分は会社様によって異なります xxxxx. 2 ログイン名 パスワードを入力し 操作ガイド Ver.2.3 目次 1. WebShare 編... - 2-1.1. ログイン / ログアウト... - 2-1.2. 表示更新... - 4-1.3. Java インストール... - 5-1.4. ファイル フォルダ一覧... - 11-1.4.1. フォルダ参照方法... - 11-1.4.2. フォルダ作成... - 16-1.4.3. アップローダ... - 18-1.4.4.

More information

インストール要領書

インストール要領書 2016/04/28 第 1 版 CSS-Net インストール要領書 この冊子は CSS-Net のインストール方法を分かり易く説明してあります インストール方法が分からないときはご覧になって下さい 目次 1. はじめに 2. CSS-Net の動作環境 3. インストーラのダウンロード 4. インストール手順 5. CSS-Net の起動および初期設定 6. アンインストール方法 1. はじめに

More information

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

平成 30 年度 プログラミング研修講座 岩手県立総合教育センター

平成 30 年度 プログラミング研修講座 岩手県立総合教育センター 平成 30 年度 プログラミング研修講座 岩手県立総合教育センター 目次第 1 章プログラミングについて 1 ソフトウェアの働き 1 2 プログラミング言語 1 3 主なプログラミング言語の歴史 2 第 2 章 Visual Basic について 1 Visual Basic とは 3 2.NET Framework の環境 3 3 Visual Basic と.NET Framework の関係

More information

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2 1343 アニメーションを連続させる 複数のアニメーションを連続して適用するためには つぎの 2 つの方法があります 1. 複数の連続したアニメーション全体を繰り返さずに 1 回だけ動かしたい場合は 待ち 時間を利用して複数のアニメーションを指定します アニメーション A 0% 100% アニメーション B( 待ち ) アニメーション C( 待ち ) アニメーションB 0% 100% アニメーションC

More information

データ解析

データ解析 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 奈良産業大学情報学部 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) HTML 言語によるウェブページの制作 日時 会場 平成 16 年 8 月 4 日 ( 水 )9 時 10 分 ~ 15 時 40 分 奈良産業大学 10 号館 3 階 1032 教室 日程 時間内容場所 9:10 ~ 9:20 日程説明 1033 教室 9:30

More information

WBS_Ch0.indd

WBS_Ch0.indd ガントチャート 利用ガイド ver.7.0.0 RSRicksoft リックソフト株式会社 www.ricksoft.jp 目次 Chapter 1 はじめに... 2 1. 1 用語と概念...2 1. 1. 1 チケット...2 1. 1. 2 工程 チケット...2 1. 1. 3 チケットの親子関係...3 1. 1. 4 現在の計画とベースライン ( 基準計画 )...3 1. 2 推奨環境...4

More information

目次 第 1 章はじめに 取扱いについて 記載内容について... 6 第 2 章基本操作 OneNote Online を開く ノートブックを開く ノート ( セクション ) を作成する... 11

目次 第 1 章はじめに 取扱いについて 記載内容について... 6 第 2 章基本操作 OneNote Online を開く ノートブックを開く ノート ( セクション ) を作成する... 11 Office 365 OneNote Online - 利用マニュアル - 発行日 2015/09/01 1 目次 第 1 章はじめに... 5 1.1. 取扱いについて... 6 1.2. 記載内容について... 6 第 2 章基本操作... 7 2.1. OneNote Online を開く... 8 2.2. ノートブックを開く... 10 2.3. ノート ( セクション ) を作成する...

More information

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body background-image: url("../images/wallpaper1.gif"); /* == 記事記入枠 container ( 全画面共通 )=========

More information

Web GIS Template Uploader 利用ガイド

Web GIS Template Uploader 利用ガイド Web GIS Template Uploader 利用ガイド 概要 Web GIS Template Uploader について Web GIS Template Uploader は ESRI ジャパンが提供する ArcGIS ソリューションテンプレート ( ) をご使用の ArcGIS ポータル (ArcGIS Online もしくは Portal for ArcGIS の組織サイト ) にアップロードするためのツールです

More information

インターネットファームバキグ 電子証明書ガイドブック ~証明書取扱手順編~ - 契約会社向け -(対応 OS :Windows 8)

インターネットファームバキグ 電子証明書ガイドブック ~証明書取扱手順編~ - 契約会社向け -(対応 OS :Windows 8) だいしインターネットバンキング ( 略称 : だいし IB) データ伝送サービス電子証明書ガイドブック ~ 別冊 : 証明書取扱手順編 ~ ( 対応 OS:Windows 8) H5.9 目次. はじめに.... 証明書の発行 ( ダウンロード ) 手順... 付録 A. ルート証明書無しでの証明書の発行 ( ダウンロード ) 手順... 付録 B. ブラウザの設定... 8 >

More information

Joi-Tab 端末管理システム最終更新日 2015 年 3 月 13 日

Joi-Tab 端末管理システム最終更新日 2015 年 3 月 13 日 Joi-Tab 端末管理システム最終更新日 015 年 3 月 13 日 もくじ はじめに... 3 概要... 4 動作環境... 4 本マニュアルの見かた... 4 端末管理システムの基本操作... 5 端末管理システムにログインする... 6 端末管理システムをログアウトする... 8 トップの見かた... 9 絞り込み画面の見かた... 10 機器詳細画面の見かた... 11 ユーザー情報詳細画面の見かた...

More information

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig 1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し

More information

認証連携設定例 連携機器 アイ オー データ機器 BSH-GM シリーズ /BSH-GP08 Case IEEE802.1X EAP-PEAP(MS-CHAP V2)/EAP-TLS Rev2.0 株式会社ソリトンシステムズ

認証連携設定例 連携機器 アイ オー データ機器 BSH-GM シリーズ /BSH-GP08 Case IEEE802.1X EAP-PEAP(MS-CHAP V2)/EAP-TLS Rev2.0 株式会社ソリトンシステムズ 認証連携設定例 連携機器 アイ オー データ機器 BSH-GM シリーズ /BSH-GP08 Case IEEE802.1X EAP-PEAP(MS-CHAP V2)/EAP-TLS Rev2.0 株式会社ソリトンシステムズ はじめに はじめに 本書について本書はオールインワン認証アプライアンス NetAttest EPS と アイ オー データ機器社製 L2 スイッチ BSH-GM シリーズ /BSH-GP08

More information

パソコンバンクWeb21 操作マニュアル[導入・事前設定編]

パソコンバンクWeb21 操作マニュアル[導入・事前設定編] 章パソコンの準備 章パソコンの準備 章 パソコンの準備 パソコンの準備 この章では Web1 を利用するためのパソコンの準備について説明します 1. Web1 の利用環境 16. パソコンの環境を確認する 17 3. ブラウザを設定する 19 15 章パソコンの準備 章パソコンの準備 / 1. Web1 の利用環境 1. Web1 の利用環境 Web1 を利用するには 以下の環境が必要です お知らせ

More information

■新聞記事

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

More information

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

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

More information

[ ]スマートセミナーバージョンアップリリースノート

[ ]スマートセミナーバージョンアップリリースノート スマートセミナー 2.0 バージョンアップリリースノート 株式会社シャノン 2010/7/27 1 Copyright SHANON Co., Ltd. All Rights Reserved. 1. はじめに...3 本リリースノートについて... 3 追加 修正される機能とユーザーへの影響について... 3 2. 今回追加された新機能のご紹介...4 HTML エディタの機能改善... 4 アンケートのラジオボタン

More information

ICLT 操作マニュアル (2011 年 05 月版 ) Copyright 2011NE 東京株式会社 All Rights Reserved

ICLT 操作マニュアル (2011 年 05 月版 ) Copyright 2011NE 東京株式会社 All Rights Reserved ICLT 操作マニュアル (2011 年 05 月版 ) 目次 0. はじめに 1. テンプレートの準備 1.1 エクセルファイルの準備 1.2 タグを作成する 1.3 エクセルファイルの表示調整 2.PC へテンプレートを追加 3.iPad での NEICLT の操作 3.1 入力者の操作 3.1.1 入力者のログイン 3.1.2テンプレートを更新する 3.1.3 チェックリスト新規作成 3.1.4

More information

Microsoft Word - ModelAnalys操作マニュアル_

Microsoft Word - ModelAnalys操作マニュアル_ モデル分析アドイン操作マニュアル Ver.0.5.0 205/0/05 株式会社グローバルアシスト 目次 概要... 3. ツール概要... 3.2 対象... 3 2 インストールと設定... 4 2. モデル分析アドインのインストール... 4 2.2 モデル分析アドイン画面の起動... 6 3 モデル分析機能... 7 3. 要求分析機能... 7 3.. ID について... 0 3.2 要求ツリー抽出機能...

More information

改訂履歴 日付バージョン記載ページ改訂内容 V2.1 - 初版を発行しました V3.1 P5 ドキュメントラベルが新規追加された事を追記 P7 P8 新しくなったラベルのツリー表示説明を追記 新しくなったラベルの作成 削除操作を追記 P9 ラベルのグループ

改訂履歴 日付バージョン記載ページ改訂内容 V2.1 - 初版を発行しました V3.1 P5 ドキュメントラベルが新規追加された事を追記 P7 P8 新しくなったラベルのツリー表示説明を追記 新しくなったラベルの作成 削除操作を追記 P9 ラベルのグループ 改訂履歴 日付バージョン記載ページ改訂内容 2012-10-23 V2.1 - 初版を発行しました 2013-08-30 V3.1 P5 ドキュメントラベルが新規追加された事を追記 P7 P8 新しくなったラベルのツリー表示説明を追記 新しくなったラベルの作成 削除操作を追記 P9 ラベルのグループ別参照権限設定操作を追記 2015-06-16 V5.0 P27 クラスター入力値を帳票備考にコピーする説明を追記

More information

<!DOCTYPE html> <html> <head> <title>spaceorbitanime</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="spaceorbitanime.css">

<!DOCTYPE html> <html> <head> <title>spaceorbitanime</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=spaceorbitanime.css> 1346-5 応用 2 Space Trip 宇宙船が地球を周回するアニメーションと宇宙旅行へ出発するアニメーションを作ってみ ましょう 宇宙船が地球を周回するアニメーション サンプル CSS1 スペースシャトルは円軌道で USS エンタープライズ号は楕円軌道で地球を周回します SpaceOrbitAnime の説明 HTML の記述 (SpaceOrbitAnime.html) id 属性 stage

More information