2009年05月28日

半角英数による横幅崩れ

今さら感はありますが、半角英数を連続で入力した際、自動的に改行できない為、デザインが崩れてしまいます。
もしIEだけの対応であれば、
word-break: break-all

を使って改行することが出来ますが、他のブラウザでは出来ません。

ただいろいろなWebサイトを見ていると、大半のサイトが規定幅を超える半角英数の文字の羅列(URL)がある場合、表示上はみ出る箇所を表示しないようにしています。
対応方法は、簡単で、
.hoge{
  width: 300px;
  overflow: hidden;
}

これだけ。
今後これを標準として考えよう。

どうしても他のブラウザで改行したい場合は、jQueryを使えば、IE以外のブラウザでも対応が可能になります。
http://webtech-walker.com/archive/2008/11/02151611.html

これ使ったけどうまくいかなったけど、たぶん俺のやり方が悪いのかな・・・。
もう少し試してみよ
タグ:CSS Overflow hidden
posted by memo4me at 14:11 | Comment(0) | TrackBack(1) | css | このブログの読者になる | 更新情報をチェックする

2009年05月21日

iPhoneおよびiPod Touch用apple-touch-icon.png

iPhoneやiPod Touchのデスクトップに表示されるアイコンを作成する機会があったので調べてみました。
「apple-touch-icon.png」というもので、簡単に作成が可能です。

1. 57x57pxの画像を用意
2. 表示したいHTMLのheadタグ内に下記を記載
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

3. サーバのルートにUP

正方形で作成しても表示側で角丸になるので、自分で角丸にする必要はない。
まあfaviconと変わらないな。
posted by memo4me at 19:43 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。