カテゴリー:2006年12月

3カラムレイアウトで、両端を可変にする。(リキッドレイアウト)

2006年12月29日 09:00

以前、中央を可変でのリキッドレイアウトについて書きましたが、とあるmixiのコミュ内で、両端を可変にするリキッドレウアウトについて書かれていたので、面白くて自分も作ってみました。(mixiコミュのがもっと高度でしたが)

ちなみにサンプルはこちら

*{ margin: 0; padding: 0; }
#wrapper{
background-color: #5f5;
width: 100%;
}

#wrappr{
zoom: 1; /* for IE5.5-7 */
}

#wrapper:after{
content: ".";
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}

#centerContent{
float: left;
width: 800px;
}

#leftSide{
float: left;
width: 50%;
margin-right: -400px;
}

#leftSide p{
background: #f55;
margin-right: 400px;
}
#rightSide{
float: right;
margin-left: -400px;
width: 50%;
}

#rightSide p{
background-color: #55f;
margin-left: 400px;
}

簡単に説明すると、左側のbox、中央のbox、右側のboxをそれぞれdivで定義。
そして中央にだけ固定幅を設定し、両端のboxには幅50%を指定。
そして左側boxと、中央boxにfloat:leftを定義。右側boxにはfloat:rightを定義。

ただ、これだけではカラム落ちしてしまうので、ここでちょっと工夫をします。
まず、左側と右側の中にp要素を配置します。
そして、左側boxのdivにネガティブマージン(margin: -○px)を設定。
(※○は、固定幅にした中央boxの幅の半分の値)
さらに、左側box内のp要素に上で設定したネガティブマージン分、今度は普通にマージンを取る。

そうすることで、中央boxの中身が左側にかぶさってきます。
ただ、pに対してマージンを取らないと内容が重なってしまうため、pに対して通常のマージンを取ることでこれを回避します。

あとは、右側にこれとまったく逆の設定をするだけです。
まとめると、両端の幅を50%に設定したあとで、中央box分の領域を無理矢理こじあけることで、両端がリキッドレイアウトになる、ということです。

これはすごい

2006年12月19日 21:19

PHPSPOT開発日誌 | 便利すぎて困る程のFireBug1.0

こんな記事を見つけた。
Firefoxのプラグインなのだが、閲覧しているサイトのあらゆるデータを覗き見れる感じ。
HTML、CSS、Javascript。
しかも、それら全部が編集可能だからすごい。(といっても、実際のサイトが修正されるわけではなく、見ている状態が変化するだけ。当たり前だけどw)

さらに、Javascriptのデバック機能までついてるからこれは便利。
早速明日、会社に行ったらインストールしてみよう。
・・・ただ、Mac版に対応しているかが不安だ・・・。

明日から、またコーディングが楽しくなりそうだw

プルダウンメニューをさらに作り込んでみた

2006年12月14日 10:38

ということで、連日同じエントリーですが。
もう少し作り込んで、今回は別ページでサンプルをアップしてみました。

変更点としては、前回の物に比べ、色などのスタイルを修正。
加えて、下に階層が含まれているメニューについては、右端に▲のマークを
自動で追加するようにしてみました。
動作テストは「WinIE6、Firefx1.5、2.0」です。

※干し梅さんより指摘を頂き、サンプルを修正しました。
XHTMLがValidになるように修正しました。
>>サンプルページ
>>サンプルダウンロード

※サンプルダウンロードには、htmlファイル、cssファイル、jsファイルと、中で使われている画像ファイルが含まれています。

まだまだ改変の余地ありなので、改変や使用は完全フリーです。(というか、ダウンロードしてくれる人がいるんだろうか?w)
ただ、できればコメントとかくれるとさらにやる気がでるのでうれしいですw
(なんか変なとことかあったら言って下さい…)

入れ子のプルダウンメニューを作る

2006年12月13日 15:30

前回、CSSによるポップアップメニューでポップアップメニューを作成したけど、今度はそれをさらに発展させて入れ子のポップアップメニュー(プルダウンメニュー)を作ってみた。(というか、案件でそういうのを作ることになって、サンプルを作ったのでアップしてみただけだけどw)

ただ、IEでも動作するようにするため、Javascriptを介入させている。
IEを省いて、モダンブラウザのみで動けばいい、ということであればCSSだけでも実現できるようだ。
faLogを参考にしたので、CSSだけで実現させたい場合は参考にしてください。

ちなみに、入れ子を複数指定しても大丈夫なように作ってます。
<li>要素の中に<ul>要素を入れ子にしていくだけで、階層構造が作れるようになってます。

▼サンプルの解説
【サンプル】

