フッターをブラウザの下部に常に表示させたい。 そんなときにおすすめなのが、『CSS Sticky Footer』。ブラウザの下部にフッターを固定表示するCSSだ。 クロスブラウザで、IEやFxはもちろん、Opera、Safari、Google Chrome、Chaminoなどにも対応している。 ブラウザ対応状況は以下から。 » Here is the Full List HTML、CSSもとてもシンプルなので、ぜひ見てみてほしい。 ブラウザの下部にフッターを固定表示するCSS、チェックして使ってみてはいかがだろうか。 » CSS Sticky Footer Oisixの野菜を炒めて食べました。だいぶ減ってきたな。じゃがいもとたまねぎがうめぇ。

フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。 ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 対応ブラウザは以下の通り。 ・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか？ cleanstickyfooter 今日もいい天気ですね〜。タス

グローバルメニューに説明を加えたい。 そんなときに使えそうなのが、『jDiv』。説明を追加できる、jQueryを使ったドロップダウンメニューです。 メニューにマウスオーバすると、メニューのリストと説明の入る部分が大きく表示されますね。ふわっと表示される動きが気持ちいいです。 マウスオーバ時に現れるコンテンツは#hidden-divに書いて、あとはjdiv.jsを編集して複数のメニューに対応させるようですね。 デモは以下から。 Skip the code & show me the demo ちょっと変わったメニューになっているので、一度見てみてください。 jDiv: A jQuery navigation menu alternative ±0の加湿器を購入。TAKUMIのCHIMNEY2と迷ったんだけど、やっぱりデザインにひかれてこっちを選択。深澤直人さんデザインで、MoMAの永久収蔵品

CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-border-radius: 32px;//for Firefox -webkit-border-radius: 32px;//for Safari and chrome border-radius: 32px;//CSS3 behavior: url(border-radius.htc);//for IE すごく簡単な方法なので、CSS3での角丸はこれで決まりな

かっこいいスライドギャラリーを実装したい。 そんなときにおすすめなのが、『GalleryView』。動きの洗練されたjQueryのスライドギャラリーです。 キャプションを付けられたり、画像だけフェードイン&アウトで切り替えたり、いろいろなタイプがありますね。しかも動きがかなり気持ちいいです。 デモは以下から。 Default Implementation Panels Only – Lightbox style gallery ソースもシンプルになっていますね。 ぜひ見てみてください。 GalleryView: A jQuery Content Gallery Plugin アバターを見てきました。迫力があって感動しましたね。

1つ前のエントリー（Twitterの最新の投稿をオリジナルのデザインで表示する方法）でやってみたくなったので、デザインとCSSをいじってサイドバーに設置しました。 なかなかいい感じ。 ソースは以下の通りです。 XHTML <div id="twitter"> <ul id="twitter_update_list"></ul> </div> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/creamu.json?callback=twitterCallback2&count=1" type="text/javascript"></script> #twi

Photoshopをもっと使いこなしたい。そんなあなたにおすすめなのが、『10 Photoshop Interface Features you Didn’t Know Existed』。あなたが知らないかもしれないPhotoshopの使い方です。 なかなかいい感じのが揃っていますよ。 背景色をグレー以外の色に変更する グレーがぼんやりしているなら、ウィンドウの背景色を黒に変えてみよう。右クリックで可能だ。他の色も選べる 描画色と背景色を簡単に変更する スポイトツールで、altを押しながら色を選択すると、背景色を変更できる シェイプや選択範囲の位置を変更する シェイプや選択範囲を描いている途中で、位置を変更したい場合、スペースバーを押しながら描いたり選択範囲を作成することで移動できる 選択範囲を復活させる 選択範囲を失ってしまった場合、「Ctrl + Shift + D」でもう一度選択範囲

nettuts+で、超クールなJavaScriptプラグインがまとまっています。 いくつかご紹介しますね。 » JQuery Validate jQueryによるクライアントサイドのバリデート » PrettyCheckboxes – jQuery FancyFormと似たかわいいチェックボックスを作るjQueryライブラリ » Thickbox 画像だけでなくテキスト等も読み込めるlightbox » FancyBox 超クールなFancybox。画像をすーっと拡大してくれる。デザインがMacライク » Slideshow 2! for MooTools とてもクールなMooToolsによるスライドショー » SmoothGallery こちらも超クールなスライドショー。MooTools v1.11を使用 » DynamicDrive – Carousel Slideshow 3Dに魅せ

Quenessで、jQueryを使って画像にオーバーレイのキャプションをつけるサムネイルギャラリーの作り方が紹介されています。 ソースは以下のようになっていて、とてもシンプルですね。 <div class="photo"> <div class="heading"><span>Pier</span></div> <img src="images/pier1.jpg" width="300" height="186" alt="" /> <div class="caption"><span>Lorem de scua shemf huan rougt ecrit vato de souju kanasa.</span></div> </div> 画像にマウスオーバーすると、トランジションでキャプションが表示されます。 ぜひ見てみてください♪ » Create a Thumbnail Gall

1st webdesignerで、CSSとJavaScriptで作るフォームエレメントのチュートリアルがたくさん紹介されています。 いくつかご紹介。 ↑は、Changing Form Input Styles on Focus with jQuery。フォームの中にラベルを表示して、フォーカス時にラベルを消してくれる Turn postcard photo into a stunning comment form using CSS 古いポストカードを使ってコメントフォームをつくったようなデザインのチュートリアル CSS Tableless Form テーブルを使用しないフォームデザイン。floatとネガティブマージンを使用 テクニカルで気の利いたものが多いですね。 その他は以下からどうぞ。 » 51 Form Element Resources and Tutorials Using C

Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