Posts Tagged CSS

無料で使えるフラットアイコンフォント「Genericons」

「Genericons」はWordPressのデフォルトテーマ「TwentyFourteen」にも使用されているアイコンフォントです。汎用的なアイコンが揃っており、CSSで色やサイズが簡単に変更できるため、どんなWebサイトやブログに合うよ…

CSSで作るツールチップ

少ない表示領域を補うためや、ページをスッキリされる手段としてツールチップは良く利用されます。 jQueryやjavascriptを利用したリッチなツールチップのプラグインは良く見かけますが、今回はCSSのみでツールチップを実現してみました。…

ポップアップで画像を拡大表示するjQuery

画像をホップアップ表示する有名なjQueryのプラグインには「LightBox」があります。 LightBoxほど多機能ではありませんが、画像をポップアップ表示するため処理を実装してみたので紹介します。 ポップアップで画像を拡大表示する ポ…

ボックス要素内で縦位置の中央揃えを行うCSS

CSSで横位置の中央揃えをするときは「text-align:center」と指定するだけでできますが、縦位置の中央揃えを行う「vertical-align:middle」はtableのセル内でしか使えません。 divタグなどで縦位置の中央揃…

jQueryで作る開閉式のメニュー

jQueryで何かするときは、自作するよりやりたい処理を実装しているプラグインを探すことの方が多いと思います。 メニューも「メニュー jQuery」で検索すればプラグインが多くヒットしますが、自分んで組んでおいた方が後々メンテや少しメニュー…

CSSの擬似要素「:before」「:after」の使い方

CSSはHTMLで作られた要素の構造を装飾するためのものです。 しかしCSSの擬似要素「:before」「:after」は、CSS側からHTMLに要素を追加することが出来ます。 そのため、見出しやボックスエフェクトなどに利用するとHTMLの…

良く利用するCSS3プロパティのクロスブラウザ対応まとめ

CSS3では、丸角や影をつけたりと今まで出来なったリッチなUIが作れるようになりました。 しかし、まだ全てのブラウザで完全に実装されていないため、ベンダープレフィックスや独自のプロパティが必要となってきます。 そのため、CSS3で良く利用す…