メモ -ＣＳＳ

個人用メモ

ブロック（div 区切り）のレイアウト

・左上が基点
・指定しない時、ブロック要素は親要素の幅いっぱいに広がり、縦に並ぶ
・位置

・IDは任意。わかりやすい名前をつけないと後でわからなくなる　×style1 やstylec などはダメ
・width と margin は同時に指定できる

左揃えなら右の空白、
右揃えなら左の空白、
中央揃えなら左右両方の空白を調節することで配置する時。必ずwidth　も指定。

左揃え　　margin-right: auto;
右揃え　　margin-left: auto;
中央揃え　margin-left: auto; margin-right: auto;

(または margin:0px auto 0px auto;）

 

フロート　float
指定された要素を左または右に寄せて配置する。必ずwidthを指定。
float: left; 左寄せ

float: right;　右寄せ

 

 

 

 

 

 

 

 

 

 

フロートを　%　で指定する場合

合わせた数値が100% だとレイアウトがくずれる。99%以下にする。

floatしている要素の親要素にclearを指定するとレイアウトがくずれる。

中央揃え　　　　　　　　　　

レイアウト

[html 　body より　]

<body>

<div id="box">
<div id="header">

</div>
<div id="menu">
</div>
<div id="contents">
</div>
<div id="footer">

</div>

</div>
</body>

[CSS]

body{ text-align:center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:small; color: #000000; background-image: url(image/back.gif);}

#box{ width: 770px; text-align:left; margin:0px auto 0px auto;}

#header{ width: 770px;height: 100px; background: url(image/tittle.jpg) no-repeat;}

#menu{ float: left; width: 140px; margin:0px auto 0px auto;}

#content{ float: right; width: 600px; margin: 0px; padding: 10px;}

#footer{ width: 750px; margin-right: auto; margin-left: auto; padding: 10px; clear: both; }

body 全体を指定

ＩＥ6用に、body に text-align:center;　を加える

背景は指定なしだとタイル状に並べられる

box で中央揃えにする

header 背景として画像を入れた時

 

menu 左寄せ

content 右寄せ
menu、contentのwidthは、770ｐｘから padding: 10px;分を引いた数値で決める。この場合真ん中に10ｐｘあけてある。

footer　回り込みを防ぐために clear: both;　を入れる

印刷用ＣＳＳ
印刷用CSS print.css を作り、b.css で作られた　a.html に 設定
a.html ファイルの　<head>〜</head>に
順序は　b.css の後に
<link href="b.css" rel="stylesheet" type="text/css" media="screen,tv" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

印刷用スタイルシート
※b.css と同じ形式で作らないと反映しなかった。

テーブルレイアウトしている時
b.css media="all"
print.css media="print" で印刷した場合、
レイアウトのテーブル線も表示されてしまう。

b.css media を指定しないで
print.css media="print" で印刷した場合、
テーブルは印刷時に一切ボーダーがひかれていない状態で印刷される。
----------------------------

印刷しないheader 　 menu　footer　を　display:none　にして

contents　が中央配置になるようにした

#header { display:none;}

#menu { display:none;}

#footerr { display:none;}

#contents { margin-left: auto; margin-right: auto;}
----------------------------
◆改ページ
class名をつけ設定（例　printpagetop　）

print.css (印刷用スタイルシート) に

.printpagetop{ page-break-before:always; }

a.html ファイルの
body 改ページ場所に（小見出し、またはその上などが良い）
<○○ class="printpagetop">
万能ではないみたい？

----------------------------

◆ページTOPへ　を消す
class名をつけ設定（例　printpagenon　）

print.css (印刷用スタイルシート) に

.printpagenon{ display:none; }

a.html ファイルの
body 表示させない部分に
<○○ class="printpagenon">
----------------------------
印刷スタイルが無視される--本文に直接スタイルをしているとき

ページTOPへ