display:tableが便利

display:tableという、cssのプロパティがあります。
要素を擬似テーブルにすることができるというもので、こんなふうに使います。

<div style="display:table;">
  <div style="display:table-cell;">左</div>
  <div style="display:table-cell;">中央</div>
  <div style="display:table-cell;">右</div>
</div>

floatでも同じことができますが、display:tableのほうがだいぶ楽です。
崩れとかあまり気にしなくてよくなるし、cssの記述量もかなり減ると思います。


さらにwidth:100%とかvertical-alignとかも使えるのでかなり柔軟にレイアウトできるようになります。

例えばこんなのとか。

<div style="display:table;width:500px;">
  <div style="display:table-cell;background-color:orange;padding:10px;">左<br>左<br>左<br>左<br>左</div>
  <div style="display:table-cell;background-color:limegreen;width:100%;padding:10px;vertical-align:middle;text-align:center;">中央</div>
  <div style="display:table-cell;background-color:yellow;vertical-align:bottom;padding:10px;">右</div>
</div>

左
左
左
左
左

中央

右

各ブラウザの対応状況はこちらを参照。

http://fmbip.com/litmus/


気になるのはieの対応状況ですが、8以降は対応してるようです。

そろそろie7も切り捨てられる頃合いだと思うので、pcサイトでも今後は利用する機会が増えてくるんじゃないでしょうか。

自分はガンガン使っていこうと思ってます。

text-decorationを親要素と子要素両方に指定すると

親要素には効くけど、子要素には効きません。

↓こういうコードを書いたら

<span style="text-decoration:underline;">親要素のspan<span style="text-decoration:none;">子要素のspan</span>親要素のspan</span>

↓こうなって欲しいところですが、

親要素のspan子要素のspan親要素のspan


↓実際はこうなります。

親要素のspan子要素のspan親要素のspan

そういう仕様になってるとのことです。

参考ページ
http://www.mozilla.gr.jp/standards/webtips0002.html

cssの:before、:afterがけっこう便利

今更ながらその便利さに気が付きました。

<style type="text/css">
.before_after_test1:before { content: "("; }
.before_after_test1:after { content: ")"; }
.before_after_test2:before { content: "[ "; }
.before_after_test2:after { content: " ]"; }
</style>

<div class="before_after_test1">カッコ1</div>
<div class="before_after_test2">カッコ2</div>

↑こうすると

↓こうなります

カッコ1

カッコ2

・　・　・

こんなことも

<style type="text/css">
.before_after_on:before { content: "スイッチオン："; }
.before_after_off:before { content: "スイッチオフ："; }
</style>

<div class="before_after_test3 before_after_off" style="text-decoration:underline;color:blue;cursor:pointer;">ここをクリック</div>

<script type="text/javascript">
$(function(){
$('.before_after_test3').click(function(){ $(this).toggleClass('before_after_on').toggleClass('before_after_off'); });
});
</script>

ここをクリック

うまく使えばきれいなコードが書けると思います。

javascriptでiframeの高さを取得する

iframeで呼び出すページの高さを取得し、親ページ側でiframeのheightを最適化します。

実現にはいろいろな方法がありますが、この方法はiframeと親ページの両方にスクリプトを設置するやり方になります。クロスドメインで使えます。

まずiframe側に設置するスクリプト。
#containerの高さを取得して親ページに数値を渡します。

<script type="text/javascript">
window.addEventListener("load", postSize, false);
function postSize(e){
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
    if (typeof target != "undefined" && document.body.scrollHeight)
        target.postMessage(document.getElementById("container").scrollHeight, "*");
}
</script>


続いて親ページ側のスクリプト。
iframeから数値を受け取って高さを指定します。

<script type="text/javascript">
try { window.addEventListener("message", receiveSize, false); } 
catch(e) { window.attachEvent("onmessage", receiveSize); }

var rcnt = 0, new_height = 0;
function receiveSize(e) {
    new_height = Number(e.data)+30;
    document.getElementById("target_iframe").style.height = new_height + "px";
}
</script>

以上です。

参考にさせてもらったページはあったんですが、失念してしまいました。

ie6と7だけ効くお手軽cssハック

/margin-top:-10px;

こんな感じで頭にスラッシュを入れるだけです。便利。

こちらにcssハックが一覧でまとめられていて見やすいです。
http://www.webcreatorbox.com/tech/css-hack-list/

ie7でliに隙間ができるのを解消する


<li><a href="http://kawama.jp/"><div>text text text</div></a></li>
<li><a href="http://kawama.jp/"><div>text text text</div></a></li>
<li><a href="http://kawama.jp/"><div>text text text</div></a></li>