タグ名から要素を検索する getElementsByTagName

2006年12月11日 10:36

ということで、タイトル通りですw
このメソッド(でいいのかな?)は、前々から知ってはいたんですが、
使い方を知りませんでした。そして、調べていたら
なんと前からほしい! と思っていたメソッドではないですか!

簡単に説明すると、

element.getElementsByTagName('タグ名');

とすると、elementで指定した要素の中に含まれる
'タグ名' を持つ子要素のリストを返す、というもの。
これで、親要素さえ取得できれば、その下の子要素にもアクセスできるようになる、という。

これを知らないときは、アクセスしたい子要素全部にidを付けてましたよ…。
ソースが無駄に増えるし、scriptも汎用性なくなるしで色々苦労した覚えが…。
でもこれからはそんな悩みもなくscriptが組める!

onmouseoverのイベントで関数に(this)でオブジェクトを渡してやって、
さらにその子要素にアクセスできれば、idなんかはできるだけ少なくて済みそうです。

知ってる人は知ってるだろし、わりと当たり前のことかもしれないけど、
わりと目からウロコだったので備忘録的に書いてみました(*'-')

要素を近づける

2006年12月 7日 14:56

ちょっとやってしまった話。
仕事の話だけど、ひとつ、レイアウトの話があった。
あまり時間なく、わりと急ぎでやったもの、というのもあるがまぁ言い訳かな…。
色々とサイトを見て、自分の中でデザインを考え、どうしたらその情報を良く見てもらえるか。
それを考えて出した答えのつもりだったのだけど…。

先輩に見せてチェックしてもらう。が。
かなりのダメ出し(´;ω;`)
色々指摘されたけど、どれもが「なるほど!」と思うものばかりだった。
それも、知っていることばかり。

人のデザインを見て、あれこれ考えたり、注文をつけたりするのはやはり簡単なんだ、ってことだと思う。
実際、自分が作り始めると、どうしても自分の考えや主観が強調されてまわりから見たらどうか? という目がなくなってしまう。
また、分かっていること・知っていることでも、ふと忘れてしまっているときがある。
今回のことで、またさらに認識を深めなければ、と思った要素を列挙してみる。

  • 分かりやすく、を意識する。(意味的に近いものは配置も近づける)
  • 更新があり、毎回内容が変わるものに関しては、どの要素が入れ替わり、どう意味するのか、ルールを作ってデザインする。
  • 小手先の見せ方の変化、ではなく大局を見据えたデザインを心掛ける。
  • 複数案のデザインを見せる場合は、意味のある、デザインの差別化を図る。
といった感じだ。
どれも、一度や二度は目にしている法則だったりするし、以前はそれを意識しながら作成していたりするのに、それがぽろ、っと抜け落ちてしまっていた。

初心忘れるべからず、とはよく言ったもんだ。

DIV要素を垂直方向に中央寄せする

2006年12月 6日 08:51

PHPSPOT開発日誌

こんな記事を見つけた。
BOX要素を垂直方向に中央寄せするには、テーブルくらいしかできない。
そんな中、CSSでそれを実現してしまおう、というのがこの記事だ。
中を読んでみたけど、わりと強引な感じ。

ソースサンプル

<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div#shiv {
background: transparent;
width: 100%;
height: 50%;
margin-top: -50px;
float: left;
}
div#blueBox {
background: blue;
width: 100px;
height: 100px;
clear: both;
position: relative;
top: -50px;
}
/* Hide from IE5mac *//*/
div#shiv {
display: none;
}
html, body {
height: auto;
}
/* end hack */
</style>
</head>
<body>
<div id="shiv"></div>
<div id="blueBox"></div>
</body>
</html>


簡単に説明すると、まずhtmlとbody要素にheight:100%を指定。
これでどのブラウザでも画面の縦いっぱいにBOXが展開されます。
そして、その中にDIVをheight:50%で配置。
こうすることで、このDIV要素の下端が画面の中央になります。
また、heightと一緒に上marginに「中央寄せしたいBOX」の高さの
半分の値を設定します。

そしてさらに、そのDIV要素の下にDIVを配置。
そこへ想定している高さを指定し配置することで中央寄せとなります。
つまり、最初のDIVで画面中央までBOXを生成し、
さらに次のDIVの高さの半分だけ上にBOXを押し上げることで
結果的に中央寄せになる、というものですね。
かなり強引な上に、高さの決まったものしか中央寄せできないので
実際に使えるかは未知数ですが…。

てか、なぜBOX要素の垂直方向への中央寄せがないんでしょうかね?
結構必要だと思うのですが…。
次のCSS3に期待しましょうw