CSSNiteLP32-s7-tomita-v3.key

Size: px
Start display at page:

Download "CSSNiteLP32-s7-tomita-v3.key"

Transcription

1

2 Sassの日常の運用 または私は如何にして心配するのを止めて プリプロセッサを愛するようになったか CSS Nite LP, Disk 32: Sass 富田 梓

3

4 !

5

6

7

8 !

9 sass! _common_utility! _common_setting! _common_module! _common_layout! _md_common! _md_main! _md_sub! contenta! contentb

10 !

11

12 sass! core! _setting! _utility! _utility-css3! _style-mixin-base! _style-mixin-layout! _style-mixin-module! _core! _extend! contenta! contentb

13

14 !

15 !

16 git submodule!server! Bar Foo Link! Bar Local Foo Bar

17 lib! utility! _function! _css3! _gradient! _reset! _general! _import! _setting-css3! _setting! _import

18 sass! lib! parts! _extend! _setting-lib! _setting! style-mixin! _base! _layout! _module! _import-default! contenta

19

20 自社ライブラリの 利用方法

21

22

23

24 @include nj-column-count(3); Sass -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; column-count: 3; CSS

25 @include nj-box-sizing(border-box); Sass -moz-box-sizing: border-box; box-sizing: border-box; CSS

26 @include nj-background-size(10px 20px); Sass background-size: 10px 20px; CSS

27

28 sass/lib/_setting-css3.scss!! Layout // $nj-prefixes-column-count : : webkit moz o!default;

29 @include nj-column-count(3); Sass -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; column-count: 3; CSS

30 sass/parts/_setting_lib.scss!! // $nj-prefixes-column-count : : webkit;

31 @include nj-column-count(3); Sass -webkit-column-count: 3; column-count: 3; CSS

32

