最も一般的に使用される CSS テクニックに関するメモのコレクション_html/css_WEB-ITnose

1. ブラウザのフォント サイズをリセットします

ブラウザのデフォルトをリセットしてから、ブラウザのフォント サイズをリセットします。ダウンロードしたくない場合は、Yahoo の UI リセット CSS スキームを使用できます。9MB ファイルの場合、コードは次のとおりです。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:”; } abbr,acronym { border:0; }

次に、以下を使用してブラウザのフォント サイズを 10 ピクセルにリセットします:

html {font-size: 62.5%;}

このサイズは基本的に適切であり、その後調整できます。タイトル 1 は 120 ピクセルなど、必要に応じてサイズを指定します。
h1 {font-size: 2em;}

2. 水平方向の中央揃えを設定します
現在、ほとんどの Web サイトは固定幅です。 CSS コードは次のとおりです:
div#container {margin: 0 auto;}

3. 制御位置: 絶対位置、相対位置
div が 2 つある場合

<div id='parent'> <div id='son'></div> </div>

div に left 属性と top 属性がある場合、

内部 div の位置属性が絶対値の場合、それはドキュメントの左上隅を基準とします。

内部 div (息子の ID を持つもの) の位置属性が相対、その後の位置左と上の値は外側の div の左上隅からの距離に相対します

4. 必要に応じて、重要な要素を画面の中央に配置します。中央に必要なものを配置するには、次の CSS を使用できます:

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;} div.popup { margin-top: -200px; margin-left: -250px;}

幅と高さを明示的に指定し、この部分を元に戻せるように、top プロパティと left プロパティをそれらの半分に設定する必要があります。画面の中央。

5. 再利用可能なルール

.left {float: left;} .right {float: right;} img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;} img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}

独自の CSS スタイル シートを設定すると、必要なときにタグを直接追加できます。

6. IE6 の浮動要素の二重マージン問題を解決する

div に float:left と margin-left:100px を設定すると、このバグが IE6 で発生します。もう 1 つのディスプレイを設定するだけで済みます。コードは次のとおりです:

div {float:left;margin:40px;display:inline;}
7. シンプルなナビゲーション メニュー

デザインにナビゲーション バーをプリセットします。非常に役立ちます。これにより、他の人があなたの Web ページの主要なコンテンツを大まかに理解できるようになります。初めての XHTML:

<div id=”navbar”> <ul> <li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li> <li><a href=”http://www.google.com”">Google</a></li> <li><a href=”http://zenhabits.net/”>Zen Habits</a></li> </ul> </div>

CSS コード:

#navbar ul li {display:inline;margin:0 10px 0 0;} #navbar ul li a {color: #333;display:block;float:left;padding:5px;} #navbar ul li a:hover {background:#eee;color:black;}

8. 現在、テーブルのない Web サイトをデザインしているため、Put it on に重点を置きます。 DIV を使用します。テーブルの列とフィールドには制約がなくなったので、JeddHowden.com にある便利な CSS が必要です

それはページの下部に残ります

会社のバージョン情報は常にページの下部に保持されますページのこの部分の情報を実装するにはどうすればよいですか?これは非常に古いテクニックですが、すべて The Man in Blue のおかげです。 内部 CSS オプション。要素は多くのクラスを適用できます。例: .red {color: red;}

.bold {font-weight: Strong;}

それを使用できます:

Thisテキストは赤色で太字になります!

これらがお役に立てば幸いです!