忘れそうなCSS

忘れそうなCSS はコメントを受け付けていません

margin: 0px auto;

そもそも【margin: auto;】は余白を自動的に設定するということ。

【margin-left: auto; margin-right: auto;】に設定すると中央に

センタリングできる。しかし、IEのバージョンによってはセンタリング

されないことがあるので、同時にcss的にはおかしいが、

text-align: center;を入れないとセンタリングされない。

 

divタグでboxを作り、そのboxを中央寄せしながら文字は

左寄せにするなどの場合に使用します。

①box1のボックスを作って、text-alignをcenter、widthを100%にする。

②box2でもう１つボックスを作るのですが、その際に中の文字を

左寄せにしたいのでここで【margin: 0px auto;】を使用する。

※この際の注意点としては、width指定がなければ【margin: 0px auto;】は

意味が無いので注意が必要。

 

.box1{
    text-align:center;
    width:100%;
    必要に応じて背景などを追加
}
.box2{
    text-align:left;
    margin:0px auto;
    width:150px;
    必要に応じて背景などを追加
}
<div class="box1">
<div class="box2">実際には背景を設定しないと良く分からない</div>
</div>

※こちらのURLを参考にさせて頂きました。
http://www.stylish-style.com/csstec/basic/p-boxc.html

overflow:scroll;

ボックスから文章がはみ出した場合の処理方法の指定は【overflow】プロパティ<br>

プロパティの値を scroll に設定すると、ボックスにスクロールバーが表示される。

ボックス内の幅、高さから文字数がオーバーした場合、このスクロールバーを動かせばはみ出した部分を読むことができる。

ただし、scroll を指定すると文章がはみ出さない場合でも常にスクロールバーが表示されてしまうので注意が必要。

※こちらのURLを参考にさせて頂きました。

http://park16.wakwak.com/~html-css/css/css_18.html

 

clear:both;

floatプロパティで指定したグループの次のグループは、回りこんで表示されるという仕組みになっているためそれを回避するためにフッタグループや他のグループにclear:both;を追記する。

そうすることにより回り込みが無くなり、表示したい箇所に表示される。

要はfloatを使うとその後も回りこみをしてしまうということ。

その後のグループのレイアウトが崩れる可能性があるのでwidthの指定も追加すること。

 

参考URL

http://mt.lt-ac.com/020_2_c/clear_both.html

 

clearfix

親DIV内に子DIVを入れ子にしていて、子DIVがfloatのスタイル属性を持っている場合の高さが親DIVより高いときは子DIVが親DIVをはみ出してしまう。

それは親DIVが高さを定義できないから。

子DIVにheightのスタイル属性を持たせても回避できるが、高さは動的に変わるケースも非常に多いため、毎回高さを計算することは現実的ではない。

■代表例

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-table;
	min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

 

参考URL

http://c-brains.jp/blog/wsg/07/03/05-200203.php

http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/

 

display:block;

文書は要素(element)の集合体である。

文書を形成する要素にはブロック要素、行内要素（インライン要素）がある。CSSでは、テーブル要素、段落要素などさらに細かな種類に分かれていく。

要素はタグで囲む。

 

<p>文章で<strong>ここは重要</strong></p>

 

段落<p>内の行の重要<strong>箇所。

HTMLでは終わりのタグを省略できるものがある。たとえば段落を示す<p>は内部に行内要素を持たないため、次にブロック要素などが出てくると</p>があるものとみなす。

<ul>には<li>以外含まれない

<p>には、ブロック要素はもてない

Pを読もうとすると「要素Pは終了タグは省略できる、含まれるのは行内要素（インライン要素）、段落を示す」と読む。

HTMLは上記の様に、文書構造にしたがって考えるべき。一般的にブロック要素は前後に大きめのマージンをとって区別する。

しかし、デザイン性から、行内要素（インライン要素）であってもブロック要素として扱いたいもの、箇条書きやその段落であってもブロックにしたいときがある。

そのようなときにdisplay:block;を使う。

ちなみにdisplayで使う値は他に下記がある。

inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

 

参考URL

http://oshiete.goo.ne.jp/qa/4117578.html

 

line-height

行の高さを指定。

以下参考。

絶対単位は：
◇　cm：　センチ
◇　mm：　ミリ
◇　in：　インチ
◇　pt：　ポイント、inの1/72th
◇　pc：　1pc=12pt

