CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin
スマートフォンサイトで電話番号やメールの自動リンクを解除したい – helog
iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。 リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。 しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。 長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。 例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。 自動リンクを無効にする このような問題を回避するために、自動リンクを無効にする方法があります。 電話番
こーすりゃいいかもviewport
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / スマートフォン用のviewport指定、このいずれかかと思うんだけどどうなんだろう。 リキッドパターン iPhoneの場合、縦の時：幅320px、横の時：幅480pxにviewportが調節される。それ以外の幅のデバイスでは、そのデバイスの幅に合わさってリキッドになる。 user-scalable=noなので、ユーザーによるピンチイン、ピンチアウトのズームが不可能。この時点でかなり嫌だが、これは、iOSが、縦→横にorientationさせた時、ズーム率を自動で調節するという機能を殺すため。（iPhoneであれば縦→横でズーム率が1.5倍になる） この自動ズーム率調節機能がイキでいいのであれば
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.ethosclub.com/info/size.html
