BASIC

Size: px
Start display at page:

Download "BASIC"

Transcription

1

2 BASIC

3

4 2012

5 なぜ?

6 なら ラクに CSS が書ける

7 今日のお話 + - 入力の 手間省く CSS を まとめる 計算 できる

8

9

10 おさらい

11 Sass CSS style.scss style.css 変換コンパイル

12 PSD JPEG 書き出し

13 PSD を し PSD JPEG JPEG 書き出し に する

14 PSD PSD を 変換し JPEG JPEG 書き出し に する

15 PSD PSD を 変換し JPEG 書き出し JPEG に 出力する

16 Sass CSS style.scss style.css 変換コンパイル

17 Sass を し Sass CSS style.scss style.css CSS 変換にコンパイル する

18 Sass Sass を 変換し CSS style.scss style.css CSS 変換にコンパイル する

19 Sass Sass を 変換し CSS style.scss style.css CSS 変換 に コンパイル 出力する

20 1 入力の手間を 省略

21 c + v Copy & Paste

22 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

23 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

24 ここが大変 CSS 共通セレクタを 1 つ 1 つ書くのが大変

25 従来の CSS #main h1 { margin: 10px; #main h2 { margin: 10px; #main p { margin: 10px; #main ul { margin: 10px;

26 従来の CSS #main h1 { margin: 10px; #main h2 { margin: 10px; #main p { margin: 10px; #main ul { margin: 10px;

27 Sass にすると #main { h1 { margin: 10px; h2 { margin: 10px; p { margin: 10px; ul { margin: 10px; Sass Meister で見る

28 Sass にすると #main { h1 { margin: 10px; h2 { margin: 10px; p { margin: 10px; ul { margin: 10px; Sass Meister で見る

29 Sass にすると #main { h1 { margin: 10px; h2 { margin: 10px; p { margin: 10px; ul { margin: 10px; #main h1 { margin: 10px; #main h2 { margin: 10px; #main p { margin: 10px; #main ul { margin: 10px; Sass Meister で見る

30 Sass にすると #main { h1 { margin: 10px; h2 { margin: 10px; p { margin: 10px; ul { margin: 10px; #main h1 { margin: 10px; #main h2 { margin: 10px; #main p { margin: 10px; #main ul { margin: 10px; Sass Meister で見る

31 2 重でも 3 重でもネスト ( 入れ子 )OK #main { h1 { margin: 10px; span { color: #000; h2 { padding: 10px; Sass Meister で見る

32 2 重でも 3 重でもネスト ( 入れ子 )OK #main { h1 { margin: 10px; span { color: #000; h2 { padding: 10px; Sass Meister で見る

33 2 重でも 3 重でもネスト ( 入れ子 )OK #main { h1 { margin: 10px; span { color: #000; h2 { padding: 10px; #main h1 { margin: 10px; #main h1 span { color: #000; #main h2 { padding:10px; Sass Meister で見る

34 2 重でも 3 重でもネスト ( 入れ子 )OK #main { h1 { margin: 10px; span { color: #000; h2 { padding: 10px; #main h1 { margin: 10px; #main h1 span { color: #000; #main h2 { padding:10px; Sass Meister で見る

35 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

36 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

37 ここが大変 CSS 同じ値を書くのが大変

38

39

40 #AD253A #AD253A #AD253A #AD253A

41 #AD253A #AD253A 全体を青に できませんか #AD253A #AD253A

42

43 $ 変数

44 #FF px " Futura" $

45 変数の代入と参照 $key_color: #DF5496;.box { background: $key_color; p { color: $key_color; background: #FFF;

46 変数の代入と参照 $key_color: #DF5496;.box { background: $key_color; p { color: $key_color; background: #FFF;

47 変数の代入と参照 #DF5496 $key_color: #DF5496;.box { background-color: $key_color; p { color: $key_color; background-color: #FFFFFF; $key_color

48 変数の代入と参照 $key_color: #DF5496;.box { background: $key_color; p { color: $key_color; background: #FFF;

49 変数の代入と参照 $key_color: #DF5496; 変数を代入 $ 変数名 : 値 ;.box { background: $key_color; p { color: $key_color; background: #FFF;

50 変数の代入と参照 $key_color: #DF5496; 変数を代入 $ 変数名 : 値 ;.box { background: $key_color; p { color: $key_color; background: #FFF;

51 変数の代入と参照 $key_color: #DF5496; 変数を代入 $ 変数名 : 値 ;.box { background: $key_color; p { #DF5496 #DF5496 color: $key_color; background: #FFF;

52 変数の代入と参照 $key_color: #DF5496;.box { background: $key_color; p { color: $key_color; background: #FFF; Sass Meister で見る

53 変数の代入と参照 $key_color: #DF5496;.box { background: $key_color; p { color: $key_color; background: #FFF;.box { background: #DF5496;.box p { color: #DF5496; background: #FFF; Sass Meister で見る

54 #FF px " Futura" $

