TextScalableなコンポーネントのスタイル

by Kazuyuki Motoyama

Slide 1

Slide 1 text

TextScalableなコンポーネントのスタイル Kazuyuki Motoyama

Slide 2

Slide 2 text

プロフィール

Slide 3

Slide 3 text

Kazuyuki Motoyama Web & UI Designer kudakurage.com @kudakurage

Slide 4

Slide 4 text

CSSのはなし

Slide 5

Slide 5 text

ボタンや単純なパーツは CSSのみで表現する事も増えてきました。

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

CSSで表現するボタンの利点

Slide 9

Slide 9 text

毎度画像を作らなくてもテキストの変更などで使いまわせる。大きさや色の変更なども簡単にできる。

Slide 10

Slide 10 text

TextScalableなコンポーネントのスタイルとは？

Slide 11

Slide 11 text

どんなテキストが入った場合にも最適な見た目を提供するCSSスタイル。

Slide 12

Slide 12 text

利点は？

Slide 13

Slide 13 text

ざっくり使いまわせるコンポーネントとして便利

Slide 14

Slide 14 text

多言語も安心（10ヶ国語とか）

Slide 15

Slide 15 text

通報 नҊೞӝ Denunciar Verstoß melden Report Violation Probleem melden Segnala violazione Отправить жалобу Denunciar Infração Signaler une infraction

Slide 16

Slide 16 text

右左寄せの TextScalableなボタン

Slide 17

Slide 17 text

右左寄せのTextScalableなボタン右寄せの場合はこんな感じボタン右寄せの場合は… もっと長いテキストのボタン

Slide 18

Slide 18 text

ボタン .button { display:block; float:right; }

Slide 19

Slide 19 text

中央寄せの TextScalableなボタン

Slide 20

Slide 20 text

中央寄せのTextScalableなボタン中央寄せの場合はこんな感じボタンもっと長いテキストのボタン

Slide 21

Slide 21 text

ボタン

div { text-align:center; } .button { display:inline-block; }

Slide 22

Slide 22 text

もっと中央寄せのTextScalableなボタンボタン

Slide 23

Slide 23 text

ボタン

div { display:box; box-align:center; box-pack:center; }

Slide 24

Slide 24 text

改行を考慮したTextScalableなコンポーネントのスタイル

Slide 25

Slide 25 text

改行を考慮したTextScalableなボタンもっと長いテキストのボタン改行するくらいとっても長いテキストの入ったボタン改行するくらいとっても長いテキストの入ったボタン

Slide 26

Slide 26 text

改行を考慮したTextScalableなボタンもっと長いテキストのボタン改行するくらいとっても長いテキストの入ったボタン改行するくらいとっても長いテキストの入ったボタン一行でおさまる場合ボタンの中心にテキストが入る。

Slide 27

Slide 27 text

改行を考慮したTextScalableなボタンもっと長いテキストのボタン改行するくらいとっても長いテキストの入ったボタン改行するくらいとっても長いテキストの入ったボタン二行になる場合は、大きさの変化を最小限にして、テキストを中心に配置する。

Slide 28

Slide 28 text

改行を考慮したTextScalableなボタンもっと長いテキストのボタン改行するくらいとっても長いテキストの入ったボタン改行するくらいとっても長いテキストの入ったボタンこれがベストだが、改行位置の調整など手間が必要になる。

Slide 29

Slide 29 text

改行を考慮したTextScalableなボタンもっと長いテキストのボタン改行するくらいとっても長いテキストの入ったボタン改行するくらいとっても長いテキストの入ったボタンこれらを実現する CSSスタイル

Slide 30

Slide 30 text

line-heightで中央寄せ

Slide 31

Slide 31 text

もっと長いテキストのボタン改行するくらいとっても長いテキストの入ったボタン .button { height:60px; line-height:60px; }

Slide 32

Slide 32 text

もっと長いテキストのボタン改行するくらいとっても長いテキストの入ったボタン line-heightで縦真ん中に配置しようとすると、改行時に行間が広くなってしまう。

Slide 33

Slide 33 text

Flexible Boxで中央寄せ

Slide 34

Slide 34 text

ボタン .button { display:box; box-align:center; box-pack:center; 　line-height:1.2; }

Slide 35

Slide 35 text

もっと長いテキストのボタンボタンの大きさの変化を最小限にしつつ、中心にテキストを配置している！改行するくらいとっても長いテキストの入ったボタン

Slide 36

Slide 36 text

もっと長いテキストのボタンボタンにさらに長いテキストが入った場合は、縦に大きくなる。改行するくらいとっても長いテキストの入ったボタンにもっとテキストを入れると複数行になって下に伸びていく

Slide 37

Slide 37 text

改行のはなし

Slide 38

Slide 38 text

中央揃えのテキスト text-align:center;

Slide 39

Slide 39 text

中央揃えのテキストが長くなると… text-align:center;

Slide 40

Slide 40 text

中央揃えのテキストが長くなると… 自動改行させると文章として素敵ではない！

Slide 41

Slide 41 text

中央揃えのテキストが長くなると… こうあってほしい！！

Slide 42

Slide 42 text

中央揃えのテキストが長くなると… Flexible Boxでできる！

Slide 43

Slide 43 text

中央揃えのテキスト

Slide 44

Slide 44 text

中央揃中央揃えのテキストが長くなっても…

Slide 45

Slide 45 text

中央揃中央揃えのテキストが長くなっても、綺麗に真ん中に配置される。

Slide 46

Slide 46 text

ボタンのラベルやメッセージウィンドウなどで使うと良い。

Slide 47

Slide 47 text

改行のはなし２

Slide 48

Slide 48 text

word-wrap:break-word を使うとイイよ！

Slide 49

Slide 49 text

その行の中に改行できるポイントがない場合に、単語の途中で改行する。

Slide 50

Slide 50 text

くわしくはブログに書いたので読んでください。 http://d.hatena.ne.jp/kudakurage/20120831/1346424473 くらげだらけ（くだくらげのBLOG）