苦手である。
超苦手である。
レイアウト系は全部苦手ではあるが、CSSは覚えることができないのである。
このサイトを頼りに、
CSSで最初に覚えておきたい３つの要素、ふむふむ、
セレクタ
プロパティ
値
知っとる。分かっとる。
何が分からんのか。そうだ！プロパティの種類だ！
color 分かる
background
background-color だいじょぶだ
font-family
font-weight たぶん、だいじょぶだ
line-height ふんふん
text-align ・・・・うん
width
height ダイジョブだ
margin
padding ま、な。何とかな。
border 問題ない
position むむ。。む。
display あ、いや、えっと。
float あ、う、知ってるけど。。ちゃんと使えてない
z-index 知りまへん
という結果とあいなってございます。
怪しいものはあれど、まったく何もわからんわけでもない。
しかし組めんものは組めんのだ。
うーむ。これは「釘の打ち方ものこぎりの使い方も知っているが、犬小屋は作れない」みたいなものなのだろうか。。
だいたい、ボックス関連が分からんのだ。
レイアウト音痴はきっとみんなそうなのだ。
Java/SwingのときもJPanelに色を付けて並べる練習をしたではないか。きっとそういうことだ。
だからきっと、body全体に色を付けるところからやるのだ。そうなのだ。
<html>
<head>
<metacharset=”UTF-8″>
<title>CSS</title>
<style>
body{
background: #eeeeee;
}
</style>
</head>
<body>
<h1>CSS入門</h1>
<p>はじめてのCSS</p>
</body>
</html>
はい。font-family無視。
これで、画面全体に色がつく。
このぐらいは分かる。
分かっちゃいてもエディタの前で呆然と立ち尽くす私がいる。
このCSS嫌いは根が深い。
<style>
body{
background: #eeeeee;
}
div{
background: #ffffff;
}
</style>
</head>
<body>
<div>
<h1>CSS入門</h1>
<p>はじめてのCSS</p>
</div>
</body>
これだって分かるわい。
div{
background: #ffffff;
width: 300px;
}
これも大丈夫だ。
padding: 30px;
この辺から怪しいですよ。すでに。
これ、予想外の動きしました。
値を
一つ指定 [上下左右]
二つ指定 [上下][左右]
三つ指定 [上][左右][下]
四つ指定 [上][右][下][左]
これがね、なんか釈然としなかったわけです。
なんなんですか、この割り振り。
と思ってこうやって書き出してみると、
そうか、全部「上」からか。。
なんか、納得いった。
text-align: center;
大丈夫。知ってる。
borderはぶっ飛ばしいぃの、
margin: 30px auto;
怪し～、チョー怪しい。
きっとmarginもpaddingの親戚やろ？
つうことは、最初の30pxは上下やろ。で、autoが左右や。
どや、決まりやろ。
ほんで、左右がまん中にくるんやろ？上が30px空くんやろ？
だったらautoだけやったら、上下左右まん中で画面のまん中にくるかと思いきや来ないねん。
position: absolute;
を付けろと。
widthとheightを決めろと。
ここまではまぁ、理解は出来る。
まん中に置くものの大きさが分からないと真ん中に置けないやん、ということですよね。
しかし、
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
こいつらはなんだ。
説明を読むと、上下左右端からの距離でposition absolute,relativeを指定したときに指定できると。
なんか釈然とせん。
margin: auto;
はこれだけで左右の中央に出てくる。しかし、positionが出てくると、これらみんな勢ぞろいしないといないも同然となる。
釈然とせん。