WEBマスターの知恵ブログ

カテゴリー: CSS

  • 【標準モード】CSSにおける幅（width）の解釈の違いと対策【後方互換モード】

    現在開発中のWEBサイトにおいて、CSSのwidthの解釈がieとfirefox他で異なっていたのを修正したことの覚書です。

    （前提）

    標準モードにおけるwidthの解釈

    width　＝　内容物の幅のみ　※padding、borderを含まず

    後方互換モードにおけるwidthの解釈

    width　＝　内容物の幅＋パディング ＋ 線　※padding、borderを含む

    つまり、結果として、標準モードは幅が広く、後方互換モードは幅が狭くなる見た目になります。

    （対策）

    今回の自分のケースでは、

    DOCTYPE宣言にトランジショナルでURI無し

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    を使用していたため、ieで後方互換モードとなり幅の表示が異なってしまってました。

    そこで、

    DOCTYPE宣言をトランジショナルでURI有りに変更しました。

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

    すると、ieでも標準モードが適用されることになり、firefox他のブラウザ同様の幅の表示がされるようになりました。

    結論として、標準モードになるDOCTYPE宣言をし、CSSも標準モードに準拠するようにして、幅は、線・パディング・内容物の足し算で常に計算すると幅の見た目を各ブラウザで統一できそうです。

    ちなみに、DOCTYPE宣言をstrictにするのも一つの選択肢なのですが、色々、第三者のタグを挿入するケース（アクセス解析や広告タグなど）も考えると、トランディショナルで妥協するのも現実的かなと思います。

  • 【書評】10日でおぼえるCSS／CSS3入門教室

    10日でおぼえるCSS／CSS3入門教室　大藤幹（著）の書評です。

    良い点

    • フルカラーで見やすい
    • CSSの基礎から分かりやすく解説されている
    • 実践的で役立つTipsが多い
    • CSS3は標準になりつつあるトピックを掲載

    悪い点

    • 各ブラウザのCSS3の対応状況が少し曖昧

    総評

    とても満足できる一冊です。CSSの基礎からCSS3を使った応用まで、体系だって丁寧に解説されています。

    HTMLの基礎にも軽く触れられているので初心者にもハードルが低いと思います。

    本のタイトルは『10日でおぼえる』となっていますが、ある程度知識がある人なら2日もあれば終えられるでしょう。

    サンプルの実行（実習）とその解説（講義）というチュートリアル形式で進みます。コードと実行結果がポイントを押さえて掲載されていて、書面の上でも実際にサンプルを動かしている錯覚がするくらい作りが丁寧です。

    これからCSSを学習したい初級者にお勧めです。

    10日でおぼえるCSS／CSS3入門教室

  • WordPressの投稿でフォントサイズを変更する方法

    WordPressのビジュアルエディタで文字サイズを変更するのは意外と困難です。

    理由は、Bタブでは、<strong>　になってしまい、段落タブの見出しでは<h1>などの<hx>タグになってしまうからです。

    文字の大きさだけを変えるのに、strong　や　hx　などのタグを使うのは避けたいと思う人も多いと思います。

    そこで、文字の大きさの簡易な変更方法を解説します。

    それは単純に現在使っているテーマのCSSを変更する方法です。

    つまり、（デフォルトのテーマでは）style.css　に文字の大きさを変更するためのCSSを書き加えるわけです。大はl（エル）　小はs（エス）　としています。

    .fontsize_ll {
font-size:180%;
}
.fontsize_l {
font-size:160%;
}
.fontsize_s {
font-size:80%;
}
.fontsize_ss {
font-size:60%;
}

    上のようなCSSをstyle.css　に書き加えて保存します。
    そして、投稿の際、HTMLエディタにて、書き加えたCSSが有効になるように、大きさを変更したい文字をクラスで指定してspanタグで囲みます。

    <span class="fontsize_ll">フォントサイズLL</span>

    フォントサイズLL

    <span class="fontsize_l">フォントサイズL</span>

    フォントサイズL

    <span class="fontsize_s">フォントサイズS</span>

    フォントサイズS

    <span class="fontsize_ss">フォントサイズSS</span>

    フォントサイズSS

    このような感じで大きさを使い分けられます。

    同様に、太字にしたい場合には、CSSに次のように書き加えます。

    .bold {
font-weight: bold;
}

    そして、HTMLエディタにはCSSを有効にするようにスパンタグを利用します。

    <span class="bold">太字</span>

    太字

    ノーマルに比べて太字になっています。

    なお、この<span・・・　の部分は、一字ずつ入力すると面倒なので、辞書登録すると手間が省けます。

    蛇足ですが、もちろんプラグインを利用して文字サイズを変更することも可能です。ここでは、プラグインを導入するのが面倒に感じCSSを弄ることで解決しています。

  • CSSの全体初期化（全ブラウザ対策）

    CSSを利用する際は、まず、ブラウザの初期設定をリセットするために、CSSの初期化処理をした方が、良いとのこと。

    初期化のCSSコード

    /* 全体的なルール */
* {
 margin: 0;
 padding: 0;
 font-size: 100%;
}

    最も簡単な方法がこの指定だそう。