Posts Category CSS

CSSで角を丸くするborder-radiusの使い方

CSS3のborder-radiusプロパティを使用すると、今までは画像でしか表現できなかった丸角が簡単に作れるようになりました。 今回はこの「border-radiusプロパティ」の仕様と使い方を紹介します。 border-radiusの…

paddingとmarginの使い方

paddingとmarginは要素の間隔を空けるためのCSSプロパティです。paddingは要素の内側の余白、marginは要素の外側の余白を空けるために使用します。 CSSを使い始めたころは、paddingとmarginの違いが分からず覚…

CSSで作るリストデザイン

HTMLのリスト要素である「ul」「ol」は連番や丸、四角などの形を作成できますが、デザイン面がいまいちです。 しかし画像を一から作るのは手間がかかり、大変です。そこでCSSを使用して画像の代用できないかと思い10種類のリストデザインを作成…

Tableのヘッダ固定を行うCSS & JQuery

テーブルの行列のヘッダ固定は、業務系のWebアプリでかなりの需要があるのですが、実際に実装しようとするとかなり面倒な機能の一つです。 今回は、CSSやjQuery、jQueryプラグインを使うヘッダ固定の方法を3種類紹介します。 対応ブラウ…

CSSで三角形を描く方法

CSSを使ったデザインも年々進化して、角を丸くしたり影を付けて見たりと画像と見分けが付かないほどになってきています。 今回はそんなCSSのデザイン技術の一つで三角形を作る方法を紹介したいと思います。三角形をCSSで作れれば、ボックスを合わせ…

CSSで作るフラットなアイコンセット

CSS3から丸角用のプロパティ(radius)や傾きを付けれるプロパティ(transform)などが実装されたため、今まで画像として作成していた複雑な形がCSSで作れるようになりました。 今回は、CSS3がどこまで画像の代わりなるか?出来る…

CSSで作るツールチップ

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