簡単なサンプルで学ぶ!ゼロからはじめるレスポンシブWebサイト初級編 ~メディアクエリを使ってCSSを分岐させる~

Category : スマートフォンサイト制作(CSS3他) |

簡単なサンプルで学ぶ!ゼロからはじめるレスポンシブWebサイト初級編 ~メディアクエリを使ってCSSを分岐させる~

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

ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみよう【MdN連載第12回目】

Category : MdN Design Interactive連載 |

ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみよう【MdN連載第12回目】

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

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

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました

Category : HTML5でサイトをつくろう |

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました

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

XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう【MdN連載第11回目】

Category : MdN Design Interactive連載 |

XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう【MdN連載第11回目】

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

HTML5から追加された新要素の使い方を確認してみよう【MdN連載第10回目】

Category : MdN Design Interactive連載 |

HTML5から追加された新要素の使い方を確認してみよう

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

XHTML1.0とHTML5のコーディングの違いを確認してみよう【MdN連載第9回目】

Category : MdN Design Interactive連載 |

XHTML1.0とHTML5のコーディングの違いを確認してみよう【MdN連載第9回目】

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

iPhoneサイト(スマートフォンサイト)制作時の画像の表示方法と使用方法についてまとめました

Category : スマートフォンサイト制作(CSS3他) |

iPhoneサイト(スマートフォンサイト)制作時の画像の表示方法と使用方法についてまとめました

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

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

iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法

Category : スマートフォンサイト制作(CSS3他) |

iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法

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

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

トップへ戻る

RSS REED