というときように .t という クラスを用意すると便利です。
.t{
border:solid 1px #f00;
margin:-1px;
}
2010年12月06日
テスト用CSS
このdiv がどの範囲をボックスしているかわからない。
というときように .t という クラスを用意すると便利です。
.t{
border:solid 1px #f00;
margin:-1px;
}
というときように .t という クラスを用意すると便利です。
.t{
border:solid 1px #f00;
margin:-1px;
}
2010年11月10日
リキッドの画象（バナーとか）を、自動でスライドする。
jquery を使っています。
http://jquery.malsup.com/cycle/
#jquery.cycle.lite.min.js
サンプル：
<script type="text/javaScript">
$('#hoge').cycle();
</script>
<div id="hoge" style="width:100%;">
<a href="#" style="display:block;background:url(hoge1.jpg) center;"></a>
<a href="#" style="display:block;background:url(hoge2.jpg) center;"></a>
</div>
#最初 cycle.all を使ってなんとかしようとしてたんですが画像がリキッドの場合どうにもならず、cycle.all.js を改造しようと思って開いたら難しかったので cycle.lite.js のほうを弄ろうとしたら all と lite で処理系統が違うことが発覚。実はある意味で lite のほうが汎用的だったのでそちらを使うようにしたら簡単に解決しましたここまでの所要時間5H (； ･`д･´)
それはそれとしてcycle.js の作者さんに感謝感謝m(_ _)m
2010年08月05日
セレクターのネーミングルール
長いこと時間がかけ、遂に最適な名前の付け方を編み出しました。
あるルールにとらわれること無くそれぞれ使うのが大事だと！
大事なんだと！えらいひとにはそれがわからんのです！！
どういうことかというと、
■レイアウトセレクターは文節の無い単語
#wrap
#header
#footer
#container
#contents
#main
#sub
■セクションごとを囲うような汎用的なセレクターは2語文で、2語目は大文字ではじめる。
.recentSection{}
■セクションごとに同一になるような汎用的なセレクターは３語文で。
.recentSectiontitle{} .recentSectionbody{}
■この記事のキモ、セクションごとで使われる個別のセレクターは xx-xxx の形式
..rsb-rightcolumn{}
↑は本来 .recentSectionbodyrightcolumn となるようなもの。
#本来2語文以上繋がるようなセレクター名をつけるとき、
#recent-section か recentSection の２パターンにわかれがちで、
#こうなると当然 recent-section-title とか recentSectionTitle
#とかになりがちなんですが長くなって無駄なので思い切って二つの
#書式を使い分けるととても幸せになれることを発見したのデス！
ちなみに .recentSecition .title{} とかにすりゃいいじゃんって
突っ込みがあるかもしれませんが走査する対象が多くなって重いの
でそこはスルーです。
一意指定(id)、自然継承（body{font-size:12px;}）、
クラスセレクタ（.hoge{font-size:12px;}） の順で走査が早いはず。
#main .hoge{} は .hoge{} より早いはずだけどそこはメンテナンス性
と相談。極端なことをしない限りは柔軟に。
■その他
まああまりこだわらず適宜、以下のような汎用CSSは便利だよって
教えてもらってそれってどうなのって当時は内心ばかにしてたけど
試してみたら意外と便利でずっと使ってますゴメンナサイゴメンナ
サイ
.p10 {padding:10px;}
.pt10{padding-top:10px;}
.pr10{padding-right:10px;}
.pb10{padding-bottom:10px;}
.pl10{padding-left:10px;}
2010年04月29日
背景をページ下部に固定させる
意外と実用的なサンプルを探すのに手間取ったので自作。
■css
html{
height:100%;
}
body{
height:100%;
}
div#wrapAll{
position:relative;
height:100%;
min-height:100%;
}
body > #wrapAll{
height:auto;
}
#footer{
margin:0 auto;
width:980px;
background:url(./footer.jpg) no-repeat;
height:100px;
position:absolute;
bottom:0px;
}
■html
<html><body><div id="wrapAll">
body
<div id="footer">
footer
</div>
</div></body></html>
■css
html{
height:100%;
}
body{
height:100%;
}
div#wrapAll{
position:relative;
height:100%;
min-height:100%;
}
body > #wrapAll{
height:auto;
}
#footer{
margin:0 auto;
width:980px;
background:url(./footer.jpg) no-repeat;
height:100px;
position:absolute;
bottom:0px;
}
■html
<html><body><div id="wrapAll">
body
<div id="footer">
footer
</div>
</div></body></html>
2010年04月03日
html5 超ざっくりまとめ。
▼html5 のざっくりとしたまとめ。
■参考にしたページ
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/
これ以上要訳しようがないぐらい簡潔にまとめられているが、私のような面倒くさがりのために、あえてさらにざっくりと要点をまとめてみる。つまり「html5超ﾏﾝﾄﾞｸｾｪなに結局どうしたらいいの？」という要求に端的に応えたいというコンセプト。かつ自分のための備忘。
なにぶんよく理解してないので嘘も沢山書いてると思いますがそこは自己責任でお願いします。。
なお上の参考ページにもあるが、これらの仕様は策定中なので明日には180度変わることもありうる（というか実際変わりまくってる）ので注意されたい。
o 今既にHTML5で組んでいる方は以下から直近の変更点を確認できます
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changes-2009-08-25
■html5を使うメリットをｇｄｇｄにまとめる。
色々ありますが大きく分けて４つ。嘘。適当。
o SVGがダイナミックに利用可能になった。正直よくわからない。
-> xml と互換性があり、innerHTMLがxmlもhtmlも扱える。
-> SVG 形式の画像も扱える？
-> IE9が対応しはじめた。
o audioタグ、videoタグ が使えるようになった
-> 音声や動画を公開するのにいちいちyoutubeにあげたりflashを自前で用意して変換したりjqueryでパネルを作ってパラメーターを渡してとかとかそういうのがいらない！多分！
o 主要タグ（section,hgroup,article,aside,header,footer,nav,figure(auido,media),figcaption）が増えた
-> <div id="header"> のような使い方が本来的ではないので <header> だけでよくなる！まあ正直<div id="header">でも困ってはいないけどね！
o 既存機能の拡張
-> 色々ありすぎてうまく説明できないけど例えば全ての要素に class 属性をつけられるようになりました。更にgetElementsByClassName()がいかなる要素についている class属性も対象にできるようになったので実質これ一つであらゆるDOM操作が可能に！！なった気がしてるんだけど間違ってたら指摘してください -> だれか
■（html4と比較して）使えなくなったことに気を付けたい属性
o body 要素の alink, link, text, vlink 属性。 (今日びつかう人はいないと思うが)
o img 要素の name 属性 (代わりに id 属性を使ってください)
o a 要素の name 属性。製作者は id 属性を利用できます。 (代わりに id 属性を使ってください)
o align 属性、 valign 属性。
o width 属性。
o br 要素の clear 属性。
o td, th 要素の height 属性。
o img, object 要素の hspace 属性及び vspace 属性。
■試しにHTML4をHTML5にしてみよう！
執筆中。。
▼css3 のざっくりとしたまとめ。
を、書こうとしたけどあんまりなかったぉ。
■参考にしたページ
http://css3generator.com/
■参考にしたページ
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/
これ以上要訳しようがないぐらい簡潔にまとめられているが、私のような面倒くさがりのために、あえてさらにざっくりと要点をまとめてみる。つまり「html5超ﾏﾝﾄﾞｸｾｪなに結局どうしたらいいの？」という要求に端的に応えたいというコンセプト。かつ自分のための備忘。
なにぶんよく理解してないので嘘も沢山書いてると思いますがそこは自己責任でお願いします。。
なお上の参考ページにもあるが、これらの仕様は策定中なので明日には180度変わることもありうる（というか実際変わりまくってる）ので注意されたい。
o 今既にHTML5で組んでいる方は以下から直近の変更点を確認できます
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changes-2009-08-25
■html5を使うメリットをｇｄｇｄにまとめる。
色々ありますが大きく分けて４つ。嘘。適当。
o SVGがダイナミックに利用可能になった。正直よくわからない。
-> xml と互換性があり、innerHTMLがxmlもhtmlも扱える。
-> SVG 形式の画像も扱える？
-> IE9が対応しはじめた。
o audioタグ、videoタグ が使えるようになった
-> 音声や動画を公開するのにいちいちyoutubeにあげたりflashを自前で用意して変換したりjqueryでパネルを作ってパラメーターを渡してとかとかそういうのがいらない！多分！
o 主要タグ（section,hgroup,article,aside,header,footer,nav,figure(auido,media),figcaption）が増えた
-> <div id="header"> のような使い方が本来的ではないので <header> だけでよくなる！まあ正直<div id="header">でも困ってはいないけどね！
o 既存機能の拡張
-> 色々ありすぎてうまく説明できないけど例えば全ての要素に class 属性をつけられるようになりました。更にgetElementsByClassName()がいかなる要素についている class属性も対象にできるようになったので実質これ一つであらゆるDOM操作が可能に！！なった気がしてるんだけど間違ってたら指摘してください -> だれか
■（html4と比較して）使えなくなったことに気を付けたい属性
o body 要素の alink, link, text, vlink 属性。 (今日びつかう人はいないと思うが)
o img 要素の name 属性 (代わりに id 属性を使ってください)
o a 要素の name 属性。製作者は id 属性を利用できます。 (代わりに id 属性を使ってください)
o align 属性、 valign 属性。
o width 属性。
o br 要素の clear 属性。
o td, th 要素の height 属性。
o img, object 要素の hspace 属性及び vspace 属性。
■試しにHTML4をHTML5にしてみよう！
執筆中。。
▼css3 のざっくりとしたまとめ。
を、書こうとしたけどあんまりなかったぉ。
■参考にしたページ
http://css3generator.com/
2010年01月12日
git を導入する必要って本当にある？
だいぶ前の記事だけど、
IDEA*IDEA 〜 百式管理人のライフハックブログ でLinusの語る
gitの優れた点を非常に簡単にまとめてくれていた。
http://www.ideaxidea.com/archives/2008/04/git.html
でもこれをみて、あれ？と思った。
すくなくともおいらはmargeするのなんてコンフリクトしたときぐらいで、
基本更新するたびにcommitしている。
そして作業分担があるのでコンフリクトなんかは滅多にしない。
当然作業するときはcheckout されたローカルファイルに修正をかける。
つまり中央コードがおじゃんになっても、だれかのローカルにはある筈。
これはツッコミにある通りだと思う。
オープンソースをみんなでガリガリ作っていて、地下鉄なんかの非
ネット環境なんかも結構あって、1日に1度しかpushしないというな
らば最高の環境なのかもしれないけど、前の会社でも今の会社でも
そういうカンジではない。
つまり使い方やプロジェクトや会社の既存のフローによっては、svn
やcvsより明確に優れている点を見いだせない事も少なくないのでは
ないのだろうか。
そんなことを思った、ある git commit のオプションを調べている
日の出来事。
IDEA*IDEA 〜 百式管理人のライフハックブログ でLinusの語る
gitの優れた点を非常に簡単にまとめてくれていた。
http://www.ideaxidea.com/archives/2008/04/git.html
- gitは速い。CVSでmergeするのはストレス（作業時間的にも承認フロー的にも）がかかるが、gitだと簡単にmergeできる。気軽にmergeして開発していける体制こそが大事。
- gitは分散しているので中央のコードがおじゃんになってもうだめ、という事態を防げる。誰かがソースを持っているはず。つまり信頼性が高い。
- 何が最終的に正式版になるかはみんなで決めればいい。だから分散レポジトリの方がいい（← オープンソースはそうだけど企業だと違うんじゃない？とかって突っ込まれていましたが）
でもこれをみて、あれ？と思った。
gitは速い。CVSでmergeするのはストレス（作業時間的にも承認フロー的にも）がかかるが、gitだと簡単にmergeできる。気軽にmergeして開発していける体制こそが大事。
すくなくともおいらはmargeするのなんてコンフリクトしたときぐらいで、
基本更新するたびにcommitしている。
そして作業分担があるのでコンフリクトなんかは滅多にしない。
gitは分散しているので中央のコードがおじゃんになってもうだめ、という事態を防げる。誰かがソースを持っているはず。つまり信頼性が高い。
当然作業するときはcheckout されたローカルファイルに修正をかける。
つまり中央コードがおじゃんになっても、だれかのローカルにはある筈。
何が最終的に正式版になるかはみんなで決めればいい。だから分散レポジトリの方がいい（← オープンソースはそうだけど企業だと違うんじゃない？とかって突っ込まれていましたが）
これはツッコミにある通りだと思う。
オープンソースをみんなでガリガリ作っていて、地下鉄なんかの非
ネット環境なんかも結構あって、1日に1度しかpushしないというな
らば最高の環境なのかもしれないけど、前の会社でも今の会社でも
そういうカンジではない。
つまり使い方やプロジェクトや会社の既存のフローによっては、svn
やcvsより明確に優れている点を見いだせない事も少なくないのでは
ないのだろうか。
そんなことを思った、ある git commit のオプションを調べている
日の出来事。
2009年12月25日
vertical-align はインライン要素以外にも使える
そもそも、vertical-align がインライン要素にしか使えないことを
知らなくて度々悩んだこともありましたが、
vertical-align は TD やTH 等の table 要素にも使えたんですね！
つまり valign の代わりに使えるということ。
またひとつ賢くなりました(ΦωΦ)＜つか知っとけyo!
……
2009年10月07日
Fizz Buzz を javaScript でかいてみた
for(i=1;i<=15;i++){
var Fizz = 3;
var Buzz = 5;
if(0 == (i % Buzz) + (i % Fizz)){
document.write('Fizz Buzz<BR>');
} else if(0 == i % Buzz){
document.write('Buzz<BR>');
} else if(0 == i % Fizz){
document.write('Fizz<BR>');
} else {
document.write(i + '<BR>');
}
}
5分以上はかかった。つか動くか謎ｗ
しかも余剰つかったらいけないの？ｗ
だめだめだあ〜
+++++++++++++++++++++++++++++++++
試してみたら動かなくてイラっとしたので直した(ΦωΦ)
2009年10月02日
firefox で border-collapse:collapse; をつかっているtableでborderが消える
タイトル長っ。
表題の件にかかってしまいまして、まあ検索したらあっさりとバグ
だということはわかったんですが。
＃同じくタイトルが長いｗ
対応をどうしよう。ということで。
borderを背景にしようとか考えられる対策はいろいろあったんですが
面倒臭くて結局Bボタンを連打して白旗あげて、もといTTで片づけました。
■変更前
border:solid 1px #97B81B;
■変更後
border:solid #97B81B;border-width:1px 1px 1px [% IF ua.firefox %]2[% ELSE %]1[% END %]px;
表題の件にかかってしまいまして、まあ検索したらあっさりとバグ
だということはわかったんですが。
border-collapse:collapse;とoverflow:hidden;でFirefoxでborderが消えちゃう
http://blog.ochanocosaisai.com/?p=376
＃同じくタイトルが長いｗ
対応をどうしよう。ということで。
borderを背景にしようとか考えられる対策はいろいろあったんですが
面倒臭くて結局Bボタンを連打して白旗あげて、もといTTで片づけました。
■変更前
border:solid 1px #97B81B;
■変更後
border:solid #97B81B;border-width:1px 1px 1px [% IF ua.firefox %]2[% ELSE %]1[% END %]px;
2009年09月18日
リストタグをクリアすると余計な幅がとられてしまう
たとえば次のようなソース
IEではリストタグと [test] の間に改行が入ってしまう。
haslayout のせいかblock 要素として取り扱われるかは
しらないが後方互換なのに挙動が違うのは納得がいかない。
とりあえず、小一時間あれこれやったんだけどカイケツ方
法はシンプルだった。
after疑似クラス浸透しないかなあ。
<ul class="ul">
<li>A</li>
<li>B</li>
<li style="clear:both;"></li>
</ul>
test
.ul li{float:left;}
IEではリストタグと [test] の間に改行が入ってしまう。
haslayout のせいかblock 要素として取り扱われるかは
しらないが後方互換なのに挙動が違うのは納得がいかない。
とりあえず、小一時間あれこれやったんだけどカイケツ方
法はシンプルだった。
<ul class="ul">
<li>A</li>
<li>B</li>
<li style="clear:both;$display:inline;"></li>
</ul>
test
.ul li{float:left;}
after疑似クラス浸透しないかなあ。
