レスポンシブデザインのスマホ版とデスクトップ版の切り替え | WEB ARRANGER Webアレンジャー
「レスポンシブデザインで作られたサイトをスマホ版とデスクトップ版を切替可能にさせる」、という案件がきました。 確かに自分でも強制的にスマホ版を見せられて困ることがあります。 jsによるユーザーエージェントで切り替えているなら、フッター辺りにボタンがあるはずですが、レスポンシブサイトではありません。 そこで検索した結果、「スマートフォンサイトのためのHTML5+CSS3：毎日コミュニケーションズ」に載っているらしく、 あおい書店横浜店にて購入。（ヨ○バシにはなかった、本当に品揃えが悪くなった） まさに、欲していた内容で、「viewportを動的に切り替えるのかー！」とサンプルのコードを移植し、実現できました。 喜んで帰る電車の中で、スマホにて確認してた際、ページ移動するとスマホ版に戻る・・・、リロードするとスマホ版に戻る・・・ とこれでは使えない内容。案件はECサイトなので。 翌日さらに検索
レスポンシブWebデザインから実機検証までサクッと
レスポンシブWebデザインから実機検証までサクッと：無料でCreative Cloudを使い倒せ（1）（1/2 ページ） はじめに 最近、ブラウザの幅に合わせてレイアウトを変える「レスポンシブWebデザイン」（参照記事：＠IT：5分で分かるレスポンシブWebデザイン」を採用するWebサイトが増えてきました。レスポンシブの考え方は古くからあり、JavaScriptやFlashを利用してコンテンツをコントロールしていました。 さて、HTML4でレスポンシブなサイトを作ろうとすると、JavaScriptに頼るしかありませんでした。今でももちろん、さまざまなライブラリが公開されています。 HTML5になって、レスポンシブなサイトはより身近になりました。JavaScriptを使わなくても、CSS3のMediaQueryで解像度に合わせてCSSを切り替えるのが簡単にできるようになったのです。 しかし、
固定した位置に配置する « CSS OBOEGAKI
最近Twitterの「フォローミーボタン」や「TOPへ戻るボタン」などで、 スクロールしても位置が固定したまま、 のようなデザインを見かける機会が増えてきたかと思います。 これを実現するにはpositionプロパティを使用します。 固定配置。 固定配置その2。 .kotei { position:fixed; right:0px; top:120px; font-size:30px; border:solid 1px #666; background-color:#EEE; } .kotei2 { position:fixed; left:0px; bottom:20px; font-size:13px; border:solid 1px #666; color:#FFF; background-color:#333; padding:5px; } position:fixed; と指定す
【実例あり】position:「absolute」「relative」でレスポンシブECサイトのレイアウトを！ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
実際の上下左右の距離は「top」「bottom」「left」「right」プロパティを併用します。これらはpositionプロパティの値がstatic以外の時に有効となります。 またこの4つ全てを使う必要はなく、「top」だけ、「top」と「right」だけと必要なもののみ使い、配置された位置からの距離を指定します。 言葉だけではイメージがつきにくいと思いますので、以下より実際配置した時の画像と併せてご説明します。 ２．“relative”と“absolute”の動きの違い ｉ）relative 【その１】 100px × 100pxの灰色のボックスの下に、relative指定した を配置しました。 今回は上から0pxの距離を指定しています。 <div class="box">box</div> <div class="relative">relative</div> .box { wid
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
