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

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

プロフィール

Kazuyuki Motoyama Web & UI Designer kudakurage.com @kudakurage

CSSのはなし

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

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

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

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

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

利点は？

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

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

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

右左寄せの TextScalableなボタン

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

<a class=zbuttonz>ボタン</a> .button { display:block; float:right; }

中央寄せの TextScalableなボタン

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

<div><a class=zbuttonz>ボタン</a></div> div { text-align:center; } .button { display:inline-block; }

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

<div><a class=zbuttonz>ボタン</a></div> div { display:box; box-align:center; box-pack:center; }

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

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

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

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

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

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

line-heightで中央寄せ

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

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

Flexible Boxで中央寄せ

<a class=zbuttonz>ボタン</a> .button { display:box; box-align:center; box-pack:center; 　line-height:1.2; }

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

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

改行のはなし

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

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

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

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

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

中央揃えのテキスト

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

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

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

改行のはなし２

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

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

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

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

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

More Decks by Kazuyuki Motoyama

Other Decks in Design

Featured

Transcript