こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
レスポンシブデザインにしたはいいけど、やっぱりスマホからもPCサイトを見れるようにしたい･･･という人のための、切り替えボタンです。 今回は、表示状態（スマホかPCか）をcookieに保存して、ページ移動したときに勝手にスマホサイトに戻らないようにします。 参考というかほぼ丸々使わせていただいたサイト様です Googleが用意したjQueryを読み込む <head></head>の中に以下を追加。 HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> jquery.cookie.jsを読み込む クッキー操作は、jquery.cookie.jsを使います。 carhartl/jquery-cookie ・ GitHub 右の「Download ZIP」からDL。
レスポンシブ ウェブ デザインの基本 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 インターネットでスマートフォンを使用するユーザーが増えるにつれ、ウェブデザイナーにとって、さまざまな画面サイズに対応したコンテンツをレイアウトすることがますます重要になっています。レスポンシブ ウェブデザインは、Ethan Marcotte が A List Apart で最初に定義したデザイン戦略で、使用しているデバイスに合わせてサイトのレイアウトを変更することで、ユーザーのニーズとデバイスの機能に対応します。たとえば、レスポンシブ サイトでは、スマートフォンではコンテンツを 1 列のビューで表示し、タブレットでは 2 列で表示し、パソコンでは 3 列または 4 列で表示できます。 画面が広くなると、ウィジェットの形状がそれに応じて変化します。 インターネット対応デバイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
