I7ll

Webデザイナーが, Webについて,デザイン, 技術トレンド, レビューなど, あれこれ綴っていきます。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


完全CSSレイアウト

完全CSSレイアウトのお勉強

SEO対策に有効、ソースが軽い、メンテナンス/見た目がいい(微妙)
今までスピード重視だったので割とtableタグの多様になってしまったが、
フレームはちゃんと作成した方がいいだろう、という事で.

■CSSレイアウト
positonプロパティの有効利用
 
static 通常の位置に表示する。この値が指定された場合,
後述するtop,right,bottom,leftの各プロパティは適用されない。

relative staticで表示されるべき位置(つまり通常の表示位置)を基準として,
top,right,bottom,leftの各プロパティによるオフセットで
表示位置を決定する。

absolute 通常の表示位置とは無関係に,包含ブロックからの距離を
top,right,bottom,leftの各プロパティで指定されることによって,
表示位置を決定する。

fixed absoluteと同様の方法で位置を決定したあと,それを何かに固定する。
連続メディア(スクロールメディア)の場合は,viewportに固定され,
スクロールに流されずに常に表示されるようになる。ページメディアでは,
ページに固定される。
■参考サイト
http://css.uka-p.com/ absoluteとfloatを対応すれば、ちゃんとしたモノができる.

これを利用して、3段組みレイアウトを考える.
これを対応するdivタグで使用すればいいわけだ.

/*------------------------
CSS 3 column layout
------------------------*/
.main_flame
{
  position:absolute;
  top:0px;
  left:0px;
background-color:#004400;
color:#111111;
width: 760px;
height:420px;
margin:10px;
}

.header
{
clear:both;
background-color:#111111;
color:#FF0000;
width:720px;
height:40px;
margin:10px;
padding:10px;
}

.conts_left
{
  position:absolute;
float:left;
text-align:left;
  top:0px;
  left:0px;
background-color:#111111;
color:#FF0000;
width:100px;
height:400px;
margin:10px;
padding:10px;
}

.conts_center
{
  position:absolute;
  top:0px;
  left:130px;
background-color:#000033;
color:#FF0000;
width:440px;
float:left;
height:400px;
margin:10px;
padding:10px;
}

.conts_right
{
position:absolute;
top:0px;
left:0px;
background-color:#FF0000;
color:#333333;
width:100px;
float:right;
height:400px;
margin:10px;
padding:10px;
}

.footer{
background-color:#111111;
color:#110000;
width:720px;
height:30px;
margin:10px;
padding:10px;
}

« MovieClip リンケージシンボル|Top|XOOPS Cube Install... »

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

http://i7ll.blog11.fc2.com/tb.php/49-be77226f

Top

HOME

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。