Posts Tagged Design

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

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

Webで文章を書くときに最初にやっておくCSSの設定

Webサイトやブログを見てもらうためには、読みやすい文章を書く必要があります。読みやすい文章とは?? 「結論から述べる」「1文の文章量を適切なものにする」などいろいろな技法があります。 しかし、文章を書くための技法は一長一短で身につけられる…

CSSで三角形を描く方法

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

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

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

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

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

CSSで作るツールチップ

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

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

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