WEB・イラスト・フライヤーなど作成しております「なかむらしんじ」のBLOGです。技術的な話からイラストの掲載など行っていこうかと思います。
お問合わせ、ご依頼はinfo@psy-on.comまで
Illustration Gallery
BLOG新着記事
- 現実的なCSSのスペーサー (07/27)
- CSSフォント指定考 (07/15)
- CSSを使ってぶら下げインデントを再現する (06/18)
- Thumbs.dbってなに？ (06/04)
- IE8で背景画像が印刷されない件 (05/20)
現実的なCSSのスペーサー
2010.07.27 Tuesday WEB制作関連
邪道だとは思います。承知の上ですがCSSデザインのサイトにおいても
スペーサーGIFと同様に任意のスペースの確保が要素ごとに必要に
なることがあり、一括定義にそぐわない場合は、自分は
CSSにてスペーサータグを設定して使いまわしています。
あらかじめ「5px」「10px」「15px」「30px」「60px」などのように
準備をしていたりします。
ちなみにスタイルシートでは
.spacer5px {
width: auto;
height: 5px;
}
のような感じで定義。
更にHTML側には(特に文字サイズよりも小さい高さのスペーサーの場合は)
DIV内に
＜!-- --＞
を入れておくようにする。
これがないとIEの古いものなどでは高さがテキストの高さ以下に
表示されません。
注意ください。
本当はスペーサータグも邪道ですよね。
ですが
＜h1＞
＜h2＞
＜h3＞
という前提でスペースを要素に緋付けても
運用途上では
＜h1＞
＜TABLE＞
＜h2＞
＜h2＞
＜h2＞
＜h3＞
など変則が多いので、決め打ちできないのが現状かと思います。
いかがでしょうか？
trackbacks(0) | comments(0) | [WEB制作関連]
CSSフォント指定考
2010.07.15 Thursday WEB制作関連
■参考サイト
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
■結論：
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
■まとめ
・CSSでフォントを指定しないと各視聴環境によって違うデフォルトフォントが使用される
・無指定だとIE6は文字コードUTF-8だと「Times New Roman」になる
・フォントを総称ファミリー指定するとwinIE6では、文字コードがShift_JIS・EUC-JPの時は「Lucida Sans Unicode」UFT-8の場合は「Arial」になる。
・上記事例があるのでファミリー指定は不可！フォント名で指定するようにする。
・ただしブラウザ(win・macの違いも含む)ごと環境ごとにフォント自体の日本語指定のみ受付可とアルファベット表記のみ受付可など複数に
・Safari では
→‘ヒラギノ角ゴ Pro W3′ などフォント名に日本語が含まれるものは無効になってしまう。
・Firefoxでは
→‘Hiragino Kaku Gothic Pro’ など日本語フォントのアルファベット表記は適用されないので
・Mac版Internet Explorer 5 では
→フォントの複数指定は無効のため、第一候補のフォントが環境にインストールされていない場合は初期値のフォントで表示します。
trackbacks(0) | comments(0) | [WEB制作関連]
CSSを使ってぶら下げインデントを再現する
2010.06.18 Friday WEB制作関連
http://h2ham.seesaa.net/article/91998272.html
注意書きなどで見かける「※」を接頭句に持つ文章。
一行で収まるなら良いが、改行された際、※の下に文字が付いては
著しくデザインをそこなう。
それについて上記サイトにインデントを利用した回避方法が掲載
されている。
trackbacks(0) | comments(0) | [WEB制作関連]
