|
|
- あいね いそみ
- 5 years ago
- Views:
Transcription
1 CSS Taichi Kaminogoya T14:00:00+09:00
2
3 design
4
5 de sign coration
6
7 デザイン サイン 情報 をデコレーション 装飾 どれが重要なのかのサイン メッセージ
8 CSS
9 CSS
10 CSS
11
12 CSS デザイン 線や色でサイン 情報をイイトコロに配置
13 CSS
14 CSS
15
16 CSS
17 { : ;
18 { : ;
19 { : ;
20 { : ;
21 CSS { : ;
22 CSS { : ;
23
24 p { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li
25 .section { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li
26 ID #memo { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li
27 div#memo p { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li
28 div#memo p { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li
29 ol>li { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li
30 ol+p { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li
31 div[class] { color: red;
32 div[class] div[class=section] div[class~=section] div[class =section]
33 a:hover { color: red;
34 a:link a:visited a:hover a:active a:focus p:lang(ja) p:first child
35 p:first letter { color: red;
36 p:before p:after a:first letter a:first line
37
38 目的地までの手段
39 目的地までの手段 最寄りの都市まで あとは徒歩
40 目的地までの手段 最寄りの都市まで あとは徒歩 最寄りの町まで あとは徒歩
41 目的地までの手段 最寄りの都市まで あとは徒歩 最寄りの町まで あとは徒歩 目的地の前まで
42 CSS
43 <p class= foo id= bar > </p>
44 <p class= foo id= bar > </p> p { color: orange;
45 <p class= foo id= bar > </p> p { color: orange; p#bar { color: green;
46 <p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red;
47 <p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red; p[id=bar] { color: blue;
48 <p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red; p[id=bar] { color: blue;
49 <p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red; p[id=bar] { color: blue;
50 <p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red; p[id=bar] { color: blue; p bar p foo p bar id p
51 <p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red; p[id=bar] { color: blue; p bar p foo p bar id p
52 詳細度簡単計算表 合計点 全称 要素 class id 疑似要素 疑似クラス 属性
53 要素タイプ p { color: orange; 合計点 全称 要素 class id 疑似要素 疑似クラス 属性 1
54 要素タイプ + ID p#bar { color: green; 合計点 全称 要素 class id 疑似要素 疑似クラス 属性 101
55 要素タイプ + クラス p.foo { color: red; 合計点 全称 要素 class id 疑似要素 疑似クラス 属性 11
56 要素タイプ + 属性 p[id=bar] { color: red; 合計点 全称 要素 class id 疑似要素 疑似クラス 属性 11
57 <p class= hoge id= fuga > </p> p { color: orange; p#fuga { color: green; p.hoge { color: red; p[id=hoge] { color: blue;
58 <p class= hoge id= fuga > </p> p { color: orange; p#fuga { color: green; p.hoge { color: red; p[id=hoge] { color: blue;
59 <p class= hoge id= fuga > </p> p { color: orange; 101 p#fuga { color: green; 11 p.hoge { color: red; 11 p[id=hoge] { color: blue;
60
61
62 CSS
63 Web
64 重要度! important 高 ユーザースタイルシート! imporatnt 制作者スタイルシート! important 制作者スタイルシート Web制作者 ユーザースタイルシート ユーザー デフォルトスタイルシート ウェブブラウザ 低
65
66 photo by timlovesbrian.
67 DOM
68 body DOM div.section h1 ul p p div.section li strong h2 p ul li li
69 <p> <span> </span> </p>
70 <p> <span> </span> </p> p { color: yellow;
71 <p> <span> </span> </p> p { color: yellow; p span { color: green;
72 DOM
73 ちょっと休憩
74 休憩おわり
75
76
77 photo by Elsie esq.
78 width, height margin padding border
79 height width
80
81
82
83
84
85 background
86 background
87 background background
88 background background
89 background background
90 background IE background
91 background IE background
92 background IE background
93 height width
94 height width
95 height width
96 height width
97
98
99 DOCTYPE HTML CSS
100
101
102 padding HTML
103 div class= section <div class= section > <h1>heading 1</h1> <p>description</p> <div class= section > <h2>heading 2</h2> <p>description</p> </div> </div>
104
105
106 p { margin: 1em 13px;
107
108
109 p { margin: 30px 0; div { margin: 40px 0; 30px 40px <p> <div>
110 <p> 30px 40px p { margin: 30px 0; div { margin: 40px 0; <div>
111 p { margin: 30px 0; div { margin: 40px 0; 40px <p> <div>
112 p { margin: 30px 0; div { margin: 40px 0; 40px <p> <div>
113 float position: abusolute;
114 div { margin: 40px 0; p { margin: 20px 0; 40px 20px <div> <p>
115 40px 20px <div> <p> div { margin: 40px 0; p { margin: 20px 0;
116 div { margin: 40px 0; 40px p { margin: 20px 0; <p>
117 div { margin: 40px 0; p { margin: 20px 0;
118 div { margin: 40px 0; border: 10px solid white; p { margin: 20px 0; <div> <p>
119 div { margin: 40px 0; p { margin: 20px 0;
120 div { margin: 40px 0; padding: 1px; p { margin: 20px 0; <div> <p>
121 visible overflow
122 p { height: 0; margin: 40px 0 20px; 40px <div> 20px <p>
123 40px <div> 20px p { height: 0; margin: 40px 0 20px; <p>
124 p { height: 0; margin: 40px 0 20px; 40px <div> <p>
125
126
127
128 共有の場 Wiki スライド資料 オススメドキュメント オススメページ 質問
129
130 elephantism
131 ご質問もどうゾウ
132 おわり
about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理
CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/
More informationp { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge
More information経営論集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 informationWeb
Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................
More information07_経営論集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 informationMicrosoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx
CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の
More information1 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 information1 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子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top
1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます
More information要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}
css とは web ページを構築する上で 主に見た目にかかわる部分を記述するものである 記述方法は html の に直接書く方法 のタグに一つ一つ書く方法と 別の ファイルとして書いておく方法がある 1つ目の方法は タグを に記述して起き その中に css で記述する 2つ目の方法は 例えば
More informationPowerPoint プレゼンテーション
3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,
More informationMicrosoft 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</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ように記述をします 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 informationNetwork Computing の基礎
CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS
More information~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID
10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/
More information6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1
6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)
More information27短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 informationoverflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ
1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き
More informationMicrosoft 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 informationEC 千葉のホームページで使用している 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サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out
1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation
More informationボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必
1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン
More informationWorld 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【お試し版】Web制作者のためのCSS設計の教科書(非売品)
UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : http://twitter.com/hiloki : http://inkdesign.jp GitHub : https://github.com/hiloki/ URL http://www.impressjapan.jp/books/1113101128 Web 10 IT UI
More informationColor Change
1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します
More information大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box
1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました
More information第2回 Web文書
Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 5 回 CSS 入門 萩野達也 (hagino@sfc.keio.ac.jp) 1 Web ページの構成要素 直交技術を組み合わせる 内容 スタイル ( 表現方法 ) プログラミング スタイル プログラミング JavaScript CSS Web ページ Web 文書 HTML 内容
More information1222-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 要素を作り
1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します
More informationWeb 設計入門
情報処理技法 ( マルチメディアと表現 )I 第 11 回 CSS によるレイアウトデザイン (1) D.Mitsuhashi 1 擬似クラスと疑似要素 D.Mitsuhashi 2 擬似クラス 要素名のセレクタだけでは指定できない特定の状況下でのデザインを指定するには擬似クラスを用いる ポインタが重なった時 クリックした時 N 番目の小要素 a:hover li:last-child :root
More informationBorder 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掲示用ヒート表 第34回 藤沢市長杯 2017
34 8 4 2 Round 1 Round 2 SEMI FINAL 30 16 8 H1 H5 H1 H1 Red 12401821 2 Red 12601360 2 1-1 Red 12501915 1 1-1 Red 12501915 4 White 12900051 4 White 12600138 3 3-1 White 12802412 2 3-1 White 12801091 1 Yellow
More informationcss.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 informationWeb 設計入門
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 informationpadding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で
1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです
More informationColor Change
1227 Text の 2D トランジション (text-shadow, white-sp, letter-sp, word-sp) テキストを変化させるトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover または Click ボタンを クリックすると テキストのトランジションが動きます プロパティ text-shadow テキストの影を指定します
More information1222-A Transform Function Order (trsn
1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します
More informationSNS 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 information6 2 1
6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)
More informationid, クラスで指定 (#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第6回 CSS入門(つづき)
Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )
More informationインターネット社会の発展
インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト
More informationスライド 1
第 8 講観光情報論 2009 年 6 月 16 日 Style Sheet (CSS) 宮国薫子 1 CSS とは (Cascading Style Sheets) 本来 ホームページにデザインを加える機能のすべて 教科書で言う スタイルシート とは CSS のことを指す CSS を使うと Page 106 にあるようにホームページの体裁が変わる 2 まず Region_page.h tml を開く
More information★結果★ 藤沢市長杯 掲示用ヒート表
AA 35 Round 1 8 4 Round 2 28 16 SEMI FINAL H1 H5 H1 H1 Red 12802015 1 Red 12802109 1 1-1 Red 12802015 2 1-1 Red 12702346 White 12800232 2 White 12702406 3 3-1 White 12702346 1 3-1 White 12802109 Yellow
More informationセレクタ? セレクタ (Selector 選択 指定するもの ) は どのタグにスタイルを付けるのかを指定するためのものです セレクタ { プロパティ : 値 ; どのタグにスタイルを付けるかの指定 { スタイルの設定名 : スタイルの設定値 ; body { color: red; body を選
CSS のセレクタについて 作成日 : 2016/01/25 作成者 : 西村 はじめに CSS では タグを指定するのに セレクタ というものを使います セレクタを覚えておくと スタイルを付ける時に指定したいタグをうまく指定することができるようになります JavaScript(jQuery) でもタグの指定の方法としてセレクタを使うため JavaScript も学びたい方は覚えておくとお得です この文書では
More information背景の線形グラデーションをアニメーションのように見せる方法は 前章の #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ホームページ制作 基礎編 (HTML5 CSS3 コーディング )
ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8
More information8 7 + <div class='col-12 col-md-8'> 8 <%= item.description %> 9 </div> 10 </div> 11 <% end %> 12 </div> class container container-fluid PicoPlan
8 Bootstrap 8.1 PicoPlanner responsive web design PC plan_items#index app/views/plan_items/index.html.erb 1 - 1 + 2 3 - 3 +
More information目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11
CSS について ( 概要 ) 作成日 : 2016/01/21 作成者 : 西村 はじめに この資料は HTML がある程度 ( 少しでも ) わかる人に CSS の仕組みを少しだけわかってもらえるように書いています この資料では 下記を説明します CSS とは何か CSS の基本の形 CSS の読み込み方 セレクタとは何か / 最低限覚えるとよいセレクタ プロパティと値 / 最低限覚えるとよいスタイル
More informationtransform: 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スライド 1
第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの
More information( 注 )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 informationch31.dvi
1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5
More informationCSSNite-LP54-kubo-ito.key
div { div { width: ; div { width: 100%; div { width: 100%; div { width: 100%!important; a { color: #000!important; .box { padding: 20px; border: 4px solid #666; h1 { color:
More informationメニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J
1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています
More informationTaro-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をさせる ) ような場合に それぞれの要素に id 属性で id 名を指定している場合には CSS の id セレクタごとにアニメーションでプロパティを指定する必要があります class セレクタ.class 名 { プロパティ名 : 値 ; HTML 文書で class 属性 ( class="
1346-9 応用 2 Class Selector たくさんの要素を一気に動かす魔法の CSS でアニメーションを作ってみましょう 動かす要素がたくさんあって全て同じような動きをするアニメーションの場合には クラ スセレクタを使うと一気に動かすことができます id セレクタと class セレクタ ここで id セレクタと class セレクタの復習をしましょう id セレクタ #id 名 { プロパティ名
More informationMovingTextsAnime1 の説明 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 informationWeb データ管理 HTML+CSS (7) (2 章 ) 2011/11/16( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/15
Web データ管理 HTML+CSS (7) (2 章 ) 2011/11/16( 水 ) 1/15 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Webデータ管理 20111116 演習
More information388-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トリガーをわかり易くする方法
1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが
More informationWeb データ管理 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 information1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp
1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています 近い将来 webkit
More informationHTML 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<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime1.css"> </head> <
1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かす サンプル CSS1 1 つの画像を 4 分割して それぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます 右上の画像は 3D 変形しながら移動します 左下の画像は回転しながら移動します 右下の画像は拡大しながら移動します ClipAnime1
More information<!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! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ
6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML ! "#$%&'()*+,-. /0123456789:;?@ABCDEFGHIJKLMNOPQR STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ
More informationIBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation
IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践
More information画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され
1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1 画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility:
More informationtransform: 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年刊EDP 2003
1 2 3 HDD HDD HDD HDD ( 4 !!! ( )!! HDD ( )!! ( )!!(ry YU-SHOW!!!!!!!! HxH 5 HDD ( 0123-456-789 ( e 6 PC PC psd 7 8 YO! WebPage http://mode.jp/ PowerTone 9 A4 Canon PIXUS850i 1,440dpi 720dpi A4 10 etc
More information動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属
1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています
More information<!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 informationJIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.
http://www1.iwate-ed.jp/ JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c
More information第32回新春波乗り大会2018
AA 32 Round 1 4 SEMI FINAL 2 20 8 FINAL H1 H1 H1 Red 12701793 1 1-1 Red 12701793 2 1-1 Red 11800623 White 12900058 4 3-1 White 12402115 4 2-1 White 12402209 Yellow 11603976 3 2-2 Yellow 12301534 3 1-2
More information_勉強会_丸山さつき_v3
CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS
More informationサンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT
1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値
More informationインターネットマガジン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スタイルシートでデザインを整えよう
スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます
More informationWebデザイン論
2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :
More informationHTML5&CSS3 レッスンブック
STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの
More information1222-A Transform Function Order (trsn
1256 Reflect プロパティ (-webkit-box-reflect) -webkit-box-reflect プロパティを使用して反射画像を作ってみましょう webkit の仕様なので Safari Chrome で適用されますが それ以外のブラウザは未対応です (2015 年 11 月 25 日現在 ) -webkit-box-reflect プロパティは 画像が鏡に映って反転 ( 反射画像
More informationuntitled
2005 HP -1-2005 8 29 30 HP 1 ( ) 1. Web 2. HTML HTML 1 PDF HTML 1 Web HTML http://www.media.ritsumei.ac.jp/kodais2005 2 2.1 WWW HTML Hyper Text Markup Language) HTML Web HTML Internet Explorer http://www.ritsumei.ac.jp
More informationWeb プログラミング 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画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/
1324 画像を動かす ( 円 楕円 渦巻き運動 ) 画像を円運動 楕円運動 渦巻き運動をさせる方法です 3つの方法があります 1transform-origin プロパティで半径を作る 2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する 3 大きさのない親要素ボックスを回転させ 画像を子要素に指定する 3の方法は 円運動の回転の中心点が分かり易いので
More information演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 1 演習 2 Z: Web データ管
Web データ管理 HTML+CSS (5) (2 章 ) 2011/11/2( 水 ) 1/30 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111102 演習 1 演習 2 Z: Web データ管理
More informationMicrosoft PowerPoint - css-3days 互換モード
情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,
More informationMicrosoft PowerPoint - css-3days 互換モード
情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,
More informationMoshimo Challenge Report
このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ界 No.1 とも言われているデザイナー ナムー が WEB ページ作成の コツを解説していきます 少し技術的な内容も含まれていますが 分からない ことは積極的に調べて 1 つ 1 つスキルアップをしていきましょうね! マリー HTML CSS のプロフェッショナル うさぎだけど好きなブラウザは Fire Fox ナムー
More informationleaf2-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. ウェブの基本
1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /
More informationr6.dvi
13 1 WYSIWYG/ 2013.5.21 1 WYSIWYG/ (LaTeX HTML+CSS ) 2 Web 3 ( GUI) 4 Web (1) 5 Web (2) 1 1.1 ( ) ( ) 1 1: / ( 1) ( ) ( ) 1 1 ( 2) / (text editor) Emacs Windows Mac OS X Unix ( ) (script) 2: 1.2??? 1 (
More information1221 Transitionの指定項目
1310-5 Animation-direction プロパティ animation-direction animation-direction プロパティには アニメーションのサイクルの全部または一部分を 通常通り実行するか逆回転で実行するかを指定します 値 説 明 normal reverse alternate alternate-reverse アニメーションの全ての繰り返しが指定された通りに実行される
More informationJavaScript 演習 2 1
JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript
More informationMorphAndTextAnime の説明 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ウェブデザイン技能検定学科試験 2 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 文字実体参照の は 改行しない半角スペースを表示する 第 2 問 HTML 5.2 では コメントの中に連続したハイフンを入れることができる 第 3 問
1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 文字実体参照の は 改行しない半角スペースを表示する 第 2 問 HTML 5.2 では コメントの中に連続したハイフンを入れることができる 第 3 問 HTTP 通信において GET は HTTP メッセージヘッダの第 2 行目に記される 第 4 問 HTML 5.2 では hgroup 要素を使用できる
More information情報リテラシー(4)
情報リテラシー (14) 教室の後方 3 列への着席 を禁止します 1 情報リテラシー (14) 2018 年度前期 九州産業大学理工学部 2 講義計画 第 8 回 (2018/ 6/ 8) デジタル情報の利用 (1) 第 9 回 (2018/ 6/15) デジタル情報の利用 (2) 第 10 回 (2018/ 6/22) 資料の作成 (1) 第 11 回 (2018/ 6/29) 資料の作成 (2)
More information