55 もちろん 数値や文字列も OK $ff_impact: Impact, Arial; $m_value: 10px; body { font-family: $ff_impact; input, textarea { font-family: $ff_impact;.box1 { margin: $m_value; Sass Meister で見る

56 もちろん 数値や文字列も OK $ff_impact: Impact, Arial; $m_value: 10px; body { font-family: $ff_impact; input, textarea { font-family: $ff_impact;.box1 { margin: $m_value; body { font-family: Impact, Arial; input, textarea { font-family: Impact, Arial;.box1 { margin: 10px; Sass Meister で見る

57 #AD253A #AD253A 全体を青に できませんか #AD253A #AD253A

58 #AD253A #AD253A #AD253A #AD253A

59 $color: #AD253A; body { background: $color; #gnav { color: $color;.ttl { color: $color; #side { background: $color;

60 $color: #AD253A; body { background: $color; #gnav { color: $color;.ttl { color: $color; #side { background: $color; body { background: #AD253A ; #gnav { color: #AD253A ;.ttl { color: #AD253A ; #side { background: #AD253A ;

61 $color: #AD253A #008ADE; body { background: $color; #gnav { color: $color;.ttl { color: $color; #side { background: $color; body { background: #AD253A ; #gnav { color: #AD253A ;.ttl { color: #AD253A ; #side { background: #AD253A ;

62 $color: #AD253A #008ADE; body { background: $color; #gnav { color: $color;.ttl { color: $color; #side { background: $color; body { background: #AD253A #008ADE ; #gnav { color: #AD253A #008ADE ;.ttl { color: #AD253A #008ADE; #side { background: #AD253A #008ADE ;

63

64

65 変数の使いどころ 発表時カットスライド サイト全体で共通して使う色 メインカラー サブカラー アクセントカラー 通常のリンクカラー ホバー時のリンクカラー ページ幅 フォント名 body に font-family を指定しても フォームには改めて指定する必要があるので変数にしておくと便利です プロパティの値が他のプロパティにも影響するとき計算する際 同じ値を使うときに変数にしておくと 1 箇所を編集すると CSS を書き換えられるので便利です セッションでお話した 960px のボックスを padding や border の値を引いて 3 分割する といったときに使うと便利です

66 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

67 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

68 ここが大変 CSS 同じプロパティと値を 書くのが大変

69 .boxa p { margin: 20px; padding: 10px; color: #595959;.boxA ul { margin: 20px; padding: 10px; color: #595959; line-height: 1.3;

70 .boxa p { margin: 20px; padding: 10px; color: #595959;.boxA ul { margin: 20px; padding: 10px; color: #595959; line-height: 1.3;

71 .boxa p { margin: 20px; padding: 10px; color: #595959;.boxA ul { margin: 20px; padding: 10px; color: #595959; line-height: 1.3; プロパティ : 値 ; 今度はこのセットをまとめたい

72 $

73 @mixin $ ミックスイン

74 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3;

75 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3;

76 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3;

77 margin: 20px; Sass で書くとこうなる padding: basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: basic 1.3; color: #595959;

78 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3; Sass Meister で見る

79 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3; 名前 { Sass Meister で見る

80 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3; 名前 { Sass Meister で見る

81 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3; 名前 { 名前 ; Sass Meister で見る

82 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3;

83 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3;

84 Sass basic { margin: 20px; padding: 10px; color: #595959;.boxA { p basic; ul basic; line-height: 1.3;.boxA p { margin: 20px; padding: 10px; color: #595959;.boxA ul { margin: 20px; padding: 10px; color: #595959; line-height: 1.3;

85 今度は一部だけ違うとき.boxA.boxB

86 今度は一部だけ違うとき 10px 20px 20px 10px.boxA.boxB

87 今度は一部だけ違うとき padding だけ違う 10px 20px 20px 10px.boxA.boxB

88 今度は一部だけ違うとき.boxA { margin: 20px; padding: 10px; color: #595959;.boxB { margin: 20px; padding: 20px; color: #595959;

89 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px);

90 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px); 名前 ($ 変数名 ){

91 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px); 名前 ($ 変数名 ){

92 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px); 名前 ($ 変数名 ){ 名前 ( 値や変数 );

93 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px); 名前 ($ 変数名 ){ 名前 ( 値や変数 );

94 10px Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px); 名前 ($ 変数名 ){ 名前 ( 値や変数 );

95 Sass basic($value) { margin: 20px; padding: $value; 10px color: #595959;.boxA basic(10px);.boxb basic(20px); 名前 ($ 変数名 ){ 名前 ( 値や変数 );

96 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px); 名前 ($ 変数名 ){ 名前 ( 値や変数 );

97 20px Sass basic($value) { margin: 20px; padding: $value; 20px color: #595959;.boxA basic(10px);.boxb basic(20px); 名前 ($ 変数名 ){ 名前 ( 値や変数 );

98 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px); Sass Meister で見る

99 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px);.boxa { margin: 20px; padding: 10px; color: #595959;.boxB { margin: 20px; padding: 20px; color: #595959; Sass Meister で見る

100 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px);.boxa { margin: 20px; padding: 10px; color: #595959;.boxB { margin: 20px; padding: 20px; color: #595959; Sass Meister で見る

101 Sass basic($value) { margin: 20px; padding: $value; color: #595959;.boxA basic(10px);.boxb basic(20px);.boxa { margin: 20px; padding: 10px; color: #595959;.boxB { margin: 20px; padding: 20px; color: #595959; Sass Meister で見る

102 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

103 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

104 ここが大変 CSS, でまとめると コードが把握しにくい

105 CSS でこういうコード書いたことありませんか? CSS CSS CSS Sass Sass Sass CSS CSS CSS CSS Sass Sass Sass CSS.noteA.noteB

106 CSS でこういうコード書いたことありませんか? 違いは線幅だけ CSS CSS CSS Sass Sass Sass CSS CSS CSS CSS Sass Sass Sass CSS.noteA.noteB

107 CSS でこういうコード書いたことありませんか?.noteA,.noteB { margin: 20px; padding: 10px; border: 1px solid #000;.noteB { border-width: 4px;

108 CSS でこういうコード書いたことありませんか? CSS CSS CSS Sass Sass Sass CSS CSS CSS CSS Sass Sass Sass CSS.noteA.noteB

109 CSS でこういうコード書いたことありませんか? CSS CSS CSS Sass Sass Sass CSS CSS CSS CSS Sass Sass Sass CSS.noteA.noteB

110 CSS でこういうコード書いたことありませんか? CSS CSS CSS Sass CSS CSS CSS Sass Sass Sass Sass Sass CSS CSS 強調スタイルも.noteA 必要でした.noteB

111 CSS でこういうコード書いたことありませんか?.noteA,.noteB { margin: 20px; padding: 10px; border: 1px solid #000;.noteB { border-width: 4px;

112 CSS でこういうコード書いたことありませんか?.noteA,.noteB { margin: 20px; padding: 10px; border: 1px solid #000;.noteA strong,.noteb strong { color: #DF5496;.noteB { border-width: 4px;

113 CSS でこういうコード書いたことありませんか?.noteA,.noteB { margin: 20px; padding: 10px; border: 1px solid #000; 見通しが悪い = ミスの原因.noteA strong,.noteb strong { color: #DF5496;.noteB { border-width: 4px;

114 @extend

115 @extend エクステンド

116 Sass ではこう書けます.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong { color: #DF5496;.noteB border-width: 4px;

117 Sass ではこう書けます.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong { color: #DF5496;.noteB border-width: 4px;

118 Sass ではこう書けます.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong { color: #DF5496;.noteB border-width: 4px; セレクタを, セレクタ名 ;

119 Sass ではこう書けます.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong { color: #DF5496;.noteB border-width: 4px; Sass Meister で見る

120 Sass ではこう書けます.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong { color: #DF5496;.noteB border-width: 4px;.noteA,.noteB { margin: 20px; padding: 10px; border: 1px solid #000;.noteA strong,.noteb strong { color: #DF5496;.noteB { background-width: 4px; Sass Meister で見る

121 Sass ではこう書けます.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong { color: #DF5496;.noteB border-width: 4px;.noteA,.noteB { margin: 20px; padding: 10px; border: 1px solid #000;.noteA strong,.noteb strong { color: #DF5496;.noteB { background-width: 4px; Sass Meister で見る

122 CSS でこういうコード書いたことありませんか? CSS CSS CSS Sass Sass Sass CSS CSS CSS CSS Sass Sass Sass CSS.noteA.noteB

123 .noteb が不要になりました! CSS CSS CSS Sass Sass Sass CSS CSS CSS CSS Sass Sass Sass CSS.noteA.noteB

124 .noteb が不要になりました! CSS CSS CSS Sass Sass Sass CSS CSS CSS CSS Sass Sass Sass CSS.noteA.noteB

125 .noteb が不要になりました!.noteA,.noteB { margin: 20px; padding: 10px; border: 1px solid #000;.noteA strong,.noteb strong { color: #DF5496;.noteB { border-width: 4px;

126 .noteb が不要になりました!.noteA,.noteB { margin: 20px; padding: 10px; border: 1px solid #000;.noteA strong,.noteb strong { color: #DF5496;.noteB { border-width: 4px;

127 .noteb が不要になりました! border: 1px solid #000;.noteA,.noteB { margin: 20px; padding: 10px; 3 箇所.noteA strong,.noteb strong { color: #DF5496;.noteB { border-width: 4px;

128 Sass で書くと.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong { color: #CD6699;.noteB border-width: 4px;

129 Sass で書くと.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong {.noteb { 1 箇所 color: border-width: 4px;

130 Sass で書くと.noteA { margin: 20px; padding: 10px; border: 1px solid #000; strong { color: #CD6699;.noteB border-width: 4px; 削除範囲が近い = 消し忘れが起こりにくい

131 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

132 1 入力の手間を 省略

133 c + v 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

134 { { ネスト ( 入れ子 ) 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

135 変数 $ 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

136 で呼び出し 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

137 で, でつなげる 共通のセレクタ 同じ値 同じプロパティと値 セレクタのグループ

138 2 CSSをまとめる

139

140 HTML <link href="import.css"...>

141 import.css HTML CSS

142 import.css HTML url("basic.css");

143 import.css reset.css HTML CSS CSS layout.css CSS basic.css CSS

144 import.css reset.css HTML CSS CSS layout.css requests CSS basic.css 44 回 サーバーから CSS をダウンロードしてくる必要があった CSS

145 SPEED CC BY : Nic Redhead

146 import.css reset.css HTML CSS CSS 4 layout.css requests CSS basic.css 4 回 サーバーから CSS をダウンロードしてくる必要があった CSS

147 import.css reset.css HTML CSS CSS 1 layout.css request CSS basic.css CSS を一つにまとめると高速化に結びつけやすい CSS

148 import.css reset.css HTML CSS CSS url("basic.css"); CSS basic.css CSS

149 import.css HTML CSS /* reset.css */ html { /* layout.css */ #main { /* basic.css */ body {

150 2 CSSをまとめる

151 CSS import.css CSS CSS CSS reset.css layout.css basic.css

152 Sass import.scss Sass Sass Sass _reset.scss _layout.scss _basic.scss

153 Sass import.scss ファイル名先頭に _ ( アンダースコア ) Sass Sass Sass 単一ファイルでコンパイルしなくなる _reset.scss _layout.scss _basic.scss

154 Sass url("basic.css");

155 Sass アンダースコアと import.scss "basic";

156 Sass "reset","layout","basic";

157 Sass import.scss, "reset","layout","basic";

158 Sass import.scss Sass Sass Sass _reset.scss _layout.scss _basic.scss

159 Sass 合体! CSS import.scss import.css Sass Sass Sass _reset.scss _layout.scss _basic.scss

160 /* reset.css */ html { Sass /* layout.css */ import.scss 合体! CSS import.css #main { /* basic.css */ body { Sass Sass Sass _reset.scss _layout.scss _basic.scss

161 + - 3 計算できる

162 ここが大変 CSS 余白計算は電卓...

163 960px px px px

164 960px 15px px px px

165 ( * 2) / 3

166 ( * 2) / 3 全体幅左右のボーダー幅カラム数

167

168 Sass で書くと.wrap { width: 960px; border: 15px solid #000; > div { float: left; width: (960px - 15 * 2) / 3; Sass Meister で見る

169 Sass で書くと.wrap { width: 960px; border: 15px solid #000; > div { float: left; width: (960px - 15 * 2) / 3; Sass Meister で見る

170 変換するとこうなる.wrap { width: 960px; border: 15px solid black;.wrap > div { float: left; width: 310px;

171 + - * / 足し算引き算かけ算割り算

172 Sass で書くと.wrap { width: 960px; border: 15px solid #000; > div { float: left; 半角スペース入れる width: (960px - 15 * 2) / 3;

173 960px px px px

174 960px 15px px px px

175 Sass で書くと.wrap { width: 960px; border: 15px solid #000; > div { float: left; width: (960px - 15 * 2) / 3;

176 Sass で書くと.wrap { width: 960px; border: 15px solid #000; > div { float: left; width: (960px - 15 * 2) / 3;

177 Sass で書くと.wrap { width: 960px; border: 15px solid #000; > div { float: left; width: (960px - 15 * 2) / 3;

178 Sass で書くと.wrap { width: 960px; border: 15px solid #000; 根拠が同じ値 > div { float: left; width: (960px - 15 * 2) / 3;

179 変数を使うと.wrap { $bd_width : 15px; width: 960px; border: $bd_width solid #000; > div { float: left; width: (960px - $bd_width * 2) / 3; Sass Meister で見る

180 CSS に変換すると.wrap { width: 960px; border: 15px solid black;.wrap > div { float: left; width: 310px;

181 CSS に変換すると.wrap { width: 960px; border: 15px solid black;.wrap > div { float: left; width: 310px;

182 CSS に変換すると.wrap { width: 960px; border: 15px solid black;.wrap > div { float: left; width: 310px;

183 ここが大変 CSS 色の微調整ができない

184 お申し込み

185 お申し込み

186 お申し込み :hover 忘れた

187 Sass で書くとこうなる button { background: #669999; &:hover { background: darken( #669999,20%); Sass Meister で見る

188 Sass で書くとこうなる button { background: #669999; &:hover { 暗くする background: darken( #669999,20%); Sass Meister で見る

189 Sass で書くとこうなる button { background: #669999; &:hover { 暗くする どれぐらい? background: darken( #669999,20%); Sass Meister で見る

190 Sass で書くとこうなる button { background: #669999; &:hover { 暗くする どれぐらい? background: darken( #669999,20%); 親セレクタ button Sass Meister で見る

191 Sass で書くとこうなる button { background: #669999; &:hover { background: darken( #669999,20%); button { background: #669999; button:hover { background: #527a7a; Sass Meisterで見る

192 お申し込み

193 お申し込み

194 お申し込み #669999

195 お申し込み # #527A7A

196 お申し込み # #527A7A

197 daken 色を暗くする darken(, %) lighten 色を明るくする lighten(, %) saturate 彩度を上げる saturate(, %) desaturate 彩度を下げる desaturate(, %) adjust-hue 色相をずらす adjust-hue(, deg)

198 変数を使うともっと便利! $key_color: #669999; h1 { background-color: darken($key_color,10%); h2 { border-left: 5px solid darken($key_color,5%); h3 { border-bottom: 1px solid saturate(darken($key_color,20%),10%); Sass Meister で見る

199 CSS に変換すると h1 { background-color: #527a7a; h2 { border-left: 5px solid #5c8a8a; h3 { border-bottom: 1px solid #366363; h1 h2 h3 テキスト テキスト テキスト

200 今日のお話 + - 入力の 手間省く CSS を まとめる 計算 できる

201 他にも 一行コメント @each

202 他にも 発表時カットスライド 一行コメント @each ここから 未公開スライド! 最初は難しいかもしれません でも 覚えるとかなりの手数を減らせます! 基本的なコトを覚えるまでは こんなこともできるのか 程度に留めて 基本に集中してくださいね

203 発表時カットスライド ここが大変 CSS PHP や JS みたいな 一行コメントを書きたい

204 Sass では一行コメント書けます 発表時カットスライド // #gnav { li { $item_number : 4; // width: 960px / $item_number; Sass Meister で見る

205 CSS に変換すると 発表時カットスライド // #gnav { li { $item_number : 4; // width: 960px / $item_number;

206 CSS に変換すると 発表時カットスライド // #gnav { li { $item_number : 4; // width: 960px / $item_number; // より後ろは 変換後消える 検証に一時的にスタイルを OFF にしたいというとき便利です SublimeText+Emmet だと Windows なら Ctrl+/ Mac なら Cmd+/ でカーソルが行の中にあっても先頭にコメントを付けたり 消したりしてくれます 個人的にかなり便利

207 CSS ではこうなる 発表時カットスライド #gnav li{ width: 240px;

208 発表時カットスライド ここが大変 CSS ちょっと融通効いた コード書けないの?

209 textcontrast($color) { background-color: lightness($color) > 50% ) { color: { color: #FFF; p textcontrast(#333); ul textcontrast(#efefef); 発表時カットスライド Sass Meister で見る

210 textcontrast($color) { background-color: lightness($color) > 50% ) { color: { color: #FFF; lightness( カラーコード ) 色の明るさを数値化する関数 0% 100% 暗明

211 明るさが 50% 未満? 発表時カットスライド

212 明るさが 50% 未満? 発表時カットスライド

213 発表時カットスライド 明るさが 50% 未満? YES

214 発表時カットスライド NO 明るさが 50% 未満? YES

215 発表時カットスライド NO 明るさが 50% 未満? TRUE

216 発表時カットスライド FALSE 明るさが 50% 未満? TRUE $color: #FFF $color: #000

217 40% 発表時カットスライド 明るさが 50% 未満? FALSE TRUE $color: #FFF $color: #000

218 発表時カットスライド FALSE 明るさが 50% 未満? TRUE 40% $color: #FFF $color: #000

219 80% 発表時カットスライド 明るさが 50% 未満? FALSE TRUE 40% $color: #FFF $color: #000

220 発表時カットスライド FALSE 明るさが 50% 未満? TRUE 40% 80% $color: #FFF $color: #000

221 明るさtextContrast($color) 50% 未満? { background-color: lightness($color) > 50% ) { color: { color: #FFF;

222 明るさtextContrast($color) 50% 未満? { background-color: lightness($color) > 50% ) { TRUE の場合 color: { color: #FFF;

223 明るさtextContrast($color) 50% 未満? { background-color: lightness($color) > 50% ) { TRUE の場合 color: { FALSE の場合 color: #FFF;

224 textcontrast($color) { background-color: lightness($color) > 50% ) { color: { color: #FFF; p textcontrast(#333); ul textcontrast(#efefef); 発表時カットスライド

225 p { 発表時カットスライド background-color: #333333; color: #FFF; ul { background-color: #efefef; color: #000;

226 発表時カットスライド ここが大変 CSS 同じようなコードを 書くのが面倒くさい

227 こんなコード書いたことありませんか? 発表時カットスライド クラス名で margin 制御しよう

228 こんなコード書いたことありませんか? 発表時カットスライド.mb10 { margin-bottom: 10px;.mb20 { margin-bottom: 20px;.mb30 { margin-bottom: 30px;.mb40 { margin-bottom: 40px;.mb50 { margin-bottom: 50px; セレクタの中に数字 数字は値にも使われてる 何回も同じこと書いているような気がしてイヤだ!

229 Sass ならこう書ける 発表時カットスライド $i が 50 未満の間繰り返す $i : $i <= 50 {.mb#{$i { margin-bottom: $i + px; $i : $i + 10; Sass Meister で見る

230 $i に 10 を代入 発表時カットスライド $i は 50 以上? NO YES.mb#{$i { margin-bottom: $i + px; $i に 10 をプラス戻る

231 $i に 10 を代入 発表時カットスライド 10 $i は 50 以上? NO YES.mb#{$i { margin-bottom: $i + px; $i に 10 をプラス戻る

232 $i に 10 を代入 発表時カットスライド $i は 50 以上? NO YES 10.mb#{$i { margin-bottom: $i + px; $i に 10 をプラス戻る

233 $i に 10 を代入 発表時カットスライド #{ 変数 NO セレクターやプロパティに直接変 $iは50 以上? 数を書こうとすると 意図通りの 結果にならないことがあります そのため 変数を #{ で囲みます YES 10.mb#{$i { margin-bottom: $i + px; $i に 10 をプラス戻る

234 $i に 10 を代入 発表時カットスライド $i は 50 以上? NO YES 10.mb#{$i { margin-bottom: $i + px; $i に 10 をプラス戻る

235 $i に 10 を代入 $i が 10 のとき 発表時カットスライド.mb10 { margin-bottom:10px; $i は 50 以上? NO YES.mb#{$i { margin-bottom: $i + px; 10 $iに10をプラス戻る

236 $i に 10 を代入 $i が 10 のとき 発表時カットスライド.mb10 { margin-bottom:10px; $i は 50 以上? NO YES.mb#{$i { margin-bottom: $i + px; 20 $iに10をプラス戻る

237 $i に 10 を代入 $i は 50 以上? NO YES.mb#{$i { margin-bottom: $i + px; $iに10をプラス戻る $i が 10 のとき.mb10 { margin-bottom:10px; $i が 20 のとき.mb20 { margin-bottom:20px; $iが30のとき.mb30 { margin-bottom:30px; 発表時カットスライド $iが50のとき.mb50 { margin-bottom:50px;

238 $i に 10 を代入 $i は 50 以上? NO YES.mb#{$i { margin-bottom: $i + px; $iに10をプラス戻る $i が 10 のとき.mb10 { margin-bottom:10px; $i が 20 のとき.mb20 { margin-bottom:20px; $iが30のとき.mb30 { margin-bottom:30px; 発表時カットスライド $iが50のとき.mb50 { margin-bottom:50px;

239 Sass ならこう書ける 発表時カットスライド $i : $i <= 50 {.mb#{$i { margin-bottom: $i + px; $i : $i + 10;

240 CSS に変換するとこうなる 発表時カットスライド.mb10 { margin-bottom: 10px;.mb20 { margin-bottom: 20px;.mb30 { margin-bottom: 30px;.mb40 { margin-bottom: 40px;.mb50 { margin-bottom: 50px;

241 CSS に変換するとこうなる 発表時カットスライド.mb10 { margin-bottom: 10px;.mb20 { margin-bottom: 20px;.mb30 { margin-bottom: 30px;.mb40 { margin-bottom: 40px;.mb50 { 未公開スライド ここまで! margin-bottom: ありがとうございました 50px;!

242

243 いきなり全部やると つまずく

244 ネスト 変数 { { $ できるところから

245 Sass meister Sass をオンライン上で試せる Web サービス

246

247

248 THANK YOU sivacchi

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

JavaScript 演習 2 1

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

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

経営論集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

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

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

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

Sass_Ch1.indd

Sass_Ch1.indd CHAPTER 1 1 1 Sass Sass Sass Sass 2 P.35 CSS Sass Sass CSS CSS CSS CSS Sass Sass 導 入 しない 理 由 今 の CSS で 十 分 間 に 合 っている そこまで CSS に 不 便 さや 手 間 を 感 じ ていない 得 られるメリットより 学 習 コストの ほうが 高 い 気 がする プログラムが 書 けないとメリットが

More information

JavaScript演習

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

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

1222-A Transform Function Order (trsn

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

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 開発の基本編その 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

Web

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

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

CSSの基礎

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

More information

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

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

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

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

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

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

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Excel VBA の基本 1 VBA Visual Basic for Applications Office シリーズに搭載されているプログラミング言語 マクロを作成するために使われる 1 プログラミングとは 人間の意図した処理を行うようにコンピュータに指示を与えること セル A1 の内容をセル B1 にコピーしなさいセル A1 の背景色を赤色にしなさいあれをしなさいこれをしなさい 上から順番に実行

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

ホームページ制作 基礎編 (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

JavaScript演習

JavaScript演習 JavaScript 演習 2 山口研究室後期博士課程 3 年玉川奨 ( たまがわすすむ ) 居室 :24-604 / 23-620 mail : s_tamagawa@ae.keio.ac.jp 1 前回の補足説明 + 復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題 1 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行

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

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

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

Color Change

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

More information

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

More information

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

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

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

大メニューをマウスカーソルで 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

Java講座

Java講座 ~ 第 1 回 ~ 情報科学部コンピュータ科学科 2 年竹中優 プログラムを書く上で Hello world 基礎事項 演算子 構文 2 コメントアウト (//, /* */, /** */) をしよう! インデントをしよう! 変数などにはわかりやすい名前をつけよう! 要するに 他人が見て理解しやすいコードを書こうということです 3 1. Eclipse を起動 2. ファイル 新規 javaプロジェクト

More information

Si 知識情報処理

Si 知識情報処理 242311 Si, 285301 MS 第 12 回 竹平真則 takemasa@auecc.aichi-edu.ac.jp 2015/12/21 1 本日の内容 1. 先週のおさらい 2. PHP のスクリプトを実際に動かしてみる 3. RDB についての説明 2015/12/21 2 資料の URL http://peacenet.info/m2is 2015/12/21 3 注意事項 ( その

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

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

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

目次 概要... 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

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

プログラミング入門1

プログラミング入門1 プログラミング入門 1 第 5 回 繰り返し (while ループ ) 授業開始前に ログオン後 不要なファイルを削除し て待機してください Java 1 第 5 回 2 参考書について 参考書は自分にあったものをぜひ手元において自習してください 授業の WEB 教材は勉強の入り口へみなさんを案内するのが目的でつくられている これで十分という訳ではない 第 1 回に紹介した本以外にも良書がたくさんある

More information

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

IBM 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

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

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

More information

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

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

More information

第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

メニューのトランジション 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

画像ファイルを扱う これまでに学んだ条件分岐, 繰り返し, 配列, ファイル入出力を使って, 画像を扱うプログラムにチャレンジしてみよう

画像ファイルを扱う これまでに学んだ条件分岐, 繰り返し, 配列, ファイル入出力を使って, 画像を扱うプログラムにチャレンジしてみよう 第 14 回 応用 情報処理演習 ( テキスト : 第 10 章 ) 画像ファイルを扱う これまでに学んだ条件分岐, 繰り返し, 配列, ファイル入出力を使って, 画像を扱うプログラムにチャレンジしてみよう 特定色の画素の検出 ( テキスト 134 ページ ) 画像データが保存されているファイルを読み込んで, 特定色の画素の位置を検出するプログラムを作成しなさい 元画像生成画像 ( 結果の画像 )

More information

Taro-CSS.jtd

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

More information

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 株 式 会 社 アイ オー データ 機 器 CSS 解 説 書 目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 1.CSSとは? 3 1.CSSとは?

More information

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

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

More information

【お試し版】Web制作者のためのCSS設計の教科書(非売品)

【お試し版】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 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

年刊EDP 2003

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

Microsoft PowerPoint - prog03.ppt

Microsoft PowerPoint - prog03.ppt プログラミング言語 3 第 03 回 (2007 年 10 月 08 日 ) 1 今日の配布物 片面の用紙 1 枚 今日の課題が書かれています 本日の出欠を兼ねています 2/33 今日やること http://www.tnlab.ice.uec.ac.jp/~s-okubo/class/java06/ にアクセスすると 教材があります 2007 年 10 月 08 日分と書いてある部分が 本日の教材です

More information

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

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

More information

Microsoft Word - manual.doc

Microsoft Word - manual.doc ヒットメール Ver 1.0 お試し版 URL http://www.sysco-net.com/hitmail/ ライセンス キー販売サイト URL http://www.vector.co.jp/ 価格 1,000 円 ( パソコン1 台当たり ) 本ソフトを動かすには 次のソフトが必要です 1 Microsoft Windows 2000 or XP 2 Microsoft Outlook 2000

More information

ポインタ変数

ポインタ変数 プログラミング及び実習 5 馬青 1 文字処理 数値処理 : 整数 浮動小数点数 単一の文字は と ( シングルクォーテーション ) で囲んで表現される 文字のデータ型は char または int である int を用いたほうが ライブラリの関数の引数の型と一致する 以下は全部 int の使用に統一する 従って int ch; で文字変数を宣言しておくと ch= A ; のように ch に文字 A

More information

Microsoft PowerPoint - 08回目.pptx

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

More information

プログラミングA

プログラミングA プログラミング A 第 5 回 場合に応じた処理 繰り返し 2017 年 5 月 15 日 東邦大学金岡晃 前回の復習 (1) このプログラムを作成し実行してください 1 前回の復習 (2) このプログラムを作成し実行してください 2 前回の復習 (3) 3 前回の復習 演算子 代入演算子 インクリメント シフト演算子 型変換 4 場合に応じた処理 5 こういうプログラムを作りたい 5 教科のテスト

More information

sinfI2005_VBA.doc

sinfI2005_VBA.doc sinfi2005_vba.doc MS-ExcelVBA 基礎 (Visual Basic for Application). 主な仕様一覧 () データ型 主なもの 型 型名 型宣言文字 長さ 内容 整数型 Integer % 2 バイト -32,768 32,767 長整数型 Long & 4 バイト -2,47,483,648 2,47,483,647 単精度浮動小数点数 Single 型!

More information

Adobe® Corporate Template 2005

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

More information

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

extCountdown.pdf

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

More information

3 top#index 1 web router.ex web/router.ex 12 scope "/", NanoPlanner do 13 pipe_through browser get "/", TopController, index 16 end URL / to

3 top#index 1 web router.ex web/router.ex 12 scope /, NanoPlanner do 13 pipe_through browser get /, TopController, index 16 end URL / to 3 NanoPlanner SASS Bootstrap Font Awesome 3.1 RAVT 6 RAVT route action view template Phoenix top index top index top#index RAVT URL / top#index top#index top 23 3 top#index 1 web router.ex web/router.ex

More information

サイト構築ハンズオン0629

サイト構築ハンズオン0629 サイト構築ハンズオン 講師 : 大草 目次 1. シラサギの基本操作 2. フォルダーの作成 3. 記事ページの作成 4. パーツの作成 5. レイアウトの作成 6. 表示の調整 7. 課題 シラサギの基本操作開発環境 https://github.com/shirasagi/ss-vagrant Vagrant 環境のシラサギを起動してください シラサギの基本操作開発環境自治体サンプル http://localhost:3000/

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

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

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

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 講座を行う前に 自己紹介 僕と上回生について 1 年生同士で少しお話しよう! オリエンテーションの宿題 アルゴロジック http://home.jeita.or.jp/is/highschool/algo/index3.html どこまでできましたか? あまりできなかった人はこれから全部クリアしよう! 2016 年度 C 言語講座 第一回目 2016/6/11 fumi 今回の目標 プログラムを書いて実行するやり方を覚える

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

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

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

More information

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

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 2018/10/05 竹島研究室創成課題 第 2 回 C 言語演習 変数と演算 東京工科大学 加納徹 前回の復習 Hello, world! と表示するプログラム 1 #include 2 3 int main(void) { 4 printf("hello, world! n"); 5 return 0; 6 } 2 プログラム実行の流れ 1. 作業ディレクトリへの移動 $ cd

More information

PowerPoint Presentation

PowerPoint Presentation プログラミング基礎 第 2 週 (4,5,6 回 ) 2011-10-07 出村公成 この資料の再配布を禁止します 予定 プログラミング入門 (45 分 ) 変数 入出力 分岐 演習 (90 分 ) タッチタイプ練習 統合開発環境 Codeblocksの使い方 教科書例題の打ち込みと実行 プログラミング入門 C 言語の簡単な例を体験 変数 入出力 分岐 プログラムの例リスト 2.1 改 #include

More information

プログラミング実習I

プログラミング実習I プログラミング実習 I 05 関数 (1) 人間システム工学科井村誠孝 m.imura@kwansei.ac.jp 関数とは p.162 数学的には入力に対して出力が決まるもの C 言語では入出力が定まったひとまとまりの処理 入力や出力はあるときもないときもある main() も関数の一種 何かの仕事をこなしてくれる魔法のブラックボックス 例 : printf() 関数中で行われている処理の詳細を使う側は知らないが,

More information

プログラミングA

プログラミングA プログラミング A 第 5 回 場合に応じた処理 繰り返し 2019 年 5 月 13 日 東邦大学金岡晃 場合に応じた処理 1 こういうプログラムを作りたい 5 教科のテスト 100 点以上各科目の点数の合計が 100 点未満 おめでとう! これで 100 点越えのプレゼントを獲得! というメッセージを出力 残念!100 点越えのプレゼントまであと ** 点! というメッセージを出力 5 教科の点数の合計が

More information

ポインタ変数

ポインタ変数 プログラミング及び実習 6 馬青 1 例 : ファイルデータの整形 以下の ipt.dat ファイルを opt.dat ファイルに変換するプログラム ipt.dat の中の空白は空白かタブであり opt.dat の中の No と番号の間は 1 個の空白で 番号と点数の間は 1 個のタブである 2 データ ipt.dat no.1 79 no.2 73 no.3 89 no.4 67 no.5 99

More information

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

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

More information

ch31.dvi

ch31.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 information

<4D F736F F D20438CBE8CEA8D758DC F0939A82C282AB2E646F63>

<4D F736F F D20438CBE8CEA8D758DC F0939A82C282AB2E646F63> C 言語講座第 2 回 作成 : ハルト 前回の復習基本的に main () の中カッコの中にプログラムを書く また 変数 ( int, float ) はC 言語では main() の中カッコの先頭で宣言する 1 画面へ出力 printf() 2 キーボードから入力 scanf() printf / scanf で整数を表示 / 入力 %d 小数を表示 / 入力 %f 3 整数を扱う int 型を使う

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

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

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

スライド 1

スライド 1 ( おやまだあきひろ ) 小山田晃浩 ( 株 ) ピクセルグリッド フロントエンドエンジニア (HTML, CSS, JavaScript, SVG) twitter@yomotsu HTML5 と CSS3 と Dreameraer ネタ 連載してます http://goo.gl/8cpxb このセッションの流れ 1. 事例について 2. メディアクエリーを利用した振り分け 3. 振り分け後のスタイル適用

More information

JavaプログラミングⅠ

JavaプログラミングⅠ Java プログラミング Ⅰ 8 回目 for 文 今日の講義で学ぶ内容 for 文 変数のスコープ for 文の入れ子 繰り返し文 1 for 文 for 文最初に一度だけ初期化の式を処理します条件が true の場合 文を実行し 更新の式を処理して繰り返します条件が false の場合 for 文を終了します 条件は boolean 型で 関係演算子で表現される式などを記述します for( 初期化の式

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

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

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

@tikeda Sass (scss) Less,CSS

@tikeda Sass (scss) Less,CSS Sass @tikeda Sass (scss) Less,CSS Agenda About Cookpad s Coding Style Sass Engineer + Designer 45 Sass / Haml GitHub cookpad.com 1 user UX UI Designer Engineer Engineer Directer team Directer Engineer

More information

CodeGear Developer Camp

CodeGear Developer Camp T2 Delphi チュートリアルセッション Delphiはじめて奮戦記 で学ぶ Delphiチュートリアル 株式会社フルネスコーチング事業部マネージャー田原孝 1 アジェンダ 株式会社フルネスについて Delphiプログラミングの基本 演習 : 計算機のテンキーを作る 演習 : 計算機の四則演算ボタンを作る 練習問題 まとめ 2 株式会社フルネスについて 事業内容 ハンズオン教育サービス コーチングサービス

More information

* ライブラリ関数 islower(),toupper() を使ったプログラム 1 /* 2 Program : trupper.c 3 Student-ID : K 4 Author : TOUME, Kouta 5 Comments : Used Library function i

* ライブラリ関数 islower(),toupper() を使ったプログラム 1 /* 2 Program : trupper.c 3 Student-ID : K 4 Author : TOUME, Kouta 5 Comments : Used Library function i 1. ライブラリ関数 islower(), toupper() を使い 下記の trlowup プログラムを書き換えて 新規に trupper プログラムを作成せよ * サンプルプログラム 1 /* 2 Program : trlowup.c 3 Comments : translate lower case characters into upper case ones. 4 */ 5 6 #include

More information

文 書 構 造 とスタイル

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

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

C#の基本

C#の基本 C# の基本 ~ 開発環境の使い方 ~ C# とは プログラミング言語のひとつであり C C++ Java 等に並ぶ代表的な言語の一つである 容易に GUI( グラフィックやボタンとの連携ができる ) プログラミングが可能である メモリ管理等の煩雑な操作が必要なく 比較的初心者向きの言語である C# の利点 C C++ に比べて メモリ管理が必要ない GUIが作りやすい Javaに比べて コードの制限が少ない

More information

数はファイル内のどの関数からでも参照できるので便利ではありますが 変数の衝突が起こったり ファイル内のどこで値が書き換えられたかわかりづらくなったりなどの欠点があります 複数の関数で変数を共有する時は出来るだけ引数を使うようにし グローバル変数は プログラムの全体の状態を表すものなど最低限のものに留

数はファイル内のどの関数からでも参照できるので便利ではありますが 変数の衝突が起こったり ファイル内のどこで値が書き換えられたかわかりづらくなったりなどの欠点があります 複数の関数で変数を共有する時は出来るだけ引数を使うようにし グローバル変数は プログラムの全体の状態を表すものなど最低限のものに留 第 10 章分割コンパイル 1 ソースを分割する今まで出てきたソースは全て一つのソースファイルにソースを記述してきました しかし ソースが長くなっていくと全てを一つのファイルに書くと読みづらくなります そこで ソースを複数のファイルに分割してコンパイルを行う分割コンパイルをします 今章は章名にもなっている 分割コンパイルの方法についてやります 分割コンパイルする時は大抵 関連性のある機能ごとにファイルにまとめます

More information

Microsoft Word - 操作マニュアル(PowerPoint2013)

Microsoft Word - 操作マニュアル(PowerPoint2013) PowerPoint2013 基本操作 P.1 PowerPoint2013 基本操作 1.PowerPoint2013 の起動... 2 2. スライドのサンプル... 3 3. スライドの作成... 4 4. 文字の入力とテキストボックス... 5 5. 図の作成と書式設定... 5 6. グラフの作成... 6 7. 背景デザインと配色... 7 8. アニメーション効果... 8 9. スライドショーの実行...

More information

Javaプログラムの実行手順

Javaプログラムの実行手順 戻り値のあるメソッド メソッドには 処理に使用する値を引数として渡すことができました 呼び出し 側からメソッドに値を渡すだけでなく 逆にメソッドで処理を行った結果の値を 呼び出し側で受け取ることもできます メソッドから戻してもらう値のことを もどりち戻り値といいます ( 図 5-4) 図 5-4. 戻り値を返すメソッドのイメージ 戻り値を受け取ることによって ある計算を行った結果や 処理に成功したか失

More information