web-dev-qa-db-ja.com

CSSスタイルビューアー/テスター

CSSが適用されるとどのように見えるかを確認するための典型的なHTMLがたくさんあるサイトはありますか?

つまり、tableadivspanpなど、あらゆるものでいっぱいです。そこに行き、CSSに貼り付けて結果を確認します。

12
Homer

私はただつまずいた http://colorschemedesigner.com/

色を選択するのに最適で、典型的なページに適用される配色がどのように見えるかを確認するためにサンプルページを表示します。

更新:ウェブサイトは現在 http://paletton.com

3
Homer

うわー、誰かがこれをSOに投稿しました。

IS医師が注文したもの: http://jsfiddle.net/

Html、css、javascriptを記述して、そこで直接実行できます!!さらに、彼らはすでにJqueryやその他のものへの参照を持っています!

インターネットルール33は、あなたが望む/想像するなら、そこにあると思います! ;)

4
gideon

私は何も知りませんが、これは自分で設定するのは簡単です。記述するすべての要素を含む基本的なHTMLドキュメントを作成するだけです。 (必要に応じて Lipsum.com からテキストを生成できます。)ドキュメントヘッドのCSSファイルにリンクして、スタイルが添付されていることを確認します。次にテストする場合は、別のCSSファイルを指すように変更します。

2
DisgruntledGoat

正確にはあなたが求めたものではありませんが、ライブ監視モード less.js が大好きです。

一般に、手動で必要なHTMLまたはXHTMLのフレーバーの要素/組み合わせをモックアップしますが、要素の独自のマスタードキュメントを作成できます。 2台目のモニター(または2台、3台など)を接続してすべてのブラウザーを開く(または2台目のコンピューターを使用する)場合、保存した変更はすべて一度にそれらのライブに適用されます。

LessCSS構文は通常のCSSと一緒に使用できますが、処理が速く、簡単に取得できます(結果は後で通常のCSSに変換できます)。

Aviary などのツールを使用すると、簡単にスクリーンショットを撮り(スクロールダウンとステッチの自動化を含む)、すばやく注釈を付けたり(共有可能なリンクを使用してオンラインで)、別のツールで保存して比較したりできます( PhotoshopGIMPPaint.NET など)をレイヤーとしてオーバーレイし、上のレイヤーの透明度を変更します。

編集:

スクリーンショットプロセス(ファイル保存時)を自動化する場合:

  • 問題が発生したとき、あなたはすでにすべてを手にしています
  • イメージをバージョン管理に追加できます(ファイル保存時に自動化することもできます)
  • 周辺活動ではなくCSSに集中できます

file watcher のようなものを使用できます(Pythonの向きを許してください、他の多くのソリューションがあります) screen grabber で。後処理も自動化でき、一貫したウィンドウ位置(プログラム/デスクトップ環境がこれを支援できる)を使用する場合、ブラウザーの周りの「クロム」をスクリプトの一部として切り取ることができます。

2
Metalshark

w3schoolsでは、HTMLおよびCSSルールをいじることができます。プレイしたいCSS/HTMLを見つけて、「試してみてください」と書かれている箇所を探してください。 border CSS ページと ここに彼らの遊び場 があります。

1
John Conde

すべてのページをhtml/cssで作成し、firebugまたはchromeウェブマスターツールを使用して、スタイルを追加/変更/実験します。迅速、簡単、一時的であり、実験に最適です。さらに、独自のサーバーで独自のコードを操作することもできます。これはもう1つのボーナスです。

Buzzkill:私のUI開発者は、ブラウザの違いのために真のデザインツールでコンセプトを作成し、次に模倣するコードを作成する方が良いと警告しています...

サイドノート-私はJqueryのUI Themerollerの大ファンです。このようなツールは、Themerollerが側面のスタイルを変更するために存在します。 ThemerollerのCSSを使用してサイトを完全にテーマ化してから、異なるテーマを切り替えるだけです。試したことがない場合は、特に今すぐに人気のある「光沢のある」外観を探している場合は特に、展開を本当にスピードアップできます。

1
bpeterson76

そこに行き、CSSに貼り付けて結果を確認します。

ここに行きます: http://www.oswt.co.uk/developments/style_sheet_viewer/

質問で正確に何が必要ですか!

0
jeremy

それがあなたが求めていたものかどうかはわかりませんが、 CSS Zen Garden には、CSSデザインがたくさんあるようなHTMLページがあります。このサイト用に独自のCSSを作成できます。例は非常に刺激的です。

0
martinstoeckli