読者です 読者をやめる 読者になる 読者になる

EQuipe Blaireau

エキップ・ブレロー

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の基準位置とな…

Photoshopの抽出作業が捗る!Adobeのオンラインツール「Project Parfait」が便利

Web制作に欠かせない開発ツールであるPhotoshopですが、コーディング時に必要な情報を確認する作業が非常に億劫だと感じたりしませんか? そんな作業を楽にできるツール Project Parfait(プロジェクトパフェ)を解説します。 「プロジェクトパフェ」は、Ado…