Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TextScalableなコンポーネントのスタイル
Search
Kazuyuki Motoyama
December 07, 2012
Design
1
1.2k
TextScalableなコンポーネントのスタイル
CSSでTextScalableな(テキスト長の変化に柔軟な)コンポーネントをつくるノウハウについての話です。
あと、改行まわりに関することも少し触れます。
Kazuyuki Motoyama
December 07, 2012
Tweet
Share
More Decks by Kazuyuki Motoyama
See All by Kazuyuki Motoyama
京都のスーパー事情2013
kudakurage
2
5.1k
京都のおいしい中華5選
kudakurage
3
4k
UXDのためのストーリーテリング
kudakurage
0
310
Ligature Symbols 〜ほんとにべんりなフォントのはなし〜
kudakurage
3
16k
more feedback for the creation
kudakurage
1
1.1k
酵母と暮らそう
kudakurage
1
1.2k
Other Decks in Design
See All in Design
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
350
デザイナー向けフライル説明資料
toshiblues
0
160
アクセシビリティに取り組むメリット
magi1125
2
260
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
490
役立つシステムを作るためのAI活用
kanzaki
0
100
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
170
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
340
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
310
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Six Lessons from altMBA
skipperchong
28
4k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Building Adaptive Systems
keathley
43
2.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Into the Great Unknown - MozCon
thekraken
40
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Transcript
TextScalableな コンポーネントのスタイル Kazuyuki Motoyama
プロフィール
Kazuyuki Motoyama Web & UI Designer kudakurage.com @kudakurage
CSSのはなし
ボタンや単純なパーツは CSSのみで表現する事も 増えてきました。
None
None
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でできる!
中央揃えのテキスト
中央揃中央揃えのテキス トが長くなっても…
中央揃中央揃えのテキス トが長くなっても、綺麗 に真ん中に配置される。
ボタンのラベルや メッセージウィンドウ などで使うと良い。
改行のはなし2
word-wrap:break-word を使うとイイよ!
その行の中に改行できる ポイントがない場合に、 単語の途中で改行する。
くわしくはブログに書い たので読んでください。 http://d.hatena.ne.jp/kudakurage/20120831/1346424473 くらげだらけ(くだくらげのBLOG)