カテゴリー: CSS

Web standard なデザインをめざしてハックする

Safari, ユーザーエージェント・スタイルシート

Safari, headline tags の Useragent Stylesheet オレメモ。

h1 {
	font-size:2em;/* 32px */
	margin: 0.67em 0;/* 21px */
}
 
h2 {
	font-size: 1.5em;/* 24px */
	margin: 0.83em 0;/* 20px */
}
h3 {
	font-size: 1.17em;/* 19px */
	margin: 1em 0;/* 19px */
}
h4 {
	margin: 1.33em 0;/* 21px */
}

CSS Hack, Firefoxにだけ有効に

FirefoxにだけCSSを有効にしたかったメモ。
ハードディスクのメモにすでに書いていたけど、使ったことが無かったのですっかり忘れていた。
出展まで書いていなかったので、オリジナル投稿の方にはまことに申し訳なく思います。

/**
for Firefox only
* */
@-moz-document url-prefix() {
セレクタ {
	/* 設定 */
	width:600px;
}
}

wp-syntax, preタグ内の文字をFirefoxでも折返して表示したい

WordPress のプラグイン wp-syntax を使ってコード表記を行っています。
対応言語も多く助かっているのですが、１つだけ気になっていたことがあります。

Firefox だとコードが折返し表示されずに横スクロールバーが出てしまうことです。
Safariだと折り返して表示されています。

コードは pre タグ内に書くのでFirefoxの挙動は正常だとも思うのですが・・・

wp-syntax 付属の wp-syntax.css をカスタマイズすることにします。

プラグインフォルダのファイルを編集してしまうとアップデートの時に面倒くさいのでどうしようかとソースを見てると、テンプレートフォルダに同名の wp-syntax.css があればコチラが優先になるようになっていました。
それで、ダウンロードしたプラグインファイルから wp-syntax.css をテンプレートフォルダへアップロードしカスタマイズを開始しました。

変更した箇所は .wp_syntax pre へ以下の設定を末尾に2行追加しました。

white-space: -moz-pre-wrap;
white-space: pre-wrap;

これで良さそうだ。

CSS Hack for IE 8

IE 8だけにCSSを適用したい

イケテナイIE8だけにCSSを設定しなくてはいけないことがまだまだある様子。
IE7, IE6向けHackが使えないのがマイクロソフトらしいとこ。

普通のブラウザを作って欲しいと切に願わずにはいられません。

IE8向けHack
“CSS Hack for IE 8” の続きを読む

IE に メイリオ, Meiryo を指定しようとすると・・・

クライアントからのオーダーでフォントをアンチエイリアスがかかるメイリオ, Meiryoにして欲しいと頼まれた。

でもアンチエイリアスがかかるだけで不細工ですよ、と言ってはみたものの聞いてもらえるわけもなく、CSSで設定しようとするとアリャリャなことがおきました。

font-family: "Lucida Grande", Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Arial, "メイリオ", Meiryo, "MS P ゴシック", sans-serif;

な感じで設定してはみたけど、IE が認識しない。
FireFox 君は「メイリオ」になったのに・・・

しょうがないので続けて設定してみた。

* html body
, *:first-child+html body {
	font-family: 'メイリオ', Meiryo, sans-serif;
}

表示されたけど、なんか納得できない。

それともこっちがミスってる？？？ 😕

CSS, display:inline-block を使う

CSS display : inline-block
ブロック要素だけどインライン要素のように振る舞ってくれる。
width, height…などブロック要素にしか使えないプロパティを設定できて便利。

コリャご機嫌と使っていたら意外な落とし穴・・・
“CSS, display:inline-block を使う” の続きを読む