Posts Category CSS

ボックス要素内で縦位置の中央揃えを行う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で良く利用す…

CSSで作るdivボックスデザイン

pタグは文章、tableタグは表と言ったようにタグにはそれぞれ意味があります。しかし、divタグはHTML上意味の無いタグとして扱われます。 そのため、レイアウトやデザインなど装飾に使われます。 今回はそんなdivタグでボックスデザインをい…

Webサイトの読み込み速度を上げるためのJavaScript / css の最適化

Webサイトの読み込み速度を上げるため、JavaScriptとcssを最適化する方法を紹介します。 cssやJavaScriptに改善の余地がある場合は、以下のサイトにURLを入力すると「次のCSS 配信を最適化してください」や「レンダリン…

CSSで作る見出しデザイン

見出しはサイトの見た目を決める上で重要な箇所です。 印象的な見出しは、それだけでサイトを引き立ててくれます。 今回は、そんな見出しのデザインをCSSで10パターン作成してみましたので、参考にして下さい。 見出しデザイン 当ブログの見出し チ…