鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

css

CSSでクリックすると凹むボタンの罠

css

立体的で、押すと凹んだように見せるボタン、たまに見かけると思います。 それをCSSでやろうとすると、こんな感じになるかと思います。 ボタンにbox-shadowをつけて立体的に見せる :activeでbox-shadowを外し、かつtranslateYやtopあたりでボタンをbox-shado…

table要素でセルの幅を指定したいときはtable-layout="fixed"

css

背景 table要素でレイアウトせざるを得ない!ということでFlexboxで書いたものをセコセコtableへ移していたのですが、CSSでセル(tdやth)の幅を指定してもそのとおりにならないという事象が発生。たとえばこんな感じ。 td.data { width: 100px; } こう書いて…

@pageでの長さ単位はem,ex以外にしよう

css

とあるWebサイトをPDF化するにあたり、偶数ページと奇数ページでマージンを変更する必要があったのですが(いわゆるノド余白)、OS標準の機能やAcrobatでもなかなかうまくいかず、以下の助言が。 @suzukima @page:left {margin: 〜;} @page:right {margin: 〜;…

OSXのChrome/Safariにて、全角幅=2半角幅で等幅表示するためのCSS

css

Qiitaにも投稿したのですが簡単な内容なのでこちらにも。 OSXのChromeにて、pre要素のfont-familyにmonospaceを指定したのですが、全角と半角それぞれは等幅になっているものの、いわゆる全角文字が半角2つ分で表示されていませんでした。あれれと、以前はそ…

CSS3でのテーブル装飾に手を加えてみた

css

書こうとおもいつつずいぶん経ってしまい、すっかり乗り遅れた感がありますが。 CSS3を使って美しく装飾されたテーブルの作り方|Webparkで紹介されていたCSS3でのテーブル装飾についてです。これ、Chromeだとうまくいくんですが、MacのFirefox15.0.1だと、…

css3-mediaqueries.jsを使うなら@mediaで指定しよう

css

IE8以下のIEでMedia Queriesを使いたいときの方法として、css3-mediaqueries.jsがあるのだけど、ちょっとはまったのでメモ。ちなみにcss3-mediaqueries.jsはここから入手。css3-mediaqueries-js - css3-mediaqueries.js: make CSS3 Media Queries work in al…