CSS リファレンス

CSSで可変対応した角丸のボックスを作る その2

CSSで可変対応した角丸のボックスのサンプル

前回のCSSで可変対応した角丸のボックスを作る その1は、画像を上部、下部の二つに分けてやっていたのですが、今回は上記画像の用に上部、中部、下部に画像を切り出してやるやり方を解説したいと思います。

Domo Page

CSSで可変対応した角丸のボックスを作る その1

CSSで可変対応した角丸のボックスのサンプル

このような感じで角丸のボックスにテキストの内容が囲われているデザインパターンってよく見かけますし、実際に仕事でも使う機会が多いので分からない人やあやふやな人に参考になるようなサンプルを作ってみました。

今回は角丸のボックス内がグラデーションになっている場合のやり方を解説したいと思います。

Domo Page

サイト全体を上下中央配置にする方法

上下中央配置

サイト全体を包むdiv要素を上下中央配置にしたい!って声をちょこちょこ聞きますので解説をしていきたいと思います。

でも個人的に普通のWebサイトを上下中央にするのは好まないですよね...

フルFlashのサイトかや写真をメインに見せたいようなフォトギャラリー系のサイトなら良いと思うので今回は以前にも解説をしたlightview.jsを使ったPhoto Galleyのサイトをデモページとして作ってみました。

img要素のデザインをCSSでいろんなパターン装飾してみる

今回のサンプルで使う画像です。

例えば、企業系のWebサイトとかで、商品画像とか、イメージ画像とかって使う機会ってけっこうあると思うんですが、ただ画像をおくだけでは寂しいですよね...

この時にimg要素に薄い色のborderを入れてあげるだけでけっこう綺麗になると思うですよね。

なので今回はimg要素のデザインをいろんなパターン作ってみたので、参考にしてみて下さい。

TableをCSSでデザインするいろんなパターンのまとめ

tableタグを使う機会ってそう多くないと思うですが、料金表とか組む時はtableタグを使うのが一番だと思います。

ここで本題なんですが、自分は料金表などのデザインのバリエーションがうとく、何時も同じようなパターンになってしまうんですよね...。
なので今回は料金のデザインのパターンと、それをCSSで組むやり方の両方を紹介してくれるサイトをまとめました。

ネガティブマージンを使ってレイアウトしてみる

ネガティブマージン使用例

↑の画像のようなレイアウトってよく使われていると思うですが、こういうレイアウトをネガティブマージンを使う事でソース上も綺麗に収まりますし、使いけっこう使いがってもいいのでオススメしたいと思います。

CSSでリンクタグをいろんなパターンデザインしてみる

リンクタグのhover後の動きっていろいろパターンってあると思うですが、よく使われている用なパターンをいくつか作ってみたので、参考になればと思います。

CSSのみで画像のロールオーバー(その1)

画像のロールオーバーって色々やり方ってあると思うんですが、今回はソースも短くて済む手軽な方法を紹介したいと思います。

Domo Page

フッターでよく使われているナビゲーションのサンプル

フッターナビ

←の用なテキストで出来たナビゲーションをよくWebサイトの下部あたり見かけると思うんですが、その作り方をいくつか解説しておきたいと重います。

class(クラス)を複数設定する方法

案外知らない人も多いみたいなので、紹介しておきたいと思います

方法と言っても凄く簡単です。

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年