まえがき 以前制作したサイトをたまたまiPadで閲覧したら、一部のページが画面内に入りきらず右側が切れてしまっていました。 iPhoneでみるとピッタリ画面に収まっていたのですがiPadやiPhoneめんどくさいですね。 昔のIE6を彷彿とさせる感じでiPadやiPhone対応が面倒くさいです笑 しかし「viewport」をしっかり設定すれば簡単に直すことができましたので覚え書きとしてエントリーしておきます。 ただPC用のサイトを単純にiPadのディスプレイにピッタリ収めて表示してあげれば良いだけです。 iPadやiPhoneで右側が切れたり、余白が空いたりする現象を回避する「viewport」の記述 「viewport」の設定で表示するデバイスのディスプレイサイズに合わせてサイトをリサイズして表示することができます。 <meta name="viewport" content="widt

レスポンシヴデザインを採用したサイトに多く見られるのですが、iPadやiPhone、または各社のスマートフォン等のモバイルデバイスでの観覧時に、ウィンドウの右側、あるいはコンテンツの右側に、意図していない余分な空白ができてしまうことがあります。 どちらかというとこれはサイト製作者の犯したミスではなく、ブラウザ（あるいはOS）側のエラーやバグであることがほとんどのようです。 解決するにはちょっとしたCSSのテクニックが必要になります。 iPhone、iPad等でサイト観覧時に、右側に余白ができる場合 このケースの場合、たいていは［body要素］に「min-width」を効かせれば解決します。 一例を挙げると以下のようになります。 body { width:100%; height:100%; background: #fff; color:#1a1a1a; min-width:960px;

以前に 本文用のfont-familyを選定する という記事を書きましたが、ここで指定していたfont-familyで問題が起きました。（現在は修正済み） Android版Google Chrome環境において、英字フォントが非常に見づらいのです。 一見何も問題無いように見えますが、「Windows」という文字の「W」を見てくださいよ。キュッってなってるでしょ？気に入らない。別にココだけ切り取るとあんまり違和感はないのですが、所々に英字がある記事だと可読性が低くなります。「Andoridは綺麗にフォントレンダリングしてくれるし大丈夫っしょ！」と高をくくっていました。まぁチョー綺麗なんでけどね。 具体的に何が問題なのか “半角フォントが全角の半分の幅” ということです。これは普通のことなのですが、見やすさを考えた場合には『全角2文字に対して半角3文字』くらいがベストだと思います。私がプログラ

2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ &nbsp;を&emsp;に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:

2014年7月2日に作成されたページです。 情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。 全件リストはこちら。 どもです。 最近話題がないのでコーディングの話をば。 コーディングをしているとき、どうしても悩まされる「謎の隙間」。 これをできるだけ消していこうというコンセプトです。 で、デフォルトで設定されている隙間を除去します。 これができているのに隙間ができる場合、というのも稀ですが存在します。 そのときにチェックして頂きたいのは、headの中に記述ミスがないかという点です。 特に全角空白が紛れ込んでいる場合、見ただけではわからないのでご注意を。 ②ページの下に隙間ができたとき ページの下に隙間ができたときのパターンは２通りあります。 ひとつは、コンテンツの高さがブラウザの高さに届かない場合。 有名な対処法としては、CSSでフッターを下に固定する方法が

最近、レスポンシブデザインのサイトに様々なjQueryプラグインを設置する案件が増えています。 そんなタスクの中で使った、あるいは見てきたもののうち、今日はカルーセルパネルのオススメ5選を紹介します。 ※以下のサイトでは、予告なく提供が終了している場合があります。ご了承ください。

スマホの広告って「どうせ下の方に小さく出てきてピコピコやってるだけっしょ」くらいに思ってるみなさん、こんにちは。電通CDCで、クリエーティブ・テクノロジストをやっている宮地成太郎と申します。 スマホの広告で「下の方に小さく出てきてピコピコやる」以外にできることは無いのか…そんな悔しい思いを抱いたことがある方も多いはず。 しかし！！ 本日2015年10月23日から、そんなスマホ広告を取り巻く環境は激変することになるでしょう！ なぜなら今日、電通とアクセルマークの2社が、既存のスマホ広告の概念をぶっ壊す激ヤバなプロダクト「BRAND SCREEN」を開発してしまったからです。 BRAND SCREENとは、有名ウェブメディア40社以上から「記事ページと融合させた広告コンテンツを載せていいよ」という許可をいただき、ウェブメディアが運営する記事ページの上にインタラクティブな広告コンテンツを配信する