33 @include nj-linear-gradient( to left, yellow, #33ccff); Sass background-image: url(svg ); background-image: -webkit-gradient( linear, 100% 0, 0 0, from(yellow), to(#33ccff)); background-image: -webkit-linear-gradient( right, yellow, #33ccff); background-image: linear-gradient( to left, yellow, #33ccff); CSS

34 @include nj-linear-gradient( to left, yellow, #33ccff); Sass background-image: url(svg ); background-image: -webkit-gradient( linear, 100% 0, 0 0, from(yellow), to(#33ccff)); background-image: -webkit-linear-gradient( right, yellow, #33ccff); background-image: linear-gradient( to left, yellow, #33ccff); CSS

35

36

37 sass/lib/_setting.scss!! // $nj-support-ie6 $nj-support-ie7 $nj-support-ie8 : : false!default; : false!default; : true!default; // $nj-use-ie-filter : : false!default;

38 sass/parts/_setting_lib.scss!! $nj-support-ie6 $nj-support-ie7 $nj-use-ie-filter : true; : true; : true;

39 @include nj-linear-gradient( to left, 000, #fff); Sass : background-image: linear-gradient( to left, black, white); *filter: progid:dximagetransform.microsoft.gradient( gradienttype=1,startcolorstr='#ffffffff', endcolorstr='#ff000000'); -ms-filter: "progid:dximagetransform.microsoft.gradient( gradienttype=1,startcolorstr='#ffffffff', endcolorstr='#ff000000')"; CSS

40 @include nj-linear-gradient( #232323, #f0f0f0 50%, #969696); background-image: linear-gradient( #232323, #f0f0f0 50%, #969696); *filter: progid gradient( gradienttype=0, startcolorstr= #FF232323', endcolorstr='#ff969696'); Sass CSS

41

42 @include nj-linear-gradient( 135deg, blue, red); Sass background-image: url(svg ); background-image: -webkit-gradient( linear, 0 0, 100% 100%, from(blue), to(red)); background-image: -webkit-linear-gradient( 315deg, blue, red); background-image: linear-gradient( 135deg, blue, red); CSS

43 @include nj-linear-gradient( 83deg, blue, red); Sass background-image: -webkit-linear-gradient( 7deg, blue, red); background-image: linear-gradient( 83deg, blue, red); CSS

44

45 @include nj-legacy-linear-gradient( ) background-image: -webkit-linear-gradient( ); Sass nj-svg-linear-gradient(to right, background-image: url(svg ); Sass CSS

46

47 sass/parts/_setting-compass-sprite.scss!! $spr-map-sp01: nj-sprite-map( "/img/sprite/sp01", $layout: horizontal, $spacing: 0px ); %spr-base-sp01 nj-compass-spr-base($spr-map-sp01); nj-compass-spr($spr-map-sp01, "hoge"); Sass

48 sass/parts/_setting-compass-sprite.scss!! $spr-map-sp01: nj-sprite-map( "/img/sprite/sp01", $layout: horizontal, $spacing: 0px ); %spr-base-sp01 nj-compass-spr-base($spr-map-sp01); nj-compass-spr($spr-map-sp01, "hoge"); Sass

49 sass/parts/_setting-compass-sprite.scss!! $spr-map-sp01: nj-sprite-map( "/img/sprite/sp01", $layout: horizontal, $spacing: 0px ); %spr-base-sp01 nj-compass-spr-base($spr-map-sp01); nj-compass-spr($spr-map-sp01, "hoge"); Sass

50 hoge{ CSS background-image: url("/img/sprite/sp01.png"); hoge { width: 24px; height: 24px; background-position: -38px 0;

51 %spr-base-sp01 nj-compass-spr-base($spr-map-sp01); nj-compass-spr($spr-map-sp01, "hoge"); nj-compass-spr($spr-map-sp01, "fuga"); Sass

52 hoge, fuga { CSS background-image: url("/img/sprite/sp01.png"); hoge { width: 24px; height: 24px; background-position: -38px 0; fuga { width: 32px; height: 25px; background-position: -62px -32px;

53 %spr-base-sp01 nj-compass-spr-base($spr-map-sp01); nj-compass-spr( $spr-map-sp01, hoge, $_width: null, $_height: null); Sass

54 hoge{ CSS background-image: url( /img/sprite/sp01.png"); hoge { background-position: -38px 0;

55

56

57 $spr-map-sp01: nj-sprite-map( "/img/sprite/sp01", $layout: horizontal, $spacing: 10px ); %spr-base-sp01 nj-compass-retina-spr-base( $spr-map-sp01); nj-compass-retina-spr( $spr-map-sp01, "hoge"); Sass

58 hoge{ CSS background-image: url( /img/sprite/sp01.png"); background-size: 67px auto; hoge { width: 12px; height: 12px; background-position: -19px 0;

59

60 %spr-base-sp01 nj-compass-spr-base( $spr-map-sp01, $_parameter:? _01 ); nj-compass-spr($spr-map-sp01, hoge ); Sass

61 hoge{ CSS background-image: url( ); /img/sprite/sp01.png? _01" hoge { width: 24px; height: 24px; background-position: -38px 0;

62

63 sass/parts/_setting-compass-sprite.scss!! // # Compass Sprite $nj-use-compass-sprite: false;

64 %spr-base-common nj-compass-spr-base($spr-map-common); nj-compass-spr($spr-map-common, "hoge"); nj-compass-spr($spr-map-common, "fuga"); Sass

65 hoge, fuga { CSS background-image: url("/img/sprite/sp01.png"); hoge { width: 24px; height: 24px; background-position: -38px 0; fuga { width: 32px; height: 25px; background-position: -62px -32px;

66 hoge, fuga { CSS /* Compass Sprite: */ hoge { width: 24px; height: 24px; background-image:url("/img/sprite/sp01/hoge.png"); fuga { width: 32px; height: 25px; background-image:url("/img/sprite/sp01/fuga.png");

67

68

69

掲示用ヒート表 第34回 藤沢市長杯 2017

掲示用ヒート表 第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 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

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

★結果★ 藤沢市長杯 掲示用ヒート表

★結果★ 藤沢市長杯 掲示用ヒート表 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

<4D F736F F D2095BD90AC E E838B8C6E8EBE8AB382CC93AE8CFC82C98AD682B782E9838A837C815B83675F2E646F6378>

<4D F736F F D2095BD90AC E E838B8C6E8EBE8AB382CC93AE8CFC82C98AD682B782E9838A837C815B83675F2E646F6378> 29 4 IT 1,234 1,447 1 2 3 F20-F29 F20,F21,F22 F23,F24,F25, F28F29 F30-F39 F30,F31,F32 F33,F34,F38 F39 F40-F48 F40,F41,F42 F43,F44,F45 F48 1,234 14,472,130 75,784,748 9,748,194 47,735,762 4,723,984 28,048,986

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

CSSNiteLP51-s7-kubo.key

CSSNiteLP51-s7-kubo.key CSS Nite LP51 Reboot Dreamweaver Dreamweaver 10th .foo width: 980px margin: auto p margin: 1em 0 a color: #000 text-decoration: none .foo { width: 980px; margin: auto; p { margin: 1em 0; a { color:

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

この 講 座 で 学 ぶこと 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

HTML5Lv1_ key

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

More information

_勉強会_丸山さつき_v3

_勉強会_丸山さつき_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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション GREEを 支えるSassのしくみ CSS Nite LP, Disk26 CSS Preprocessor Shootout 2013/1/12 グリー 株 式 会 社 開 発 本 部 山 田 あかね Agenda Agenda はじめに GREE Platformの 課 題 なぜSassなのか 課 題 を 解 決 するために Sassが 支えてきたこと Sassが 支えてきたこと

More information

第32回新春波乗り大会2018

第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

p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge

More information

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

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 information

1221 Transitionの指定項目

1221 Transitionの指定項目 1310 Animation の指定項目 (keyframes) CSS3 の animation プロパティを使用してアニメーションを動かすためには @ キーフレー ムルール (@keyframes) の知識が必要です @keyframes は アニメーションの初めから終 わりまでの間のさまざまなポイントでのプロパティの値を指定して アニメーションを変 化させることができます @keyframes

More information

Color Change

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

More information

5 IT 1,280 1, , ICD -10 <1> <2> <3> F20-F29 F20,F21,F22 F23,F24,F25, F28F29 F30-F39 F30,F31,F32 F33,F34,F38 F39 F40-F48 F40,F41,F42 F43,F

5 IT 1,280 1, , ICD -10 <1> <2> <3> F20-F29 F20,F21,F22 F23,F24,F25, F28F29 F30-F39 F30,F31,F32 F33,F34,F38 F39 F40-F48 F40,F41,F42 F43,F 5 IT 1,280 1,568 1 3,862 2 3 ICD -10 F20-F29 F20,F21,F22 F23,F24,F25, F28F29 F30-F39 F30,F31,F32 F33,F34,F38 F39 F40-F48 F40,F41,F42 F43,F44,F45 F48 15,680,980 138,623,755 1,280 10,284,893

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

Taro13-第6章(まとめ).PDF

Taro13-第6章(まとめ).PDF % % % % % % % % 31 NO 1 52,422 10,431 19.9 10,431 19.9 1,380 2.6 1,039 2.0 33,859 64.6 5,713 10.9 2 8,292 1,591 19.2 1,591 19.2 1,827 22.0 1,782 21.5 1,431 17.3 1,661 20.0 3 1,948 1,541 79.1 1,541 79.1

More information

Color Change

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

More information

CSSNite-LP54-kubo-ito.key

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

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

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

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

( 注 )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

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます 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

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

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

More information

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

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

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/

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

立ち読みページ

立ち読みページ 6 6 46. 47. 48. 49. 50. 51. 52. 53. 146 148 150 152 154 158 160 162 6 46 Web ( ) table tr td th >> 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

をさせる ) ような場合に それぞれの要素に id 属性で id 名を指定している場合には CSS の id セレクタごとにアニメーションでプロパティを指定する必要があります class セレクタ.class 名 { プロパティ名 : 値 ; HTML 文書で class 属性 ( class="

をさせる ) ような場合に それぞれの要素に id 属性で id 名を指定している場合には CSS の id セレクタごとにアニメーションでプロパティを指定する必要があります class セレクタ.class 名 { プロパティ名 : 値 ; HTML 文書で class 属性 ( class= 1346-9 応用 2 Class Selector たくさんの要素を一気に動かす魔法の CSS でアニメーションを作ってみましょう 動かす要素がたくさんあって全て同じような動きをするアニメーションの場合には クラ スセレクタを使うと一気に動かすことができます id セレクタと class セレクタ ここで id セレクタと class セレクタの復習をしましょう id セレクタ #id 名 { プロパティ名

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

1221 Transitionの指定項目

1221 Transitionの指定項目 1310-5 Animation-direction プロパティ animation-direction animation-direction プロパティには アニメーションのサイクルの全部または一部分を 通常通り実行するか逆回転で実行するかを指定します 値 説 明 normal reverse alternate alternate-reverse アニメーションの全ての繰り返しが指定された通りに実行される

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

3 3.1 SSedit ua012345% ssedit SuperSQL config.ssql log.txt( logs.txt) SSedit SSedit 3.2 ssql Putty SSedit ua012345% ssql HTML /public html/ssql.ssql 4

3 3.1 SSedit ua012345% ssedit SuperSQL config.ssql log.txt( logs.txt) SSedit SSedit 3.2 ssql Putty SSedit ua012345% ssql HTML /public html/ssql.ssql 4 SuperSQL SuperSQL 2016 12 13 1 SuperSQL ITC 2 SuperSQL 2.1 public html/ssql 2.2 SSedit SSedit (3.1 ) postgresql (ua123456 ) 131.113.101.124 /public html/ssql SuperSQL HTML /public html/ssql http://user.keio.ac.jp/

More information

2004-2006 2004-2006 CSS Web Quiz LOVE PC 2012 4 Windows 8 / CPP Fluid PE CSS3 RWD Quiz 1. 2. 3. 4. 1. 2. 3. 4. CSS3 #btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;!

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

益 子 貴 寛 株 式 会 社 サイバーガーデン なんでも 知 っておかないとマズい ディレクター という 立 ち 位 置

益 子 貴 寛 株 式 会 社 サイバーガーデン なんでも 知 っておかないとマズい ディレクター という 立 ち 位 置 新 しいマークアップ 環 境 に キャッチアップ! 2013.12.14 CSS Nite LP, Disk 31:Shift7 益 子 貴 寛 小 山 田 晃 浩 益 子 貴 寛 Twitter: @takahiromashiko 株 式 会 社 サイバーガーデン なんでも 知 っておかないとマズい ディレクター という 立 ち 位 置 小 山 田 晃 浩 Twitter: @yomotsu 株

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

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

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

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

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

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

More information

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

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

More information

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

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され 1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1 画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility:

More information

TEAM WEAR 1

TEAM WEAR 1 TEAM WEAR 1 2 TEAM WEAR BUSINESS WEAR 3 4 5 6 7 11 13 28 29 41 43 45 INDEX 3 4 5 6 z x c v b n 7 1 m 0, 2 3 4 5. z x c v b n m,. 0 1 2 3 4 5 8 z x c v b n m,. 9 1 0 2 3 4 5 z x c v b n m,. 0 1 2 3 4 5

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

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

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/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 information

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は 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 information

untitled

untitled 0120-888-089 0120-919-498 160-83381-26-1TEL. 03-3349-3111 URL http://www.sjnk.co.jp/ 160-83381-26-1 TEL. 03-3349-3111 URL http://www.sompo-japan.co.jp/ 100-89653-7-3 TEL. 0120-919-498 URL http://www.nipponkoa.co.jp/

More information

表紙.PDF

表紙.PDF 2 3 4 2001 2010 33 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 H18 21 22 23 24 25 26 27 28 29 30 31 32 33 300 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 410-8601 055-934-4747 Fax 055-933-1412

More information

農林金融2015年5月号

農林金融2015年5月号 4 5 4 4 4 4 2014 5 14 7 2050 1412 15 3 19 1800 1 1 2 2 2 126 2 3 1 2 1 2 3 4 1 1 2 2 1 1 2014 3 2 126 2 2 3 1 40 30 20 10 0 2014 26 287 339 393 399 361 2 2 11 1 3 25 4 4 5 5 19898993 96 3 2000 1 1 1 5

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

インターネットマガジン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

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

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

More information

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

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

2,700,000 26,800,000 5 - - jquery Mobile - - - - jquery Mobile - - Objective-C / 30% Android - - jquery Mobile - - - - jquery Mobile - - iphone ipod UI jquery Mobile Gallery http://www.jqmgallery.com/

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

( )$("canvas").drawarc({strokestyle:"red", x:100, y:100, radius:20, start:0, end:360); drawline(x1:, y1:,... xn:, yn:) drawline n 2 n 3 x1: y1: xn: yn

( )$(canvas).drawarc({strokestyle:red, x:100, y:100, radius:20, start:0, end:360); drawline(x1:, y1:,... xn:, yn:) drawline n 2 n 3 x1: y1: xn: yn 0.1. jquaery jcanvas jquery John Resig OSS JavaScript Web JavaScript jquery jquery 1 0.2. jcanvas jcanvas 0.3. jcanvas HTML5 Canvas Canvas jcanvas jcanvas jquery Canvas API jcanvas Grouping Layer jcanvas

More information

精神障害者保健福祉手帳用診断書(別紙様式第2号) 記載要領

精神障害者保健福祉手帳用診断書(別紙様式第2号) 記載要領 23 7 23 8 1 2 F04F06F07 2 F04 2 3 F04 F06 F06.3 F06.6 F06.7 F07 F07.0 F07.1 F07.2 3 21 12 2000 8 1 2001 1 2000 8 1 2 2 112 610 4 5 / 2 2 6 7 8 F04F06F07 2 F04 2 3 F04 F06 F06.3 F06.6 F06.7 F07 F07.0 F07.1

More information

ProVisionaire Control V3.0セットアップガイド

ProVisionaire Control V3.0セットアップガイド ProVisionaire Control V3 1 Manual Development Group 2018 Yamaha Corporation JA 2 3 4 5 NOTE 6 7 8 9 q w e r t r t y u y q w u e 10 3. NOTE 1. 2. 11 4. NOTE 5. Tips 12 2. 1. 13 3. 4. Tips 14 5. 1. 2. 3.

More information

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J 1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています

More information

/var/lib/sharelatex/data/compiles/5b35c6e168aeba3d a72a7acd11f6ba07fbbff68/output.dvi

/var/lib/sharelatex/data/compiles/5b35c6e168aeba3d a72a7acd11f6ba07fbbff68/output.dvi SuperSQL 2018 7 5 1 2 2 2 2.1.................................... 2 2.2 SSedit....................................... 2 3 2 3.1 SSedit..................................... 2 3.2 ssql.................................

More information

1. はじめにこのドキュメントは IBMi 上のデータを HTML のテーブルで表示するためのカスタマイズ方法について説明するものです この手法を用いることで スムーズなスクロールによる照会画面 (HTML のテーブル ) を 5250 画面に挿 することが出来ます ( 下図参照 ) なお このドキ

1. はじめにこのドキュメントは IBMi 上のデータを HTML のテーブルで表示するためのカスタマイズ方法について説明するものです この手法を用いることで スムーズなスクロールによる照会画面 (HTML のテーブル ) を 5250 画面に挿 することが出来ます ( 下図参照 ) なお このドキ 目次 1. はじめに... 2 2. カスタマイズ方法... 4 2.1. 静的テーブルを使ったカスタマイズ方法... 4 2.2. 動的テーブルを使ったカスタマイズ方法... 6 2.3. 動的テーブルを使ったカスタマイズ方法 ( あいまい検索の実装 )... 8 2.4. ヘッダーを固定したスクロール テーブルのカスタマイズ方法... 12 2.5. テーブル内のデータを axes カスタマイズ画面で使用する方法...

More information

Web制作者のためのSassの教科書 お試し版

Web制作者のためのSassの教科書 お試し版 Web 2013 1 Web CSS Space http://latele.co.jp/ http://css-happylife.com/ http://nekonekocube.com/ Web EC Web EC Sou-Lab http://sou-lab.com/ http://blog.sou-lab.com/ http://bebe-log.com/ Latele WEBCRE8.jp

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. jquery 1 jquery jcanvas javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web Web jquer

1.1. jquery 1 jquery jcanvas javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web Web jquer 1 1.1. jquery 1 jquery jcanvas javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web Web jquery jcanvas jquery jcanvas 1.2. jcanvas HTML5 Canvas

More information

# let st1 = {name = "Taro Yamada"; id = };; val st1 : student = {name="taro Yamada"; id=123456} { 1 = 1 ;...; n = n } # let string_of_student {n

# let st1 = {name = Taro Yamada; id = };; val st1 : student = {name=taro Yamada; id=123456} { 1 = 1 ;...; n = n } # let string_of_student {n II 6 / : 2001 11 21 (OCaml ) 1 (field) name id type # type student = {name : string; id : int};; type student = { name : string; id : int; } student {} type = { 1 : 1 ;...; n : n } { 1 = 1 ;...; n = n

More information

1/2

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

More information

Web 設計入門

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

More information