ピクセルで表された固定サイズのHTML5とCSS3を使用して静的Webサイトを構築した経験があります。私はCSSを手作業で作成するために使用しますが、おそらくそれが最善の方法です(SASSとCompassを組み合わせて、まだ学習する必要があります)。今、私は新しいWebサイトを実現する必要があり、デスクトップとモバイルの任意のブラウザーサイズで、任意のメインブラウザー(Internet Explorer、Firefox、Opera、Safari)で適切に表示される柔軟なレイアウトを作成しようとしています。今はデスクトップの解像度がもっと気になりますが、モバイルデバイスでも見栄えが良ければもっと良いです。
私は現在、イーサン・マルコットの「レスポンシブWebデザイン」という本を読んでおり、彼の式を使用してディメンションを設定する必要がある場合のパーセンテージの使用について学習しています。ターゲット/コンテキスト=結果(基本的にコンテンツとコンテナ)。これは柔軟なウェブサイトを作る良い方法だと思います。イーサン・マルコットが述べているレスポンシブWebサイトには、次の3つの要素が必要です。
- 柔軟なグリッドベースのレイアウト。
- 柔軟な画像とメディア。
- メディアクエリ。
それを達成するための良い方法だと思います。
その理論と手作りのCSSとは別に、ブラウザによって表示が異なる要素が存在する場合があります。私はすでにCssリセットとNormalize.cssを試しましたが、これは現在使用していて、好みです。Modernizrも統合したHTML5ボイラープレートを試してみたいと思います。あなたはそれをお勧めしますか?
最近、グリッドシステムの数が増えています(Adobe Dreamweaver CS6でさえrespond.jsを使用して流動的なレイアウトグリッドを作成する方法を実装しています。何かいいですか?)私はZURBの960グリッドシステムまたはFoundationを試すことを考えています。流動的なレイアウトには960gsの異なるバージョンがあることを知っていますが、とにかく、流動的なレイアウトには今のところFoundationの方が優れていますか?
そして最後に、HTML5ボイラープレートを960gsまたはFoundationと組み合わせることが可能であり、それは理にかなっていますか?
私はすでにこれらのトピックに関連する質問と回答を読みましたが、通常、それらは1つのことに固有のものです。これらすべてを一緒にグローバルな視点で捉え、進め方についてのアドバイスをしたいと思います。よろしくお願いします。