2009-05-12 11 views
0

もちろん、コンテンツを除いて、ブラウザ互換で純粋にCSSであるWebページを作成するためのベストプラクティス/方法論とは何ですか? yahoo.comのような有名ブランドのWebサイトでは、CSSをレイアウト専用に使用しているため、ハンドヘルドデバイスではコンテンツがかなりよくレンダリングされています。私は外部のウェブサイトを再設計する機会があり、私はこの方法を取り入れたいと思っていますが、どのようにすればいいのか分かりません。注:私はJSFを使用していますが、標準的なHTML/CSSのアドバイスはまあまあです。大きなサイトと同様に純粋なCSSでデザインする方法

答えて

1

私はあなたのための良い最初のステップは、何らかの種類のCSSフレームワークを使用して調べることだと思います。 Wikipediaによると、このようなフレームワークの目標は、「簡単で標準に準拠したWebページのスタイリングを可能にする」ことです。

については、 CSSフレームワークを使用すると、私は何もお勧めできません。私はここ..同じことをお勧めするつもりだった

2

私が好きと思える2は/あなたはCSSを使用する方法を学習する必要が

http://www.blueprintcss.org/

http://960.gs/

+0

私はまた、960.gs.ブロックをレイアウトするのに役立ちますが、CSSを使用してスタイルを設定する方法を理解するための代替手段ではありません。 – Kekoa

1

私が始めるためにCSSのフレームワークを使用することをお勧めします。あなたのページのための素晴らしいグリッド構造(大きな名前のプロの使用のような)を取得し、フレームワークに慣れると迅速に開発時間を短縮します。

yahooに言及したので、私はそのレイアウトにYUI Grids CSSをお勧めします。

私はblueprintcssを好みます。これは、デフォルトのブラウザスタイル用にスタイルがリセットされており、印刷用のスタイルシートも備えています。

0

CSSについてできるだけ多くのことを学びます。人々がCSSのレイアウトに不満を抱いているのは、すべてのイン・アウトを理解していないからです。

セレクタパターンマッチングなどに注意してください。マークアップの簡略化に大きな違いがあります。

表形式のデータには表を使用しても問題ありません。テーブルタグは理由のためにそこにあります。

非常に役立つリソース:http://csswizardry.com/web-design+/

3

はCSSフレームワークでの作業のEvanKの提案は素晴らしいアイディアだ、と個人的に私は私の心に本当にCSSを考えるための新しい方法を表しており、一般的である、Compassをお勧めします非常にエレガント。青写真は数多くのポスターでも紹介されています。コンパスは実際にBlueprint(またはあなたの選択した別のフレームワーク)を使用し、それをさらに抽象化して、新しいグリッドテンプレートを動的に生成できるようにします。本質的に、BlueprintとSASSで作業するための、よりプログラム的なフレームワークを提供します。

しかし、フレームワークを調べる前に、いくつかの基本について頭を浮かべることが不可欠です。 W3Schoolsがいい場所ですが、その後にはA List Apartのような良いデザインのブログが続きます。

クロスブラウザの問題を最小限に抑える点では、a CSS resetが不可欠です。これはYahooのアプローチです。

1

フレームワークを除いて、クロスブラウザ対応のサイトを実装するには、まず標準準拠のブラウザ(Firefoxなど)をターゲットにしてから、動作した後でのみ、標準に準拠していないブラウザ(IE6など) 。

私の経験では、最初は非標準のブラウザ(IE6など)をターゲットにしてから、サイト間でブラウザを互換性を持たせることは非常に難しいです。

1

純粋なCSSレイアウトを作成するための秘密のプロ用ソースはありません。 CSSでサイトをレイアウトする方法はたくさんありますが、実際にはその技術をしっかりと理解するだけです。

フレームワークで成功した人もいます。彼らが良いアイデアかどうかは本当に言えませんが、1つの利点は、CSSサイトを構築するというぎこちない細部を抽象化することです。

しかし、とにかくそれを学ぶ必要があります。私は本当に座って、CSSが実際にどのように機能するかを学習したい人にお勧め二つのサイトは本当にあります: - CSSが読みやすいガイド

W3 CSS 2.1 Spec をどのように動作するかのおそらく最も包括的な説明

SitePoint CSS Reference: Concepts は - 厳しい読書ですが、実際にすべての仕組みが説明されています

関連する問題