Webデザインを開始するには、どのCSSツール（フレームワーク、グリッドシステム、IDEなど）が必要ですか？

StackOverflow https://stackoverflow.com/questions/1612398

  •  06-07-2019
  •  | 
  •  

質問

Grailsテクノロジーに基づいた新しいWebサイトを構築しています。

私のウェブサイトのグラフィックデザインについては、プロのウェブデザイナーのサービスを使用する予定ですが、その一方で、「ユーザーフレンドリー」を実現するには、基本的なグラフィックデザインを自分で行う必要があります。ベータ版。

stackoverflow.comサイトを読みましたが、思いつきませんでした。ここに私が見つけたものがあります： how-do-you-choose-a-css-framework what-is-the-best-css-grid-framework can-someone-recommend-a-bells-and-whistles- css-framework what-is-the-best- css-framework-and-they-the-worth-the-effort

しかし、残念ながら多くの矛盾した答えがあります。 最初に、CSSフレームワークを使用することは逆向きのオーサリングであり、良いことではないと言う人もいます。 YUI Grids、BluePrint、960 gs、YAMLなどのアドバイスもあります。そして、多くの人が、Compassを使用するとCSSレイアウトを簡単に再利用できるようになります。

それを考慮して：

  • CSSの世界は初めてで、ウェブデザイナーになるつもりはありません
  • レイアウトはユーザーフレンドリーである必要があります（ただし、必ずしも素晴らしいL＆amp; Fである必要はありません）
  • メンテナンスが可能で、簡単に改善できる必要があります（プロのWebデザイナーによる）
  • 実装が簡単（何かをすぐに行えるように）

私のサイトのWebデザインを開始するためのアドバイスを教えてください

アドバイスありがとうございます。

ファビアン

役に立ちましたか？

解決

まず、Webデザイナーになるつもりがない場合は、CSSをアウトソーシングすることをお勧めします。 HTMLまたはPhotoshopのデザインを提供し、コーディングできるWebサイトがいくつかありますグランド（1k）の下。または HTML / CSSデザインを無料で入手。

次に、知っておく必要のあることと、解決する必要のある次の2つがあります。

  1. すべてのHTMLは、セマンティックで有効な方法で記述する必要があります。セマンティック=適切に順序付けされた見出し、リスト、過度のdivなどはありません。 valid = WC3検証テストに合格します。これはどれもロケット科学ではありませんが、まだ学ぶ必要があるスキルです。 Andy Clarkeの CSSの超越は、セマンティックHTML / CSSに関する素晴らしい本です。メンテナンスを容易にするために、HTMLとCSSは整頓され、一貫してインデントされる必要があります。

  2. コンテンツを管理するために管理バックエンドとデータベースが必要かどうか、または静的ページ（htmlおよびcssファイル、画像、その他のメディアなど）で構成されるサイトを構築するだけかどうかを判断する必要があります。 。）。前者の場合、それはまったく別の学習曲線です：-）

  3. あなたの最高のスキルは何ですか？優れたデザイナーであれば、他の人にHTML / CSSを作成させるか、既成のテンプレート（Web上に多数あります）を使用してカスタマイズします。 複数列レイアウトの良いスタートです。プログラマーの方は、 Django （Python）、チタン（Perl）、より小さなものRuby on Rails（Ruby on Railsは最初は少し大きいため）またはお気に入りの言語の1つです。

優れたCSSは技術であり、シンプルさが本質ですが、始めるために十分な学習をしたい場合は、次のようにします。

  1. 継承（CSSの「カスケード」）と anything が「ブロック」になる可能性があることを理解しているため、スタイルを適用するためだけにネストされたdivをたくさん使用しないでください。代わりに、HTML要素自体にスタイルを適用するか、親ブロック（サイドバーdivに含まれるメニューの順序なしリストなど）に表示される場合にのみ要素に適用します。

  2. ブロック要素とインライン要素（ ScratchからのWebデザインは優れた学習リソースであり、それをお勧めします）、CSSはこの動作を変更できます;

    3. Firefoxで

  3. テストしてから、Internet Explorerでテストします。 ＆gt; = IE7はそれほど悪くありません（ただし、 HasLayout に注意してください）。 IEで適切に調整できないものは、条件付きコメントを使用してCSSを追加しますIEのみが見ることができる-CSSハックを使用しないでください- .htcファイル不足しているIE機能（たとえば、任意の要素のロールオーバースタイル）を追加できます;

  4. CSSポジショニングについて学習し、使用する控えめに「修正」;

他のヒント

  

私のサイトのWebデザインを開始するためのアドバイスを教えてください

Firefox用の Firebug プラグインを今すぐ入手！

プライマリCSSの使用：

  • どのCSSルールが適用されるかを確認
  • リアルタイムでCSSを変更し、影響を確認
  • 他のWebサイトを調べて、どのように動作するかを確認します

このツールなしではCSS（およびその他のWeb関連技術）を開発できません

YUI CSS reset / base / font / gridを見てください

http://developer.yahoo.com/yui/3/cssreset/

また、Grid 960には素晴らしいレイアウトがいくつかあります（Googleでサイトを検索）

実行しているOSがわかりませんが、Macユーザーの場合は、CSS用の優れた無料ツールをお勧めします： Xyleスコープ。これはエディターではなく、CSSビューアー/スキャナーであり、任意のWebページのCSSコードを簡単に閲覧できるため、cssの仕組みをよりよく理解でき、Web上の適切なレイアウトを分析できます。

CSSEdit （Macのみ）は、カスケードシートを作成するための優れたソリューションであり、使いやすく、高価ではありません。 、機能の範囲。

花火：レイアウトのドラフトを作成し、優れたグラフィック作品を作成するのに最適なソフトウェアだと思います！

Dreamweaver：これは、Web開発のためのオールインワンソリューションです。リモートバージョンのWebサイトをローカルサイトと簡単に同期させるのに非常に優れたツールです。

Coda （Macのみ）は、Dreamweaverの非常に優れた代替手段です。 .htaccessファイルの管理と編集！

Webサイトのコーディングについては、dreamweaverまたはCodaをお勧めしますが、他の優れた代替手段は BBEdit （Macのみ）。

Bootstrap、私が提案できる最高のcssフレームワーク、さらにFoundationと呼ばれるものもありますが、開発者の間で人気があり、拡張可能であるため、ブートストラップの方が好きです。他にもいくつかのフレームワークがあります。そのことについてブログを書きました。 http://www.andwecode.com/freebies/5-responsive-css-frameworks ：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top