sampleの検索結果

仕事でよく使う「詳細はこちらへ」の組み方について

仕事でよく使う「詳細はこちらへ」の組み方について

久しぶりの更新です。お盆前はくそ忙しく、お盆は遊びほうけ、お盆明けはやる気なしですっかり更新出来ないでいました...
そろそろお盆ボケを戻していかないとまずいので更新していたきたい思います!

ここからが本題ですが、上記画像の様にイメージ画像があり、その中に「詳細はこちら」って感じのパターンって最近仕事でよく使うんですが、こういう時の組み方って大きく分けて背景画像にする方法と position を使う方法があると思うでその方法を紹介したいと思います。

blockquote(引用部分)をCSSでデザインするサンプル集

blockquote(引用部分)をCSSでデザインするサンプル集

ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。

そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。

demo page

jQuery フォームにテキストをうっすらと出すプラグイン

jQuery フォームにテキストうっすらと出すプラグイン

フォームなどのテキストを入力する所に予め何を記入したら良いのかを記述してあるとユーザービリティ上凄く良いと思います。

そんな時に使えるのが今回紹介します「jQuery Watermark Plugin」です。

demo page

知っておくと便利なCSSテクニック

CSS

CSSにはちょっとした小技的っていろいろあると思うですが今回はちょっと記述しただけで解決が出来るような小技をいくつか紹介したいと思います。

CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法

CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法

PDF、Excel、Word、ZIPや外部リンクなどにアイコンが付けるが付いてるサイトって見かけると思うですがこれを自動でつくようにCSSで指定する事が出来るので紹介しておきます。

Coding Architectureさんの「外部リンクだけにアイコンをつける」を参考にさせて貰いました。

demo page

検索フォームをCSSでデザインするサンプル集

検索フォームをCSSでデザインするサンプル集

Webサイトに「サイト内検索」ってよく見かけると思うですが、今回はその検索フォームをCSSでデザインする際のサンプルをいくつか作ってみましたので簡単な解説付きで紹介したいと思います。

demo page

ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法

ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法

海外のサイトとかでよく見られるんですが、背景画像がドーンと大きく置いてあり、その上にコンテンツがあるようなサイトがあるかと思います。

代表的なサイトと言えばWeb Designer Wallさんが有名だと思いますが、この用なサイトも背景画像さえ出来ればけっこう簡単に出来ちゃうんで、その組み方を解説したいと思います。

demo page

吹き出しを使ったコメント欄のサンプル

吹き出しを使ったコメント欄のサンプル

ブログなどのコメント欄が吹き出し風になっているサイトをたまに見かけるとは思うですが、それをCSSで装飾する時のサンプルを作ってみました。

作り方が分からない人の為に解説付きで紹介したいと思います。

demo page

サイドバーを固定にしたサンプル

サイドバーを固定にしたサンプル

今回はWebサイトのサイドにある部分を固定にするサンプルを作ってみました。

IE6も対応なので、解説していきたいと思います。

demo page

フッターを固定にしたサンプル

フッターを固定にしたサンプル

前回はヘッダーを固定にサンプルについて説明しましたが、今回はフッターを固定にしたサンプルを紹介します。

IE6に対応させる為に、以前にも紹介させて頂いたCyokodog::Diaryのcyokodogさんが使ったスクリプトを使いたいと思ったいたいと思います。

demo page

CSSでヘッダーを固定にしたサンプル

CSSでヘッダーを固定にしたサンプル

ヘッダーを固定にしたサイトってCSS HappyLifeさんとかが有名だと思いますが、そんな感じにヘッダーを固定にサンプルを作ってみました。

IE6も対応なので、解説していきたいと思います。

demo page

[JS]タブ式メニューとアコーディオンをつかったサンプル

[JS]タブ式メニューとアコーディオンをつかったサンプル

昨日紹介しましたアコーディオンとタブの切替を使ったサンプルを作ってみました。

この前紹介したyuga.jsにはタブの切替機能もついていますので、自分はいつもこのyuga.jsの機能を使ってやっていますので、それの使い方など簡単な解説をしておきたいと思います。

demo page

jQueryでの開閉式のアコーディオンの動きいろいろ

jQueryでの開閉式のアコーディオンの動き

クリックをすると開閉するようなメニューやコンテンツってよく見かけたりしますし、実際に使いたいってクライアントもけっこう多いですしね。

開閉時の動きについても実際いろいろとあるわけなんですが、今回はjQueryで出来る一番基礎的な事を紹介しておきたいと思います。

demo page

position:fixedのright , bottomをIE6に対応させる

position:fixedのright , bottomをIE6に対応させる

以前CSS : positionの「absolute」「relative」「fixed」のリファレンスというエントリーをしたんですが、この時はIE6にright , bottomへの対応の仕方について分かっていなかったのですが、Cyokodog::Diaryのcyokodogさん、THE HAM MEDIAのハムさんに教えて頂いたので紹介しておきたいと思います。

demo page

[jQuery]Flashのように画像やテキストを切り替えるs3Slider.js

[jQuery]Flashのように画像やテキストを切り替えるs3Slider.js

以前コリスさんで紹介されていて知ったのですが、s3Sliderはフラッシュのように画像やテキスト切り替えてくれるスクリプトです。

動きもスムーズですし、テキストも上下左右から表示する事が出来るのでけっこう使い道はありそうなので詳しく解説しておきたいと思います。

demo page