TROUBLE 30 セレクトボックス内の文字が切れてしまう | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

日々のデザイン現場で発生する問題・難題を解決します!

WEB制作トラブル速戦即決術! 第6回


[TROUBLE 30]
Webディレクショントラブル
セレクトボックス内の
文字が切れてしまう

文=高津戸 壮(zudolab)

A. 文字数の増減を考慮して余白をもたせる

セレクトボックス内の文字数が多く、切れてしまうことがある。これは、運用してみて初めて気づくことが多い。文字をすべて表示するブラウザもあるが、入りきらない部分を隠してしまうブラウザもある。文字量が多くなってもいいよう、横幅に余白をもたせよう。

製品検索画面のセレクトボックス。うまく収まっており、何も問題ないように見えるが、実際にテキストが入るとそのようにならないことがある
製品検索画面のセレクトボックス。うまく収まっており、何も問題ないように見えるが、実際にテキストが入るとそのようにならないことがある

最初の想定とは違い、製品カテゴリのテキストに長い文字が入ることになった。入りきらない部分が隠れてしまい、使用に支障を来してしまう。ボックス周りはテキストが増減する可能性が高いため、余白に余裕をもたせてデザインを行おう
最初の想定とは違い、製品カテゴリのテキストに長い文字が入ることになった。入りきらない部分が隠れてしまい、使用に支障を来してしまう。ボックス周りはテキストが増減する可能性が高いため、余白に余裕をもたせてデザインを行おう

[INDEX]
>>> [TROUBLE 28] floatさせた定義リストのmarginが思いどおりにならない
>>> [TROUBLE 29] TextFieldにTextFormatがきちんと設定されない
>>> [TROUBLE 30] セレクトボックス内の文字が切れてしまう
>>> [TROUBLE 31] 背景が変わると切り抜き画像のジャギーが目立ってしまう
>>> [TROUBLE 32] コーディング期間なのに制作内容の変更を依頼された
>>> [TROUBLE 33] IE6のみでボックスサイズが広がってしまう


『web creators』の情報はこちら!>>>

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在