html/css

font-familyの指定を見直す

うちは普段コーディングする時、Firefoxを表示確認用のメインブラウザとしてCoda2を使っています。

先日、htmlで何かのテストをしてる時、久しぶりにfont-familyを指定して
safari(mac)で表示確認したら、指定したfontが全く効いてませんでした。

これが長い長いfont-family探しの旅の始まりでした。。。

続きを読む

html,body{height:100%}でブラウザー表示領域一杯まで広げたブロック要素に、余白やborderを含ませつつ100%におさめる方法

こんな感じのレイアウト

box-sizingでheight100%のブロック要素にラインを引く

tableを使わないと不可能だと思ってたけど普通にできちゃうんだねぇ
サンプル

css3のbox-sizingを使った

box-sizing-CSS3リファレンス

どっちにしろmarginは含ませる事は出来ないのでレイアウトによってはちょっとした工夫や無駄な要素が必要になるかも。

対応ブラウザ

firefox以外のモダンブラウザーには実装済みで
そのfirefoxもベンダープレフィックスをつければ使える。

ブラウザ 確認したバージョン ベンダープレフィックス
safari 5.1.2 不要
chrome 20.0.1132.52m 不要
firefox 13.0.1 必要(-moz-box-sizing: border-box;)
opera 11.64 不要
IE 9 不要
IE 8 不要

他の手段を使って同じように組む事も出来るのかな?

html5で隙間

sectionとarticleの違いがよく分からないまま
ちょいちょいhtml5でコーディングを始めた
そんなこんなで画像の下に隙間ができる。

firebugを見上がら、なんだっけなーこれって思ってたけど
reset.cssのimgの指定がこうなってた

なのでvertical-align:bottom;を追加してみたら隙間が消えた。

昔、vertical-align:bottom;を指定してたと思うのだけれど、
なんで今入ってないんだろう
何か理由があって削除したのかな?

思い出せない

iframeに開くページを、location.searchで受け取った値で変更させちゃっても問題ない?

iframeを持つ1つのhtmlを使い回して
中身だけを変更したいんだけど何かいい方法はないかね?と聞かれて
iframeの中身をバラバラに作るくらいならiframeやめなよと答えたけど
気になったので少し考えて
location.~が使えそうじゃない?と以下のソースを書いた

親(index.html

子iframeがあるhtml(after.html

これで、親ページのリンクの?以下の名前
(after.html?http://yahoo.co.jpならhttp://yahoo.co.jp)のファイルを
子のiframeで開けるのだが
これ、大丈夫なんでしょうか?

でalertがでるけど、alertを任意に使えるって事は何か別の事がされるんだろうか?
パスワードなんかを扱わないページは気にしなくていいのだろうか。
という感じで使えるものかわからんので教えてない。

メモ / YUIフォントを使うときにやっておくと役立つ事

[image]YUI 3: CSS Fonts

font-size、
pxで指定するとIEで拡大縮小できなくなる、font-size。

ブラウザやOSやフォントによって大きさも変わるしって事で
bodyに85%くらいを指定するくらいでおしまい、って感じに
結構ぞんざいに扱っていました。

そんな人間なのに、最近意味もなく
「YUI CSS Resetを使ってるし、YUI CSS Fontsも使ってみようかな」と思い立ち
YUI3.3をダウンロードしたはいいけど忙しくて放置してところに
素敵なタイミングで以下の良エントリーがっ。

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509
※cssコメントの対応表あり

みんな、pxに対応する%を覚えて使ってんのかなぁ、すげぇなぁ。。。と思ってたけど、コメントいれちゃった方が優しいっすよね。
さっそくパクろう。

YUI 3: CSS Fontsのダウンロードや対応表

YUI 3: CSS Fonts
解凍後以下のフォルダの中にあるよ

fonts-context.cssってなんだろ

追記
使い方間違ってたっ!!

任意のfont-sizeをYUI CSS Fontsを読み込んだあとの
bodyに指定してたので次のような事になってた。

font-familyを変更したらサイズが合わない?

としたら12pxにならなかった。

確認用の画象(20110424.png)をつくって、
[image]サイズチェック用画象

確認用のソースを用意して

textを重ねてチェックしてみたら、15pxになってるぽい。
表示結果
[image]93%で15px

検索すると理由が書いてありました
YUIのfonts.css[to-R]
bodyにfont-sizeを指定するとyuifontsの指定が上書きされちゃうのね
そりゃそうだ。

上記cssを以下のように変更してチェック

表示結果
[image]今度は12px

最初にリンク貼った徳田さんとこのサンプルソースもそうゆう風に書いてあるのにね。

safariで微妙に太く表示されるフォントを、他のブラウザに合わせる。

どうも-webkit-font-smoothing:というプロパティがあるようで
safariはデフォルトでsubpixel-antialiased;があたっているようです(windowsは)。

でもってその値にantialiased;を指定すると
他のブラウザと同じような細さになるようなならないような。

確認用スクリーンショット

[image]-webkit-font-smoothing適用スクリーンショット

確認用ページ

※safariで見ないと意味ないよ。
-webkit-font-smoothingでsafariの文字の太さを他のブラウザと合わせる。

プロパティと値

noneを指定したら、それ以降が激しく文字化けしたので
確認用ページから外した。

参考にしたサイト /

Maxvoltar – -webkit-font-smoothing