input type="file"をCSS3で装飾 改善版 IE7〜対応。 - with the flow
すごく昔に書いた、input type="file"をCSSとJavaScriptで綺麗に装飾するものの改善版を作りました。 Chrome23.0.1, Firefox17, Opera12, IE9,8,7で正常に表示されるのを確認。 ■内容 ・「参照」ボタンを押しても、textboxを押しても参照ダイアログが起動。 ・ファイルを参照するとtextbox内にファイル名が入る。ファイル名が長い場合は「...」と省略される。 ・「アップロード」ボタンがあった場合で作ってみた。押しても何も起こりませんが。 ・画面内に複数入れたい場合は、"uploader"を複数入れることで対応可能。 ・JavaScriptが無効な状態にも対応。無効な環境では普通のブラウザデフォルトのinput type="file"が出現し、 アップロードボタンの左に並びます。 IEは画像作ってないので必要であれば足してく
レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い
デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。 まずはパーセント指定の基本から まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