こんなリストがあって、ie7のみ下に隙間ができてしまっていました。

vertical-align: bottom;

を適用することで解決しました。

このへんのページを参考にさせてもらいました。
http://nrhr.net/diary/1121/
http://webdesignrecipes.com/css-selectors-and-properties-with-ie7/

cssのopacityプロパティは子要素まで透過してしまう

背景を透過する必要があって、いつものようにopacityで対応できると思ってたんですが、実際にやってみると、opacityはその子要素までも透過してしまうという仕様になっていることがわかり、困ってしまいました。

で、ググってみたところ、rbgaというのを使えばこの問題を回避できることがわかりました。

http://d.hatena.ne.jp/Hamachiya2/20120506/opacity_rgba

勉強になりました。

CSSのclipプロパティを使ってみる

clipというCSSプロパティがあるのを知り、おもしろそうなのでちょっと使ってみました。

サンプル：CSSのclipを使ってみる

画像だけじゃなく、block要素にも使うことができます。

うまく弄ればCSSスプライトみたいに使えそうな気がします。

CSSだけで吹き出し

吹き出し、ツールチップみたいなものを作りたいと思い、検索してみました。

探すとjqueryのプラグインとかいろいろ出てきますが、できればなるべくシンプルなものが良いと思ってたところ、cssだけで実現してるサンプルがありました。

CSS のみで吹き出し

ieだとborder-radiusが効きませんが、それ以外はまったく問題なし。
今後いろいろな場所で使わせていただこうと思います。

table-layout:fixedでテーブルの列幅を固定する

ie7で、テーブルのセル幅指定が無視され、レイアウトが崩れてしまうという問題が起こりました。
どうやらie特有のバグみたいです。いつもながらieには本当に困らされます。

色々調べてみたところ、cssのtable-layout:fixedが使えそうなことが分かり、試してみました。

サンプル：table-layout:fixedでテーブルのセル幅を固定

table-layout:fixedを指定すると、最初の一行目でテーブルの列幅を固定するという働きをしてくれます。

さらに２行目以降のセルを描画する際に再計算をしなくなるので、ページの読み込みも早くなるようです。
ieのバグ回避以外でも使えそうだし、覚えておくとあとあと役に立ちそうなプロパティだと思います。

「Dust-Me Selectors」で使っていないCSSを整理する

サイトを長く運営していると、使っていないCSS、いわゆるゴミがどんどん増えてきます。

パフォーマンスに影響が出るほどのゴミではないのですが、編集作業の邪魔になったりすることはよくあります。

というわけでCSSの掃除をしようと思ってググってみると、まず「CSS Redundancy Checker」というウェブサービスが見つかりました。

が、サイトにアクセスしてもエラーが出るだけ。どうも閉鎖してしまったようです。

というわけで他の方法がないか探してみると、「Dust-Me Selectors」というfirefoxのアドオンがありました。

https://addons.mozilla.org/en-US/firefox/addon/5392/

さっそくインストールして使ってみます。

ステータスバーに箒のアイコンが出てくるので、これをクリックすると箒が動き出し、開いているページのチェックが始まります。



チェックが終わると使われていないセレクタの一覧が出力されます。
このkawama.jpだと、wp-calendarのセレクタなどが検出されました。



サイトマップなどを指定すると、サイトの全ページをまわってチェックしてくれます。

cssの掃除って面倒なのでサボりがちになってしまうので、こういうツールがあると助かります。

フォントをemで指定(bodyでfont-size:62.5%)

ユーザビリティの点で、フォントはpxでなくemで指定するのがベター。

というのが少し前から言われています。

ただ、ずっとpxを使い続けている自分としては、実際にemを使うとなると戸惑いがあります。

が、最近、bodyに対してfont-size:62.5%を指定するという手法を知りました。

こんな感じで62.5%指定します。

body {
font-size: 62.5%;
}

これだけですが、詳しく説明しますとそのページの標準状態の文字サイズの大きさが10pxであれば、12pxの大きさは1.2emとなります。20pxであれば2emとなります。

body要素に対して"font-size: 10px;"としてしまうと、IEのメニューから文字サイズを変更できなくなります。そこでパーセント単位で指定するために、62.5%(10px÷16px)を指定しています。

http://css-style.jp/notebook/xhtml_css/font02.html

とりあえず一度使ってみましたが、なかなか使い勝手がいいです。px指定から卒業できそうな気がします。

標準DOMスクリプティング

