iPhone6の時代のviewport設定について - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 従来、スマートフォンの横幅といえば 320px(retina対応で640px) というのが定説でした。 が、iPhone6の普及でそうとも言えなくなってきたのが今日このごろです。 iPhone5の横幅は320px(retina対応で640px) iPhone6の横幅は375px(retina対応で750px) ちなみにNexus5の横幅は360px(retina対応で720px) さてこんな環境で、viewportはどう指定するのがベストなのでしょうか。 前提知識 viewportのwidthという値に、device-widthと指定す
[CSS] CSSで長さなどを計算できちゃうcalc - YoheiM .NET
オペランドの優先度は、数学と同じく、乗算と除算が、加算と減算よりも優先されます。以下のように利用する事が出来ます。 width: calc(100px + 200px * 2); /* 500px */ また、オペランドの優先度を使うために、（）を利用する事も出来ます。 width: calc((100px + 200px) * 2); /* 600px */ そしてcalc()のすばらしいところは、同じ長さを表す違う単位を使う事が出来るという点です。例えば以下のように使う事が出来ます。 width: calc(100% / 3 - 2 * 1em - 2 * 1px); ただし、長さの単位と時間の単位といった違う意味を示す単位は、混ぜ合わせて使うことはできません。以下の場合、エラーとなります。 /*エラーになる*/ font-size: calc(5px - 5px + 10s); あと
![[CSS] CSSで長さなどを計算できちゃうcalc - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ef5ab84db2509acccb72f46e3f993c8ea239c0f/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F310.jpg)
2014年大手サイト制作幅 - ブログ
Win95の時代800*600のディスプレーの幅から始まり、2000年代の1280幅から今は1680幅を越えるものがパソコンでは主流になりました。その一方でタブレットという小型ディスプレーもある現在、いったいどれくらいの幅で制作するとよいのでしょうか。 ということで、各業界の大手サイトを覗いてみることにしました。 まず自動車業界から2社。 日産自動車 http://www.nissan.co.jp/ min-widthを1000px、max-widthを1280pxに設定しています。メディアクエリにて @media screen and (min-width: 1281px) をautoにすることによって、若干の幅ではありますが可変させているようです。 トヨタ自動車 http://toyota.jp/ スライダーは1280pxまで見せられるようにしていますが、コンテンツは980pxに設定し
最適なWEBサイトの横幅は？ – WebCreater's Memo（ウェブクリエイターズ メモ）
よくこのような質問を頂きます。 ユーザにとって使いやすいWEBサイトの横幅はどのくらいだと思いますか？ WEBサイト制作作業を行う人の使っている画面は、閲覧だけを行う一般のユーザが使っているモニターよりも大きめなことが多いのです。以前このブログでも書いたように、画面が複数ありより大きい方が作業効率が高いためですね（圧倒的に作業効率をアップさせる方法）。 そのため、実際に使っているユーザが、どの程度の画面を使っていて、制作するWEBサイトがどの程度の横幅であると、ユーザに取ってみやすいものになるのか、、その辺りの感覚を把握していない制作者が多いのです。 今回はユーザにとって使いやすいWEBサイトのサイズについて、その決定方法や最近の主流を整理致します。 使っているモニターサイズにもいろいろあります。 最近徐々に一般のユーザのPCのモニターも大きくなりつつあるかと思いますが、実際には下記の様な
Firefox4でタブの幅が変わってくれない
＞「browser.tabs.tabClipWidth」の数値を140から40に変更したのですが、タブの幅が変わってくれません。 「browser.tabs.tabClipWidth」は、タブの幅が、"これ以下"、になったら、バックグラウンドタブの×ボタンを非表示にする設定だったと思いますよ。 タブの幅を調整する設定ではありません。 「Firefox4 で、タブの幅を40pxに固定したい」ということなら、ユーザースタイルシート(userChrome.css)で、以下を記述すればタブ幅が40pxで固定可能ですが。 /* Firefox 4 タブの幅を固定して調整する */ .tabbrowser-tab[fadein]:not([pinned]) { min-width: 40px !important; max-width: 40px !important; } 40pxの数値は、自分で好
[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法
jQueryでimg要素のwidthやheightを取得するコードがIEやFirefoxではうまく動きますが、Google Chromeではうまく動かない現象に遭遇しました。その場合の回避方法です。 下記のコードはidにtargetが指定された要素のwidthとheightを取得するコードです。IEやFirefoxでは想定通りに動きますが、Google Chromeでは想定通りに動きません。 [javascript] $(function(){ var w = $(‘#target’).css(‘width’); alert(w); }); [/javascript] jQueryの$()はDOMの読み込みが完了後に実行されるはずですが、画像の読み込みについては別なようなのです。ですが、jQueryのbindメソッドを使うことで画像の読み込みを待つことができます。 [javascript]
![[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトの横幅まとめ - ULTRAZONE
ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久