HTML/CSS

HTML, CSS 及びその他全般(他のカテゴリー以外)のメモ

Google Web Fonts がブラウザによって表示が異なる

2013年5月15日

Google Web Fonts をタイトルのロゴに使用しようとしたが、ブラウザによっては文字がきれいに表示されない。自分の Windows の環境では Firefox と IE ではきれいに表示されるが、Chrome、Safari、Opera では、文字の周りがぎざぎざしていてちょっとそのまま使用するのは難しい。 検索したところ、CSS3 の text-shadow でぼかしを使って対応する方法をみつけたので試してみるがある程度は良くなるが、今度はきれいに表示されていた Firefox と IE で文字がもったりした感じになってしまう。 また、Oper…

続きを読む

www の有無

2013年5月5日

301リダイレクトを利用 「www あり」で運用するのか、「www なし」で運用するのか。 どちらにしても、301リダイレクトを利用しどちらかに統一するようにする。以下は「Google ウェブマスターツール」からの引用。 「www あり」に統一する場合は、以下を「.htaccess」ファイルに記述。(example.com の部分を自分のドメインに変更) Rewrite Engine On として、RewriteCond ディレクティブで RewriteRule の条件を設定。 [NC] : 大文字小文字を区別せずにパターンと一致するかどうかをテストする…

続きを読む

テキストのインデント幅の指定

2013年4月26日

テキストの最初の行のインデント幅を指定するには、「text-indent」プロパティを利用する。 指定する値は「長さ」または「パーセンテージ」で指定し、マイナスの値も指定可能。 マイナス値を指定してボックスの外にはみ出した部分の表示は、「overflow」プロパティで制御する。 以下の例の場合、クラス「indented」を指定した p 要素の最初の行は「1em」分インデントされて表示される。 次のように「text-indent」に「-1em」(マイナス値)を指定し、さらに「margin-left」に「1em」を指定すると、最初の行以外は、「1em」インデ…

続きを読む

CSS3「rem」/ フォントのサイズ指定

2013年4月26日

ベースフォントとして html に「%」を使ってサイズを指定 html 要素にフォントのサイズ(ベースフォント)を一つ定義して、すべての子要素を「rem」で定義する。 フォントサイズを指定したい要素に対して、12px で指定したい場合は、「font-size: 1.2rem;」と記述する。 サポートしていないブラウザに対しては最初に「px」を指定し、その後に「rem」で上書きすることで対応可能。 rem (root em) :ルート要素(html 要素)に対する相対的なフォントサイズの単位。 em:親要素に対して相対的なフォントサイズの単位。親要素の「f…

続きを読む

引用文(blockquote 要素)を画像を使って装飾

2013年4月26日

引用文として定義するには blockquote 要素を使用する。 blockquote 要素はブロックレベル要素だが、直接インライン要素をやテキストを含むことができないので、p 要素などの他のブロックレベル要素を含まなければならない。(HTML5ではブロックレベル要素とインライン要素の分類はない) WordPress では、blockquote 要素を記述すると自動的に p 要素などで内容がマークアップされる。 cite 属性で引用もとの URI を明示しておくとよい。 書籍などの場合は、ISBN コードを指定(urn:isbn: を使用)できる。 ti…

続きを読む