デザイナーと開発者に役立つ 9 つの超実用的な CSS のヒント

Web デザイナーの頭の中には、仕事に関連する多くの知識が詰まっている必要があります。 CSS は、Web サイトのデザインに役立ち、デザインの可能性を広げ、従来のテクノロジーを使用してすべての側面をカバーするのは簡単ではない、よりシンプルな方法で Web サイトをより魅力的にすることができます。
フロントエンドと Web ページの場合、CSS は習得する必要がある第一選択のスキルです。
ここでは、非常に実用的な 9 つの CSS3 プロパティと使用テクニックを紹介します。
1. 丸い角の効果丸い角について話すとき、さまざまな議論の中で、実装の難しさ、互換性の難しさ、パフォーマンスの低下などの欠点を頻繁に耳にします。今日の Web デザインにはさまざまな新しい開発スキルが求められるため、ますます多くのフロントエンドとページで HTML5 が使用され始めています。
HTML5 では、以前は画像を使用して実装する必要があった要件を、コードで実現できるようになりました。 CSS3 で追加された「border-radius」は、HTML 要素の丸い角を直接定義するために使用でき、すべてのブラウザの最新バージョンをサポートします。
次のコードでこれを実現できます。

border-radius: 10px; /* CSS3 プロパティ */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux ブラウザ */

以下の結合バージョンを使用することも、上記のコードの省略形として使用することもできます。

-moz-border-radius: 10px 20px 30px 0;

IE ブラウザの CSS3 プロパティのサポートの詳細については、この英語の記事をお読みください。
2. 影の効果 CSS3 で実現できるもう 1 つの興味深い機能は、影の効果 (box-shadow) です。これは、「box-shadow」によって非常に簡単に実現できます。一般的な主流ブラウザはすべてこのプロパティをサポートしており、Safari ブラウザはオプションのプレフィックス付き -webkit-box-shadow プロパティをサポートしています。
コードには以下が含まれます。

#私のDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
ボックスシャドウ: 20px 10px 7px #ccc;
}

次の JavaScript コードでも同じ影の効果を実現できます。

object.style.boxShadow="20px 10px 7px #ccc"

3. @Media属性
@Media は、アプリケーションスタイルを直接指定してメディア属性を導入できます。これは、同じスタイルの Web ページスタイルをさまざまな画面サイズに合わせて変更するために使用されます。また、レスポンシブ Web デザインでのスタイルの変更にも役立ちます。これは、次のコードを変更するだけで実現できます。

@media スクリーンと (最大幅: 480px) {
}

また、次のように @media print を使用して CSS 印刷プレビューを指定することもできます。

@メディアプリント
{
p.content { 色: #ccc }
}

4. グラデーション塗りつぶしを追加する CSS3 のグラデーションは、もう 1 つの素晴らしいプロパティです。まだすべてのブラウザでサポートされているわけではないので、レイアウトの設定にこれに完全に依存しない方がよいでしょう。参考までに、CSS ベースのグラデーションナビゲーションバーを示します。
やり方は次のとおりです。

背景: -webkit-gradient(linear, 左上, 左下, from(darkGray), to(#7A7A7A));

5. 背景サイズ背景サイズは CSS3 で最も実用的な効果の 1 つであり、現在多くのブラウザでサポートされています。背景サイズプロパティを使用すると、背景画像のサイズを必要に応じて制御できます。
以前は、背景に使用する画像のサイズはスタイルで調整できませんでした。それがどれほどひどかったか想像できない方は、コンピューターのデスクトップの壁紙を作成していたときに、気に入った画像がデスクトップのサイズに合わず、タイルで埋めなければならなかったことを思い出してみてください。
このようなデスクトップは非常に醜いので、まともな美的感覚を持つ人なら誰でも画面を破壊したい衝動にかられるでしょう。そして、コードを 1 行変更するだけで、背景画像をページに合わせて調整できるようになりました。

分割
{
背景:url(bg.jpg);
背景サイズ:800px 600px;
背景繰り返し:繰り返しなし;
}

6 @フォントフェイス
この属性は、CSS3 を使用してフォントを変換する場合に有用であることが証明されています。これまでは、さまざまなフォントライセンスの問題により、デザインプロセス中に選択できるフォントは特定のものに限られていました。 @font face を通じてフォント名をカスタマイズできます。

@フォントフェイス
{
フォントファミリ: mySmashingFont;
ソース: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */
}

そうすれば、簡単なコードでいつでもどこでもカスタマイズされたmySmashingFontフォントファミリーを使用することができます。

div{フォントファミリー:mySmashingFont;}

7. clearfix 属性 Overflow: hidden でフローティング効果をクリアすることが第一の選択肢ではない場合は、異なる HTML 要素を個別に処理できる clearfix を選択することをお勧めします。

.clearfix {
表示: インラインブロック;
}

.clearfix:後{
コンテンツ： "。";
表示: ブロック;
クリア：両方;
可視性: 非表示;
行の高さ: 0;
高さ： 0;
}

8. マージン: 0 自動
Margin: 0 は、CSS で最も基本的な機能を自動的に実装します。最も単純で最も一般的に使用される機能である中央揃えを実装するためによく使用されます。 CSS 自体には中央揃えを指定する機能はありませんが、auto margin でマージンを指定すれば、この機能は非常に簡単に実現できます。
このプロパティを使用すると、簡単なコードで要素を中央に配置できます。ただし、次のコードのように、div の幅を設定する必要があることに注意してください。