『DOMと言う言葉はよく聞くけれど、実際のところよくわかっていない。jqueryやそのライブラリを使って見よう見まねで簡単なアプリを作成できるが、高度なコーディングはできない。』

こういう状態だったので、そろそろ本質的なところを勉強しないといけないな～と思っていたときに、手に取った本がこれでした。
というか、DOMについての本って他に見あたらなかったです。

2007年の本で、ブラウザもIE6とかfirefox1.5の時代ですが、古さはあまり感じさせません。
DOMの本質的な部分を扱っているので、今でも十分通用するし、勉強になります。
特にDOMの用語や概念なんかは覚えておけばgoogle検索するときなどにもかなり役に立つと思います。

ひさびさに技術書読みましたが、なかなか良い本でした。少し値段が高いですが、それに見合う価値はあると思います。

なおサンプルスクリプトはこちらで見られます。
http://www.futomi.com/books/dom/script/index.html

それと本書で取り上げられていたfirefoxのアドオンが３つあったので、とりあえず入れてみました。
今度コーディングするときに使ってみようと思っています。

DOM Inspector
JavaScript Debugger
HTML Validator

CSS+画像で作るタブメニュー

CSSと画像で作るタブメニューのサンプルを探していたところ、こちらのサイトを見つけました。

http://www.dezinerfolio.com/2007/10/17/creating-liquid-css-tabs-for-menus/

画像による解説がものすごくわかりやすいです。いい勉強になりました。

CSS文法チェッカー

長いCSSファイルを編集している時、途中どこかで文法を間違えてしまったようで、CSSが機能しなくなってしまいました。

おそらくカギ括弧の閉じ忘れとか、セミコロンを普通のコロンにしてしまったなどのミスで、正直上から一行ずつチェックしていくのは面倒。

そういえばCSSの文法チェッカーってないのかな？と思ってググったら、ありました。

CSS検証サービス

これでチェックしたら一発でした。原因はやはりカギ括弧の閉じ忘れ。

かなり便利なので、これからちょくちょくお世話になりそうです。

text-indent:-9999pxしたアンカーをクリックした時に点線が左に伸びるのを解 消

text-indent:-9999pxは最近よく使うんですが、テキストを左に9999px分移動させるため、リンクをクリックしたときに出る点線が画面左端まで伸びてしまいます。

これはoverflow:hiddenで解消できます。
↓クリックしてみてください。

伸びる
伸びる

伸びない
伸びない

しかしoverflow:hiddenはいろんなところで活躍しますね。
最近、困ったときはとりあえずoverflow:hiddenするクセがついてしまいました。

cssの「cursor:pointer」でカーソルを指アイコンに

「cursor:pointer」を使うと、要素にカーソルを合わせたときに指アイコンにすることができます。

<div style="width:30px;height:30px;cursor:pointer;background-color:orange;padding:20px;">hoge</div>

hoge

アンカー以外の要素をリンクっぽく見せたい場合などに使えます。

cssのoutlineプロパティでフォーム要素のアウトラインを指定する

cssのoutlineプロパティを使うと、フォームの各要素をデコレーションできます。


<style type="text/css">
input:focus, select:focus, checkbox:focus {　outline: 5px #0000ff dotted;　}
</style>

<form name="test" id="outlineTest">
<input type="text" name="t1" value=""><br>
<select name="t2"><option value="1">select1</option><option value="2">select2</option><option value="3">select3</option></select><br>
<input type="checkbox" name="t3" value="1">checkbox
</form>


こんな感じになります。

select1select2select3

checkbox

cssのみで手軽に実装できるので便利です。

参考：http://www.tagindex.com/stylesheet/form/outline.html

ieでposition:relativeが正常に表示されない

毎度のことですけど、HTMLコーディングしてたらieだけ表示がおかしくなる問題が発生。

今回はposition:relativeのバグでした。ie6とie7で確認。ie8は環境がないので見てません。

「position:relative ie」などでググると同様の問題で困ってる人がけっこう多いことがわかります。
特にこのあたりのページが参考になりました。

overflow:auto(scroll) 要素内の position:relative(absolute) 要素 注意点
IEでposition:relative;の孫要素のborderが消える

text-indent:-10000pxが効かないのはtext-alignのせいだった

CSSのtext-indent:-10000pxを使って要素内の文字列を表示させない、というのをやろうとしたんですが、今日はこれが効かない。なぜだ！？

で、そのまんま「text-indent 効かない」でググってみたらすぐに答えが見つかりました。
text-alignを削除したらtext-indentが効くようになり、問題解決。

やっぱりGoogleはすごい。