初心者のための20の便利なCSSのヒント

昔は、マイナーなものであっても、Webサイトの更新を手助けするために開発者やプログラマーに頼っていました。 CSSとその柔軟性のおかげで、スタイルはコードから独立して抽出することができます。さて、CSSの基本的な知識があれば、初心者でも簡単にWebサイトのスタイルを変更できます。.

自分のWebサイトを作成するためにCSSを選択することに興味があるのか​​、それとも単にブログの外観を微調整してちょっと感じることに興味があるのか​​。いくつか見てみましょう CSSのヒント 私たちはに役立つかもしれないと思った 初心者. ジャンプ後の全リスト.

1. つかいます reset.css

   CSSスタイルのレンダリングに関しては、FirefoxとInternet Explorerのようなブラウザでは、それらの処理方法が異なります。. reset.css 基本的なスタイルをすべてリセットするので、実際の空白の新しいスタイルシートから始めます。.

   ここでは一般的に使用されているいくつかの reset.css フレームワーク - YahooリセットCSS, Eric MeyerのCSSリセット, トリポリ

2. 短縮形のCSSを使用する

   短縮形CSSはCSSコードを書くためのより短い方法をあなたに与えます、そして何よりも最も重要です - それはコードをより明瞭にそして理解しやすくします.

   このようにCSSを作成する代わりに

   .header background-color：#fff; background-image：url（image.gif）; background-repeat：繰り返しなし。背景位置：左上。 

   それは次のように手短に書くことができます。

   .header background：#fff url（image.gif）左上を繰り返さない

   もっと - CSS速記の紹介, 便利なCSS速記プロパティ

3. 理解 クラス そして ID

   これら二つのセレクターは初心者をしばしば混乱させる。 CSSでは, クラス ドット "。"で表されます。しながら id ハッシュ '＃ "です。一言で言えば id 独特でそれ自身を繰り返さないスタイルで使われる, クラス 反対側では、再利用することができます.

   もっと - クラス対ID Class、IDを使用する場合クラスとIDを一緒に適用する

4. の力

5. a.k.aリンクリストは、それらが正しく使用されている場合に非常に便利です。
   または
   , 特にナビゲーションメニューのスタイルを設定する.

   • 忘れる , やってみる

     CSSの最大の利点の1つは、

     スタイリングの観点から総合的な柔軟性を実現するため.

     違います

     , コンテンツが内で「ロック」されている場所

     の細胞ほとんど言うのは安全です レイアウトはの使用で達成可能です 大規模な表形式のコンテンツを除くと. もっと - テーブルが死んでいる, テーブル対CSS, CSSとテーブル CSSデバッグツール CSSを微調整しながらレイアウトを即座にプレビューするのは常に良いことです。CSSスタイルの理解とデバッグに役立ちます。これがあなたのブラウザにインストールできる無料のCSSデバッグツールです：FireFox Web開発者、DOMインスペクタ、Internet Explorer開発者ツールバー、そしてFirebug. 余分なセレクタを避ける CSSの宣言が簡単になることがあります。つまり、次のようにコーディングしていることがわかります。 ul li … ol li … テーブルtr 彼らはちょうどに短縮することができます 李… td … 説明： 内にのみ存在します または そして そして 中だけになります そのため、それらを再挿入する必要は本当にありません。. 知っている !重要 でマークされたスタイル !重要 その下に上書きルールがある場合は関係なく使用されます. .ページ背景色：青！背景色：赤; 上記の例では, 背景色：ブルー それがマークされているので適応されます !重要, あっても 背景色：赤。 その下. !重要 何かを上書きせずにスタイルを強制したい場合に使用されますが、Internet Explorerでは機能しない場合があります。. テキストを画像に置き換える これは一般的に置き換えることです練習 タイトル テキストベースのタイトルから画像へ。これがあなたのやり方です. h1 テキストインデント：-9999px;背景：url（ "title.jpg"）繰り返しなし。幅：100ピクセル。高さ：50ピクセル。 説明： text-indent：-9999px; で宣言された画像に置き換えられて、あなたのテキストタイトルを画面外に投げます。 バックグラウンド： … 固定付き 幅 そして 高さ. CSSの位置づけを理解する 次の記事では、CSSポジショニングの使い方について明確に理解しておくことができます。 - ポジション： … もっと - 10段階でCSSの配置を学ぶ CSS @インポート vs 外部CSSファイルを呼び出すには2つの方法があります - それぞれを使用して @インポート そして . どちらの方法を使用すればよいかわからない場合は、以下の記事を参考にしてください。. もっと - @importとlinkの違い CSSでフォームをデザインする Webフォームは、CSSを使用して簡単にデザインおよびカスタマイズできます。以下の記事でその方法を説明します。 もっと - テーブルレスフォーム, フォームガーデン, さらに多くのフォームコントロールをスタイリングする インスピレーションを得ます あなたがインスピレーションのためにうまく設計されたCSSベースのウェブサイトを探しているなら、または単にいくつかの良いUIを見つけるために単に閲覧しているならば、ここに私達がお勧めのCSSショーケースサイトがあります： CSSリミックス CSSの美しさ CSSエリート CSSマニア CSSリーク CSSコードをきれいに保つ CSSコードが面倒な場合は、混乱して以前のコードを参照するのに苦労することになります。初心者のために、あなたは適切なインデントを作成し、それらを適切にコメントすることができます. もっと - コードをきれいに保つための12の原則, CSSコードをオンラインでフォーマットする タイポグラフィ測定 px vs em 測定単位をいつ使用するかの選択に問題がある px または em? 以下の記事では、タイポグラフィユニットについてよりよく理解することができます。. CSSブラウザ互換性表 ブラウザごとにCSSスタイルのレンダリング方法が異なることは、誰でも知っています。各ブラウザのCSS全体の互換性を示す参照、チャート、またはリストを用意しておくとよいでしょう。. CSSサポート表： ＃1, ＃2, ＃3, ＃4. CSSで複数列をデザインする 左、中央、右の列を正しく整列させるのに問題がありますか？これは役に立つかもしれないいくつかの記事があります： 聖杯を求めて のどのコラム CSSカラムがめちゃくちゃになっている主な理由 Litte Boxes（例） 複数列のレイアウトがそのまま使える 絶対列 無料のCSSエディタを入手する 専用のエディタは常にメモ帳よりも優れています。これが私たちがお勧めするものです： もっと - 単純なCSS, メモ帳 ++, スタイルCSSエディタ メディアタイプについて CSSを次のように宣言しても、メディアの種類はほとんどありません。 . 印刷、投影、スクリーンは一般的に使用されているタイプのいくつかです。それらを適切に理解して使用することで、ユーザーのアクセス性が向上します。次の記事では、CSSメディアタイプを処理する方法について説明します。. もっと - CSSとメディアタイプ, W3メディアタイプ, CSSメディアタイプ, CSS2メディアタイプ 開発者とデザイナーのための20の便利なiPhoneアプリ より良いグラフィックのための20の便利なSVGツール Webデザイナーのための20の超軽量でエレガントなフォント 次の記事 20便利なFirefoxサイドバーアドオン 前の記事 Instagramを最大限に活用するための20の便利なアプリ