Web デザイナーに必須の 10 の CSS スキル_html/css_WEB-ITnose

CSS は Web デザイナーの基礎です。CSS を理解すると、より美しくユニークな Web ページをデザインできるようになります。 CSS テクニックを使用して CSS を上手に扱うことは、デザイナーを魅了するものです。 CSS の深海の世界には興味深いものがたくさんあります。自分にとって最適なものを見つける必要があります。もちろん、CSS のすべてのルールと構文を一度に覚えるのは不可能ですが、将来の開発のために非常に役立つ CSS スキルを覚えておく必要があります。今日は、Web デザイナー向けに最も役立つ 10 の CSS ヒントを注意深く用意しました。ユニークで優れた Web ページをデザインしたい場合は、それに注意を払う必要があります。このブログは、高品質の印刷サービスを提供するオンライン印刷会社 Business Card Printing と協力しながら書かれました。

1. @font-face

他のサーバーのフォントを使用する素晴らしい方法です。もちろん、ホスティング サーバー上で必要なフォントが見つからない場合は、スタイルでこのメソッドを使用して、必要なフォントを導入できます。

1

2

3

4

@font-face {

font-family: Blackout

src: url ( "assets/blackout.tt; f" ) 形式 ( "truetype" ) ;

}

2. .clearfix

要素の float をクリアできない場合、これは float をクリアする方法です。このメソッドは、任意の HTML 要素に対して個別に使用できます。 ... クリアフィックス: 後 {

表示 : ブロック ;

行の高さ : 0 ;

}

3. @media

@media は、現在の応答 Web サイトのメディアを設定でき、ユーザーのモニターに応じて Web サイトの幅を調整するのに役立ちます。

1

2

@media screen and ( max-width : 960px ) {

}

4. 変換: 回転(30度);

これらの変換プロパティを結合します。興味深い動的な効果を作成するための CSS トランジション効果。

1 2

3

.title {

変換: 回転(40度)

}

5. 背景サイズ

このルールは適応に役立ちますウェブサイトの背景を全画面表示します。以前のバージョンの CSS のように、不格好なコードを記述する必要はありませんでした。

1 2

3

4

body {

背景 : URL (image.jpg) 繰り返しなし

背景 - サイズ : 100% ;

}

6. input[type="text"]

この input[type="text"] セレクターとその他の高度なセレクターは、一般レベルから上級レベルに進むのに非常に役立ちます。属性セレクターを使用して、入力要素の送信されたバージョンを制御したり、外部リンクにアイコンを追加したりできたら素晴らしいと思いませんか?

1

2

3

input[type= "text" ] {

width : 250px ;

}

7. margin: 0 auto;

ブロックの配置に特別な基準がないのは奇妙ですのレベル要素。このメソッドは、ブロックレベルの要素をその親要素内の中央に配置します。

1

2

3

#container {

マージン : 0 自動

}

8. {outline: none;}

ウェブサイトの閲覧 クリックするとリンクの場合、巨大な点線のボックスが Web ページ全体に広がり、ユーザーの気分に重大な影響を与えます。 「a {outline: none;}」宣言はこれを削除しますが、使いやすさのために、リンクに :focus 状態を追加することも忘れています。

1

a { アウトライン : none ;}

9. オーバーフロー: hidden

これは、CSS に読み込まれていない要素のフロートをクリアする最良の方法です。ウェブサイトの応答性を高めるために使用してください。

1

2

3

.container {

オーバーフロー : 非表示

}

10. color: rgba();

透明度の高いPNG画像ですこれは Web デザインで人気があり、広く使用されるようになりましたが、現在では、この方法を使用して透明性も実現できます。赤、緑、青の 3 つのチャネルを使用し、不透明度 %50 に対応する 0.5 などの透明度を実現するために不透明度値を設定します。

1

2

3

.btn {