table要素の角丸ボーダーとreset.cssの罠に見る柔軟な頭の必要性>備忘録

flexibility柔軟性

WEBデザインとかホームページ制作だけに限らず、どんな仕事でもそうだと思いますが、「いつも柔軟な頭でいたい」というのは多くの方が思っていることでしょう。

経験が蓄積されてくると引き出しが多くなってきて、問題点やミスもすぐに解決できるようにはなります。

でも、固定観念の塊になる可能性もあります。

WEBデザインの講師をしていて、初心者の方々の「なぜ?」に、「なぜって、なぜ?」と思いながらも、実は固定観念でそうしていたということも往々にしてあります。

たとえば、私がコーディングする際にほぼ100%使うreset.css。各ブラウザで若干異なる表示を、一度リセットしてしまってからコーディングすると楽なので、ほぼ全てのサイトで使っています。

が、先日別の方がコーディングしたサイトの一部リニューアルをさせて頂いた際に、リセットが入っておらず、そこで発見したことがありました。

flexibility柔軟性
いつでも柔軟でいきましょう

rest.cssにあった罠?

リセットCSSには、有名どころでメイヤーリセット Yahoo!リセット(YUI)などがあり、html5用のリセットなどもあります。

先のサイトで「表の角を丸くして、やわらかい雰囲気を出して欲しい」という要望があり、ならばhtmlならdl dt ddとか、でも行数も多いから画像で作るしかないかと思っていました。htmlのtable要素ではCSS3のborder-radius(角丸のボーダー)が効かないという「経験値」があったのですね。

画像であたかもhtmlで打ったかのような表を作り「これでどうでしょうか?」とお客様にご覧頂くと「更新がしにくいね」とごもっともなご意見をいただきました。

で、「ダメもと」でborder-radiusをつけて打ってみると、綺麗に角丸になるではないですか・・・。
今までの知識は、知識ではなく「下調べもしないで先入観だけで作業をしていた結果」だったのですね。

reset.cssが邪魔していた!

別に邪魔していたわけではなく、私がリセットスタイルシートを細かく覚えていなかったのですが・・・。調べてみたら、というほどではなく、reset.cssを見ただけですが、リセットCSSにtable border-collapse:collapse; があり、これがあると角丸ボーダーが効かないのですね。

border-collapse border-radius
separate 1em

上記の表のhtml

<table id="bordersample" "summary="sampletable"> <tr> <td>border-collapse</td> <td>border-radius</td> </tr> <tr> <td>separate</td> <td>1em</td> </tr> </table>

本来はth使わなければいけませんね・・・

上記の表のcss

#bordersample { border-collapse: separate; border-spacing: 5px; margin: 10px auto; text-align: center; width: 400px; } #bordersample td{ background: #CCC; border-radius: 1em; }

思い込みってこういうことなんですねと。

もうしかしたら、世間ではとても一般的なことだったのかもしれませんが、私にはものすごい衝撃というか、こんなこと知らなかったのか!という事柄でした。

経験の積み重ねは重要なことですが、思い込みで作業をしていないか、今後もしっかり振り返りながら、経験と柔軟性、どちらも生かした仕事をしていこうと思っています。

3 thoughts on “table要素の角丸ボーダーとreset.cssの罠に見る柔軟な頭の必要性>備忘録

  1. おぉ、ありがとうございます!
    tableは角丸になるのに、ボーダーが角丸にならなくて困っていました。。。。。

    おかげで、ボーダーも角丸にできました!!

  2. ささぴょん様
    あー、ずいぶん遅いレスですが・・・
    ご参考になりましたらとても幸いです。
    コメントありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください