/// BANGBOO BLOG ///

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

April 8, 2006

The beginning of CSSレイアウト
left
right



<html>
<head>
<style type="text/css">
#box { text-align: center;}
#campas { text-align: left; margin-left: auto; margin-right: auto; border: 3px solid #cccccc; width: 500px;}
#lbox { position:relative; margin: 10px; width: 210px; left: 10px; border: 3px solid #cccccc; float: left; }
#rbox { position:relative; margin: 10px; width: 210px; right: 10px; border: 3px solid #cccccc; float: right; }
</style>
</head>
<body>
<div id="box">
<div id="campas">
<div id="lbox">
left
</div>
<div id="rbox">
right
</div>
<br style="clear: both;" />
</div>
</div>
</body>
</html>

////////////////////CSSレイアウト(FireFox-IE対応)////////////////////////
text-alingは本来インライン要素を中央揃えにする。
divはブロック要素なので、中央揃えにするときはmargin-right:auto;とmargin-left:auto;を使用する。

body {text-align:center;}をレイアウトのために使用するのは適切でない。
余計なところまでセンタリングされてしまうことにもなる。
しかしながら他の要素であればレイアウトのためでも現実的には許される。#box { text-align: center;}

2重にセンタリングをIEバグのために行う。
- センタリングしたい要素にmargin-left: auto; margin-right: auto;として標準準拠でセンタリング
- その親でもIEバグ対策としてtext-align: center;を指定
- しかしその子の中では余計なところもセンタリングされるので再びtext-align: left;として戻す
IEバグについて詳しくは、
http://www.mozilla.gr.jp/standards/webtips0004.html

回り込み解除はスタイルシートで次に来る要素にclear:bothとしておいてもいいのですが、 1箇所だけのために外部ファイルに書くのも面倒。<br style="clear: both;">=<br clear="all">

単位の省略はしない

float要素は子要素とみなされず親要素を突き抜けてしまう 親要素にoverflow:auto;を指定するか、親要素のうしろに:afterで見えない要素を追加し,clear:bothする

////////////////////CSSレイアウト////////////////////////
コンテンツを<DIV>で羅列し、CSSでレイアウトを整える。

position: relativeの要素の子にposition: absoluteの要素を入れることで的確な位置を指定することもできる。
CSSのネストを行うとスタイルを有効にさせるところを細かく設定できる。
#p1{ xxx }
#p1 h1 { xxx }
<div id=p1><h1>xxxxx</h1>xxxxxxx</div>

画像の配置を以下のようにして行うことも可能。
#p1 h1 { background: url(h1.gif); width: 200px; height: 90px; }
#p1 h1 span { display: none; }
<div id=p1><h1><span>代替テキスト</span></h1></div>

同じidを複数の場所で指定しない、複数で利用する場合はclassを使用する。

このブログはCSSでレイアウトを整形しているのだが、Firefoxで崩れるとは知らなかった。標準的なCSSを使用しているつもりだったのだがIE特有のものだったためだ。2004年くらいはこれで大丈夫だったのだが。。いくつかCSSレイアウトのコツをまとめたのだが、いくらかはout of age?勘所ははずしていないと思うが、しかし細かいところで全然違うなぁ。継承の考え方が違うのか?→単位(px)を省略しないようにするとOK


twitter
Hatena
Google Buzz
newsing
Yahoo!
Buzzurl
Technorati
del.icio.us
Choix
Iza!
Livedoor Clip
Facebook
Evernote
 

Posted by funa : 11:22 PM | Web | Comment (0) | Trackback (0)


PhotoGallery


TWITTER
Search

Mobile
QR for cellphone  QR for smart phone
For mobile click here
For smart phone click here
Popular Page
#1Web
#2Hiace 200
#3Gadget
#4Column
#5RSS Radio
#6Ressentiment
#7Being The Ideal Boss
#8Estimation
#9Flavor
#10PC SPEC 2007.7
#11Watch Out
#12Darwinian Theory Of Evolution
#13Doing?
#14Re-install my OSXP
#15Europe
#16Make your front wheel right
#17Cache
#18通話SIM
#19セレブ
#20GoogleMap Moblile
#21Plasticity
#22People never say truth, Just do it, observe them, Anything is impossible
#23The black sheep to the black ship
#24The team that always wins
#25Optimost
#26Who's BAT? (Batch file)
#27Automobile Inspection
#28α7Ⅱ
#29Detected as bad site by virus company
#30Windows env tips
#31/// BANGBOO BLOG /// From 2016-03-01 To 2016-03-31
#32Ora Ora Ora Ora Ora
#33ahe-ahe is goooood for your brain
#34Summer time blues
#35SN
#36Win7 Insco
#37Great games before VR
#38無料ストレージ
#39RAMちゃ~ん
#40Wifi security camera with solar panel & small battery
#41ライブ
#424 Pole Plug
#43I want to ride my bicycle
#44System designing
#45It tests you
#46Hiace oil change
#47/// BANGBOO BLOG /// From 2012-08-01 To 2012-08-31
#48Bike
#49Norton Internet Security
#50F☆ck CSS
#51ZETA Pivot
#52Fail Safe & Fault Tolerance
#53株式取引モバイルサイト - TOKIO Shock Exchange
#54CSS Selectors
#55Shooting star
#56Information privacy & antispam law
#57Contaminated
#58映像制作
#59/// BANGBOO BLOG /// From 2015-08-01 To 2015-08-31
#60Sharpen up
#61角印
#62Google Sitemap
#63Tools - free icon etc
#64Bank transfer fee
#65Positive
#66Oxcelo
#67Victorinox PLI traveller
#68Ant
#69XSS, CSRF, JSOP, SSO
#70Politics
#71Emancipation Proclamation
#72Street fighter 4
#73/// BANGBOO BLOG /// From 2016-07-01 To 2016-07-31
#74Fork OH
#75My mic
#76ウェブサイトサムネイルAPI
#77Big D
#785-year-old shit
#79True April Fool
#80Spy Extraction
#81ApacheBench
#82/// BANGBOO BLOG /// From 2017-12-01 To 2017-12-31
#83Tora Tora Tora
#84Engine OH
#85After Effects
#86The beginning of CSSレイアウト
#87Online softwares
#88Rope
#89PC SPEC 2011.10
#90Cisco Catalyst
#91Photo Boo
#92How to make a bomb - 爆弾の作り方
#93着メロの掲載っていくらかかんの?
#94Assertive Behavior
#95Movable Type
#96Personal Information Privacy Act
#97Link Bait
#98Availability
#99One of the net service TVCM
#100/// BANGBOO BLOG /// From 2014-07-01 To 2014-07-31
Category
Recent Entry
Trackback
Comment
Archive
<     September 2019     >
Sun Mon Tue Wed Thi Fri Sat
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Link