Powered by
Movable Type 3.35

メイン

カテゴリー:HTML/CSS

CSSでタブをつくってみるはてなブックマークに追加 livedoorクリップに追加 Yahoo!ブックマークに追加 del.icio.usに追加 イザ!ブックマーク ニフティクリップに追加

こんにちは、HTML+CSS担当の小森です。

ウェブサービスをつくるうえで、ユーザにとってわかりやすくて、使っていて楽しい、
そんな魅力的なインタフェースをつくれたらいいですよね。
これをCSSでどう実現するか、という視点でいろいろ考えていければと思っています。

今日のお題は「タブ」です。

タブは直感的でわかりやすく、AmazonなどECサイトにも使われますよね。
グローバルナビゲーションとして、また情報ブロックの切り替えパーツとして、使いどころはたくさんある便利なヤツです。

続きを読む "CSSでタブをつくってみる" »

CSSボタンあれこれはてなブックマークに追加 livedoorクリップに追加 Yahoo!ブックマークに追加 del.icio.usに追加 イザ!ブックマーク ニフティクリップに追加

こんにちは、HTML+CSS担当の小森です。

Webサービスは、ユーザにアクションしてもらってナンボ。ボタンは、押されてナンボ。
ということで今日のお題は、Webサービスには欠かせない、「ボタン」です。

ボタンのデザインを変えるのに一番ポピュラーなのは、いわゆる「イメージボタン(<input type="image" />)」を使用することですよね。
今回はイメージボタンではなく、たとえばこんなプレーンなinputボタンを、CSSの組み合わせでデザイン変更するところからはじめてみたいと思います。

btn_plane.gif

 

続きを読む "CSSボタンあれこれ" »

Lightboxのデザインをカスタマイズしてみよう(前編)はてなブックマークに追加 livedoorクリップに追加 Yahoo!ブックマークに追加 del.icio.usに追加 イザ!ブックマーク ニフティクリップに追加

こんにちは、HTML+CSS担当の小森です。

スライドショーやサムネイル画像の拡大でよく見かける「Lightbox」のライブラリ。
気軽に取り入れられるライブラリでもあって、すっかり定着した感がありますね。
今回はこのLightboxのデザインをカスタマイズしてみたいと思います。

image_main.jpg

続きを読む "Lightboxのデザインをカスタマイズしてみよう(前編)" »

lightboxをカスタマイズしてみよう(中編)- 角丸対応ライブラリとCanvasはてなブックマークに追加 livedoorクリップに追加 Yahoo!ブックマークに追加 del.icio.usに追加 イザ!ブックマーク ニフティクリップに追加

image_main.jpg

※このエントリは「Lightboxのデザインをカスタマイズしてみよう(前編)」のつづきです。

こんにちは、HTML+CSS担当の小森です。
ずいぶん間が空いてしまいましたが、前回の続きです。前回は、CSSだけでlightboxを角丸にする方法をいろいろと模索したものの、サイズ可変に対応できなかった…というところで終わりました。

続きを読む "lightboxをカスタマイズしてみよう(中編)- 角丸対応ライブラリとCanvas" »