CSSの最近のブログ記事

今回は以前の記事に続き、複数行の見出しに対応した画像の装飾に付いての解説です。

ポイントはHTMLは前回と同じものを利用して、違うデザインにすることです。前回と同様、横幅のみ固定して、縦に伸ばしてもうまく背景画像内にテキストが収まるようにします。

CSSの初心者向けの本や記事は「背景画像を使って見出しを飾ろう」という感じで、繰り返しのない一枚の画像を置く方法書いてくれていることはあっても、繰り返しについてはあまり詳しく触れられていないことが多い気がします。

逆に上級者向けのものを見ると、この辺りはできて当然というレベルで、説明を飛ばしてしまっています。

こんな状態なので、今ばりばりコーディングをやっている人でも初級者から中級者への移行期は結構悩んだりしたんじゃないでしょうか。

そんな風に思い、これから何回かに分けて見出しの装飾方法を紹介して行こうと思います。

まずはブログなどで見出しを書くと横幅も縦幅も固定された背景画像を利用すると、長いタイトルの時など背景画像からはみ出てしまいますが、それを画像の分割とCSSでうまく回避する方法を紹介します。

今はまだ全体を覆うdiv要素の中にマルチカラムでレイアウトされているものが多いと思うので、比較的横への繰り返しは制限されている一方、縦は自動的に繰り返される仕様になっていることが多いですから、縦への繰り返しを使ってテキストのはみ出しを回避したいと思います。

ホームページを作成していると、画像を中央に寄せたいと思うことがよくあります。

意外とブロック要素で括ってtext-align属性で中央寄せをしている方も多いようですので、今回は簡単に画像を中央寄せ（左寄せ・右寄せ）する方法を紹介します。

先日紹介した『最初に指定しておくCSS』ですが、自分の中で色々と考えたり、作業の上でこっちの方が良いかも、と思えるようなことがいくつかあり、修正しました。改めて記事としてアップしておきます。

最近、結構悩んだのでメモ代わりに書いておきます。

先日、作成したサイトがWindows Vista & IE7で見ると崩れるので直せないかとと相談され、CSSの修正に取り組みました。

しかし、ざっとCSSに目を通しても、特におかしいところは見当たらない。色々と悩んだ挙句、問題はそのサイトをコーディングした人のclearfixに問題があるのではないかと思い、手を加えたところ意外にあっさりと崩れなくなりました。

Win XPでは崩れが確認できなかっただけに余計大変でしたが、うまく直ってくれてほっとしています。

以前からsitemap.xmlのデザインが味気ないなと思っていました。

それで調べてみたらやっぱりXMLをデザインする方法ってあるんですね。他にも方法はあるらしいのですが、とりあえず、慣れたCSSでデザインしてみることにしました。

複数のブラウザを対象に(x)html+cssでコーディングをする際、リセットCSSを使っている人は多いと思います。私も、有名なYUI Reset CSSから使い始めて、今では自分なりに色々追加したり削除したりしながら使っています。作成するサイトによって色々と細かい部分を変えますが、だいたいはこんな感じの指定をします。