layer13.com トップページで使った CSS のメモ

とりあえず組んだ、って感じだから、これから直していく予定ですが、
layer13.com トップページで使った CSS についての覚え書き。忘れんうちにメモ。

clearfix

参考に、というか、そのまま使わせていただきました。

.cf{ /zoom : 1; }
.cf:after{ content : ''; display : block; clear : both; height:0; }

border-radius
角丸


/* 全部 5px */
.hoge{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* 上だけ 5px */
/* 左上 右上 右下 左下 */
.fuge{
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}

div で border-radius を指定しても、その中の要素(h1など)は角丸にならないので、そこにも border-radius をつけないといかん。

box-shadow
箱に影


/* fff の背景を 15px ぼかし。 こりゃ影っちうよりグローだけど。*/
/* hオフセット vオフセット ぼかし 色 */
.hoge{
box-shadow: 0px 0px 15px #fff;
-moz-box-shadow: 0px 0px 15px #fff;
-webkit-box-shadow: 0px 0px 15px #fff;
}

text-shadow
テキストシャドウ


/* 色 hオフセット vオフセット ぼかし */
.hoge{
text-shadow: #333 -1px -1px 0px;
}

gradient
グラデーション


.hoge{
background-color: #484232; /* 背景色 */
/* 透明から白。 */
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgba(255,255,255,0.7)),
color-stop(1, rgba(255,255,255, 0))
);
background-image:-moz-linear-gradient(
center bottom,
rgba(255,255,255,0.7) 0%,
rgba(255,255,255,0) 100%
);
}

gradient は background-image に指定する。 -moz と -webkit で指定方法がぜんぜん違うのでめんどい。ハイライトっぽいのを付けるだけであれば、背景色は backgroud-color、ハイライトを background-image にしておけば、色を変更するのも楽。

ページの背景を薄く radial-gradient をかけようと思ったのだけど、 firefox 3.6.8 だと重い、Chrome 6.0.472.51 beta だとレンダリングが思ったように出ない(共に Ubuntu上) なので、却下。

そのた

  • position: static の位置指定はhtmlの左上からのみ?
  • layer13.com のテキスト部分だけ、Web Fonts 使ってます。

これから先も続けて見たいなと思ってもらえるコンテンツを作るにはどーすればいいんでしょう?

いわゆる web ページというものから、RSS とかブログパーツとか widget とか、そいういう情報のみを切り取って表示することができるようになるから、情報としての信頼度というか面白みを上げていかないといけないなー、と思った。

立ち位置というか、守備範囲というか、そういうのなのかなぁ・・・。狭く深くでとことん行くのもアリだし、一定の範囲でのまとめサイトっぽいなものもアリだし。どこで勝負するか考えないといかんのですかねー。

ま、このにっきは、思いつきというかネタメモというか愚痴というか、そんな感じになっているので、この話とは別。僕の場合、他人のことよりも、まず自分のことをなんとかせんといかん気が激しくするので、こんなこと考えてる場合じゃない気もするけど・・・。自分のレベルをもっともっと上げてかないと、この先仕事するのに厳しそうだし、なにより、どうやったらレベル上げられるかを考えるのが楽しい。

web作るときのサーバーでは、公開用、公開データチェック用、新機能追加テスト用がほしい。

何をいまさらって感じのことですが。ローカルでhtml作ってputして終わるならともかく、なにかしらサーバーでスクリプトを動かす場合には、同じような環境で3つ欲しいなぁ~って仕事してて思いました。

公開用は、ふつうの公開ページ。公開データチェック用は公開データのスクリプトを使いつつ、次に乗せるデータの確認に使うもの。現在公開されているバージョンのスクリプトで、データだけ更新していくのと、本番用にバグがあった場合にそのチェックに使ったりと、本番に載せる前の確認に使うやつ。新機能追加テスト用はtrunkって感じであるとよいのかも。

こいつらが同じ環境のサーバー内に virtual host かなんかであると色々と不安の解消になるんじゃないかと思いました。「あっちで動いてこっちで動かん」というのは焦ってるとやっちまうものですから、なるべく環境の差異はなくしたいですしねー。

で、公開データチェック用→公開用と、新機能追加テスト用→(公開データチェック用+公開用)、にデータを移行できるスクリプトを作っておくと、更新が楽にできるのかなとも思った。同じデータFTPであげなおすなんて無駄だし。ssh で入ってcp なり ln なりすればすむことだもんね~・・・失敗すると悲惨だけどw。

