Web制作

CSS3の「text-shadow」を使用したクールなテキストエフェクト

CSS3エフェクトを取り入れたWebサイトも一般的になり、結構なサイトで実装されています。なかでも、テキストに影をもたせるエフェクトをよく見かけます。最近では、最新ブラウザの発展により実装が簡単になりました。そこで今回は、CSS3のtext-shadowを使用…

HTML要素をナンバリングする!CSS擬似要素を使って見出しに連番をつける方法

HTML要素にナンバリングしたい場合、jQueryを使う方法が一般的ですが、CSSで行う方法を紹介します。以下のような具合が完成イメージです。まずベースとなるHTMLを用意します。 <article> <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3> <p>ダミーテキストダミーテキスト</p> <h3>小見出し</h3> <p>ダミーテ</p></article>…

ブロックレベル要素の横並びリストをセンタリングするCSSスニペット

ページ送りとかフッターナビ等で見掛ける中央寄せのCSSスニペットを紹介します。 リストをセンタリングするスタイルシート センタリングパターン1 ブロックレベル要素をfloatした横並びリストをセンタリングする方法です。ポイントはpositionの基準位置とな…