相対単位は：
◇　em：　the ‘font-size’ of the relevant font. 関連フォント（現在）のサイズ。大目に見ると、大文字のMの高さに相当
◇　ex：　the ‘x-height’ of the relevant font. 小文字のxの高さに相当
◇　px：　pixels, relative to the viewing device. ピクセル
◇　%：　パーセント

 

■数字のみで指定
例：
line-height: 1.5;
フォントサイズが10ptの場合、1.5と指定すれば、15ptになる。
p {
font-size:10pt;
line-height: 1.5;/* 15pt */
}

■パーセンテージ（%）で指定
例：
line-height: 150%;

フォントサイズが10ptの場合、150%と指定すれば、15ptになる。
p {
font-size:10pt;
line-height: 150%;/* 15pt */
}

 

zoom: 1;

IE7のZoom機能に対応するためのCSSハックのひとつ。

 

min-width

プロパティは、 <IMG>・ <INPUT>・ <TEXTAREA>・ <SELECT> などの領域の幅の最小値を指定する際に使用。

最小値を指定することで、これらの要素の幅を一定範囲内に収めることができる。

指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法がある。

 

参考URL

http://www.htmq.com/style/min-width.shtml

 

z-index: 1;

要素を重ねるとき、上か下か、その順番を指定するためのもの。

数字が大きいほど、重なりは上になる。

例）

#test1 { z-index: 1; }

#test2 { z-index: 2; }

この場合、「test2」の方が上に表示される。

しかし、各ブラウザでの表示チェックは必須。

IE5.5、IE6、IE7で、上に表示したいものが下に回りこんだりしてしまう。

Firefox3、IE8、Safari3(Win)に関しては、意図した通りに表示される。

原因は「 position: relative; 」にあるとのこと。

【例】

html————————————

<div id=”test1″>

<div id=”test1-1″>…</div>

</div>

<div id=”test2″>…</div>

—————————————–

css————————————-

#test1{ position: relative; }

#test1-1{ position: absolute; z-index: 1; }

#test2{ position: relative; z-index: 0; }

—————————————–

こういう指定をしていた場合、IE5～7では、positionにrelativeが設定されていると親要素の重なりが優先されてしまうらしい。

test1、test2でいうと順序はtest2が上。

それで、z-indexで指定してもtest2の方がtest1-1より上にきてしまう。

「z-indexを使うときは、親要素の優先順位に気をつけること。」

親要素にもz-indexをつけてみるのが最も早いとのこと。

 

参考URL

http://miyazakiweb.seesaa.net/article/117561935.html

 

list-style:none;

グローバルメニューなどを横にinlineレベルなどで表示した際に、リストの番号を表示させないようにしなければなりません。

その際に使うのがlist-style:none;。

スタイルシート list-style:none. リストのマークをスタイルシートにて表示しないようにするには、リスト全体であれば <ul>または、<ol> に、項目毎であれば <li> に list-style:none を設定する事で、マークの表示がなくなる。

 

参考URL

http://www.1uphp.com/con1/list/style-none.html

overflow:hidden;

領域内に収まりきらない内容を、どのように処理するかを指定するプロパティ。

visible 領域をはみ出して表示する （初期値）
hidden はみ出た部分を表示しない
scroll スクロールで表示する
auto

自動 （一般的にはスクロールで表示）

 

ブラウザ IE 7 Firefox 2 Opera 9
visible ［visible IE 7］ ［visible Firefox 2］ ［visible Opera 9］
hidden ［hidden IE 7］ ［hidden Firefox 2］ ［hidden Opera 9］
scroll ［scroll IE 7］ ［scroll Firefox 2］ ［scroll Opera 9］
auto ［auto IE 7］ ［auto Firefox 2］ ［auto Opera 9］
■visible
Firefoxでは領域をはみ出して表示しますが、IEとOperaでは領域を広げて表示してしまいます。ただし、表示モードが「標準モード」の場合には、IE（7以上）とOperaでも領域をはみ出して表示します。（領域をはみ出して表示するのが正しい解釈となります）
■hidden
上記の全てのブラウザで同じように表示されます。（はみ出た部分を表示しません）
■scroll
上記の全てのブラウザで同じように表示されます。（縦横のスクロールバーが表示されます）
■auto
上記の全てのブラウザで同じように表示されます。（縦のスクロールバーだけが表示されます）

 

参考URL

http://www.tagindex.com/stylesheet/box/overflow.html