最近見落としが激しいから、しっかりしなくちゃいかんです。あとは、テストコードをしっかり書けるようにせんといかんです。

webを吐き出すスクリプトをリファクタリングするときに、前のものと出力が同じかチェックするスクリプト組んどくと便利

今は覚えてるけど、しばらくしたら忘れそうなのでメモメモ。

ガワは同じで内部構成だけ変更するときに、出力が同じものになるかチェックするスクリプト組んだら楽でした。ただただ http get したものを比較するだけなんですが、あると無いのとではかなり違います。目チェックだとどうしても見落としありますからねー。

ほんとは、ちゃんとテスト書けるのが理想なんだけど・・・。

htmlのページ考えるのって大変!

IE で、position:fixed; が効かない事をさっき知って、JavaScript で書くのめんどくさい~と思っているところだったりします。

css + javascript でゴニョゴニョやるのって、慣れていないせいもあると思うけど、かなり大変です。css を組むのにかなりの時間がかかっています。しかも、まだ叩き台を作るために、Windows の Firefox 1.5 と IE6でしかチェックしてないので、この後いろんなブラウザでチェックしないといかんという地獄が・・・。

考えたデザインになるべく近付けるためにどうするかを考えるのと、場合分けを考えるのが、ものすごく大変だなぁと、今更思っています。

デザインを実現させるのに正攻法でダメなときは、htmlの構造を変更するのか、cssのハックを使うのか、javascriptで処理するのか、あきらめて Plan B を考えるのか・・・。こんなことをウダウダウダウダ考えながらやってますが、html のページ考えるときは、こういうの多いですね~。

あと、場合分け。Javascript のオン/オフ、CSSのオン/オフ、画像のオン/オフ、Flash のバージョン とか、そういうやつですが、これも考え出すときりがなくなってきちゃって、こまってます。ターゲットとしているブラウザや検索エンジンと、サイトで提供したい機能をしっかり考えれば答えがでてくるんだろうけど。

どうやるにしろ、何かしら妥協をしないといかんわけだから、まずそのサイトの売りというか一番やりたい事の部分を仮組みしてみて、それを表示させるために必要となる機能を確認していけばいいのかなぁ。それをプライオリティの高いところから順番にやっていくと。**をやるにはどうしてもprototype.jsとflashが必要~とか。


ん~・・・。今風の組み方でページ組んでる経験が不足してるってのが一番問題なんだろうけど、はたしてその経験値を上げるのが、今の自分にとって最良の選択かというと微妙かも。 ある程度の知識は必要だと思ってるけど、小手先のテクニックじゃなくて、それ以前の「このデータはどうやって見せたら良いのか」がまだ全然わかっていないから、そこからやっていかないとダメなんだろな。というか、今一番やりたいのはそこんところかも。実際、アクセスログとか、作業ログのデータとか見ると、どうやったらこの中から情報が取れるかを考え始めて、楽しんでしまうし。

どういう情報が欲しいかと、どうやったら見付けやすくなるか、を考えるのが大切なのかな。どういう情報が欲しいかを知るには、相手が何を考えているのかを考えないといかんのか。

遊んでるヒマ無いよなぁ・・・

画像をボックスの中の真ん中に表示したいんだけど、やり方わからない。

photogallery などで、メニュー部分のサムネイル表示を作るときのことを考えてて、壁に。

htmlが、

<ul>
<li><a href="#"><img src="foo.jpg" alt="foo" /></a></li>
<li><a href="#"><img src="bar.jpg" alt="bar" /></a></li>
...
</ul>

で、css が、

a{display: block; width: 120px; height: 120px;}

のとき、かつ、画像の幅と高さが一定ではない場合(aのwidth/heigth以内で)、画像を、a のボックス内の真ん中(水平/垂直ともに)に表示させる方法がわかりません。

僕は、こういうときは a 要素のマウスの反応する領域を一定に保ちたくなるらしいです。a:hover の領域を確保したいといいましょうか・・・。

幅が固定のエリアの場合は table を使えば逃げられるんだけど、可変エリアで使うとき li {float:left;} にして、列数を動的に変更させたいなぁなんて思いましてね。

一番簡単なのは、サムネイルのサイズをキッチリ決めてしまう事なんだろうけど、なんか悔しいし、他にも javascript を使った逃げもできそうだけど、これもスマートじゃないし。

ただの勉強不足ならいいんだけど、力技しか無理なのかなぁ・・・。