Vol.14 レスポンシブWebデザイン！ヘ…
by Y-Jet
いよいよサイトも完成に近づいた。それでは上記画像フッターを作成していく。これは特に問題ないだろう。ハイライト部分が「index.h…
Vol.13 レスポンシブWebデザイン！可…
by Y-Jet
前回から引き続き、2段組みのボックスを、「メディアクエリ」を使い、3段組み→6段組みへと可変していこう。まずはスマートフォン向けスタイルに記…
Vol.12 レスポンシブWebデザイン！可…
by Y-Jet
前回の続きで、複数のボックスの高さの最大値を揃える方法を説明していく。複数のボックスを段組みにして配置する際に、問題になってくるのがボックス…
Vol.11 レスポンシブWebデザイン！可…
by Y-Jet
グローバルナビゲーションを設置し、いよいよメインのコンテンツエリアに突入する！考え方はグローバルナビゲーションのときと同じで、ボックスを%で…
Vol.10 レスポンシブWebデザインでつ…
by Y-Jet
ヘッダーに続き、グローバルナビゲーションを完成させていく。画像を使わないテキストのナビなので、比較的簡単な作りになっている。まずは、「sty…
Vol.9 レスポンシブWebデザインにおい…
by Y-Jet
メディアクエリがどんなものなのか理解していただけただろうか。今回はヘッダー部分のサイトのロゴ画像を配置していく。完成形はこちら【ヘッダー完成…
Vol.8 メディアクエリを体感する…
by Y-Jet
レスポンシブWebデザインでは、「メディアクエリ」を使って画面幅に応じてCSSを切り替える。メディアクエリとは、「画像解像度」「ウィンドウの…
Vol.7 フルードイメージを体感する…
by Y-Jet
前回では、レスポンシブWebデザインの基本構造を学んだ。今回は「フルードイメージ」を実際に体感する。
●フルードイメージ
ブラウザ…
Vol.6 レスポンシブWebデザインの基本…
by Y-Jet
今回は基礎となるコードの解説をしたい。前もって言っておくが、このTRIAINA式「レスポンシブWebデザイン」は「HTML5とCS…
Vol.5 レスポンシブWebデザインとは…
by Y-Jet
前回の「実録！レスポンシブWebデザイン シンプル＆ハイクオリティーのサイトで学ぶ」から作成していくサイトをご覧いただいただろうか？このサイ…
