CSS リファレンス

コーディングするのが楽になるかも?と思うCSSテクニックのまとめ

コーディングするのが楽になるかも?と思うCSSテクニックのまとめ

今まで使ってコーディングが楽になったと思われるCSSテクニック(一部CSSではない部分もありますが...)などをまとめておきたいと思います。

コーダーの方は知っている事が殆どだと思いますが、知らない人は直ぐにでも使える簡単な事も多いので是非使ってみて下さい。

demo page

最近のブラウザ使えそうなCSSハックの一覧

最近のブラウザ使えそうなCSSハックの一覧

個人的にハックはあまり使いたくないと言う考えなんですが、ちょこっとハックを使うだけで便利になる事はけっこうあるかと思います。

なので最近のブラウザで使えそうなハックを改めてまとめてみました。

demo page

こういう所で使ったら便利なネガティブマージン

こういう所で使ったら便利なネガティブマージン

以前ネガティブマージンを使ってレイアウトしてみるでネガティブマージンの使い方については紹介したのですが、実際にどういう所に使うのか分からない...って事も聞きましたので、実際にこういう所で使ったら便利だと思う所をいくつか紹介したいと思います。

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

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

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

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

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

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

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

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

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

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年