レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！ | 株式会社Bark to Imagine

2014/01/07 313 users 横幅 キリン 住友商事 概念 viewport

今話題の「レスポンシブWebデザイン」。 有名なところでは、 「TOYOTA新卒採用ページ」、「キリン」、「住友商事」 などがあります。 ブラウザの横幅に応じて適切なデザインを表示する技術ですが、実際はどのような目的で使われているのでしょう。 今回はそんな「レスポンシブWebデザイン」の概念から記述方法までといった、次世代Webサイトの入門的な内容をわかりやすく解説していきます。 レスポンシブWe... 続きを読む

ASCII.jp：日本と世界の「レスポンシブWebデザイン」

2013/08/07 72 users レスポンシブWebデザイン ASCII.jp 世界 デバイス

マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。 レスポンシブWebデザインとよく似た手法である「アダプティブデザイン」との違いをみながら、レスポンシブWebデザインの本当の意味を考えてみましょう。 「デバイスに依存しない」レスポンシブWe... 続きを読む

レスポンシブ・ウェブデザインでの CSS コードの書き方

2012/10/01 717 users レスポンシブ・ウェブデザイン CSS 配置 書き方 コード

いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用したWebサイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSSのコードの配置 広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media規則で1ファイル内にメディア特性単位に書く方法 @media規則... 続きを読む

メディアクエリーと相性がよさそうな CSS 小技いくつか | ヨモツネット

2012/05/02 96 users ヨモツネット CSS 相性 上下 動作

table 系の表示にあまり注目されることがないように感じますので、これまで仕事でメディアクエリーを利用してくる中で考えた小技をこの記事に共有します。ここに載せているのは一応実際につかって検証済みですが、もし変な動作があったら教えてください。 上下を入れ替える display プロパティーの table-row-group や table-header-group などの値を応用すれば、上下の入れ... 続きを読む