CSS3コードのマークアップをスリムに保つ
Web開発者はより洗練されたCSS3構文を使うことで多くの時間を節約することができます。あなたのページを訪れるユーザーは、可能な限り最速のロード時間を期待しています - ファイルサイズを抑えるのはあなたの責任です。 CSS、特に新しいCSS3モデルの下では、たくさんの簡単なトリックがあります。.
私は以下のガイドでこれらのアイデアのいくつかをまとめました。 CSSコードの縮小など、他の分野にも触れるべきです。スタイリングプロセスで開発者を支援するために利用可能なブラウザ内のツールがありますが、最終的にあなたのウェブサイトのレンダリングプロセスを合理化するためにこのファイルサイズの縮小とショートコードを組み合わせたいと思うでしょう。.
フォーマットの基本的なヒント
実際のCSSシンタックスに入る前に、のトピックを見ていきたいと思います。 どうやって あなたのCSSを書くために。 Webデザインに慣れている方は、おそらく以前にスタイルシートを見たことがあるでしょう。各コマンドの最初の部分は、 セレクタ. これは中括弧の内側に追加されたスタイルを受け取る要素の型をターゲットとします。 プロパティ.
インラインレベル
インラインスタイルでは、各プロパティはそれらを区切るためのスペースだけを置いて次々に書かれます。この方法は、いくつかのプロパティしか必要としないセレクタに最も適しています。それはあなたのページ上のスペースを節約し、あなたのスタイルシートをスクロールすることはずっと速くなるでしょう。これまでインラインCSSに遭遇したことがない場合は、HTMLアンカーリンクをターゲットにした以下の小さな例を追加しました。.
色：＃648cc8。フォントの太さ：太字。 a：ホバー色：＃739cda。テキスト装飾：なし。 a.alt color：＃bd4949！重要です。
ブロックレベル
一方、ブロックスタイルのプロパティはキーと値のペアごとに1行で入力され、コードをスキャンするときの編集を早くするためにインデントされています。私が実行したきれいなスタイルシートの約99％がこのフォーマットを使用しています、そしてそれは多くのデザイナーにとって業界標準になりました。セレクタが6つまたは7つ以上のプロパティを使用している場合、これが適用に最適なフォーマットです。.
たくさんの新しいCSS3プロパティを考慮すると、スタイルシートがどれだけ早く完成するかもわかります。そして、これらのプロパティの多くはブラウザ固有のコピーをサポートしています。これはほとんど重複するコードエントリ（ボーダー半径など）を必要とします。サンプルラッパーdivをターゲットにした以下のブロックプロパティセットの例をチェックすることができます。.
.ラップ表示：ブロック;パディング：6px 10px。背景：#FFF; border-radius：4ピクセル。 -moz-border-radius：4ピクセル。 -webkit-border-radius：4ピクセル。 -o-border-radius：4ピクセル。
CSSの記述方法はどちらも他よりも優れていません。究極的にはあなたがどのスタイルを好むかは開発者としてのあなたの選択であり、そしてこれさえあなたが取り組んでいるプロジェクトによるでしょう。デザイナーが両方を混在させたCSSを見つけることさえ一般的です！私は個人的にそれを感じます “進行中の作品” 私は編集や追加をするためにスタイルシートを常に調べているので、ブロックスタイルの方が簡単になる傾向があります。しかし、トラフィックの多いドメインではCSSファイルを縮小することが絶対的な最善の方法です。.
スリムに保つ
CSS3で利用可能な多くの短いコードを利用することによってあなたは多くの開発時間を節約することができます。あなたがこの時間節約の専門用語を理解するにつれて、HTML要素を編集することはずっと簡単になるでしょう。さらにあなたのコードはよりきれいにカットされ、見やすくなります。.
唯一の欠点は、すべてのブラウザがこれらのプロパティを完全にはサポートしていないことです。 Internet ExplorerやNetscapeなど、既存の問題の多くには回避策があります。ありがたいことに、Webは常に進歩し続けており、CSS3の人気が高まるにつれて、ブラウザの互換性も確実に高まるでしょう。.
RGBaカラーの透明度/不透明度
新しいRGB値は、厳密にはCSS 3ではありません。 財産, しかし アルファ透明度はCSS 3にのみ特有です. 色として渡す一般的な「赤、緑、青」の値の代わりに、今すぐ使用することができます。 色の透明度の4番目のオプションを含める. このため、Web開発者はほとんど完全に透明なPNGを使います。.
基本的な構文では、最初の3つのスロットに0〜255の値、アルファ位置に0〜1.0の値が必要です。色の範囲は、各色相（RGB）のうち、0が何もなく、255がいっぱいの状態でどれだけ見えるかによって異なります。.
/ **構文** / background：rgba（値名、値名、値名、値名、不透明度値）; / **例** / div background：rgba（255、255、255、0.3）;
ブラウザ間の互換性
他のプロパティ 不透明度 状況によっては使用できます。しかし、これは私の例で見たような背景だけではなく、HTML要素全体と内部コンテンツに影響します。.
残念ながら、Internet ExplorerはまだRGBaカラー値をサポートしていません。一般的に、これらの標準的でないブラウザには、完全な不透明度を持つ代替プロパティを含める必要があります。これは、4番目（不透明度）を除いて同じ値で設定します。それはのようになります rgba（255、255、255）
さらに、Internet Explorerは条件付きでもう少し優雅に扱うことができます。ブラウザがIEを実行しているかどうかを実際に確認して、独自のMicrosoft CSSフィルタをコマンドで表示できます。以下の私の例でこれを実証しました（これはあなたのHTMLファイルのどこかに現れるでしょう）：
CSS3ボーダー半径
CSS3で丸みを帯びた境界線を作成することについて、私は混乱しているフォーラムのスレッドをいくつか読んだことがあります - そのやり方に関してはそれほど多くはありません。.
/ **構文** / border-radius：左上、右上、右下、左下。
の ボーダー半径 この例では、ボックスの角をターゲットにしている点を除けば、propertyは標準の境界線を作成するのと同じ構文を共有します。このプロパティは実際には1 - 4の値を受け入れ、それらはそれぞれ異なるコーナー設定をターゲットにします。.
- 1つの値：4つの角すべてが同じ値に丸められます
- 2つの値：最初の値はに適用されます
左上そして右下2番目の値がヒットしている間右上そして左下の - 3つの値：最初に
左上コーナー、2番目は両方左下の＆右上3番目と最後の値が適用されている間右下 - 4つの値：4つの値すべてが、左上、右上、右下、左下の順序でコーナーをターゲットにします。
/ **例** / div border-radius：4ピクセル4ピクセル8ピクセル4ピクセル; div border-radius：4ピクセル4ピクセル8ピクセル
だから上記のコードで私たちは使っています ボーダー半径 を除くすべてのものに4px丸め効果を適用するため 右下 8pxの滑らかな曲線になる境界線。あなたがそれに気づいたならば、これらのコードの両方が実際に同じスタイル効果を適用するでしょう.
ブラウザ間の互換性
今の主な問題はそれです ボーダー半径 いくつかのブラウザでのみサポートされています。 Internet Explorer 9は最近素晴らしいサポートを追加し、Operaはこれも同様にレンダリングするでしょう。ただし、Operaでも独自のプロパティを作成しました。 -oボーダー半径 特定のブラウザエンジンをターゲットにしています。さらに -モズボーダー半径 Firefox / Geckoソフトウェアでサポートされています -webkit-border-radius Google Chrome / Safari用.
以下のコードは、世界最大のブラウザサポートで丸みを帯びた角を作成するための私の必要最低限のテンプレートの例です。.
div border-radius：4ピクセルx 4ピクセルx 8ピクセルx 4ピクセル; -webkit-border-radius：4ピクセル4ピクセル8ピクセル4ピクセル-moz-border-radius：4ピクセル4ピクセル8ピクセル4ピクセル。 -o-border-radius：4ピクセル4ピクセル8ピクセル4ピクセル。
ドロップシャドウを空想?
CSS3のもう一つの本当に素晴らしい側面はのサポートです。 ボックス そして テキストの影. 背景画像が唯一の現実的な選択肢であったので、これは過去において開発者にとってそのような問題でした。この構文は実際には私たちがカバーしてきた他のプロパティよりもずっと簡単な速記の役割に従います。最初はキー値の正しい順序を覚えておくのは難しいですが、実際に使うほど、簡単になります。.
残念ながら、Internet Explorerはまた変わったものです。 Firefox、Google Chrome、Safari、およびOperaを含む他のすべての主要ブラウザは完全にサポートされています。 テキスト影 財産。開発者は自分自身でIEサポートを構築しようとしましたが、それでもまだ非常に限定的です。基本的な構文は次のように書かれています。
/ **構文** / text-shadow：xオフセットyオフセットぼかし半径の色。 / **例** / div テキストの影：2ピクセル2ピクセル1ピクセルx 111;
XとYのオフセットは、ブラウザに影をどのくらい右上と下に表示するかを指示します。負の値を使用すると、影をそれぞれ左上または上に配置できます。しかし、これは非常にぎこちない外観になってしまうので、正の整数をお勧めします。テキストの影が不自然に見える場合は、blur-radiusの値を使用して固定エッジを滑らかにすることもできます。.
この構文は、シングルドロップシャドウ効果を作成するときの基本的な表記法を調べているだけです。高度な設計者が、複数の影を同時に作成することさえ検討しました。 2011年4月のこの素晴らしいブログ記事を参考にして、テキストの影を付ける方法について詳しく説明します。時間がある場合は、コンテンツを調べて、より高度な機能を理解し、将来の参考として必ずブックマークしてください。!
ブラウザ間の互換性
私たちが遭遇した最大の問題はInternet Explorerです。何度も何度もMicrosoftはせいぜいsub-parを実行した彼ら自身のブラウザレンダリングエンジンを押し出しました。 CSS3がテキストの影を覆っても、IEはまだ遅れています。コード例や従来のCSS条件付きコメントを見つけることができる素晴らしいデモWebサイトがあります。.
基本的には、ユーザーが実行しているブラウザがInternet Explorer 9以下のいずれかのバージョンと一致するかどうかを確認します。それから、MSフィルタを使って任意のテキスト要素に影を付けることができます（上では、段落を使っています）。.
移行を容易にする
CSS3 遷移 おばあちゃんのフラップジャック以来デザイン市場で最もホットな財産です！サポートは主にWebkitブラウザに限定されていますが、Webデザイナーは純粋なCSSの移行についてそのような混乱をしています。もちろん、MozillaやOperaなどの二次的なプロパティも利用できます。しかし、なんらかの理由でJavaScriptのアニメーションに反対している場合は特に、簡略表記は本当に魅力的です。.
最初に、元のtransitionプロパティを見てみましょう。これには4つの値が必要ですが、それらもプロパティに分割できます。それらは移行と一致します 財産（効果は何ですか）, 期間（それを引き出すのにかかる時間）, タイミング機能（アニメーションの速度が変わる） ディレイ（アニメーション化するまでに待機する秒数）.
/ ** syntax ** / transition：プロパティ期間のタイミング関数遅延。 / ** example ** / img 遷移プロパティ：不透明度;遷移期間：2秒。遷移タイミング関数：イーズイン。遷移遅延：0.5秒。
タイミング機能を除いて、これらのプロパティの大部分の目的を直感的に理解する必要があります。最初は混乱しますが、このプロパティはトランジションを異なる方法でアニメートするので、効果は遅くなったり、遅くなったり、あるいは似たようなものになります。.
W3 Schoolsには、試してみることができるすべての可能な値をリストしたオンラインのタイミング機能docがあります。私はこれらのガイドを常にグーグルで探していますが、このような便利なブックマークを作成しています。.
ブラウザ間の互換性
それでは、ブラウザのフルサポートを活用しましょう。デフォルトでは、transitionプロパティは のみ Safariの新しいバージョンでサポートされています。まだ多くのユーザーはまだ必要とします -ウェブキット Google Chromeや同様のレンダリングエンジンにも適用されるプレフィックス。以下は “確定した” コードブロックテンプレート大多数のWebブラウザからの移行サポートが必要な場合は、保存して使用することをお勧めします。.
img 遷移：不透明度2秒イーズイン1秒; -webkit-transition：不透明度2秒イーズイン1秒。 / *クローム、サファリ、フロック* / -moz-transition：不透明度2秒イーズイン1秒。 / * mozilla + gecko * / -o-transition：不透明度2秒イーズイン1 / *オペラ* /
テキストストローク効果
このプロパティはそれほど大きくないので、今日それを使用している多くのWebデザイナーは見つかりません。しかし、あなたは使うことができます テキストストローク あなたのフォントを使って本当にきれいな効果を作るため。 SafariやChromeなどのWebkitブラウザは、これまでのところこのプロパティの唯一の真の支持者です。 OperaとFirefoxは、これらの同じアウトラインでテキストオブジェクトをレンダリングするのが困難です。.
/ **構文** / p -webkit-text-stroke：幅の色。 / ** example ** / p -webkit-text-stroke：1px＃222;
ブラウザ間の互換性
あなたがテキストストローク効果の必要性を感じるならば、あなたは常にバックアップカラーを含めるべきです。 MozillaとOperaは利用できますが、Internet Explorerユーザーには他に選択肢がありません。残念ながら、これはWebブラウザ開発者コミュニティからの十分なサポートを得られていない新しいCSS3プロパティの1つです。 CSS3テキストのアウトラインを作成するために特別に作成されたこの素晴らしいWebツールで、しばらく時間をかけて遊んでください。.
ボックスサイズ
ボックスサイズプロパティを使用すると、任意のブロック要素の合計の幅/高さをより細かく制御できます。デフォルトでは、幅/高さ+ボーダー+マージン+パディングがボックスの合計サイズを構成します。ただし、コンテンツにborder-boxを使用すると、すべての余白と余白が増えます。 内方 幅を正確に同じにするため。このプロパティには2つの値しかありません。 コンテンツボックス デフォルトである.
div width：550px;パディング：9px。ボックスサイズ：ボーダーボックス。 / *幅は550pxのままになります* /
あなたが想像できるように、これはあなたのCSSキャリアの間のある点で役に立ちます。余白と余白は本当に苦痛になり得ます、そしてあなたがボーダーを加えるとき、あなたはピクセルのトラックを失う傾向がある.
ブラウザ間の互換性
OperaとIE 8はデフォルトでこの新しいプロパティをサポートしています。あなたの訪問者が癖モードを使用していない限り、IE7以下はコンテンツボックスの設定で動けなくなります。特にターゲットのWebキットとMozillaベースのブラウザエンジンについて知っておくべき追加事項.
div -webkit-box-sizing：border-box; / * Safari / Chrome * / -moz-box-sizing：border-box; / * Firefox * / box-sizing：ボーダーボックス。 / * Opera / IE8 + * /
ピュアCSS3カラム
列はCSS3では少し扱いにくいですが、最小限のコードで実現できます。あなたが注目したい2つの特性は 列数 そして コラムギャップ. カウントは適用する列の合計数を表し、ギャップは各列の間にマージンを作ります。.
div＃cols 列数：3; column-gap：10px;
私の例では、ID #colsがコンテナとして使用されているのがわかります。内側で、divを3つの列に分割し、それぞれの間に10ピクセルの間隔を空けています。さらにあなたが設定することができます 列幅 実数ではなく各列の合計幅を設定するために使用されます.
ブラウザ間の互換性
IE 8より前のものでは、このプロパティを利用することはできません。しかし、すべての例で見たように、MozillaとWebkitは複数のブラウザに対して独自のソリューションを提供しています。テンプレートが必要な場合は、以下の私の小さなサンプルコードをチェックしてください。
div＃sidebar width：210px; -moz-column-count：3; -moz-column-gap：7px。 -webkit-column-count：3; -webkit-column-gap：7px。列数：3。カラムギャップ：7px。
カスタム@フォントフェイス
あなたはCSS3カスタムフォントに関する興奮について聞いたことがあるはずです。 @ font-faceプロパティをうまく使えば、外部フォントスタイルをインポートして他のファミリと同じように使うことができます。構文はやや複雑で、正しく理解するにはしばらく時間がかかります。ブロック @フォントフェイス 姓を定義するために使用され、その後あなたの中でこれを使用することができます フォントファミリー どこでもプロパティ!
@ font-face font-family： 'MyNewFont'; src：url（ 'New_Font.ttf'）、url（ 'New_Font.eot'）; / * Internet Explorerのみ* /
だからあなたは上記のように私は特定のフォントの種類をターゲットにしていないが、構文は際立っているべきものです。 Internet Explorerがサポートしていることに注意してください。 .イート フォントの種類 .TTF そして .その他 他のブラウザでは一般的なオプションです。また重要なのは、直接リンクからフォントのURLを渡すことができるということです。. url（ 'https://www.hongkiat.com/css3/fonts/myfont.ttf'）;
すべてのレンダリングエンジンがこれらのフォントファイルタイプを解析できるため、このセットアップには実際のクロスブラウザの問題はありません。 IEをサポートするには、オリジナル版と同様にeot版も含める必要があります。私はW3 Schoolsの記事があなたがチェックアウトするべき最も重要な情報のカタログを持っていると感じます.
ミニチュアCSSへの変換
このトピックはプロジェクトごとに目的が異なるため、頻繁に議論されます。一方で、Web開発者はスタイルシートを書くのに多くの時間を費やします。このタイプの平文データを暗号化してそれを詮索好きな目から隠す方法はありません。他人があなたのコードを露骨に窃盗するのを防ぐためにあなたができる最善の方法は、スタイルを乱雑にしてすべての改行/スペースを削除することです。.
このプロセスは次のようにラベル付けできます。 小型化 あなたのコード通常、開発者はCSSを標準フォーマットで記述してから、Webサーバーにアップロードする前にすべての空白を削除します。それから、あなたはすぐに編集するためのローカルコピーを持っていると同時にライブプロジェクトの小さいバージョンを提供します。この方法は、明らかにコードハイジャック犯を防ぐためにページロードを減らすのに役立ちます。.
私が上記のMinify CSSへのリンクをリンクしていると、この件に関する素晴らしい読み物がいくつかあります。このサイトでは、コードからこのような空白やキーリターンを削除するためのブラウザベースのツールも提供されています。 CSS Compressorは、Webブラウザ内で直接動作するシンプルなインターフェースを使用するもう1つのオプションです。私は自分自身でこのアプリを使ったことは一度もないけれども、私はまたクリーンCSSについて良いことを聞いたことがある.
関連リンク
あなたが前進し続けるために、私はWebの周りから6つの便利なリンクを提供しました。これらには、簡略表記だけでなく、この新しい簡略CSSコードを練習するときに役立つガイドやチュートリアルも含まれています。.
- CSS3の初心者向けガイド
- CSS速記ガイド
- あなたはCSS3を適切に使用していますか?
- CSSコンテンツとブラウザ互換性チャート
- CSS3 +プログレッシブエンハンスメント=スマートデザイン
- 完全なCSS / CSS3プロパティインデックス
結論
それはあなたが各プロジェクトのために従うことができる具体的なスケジュールを構築するためにCSSコードを書くことに多くの献身と実践を必要とします。ほとんどのWebデザイナーは新しいプロジェクトやアイデアを拾って喜んでいるので、あなたはきっとこれらの役に立つコーディングのコツを実践する時間を見つけるでしょう。チートシートが見つからなかったり、さらに悪いことにインターネット接続を失った場合に備えて、ご自身の便宜のために小さな参照シートをコピーしてみてください。!
CSS3のその他の便利なプロパティやショートカットについて知っていますか？議論の中であなたの考えやアイデアを聞いてみたいです。 Web開発者はW3C内でより多くの標準化を推進しており、明らかに移行は容易になっています。 CSS3は素晴らしい利点を提供します。もしあなたが速記コーディングを習得することができればあなたのファイルサイズを小さく保ち、コピーキャットがあなたのコードを盗むのを妨げる.
