オブジェクト指向プログラミング

Ruby以前のお勉強　「オブジェクト指向プログラミング」について

そもそもプログラミング方法は2つある。
・手続き型プログラミング
　　何らかのシナリオにしたがって順番に処理を記述するプログラミング方法
・オブジェクト指向プログラミング
　　データを中心にモジュール化してプログラムを構成するプログラミング方法
　　オブジェクト指向プログラミングで、その処理対象となるデータを「オブジェクト」という。

Rubyはオブジェクト指向プログラミング言語である。

IE6に負ける。。。

どのブラウザでも同じように表示させるのは、とても難しい。
いまさらだけど、痛感している。

結局「中央可変の３段組みレイアウト」は、方法その３(テーブル)を使うことになった。
やっぱりテーブルは強い！崩れない！
なんとなく避けてきたけど、すべてのブラウザに対応できるコーディングを考えたときテーブルは必要な技術だと思った。

でもどうしてほかの方法ではできないのだろう･･･
いつか分かるといいなぁ。

Ruby①はじめてのプログラミング

これはいい！！

私はプログラム素人ですが、この本を読んで、今までいまいち曇り空だった部分がいっぱい解消できたのだ＾－＾
パソコンのいろはからハードウェアの構造、プログラムとは？ってとこから細かく解説してくれる。
特に文字コードとかコンソールの使い方などは、私にはすごくためになった。
最初からこの本に出会っていれば、もっと理解できたのになぁ～

どうやら3番まであるらしい。
今度こそ挫折せずにRailsを頑張りたい☆

IEでボーダーが表示されない！？

例の案件をやっていて、ふと気付くとIEだけボーダーが表示されていない！！
しかもIE6もIE7も両方とも。。。
他のブラウザではバッチリなのに、全くやってくれます=3　フゥ。

いろいろ調べた結果、これで解消されました。

★症状★
IEでfloat内のコンテンツ、もしくはfloatに接する部分に指定したborderが一部表示されなくなる
★対処法★
borderを指定した要素にline-height:1emを指定する

なぜか今回の場合、line-height:1.2emとかにしてもダメだった。
このバグ、Peekabooっていうらしい。
勉強になります。

中央可変の３段組みレイアウト

仕事つながりで、CSSコーディングの依頼をもらった。
久々に気合いが入る。

が、しかし！今回は予想以上に険しい感じ。
相変わらずIE6に悩まされます…
というわけで、今回のメイン「中央可変の３段組みレイアウト」についての覚書き。

■方法その１■
ネガティブマージンで作る
<div id="wrapper">
<div id="container">
<div id="main">メインコンテンツ</div>
</div>
<div id="left">左コンテンツ</div>
<div id="right">右コンテンツ</div>
</div>

#container {
float:left;
width:100%;
}
#main {
margin-left:180px;
margin-right:230px;
background:yellow;
}
#left {
width:180px;
margin-left:-100%;
float:left;
background:red;
}
#right {
width:230px;
margin:-230px;
float:left;
background:blue;
}

■方法その２■
左カラムはfloat:left、右カラムはfloat:rightを指定

<div id="left"左コンテンツ></div>
<div id="right"右コンテンツ></div>
<div id="main"メインコンテンツ></div>

#left {
float:left;
width:180px;
background:red;
}
#right {
float:right;
widht:230px;
background:blue;
}
#main {
margin-left:180px;
margin-right:230px;
background:yellow;
}

■方法その３■
テーブル(width="100")を使って、真ん中のカラムはwidth:100%を設定
<table>
<tr>
<td id="left" valign="top">左コンテンツ</td>
<td id="main" valign="top">メインコンテンツ</td>
<td id="right" valign="top">右コンテンツ</td>
</tr>
</table>

table {
width:100%;
background:green;
border-collapse:collapse;
}
td#left {
width:180px;
background:red;
}
td#main {
background:yellow;
}
td#right {
width:230px;
background:blue;
}

いろいろあるんだなぁ。
今回は１の方法を採用してみまーす！