スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。
今回はゼロからはじめるレスポンシブサイトを作るための勉強として、CSS3のメディアクエリを使用したデモソースとチュートリアルをつくりました。
まずはXHTMLで作成しますのでHTML5の新要素が不安な方もわかりやすいと思います。

前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。
最終回の今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。

HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするか？まだ確定していないHTML5の要素が変更になった場合を考えてスタイルの設定を考えた方が後々大きな修正にならないのでよいとおもいます。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが一つの例として見ていただければと思います。

スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。
スマートフォンに対応したサイト、最適化したサイトを企画・提案する上で、どちらの制作の流れも知っておけるように、今回はゼロからはじめるレスポンシブサイトを作るために勉強できる参考サイトをまとめました。

前回の記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行いました。 HTML5から追加された新要素の使い方を確認してみよう【MdN連載第10回目】 今回はxht [...]

前回の記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしましたので、今回はxhtmlとHTML5でマークアップしたページのヘッダー、メインコンテンツ、サイドエリア、フッターと領域毎にコードの比較をしていきたいと思います。

いままでの連載っでHTML5での新要素の説明やHTMLから使用方法が変更になった要素、ブロックレベル要素とインライン要素の変わりとなった「コンテンツ・モデル」や「アウトライン」などについてまとめてきましたが、ここから今まで行ったことをまとめて簡単なレイアウトをxhtmlとHTML5でのマークアップを比較しながら実際に作成してみたいと思います。

スマートフォンサイトでは可変を前提とした画像の表示方法から、背景画像にサイズを指定する方法まで、PCサイトよりも幅広い画像の表示方法があります。

今回は、スマートフォンサイトを制作する上で、知っておいた方がよい画像の表示方法と、その使用方法をまとめました。

スマートフォンサイトを制作する上で便利なCSS3は、それぞれのコードの使い道を知れば必要最低限の画像でスマートフォンサイトのデザインをコーディングすることができます。

今回はスマートフォンサイトを制作する上で便利なCSS3の記述を、サイトデザインでよく使われるPhotshopのレイヤースタイルを再現する方法として一通り紹介します。