スポンサーサイト

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

CSS2の勉強とりあえず一段落

CSS とはなんだろうかを読了。
テーブル関連は「使うときにちゃんと見よう」と読み飛ばしたが、それ以外は一応理解できるまで読んだ。
理解が怪しいところはここでサンプルの動作確認をした。

floatで段組してるCSSを見て、なぜ段組ができるかを理解できる程度にはなった。

実際に使ってみないことには身につかないので、何か作ってみたいのだが、これと言って作りたいものが浮かばない。
使い道のあるページじゃなくて、とりあえず何か動かしてみるテストページでも作るか。
スポンサーサイト

CSSの max-width/min-width/max-height/min-height についてまとめてみた

昨日に引き続き、CSS とはなんだろうか を読んだ。
displayやpositionといった視覚フォーマットモデルに関する部分は、文章を読むだけでは理解しづらい。
サンプルを例示している以下のサイトが役に立った。
スタイルシート(CSS)|PHP & JavaScript Room

今日は max-width/min-width/max-height/min-height でハマった。
widthやheightの値がこの範囲で変化するのだが、「何によって変化するのか?」がわからなかった。
そこで次のようなテストページを作ってwidth/height関連の値を変化させて実験してみた。
(前略)
<style TYPE="text/css">
<!--
.parent { max-width: 500px; min-width: 200px; max-height: 30em; min-height: 20em; background-color: green;}
.child { width: 300px; height: 40em; background-color: yellow;}
-->
</style></head>
<body>
<div class="parent"><div class="child"></div></div>
</body></html>
結果は次のようになった。

<注意>Firefox3.6.7での結果です。他のブラウザでは異なる結果になるかもしれません。
以下は、親要素が<body>の要素についてです。
・要素のwidth
ウインドウの大きさによって変わる。子要素のwidthには無関係。
ウインドウの大きさに合わせて、min-width から max-width まで変化する。
ウインドウを大きくするにつれて大きくなり、最大max-widthまで大きくなる。
ウインドウを小さくするにつれて小さくなり、最小min-widthまで小さくなる。(それよりもウインドウが小さくなると横スクロールバーが表示される)
子要素のwidth > 親要素のwidth の場合、子要素がどう表示されるかは親要素のoverflowに従う。

・要素のheight
子要素のheightによって変わる。ウインドウの大きさには無関係。
子要素のheight < min-height の場合、要素のheightは min-height になる。
max-height > 子要素のheight > min-height の場合、要素のheightは子要素のheightになる。
子要素のheight > max-height の場合、要素のheightは max-height になる。
子要素のheight > max-height の場合、子要素がどう表示されるかは親要素のoverflowに従う。

widthとheightの動作がこのようにまるっきり違うことは、HTMLにちょっと詳しい人には常識なんだろうな。
そんなわけで、今日は3時間かけて 2-4.視覚効果 までしか読めませんでした。

CSS2の勉強開始

CSS2の勉強に着手した。
前回のブログから2日間の空白があるが気にしない。

とりあえず、このサイトを一通り読んでみる。
CSS とはなんだろうか
last modified: 04th/Apr./2004 というのが気になるが、CSS2なので特に古くは無いのかなと思う。

1時間半ほど読んで、2.1 ボックス・モデル まで読了。
あと3時間ほどかければ全部読めるかな。

CSSを動的に変化させて動きのあるページを作るための勉強だが、
どんなページを作ろうかイメージが湧いてこない。
勉強しているうちに湧いてくるだろうか。

CSSを使って、画像を重ねて表示してみた

画像など重ねる、レイヤー表示みたいなのをどうやっているのか調べてみた。

CSSで以下の属性を使えばいい
・positionでabsoluteを指定
・top left bottom right で位置指定
・z-index で表示順指定。数値が大きなものほど前面に表示される

これを使って、「小さな画像をクリックすると、大きな画像をポップアップするJavaScript」を作ってみた。
仕様はこんな感じ
・縮小した画像と、大きな画像を同じ親要素の子要素として記述
・大きな画像は style="display: none" にしておく
・縮小した画像をクリックすると、縮小した画像の上に大きな画像を表示(style="display: inline" に変える)
 大きな画像が表示されても、他の画像の位置は変わらない。大きな画像と重なる部分は表示されない
・大きな画像をクリックすると、画像が消えて下層の縮小した画像が表示される
・他の縮小した画像をクリックすると、現在表示されている大きな画像は消えて、クリックした画像に対応する大きな画像が表示される

大きな画像を表示する位置を指定するのにちょっと手間取った。
縮小した画像と同じ位置に表示するには、縮小した画像と大きな画像のペアごとに親要素を記述し、
親要素に style="position: relative" を指定すればいい。
そして、子要素で style="position: absolute" とすれば、親要素からの絶対位置になる。

さて明日は何をしようか。PHPの勉強に入ろうか、jQueryに手を出してみたい気もする。
プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。