デザインに関する記事

lightbox風なポップアップを出したい時は「fancybox」がおすすめです。 今回は「fancybox」を使ったポップアップを出す方法を紹介します。 ＜下記からダウンロード＞ http://fancybox.net/home ...

クリックされた要素のID名をクラス名として持つ要素を 表示・非表示と順に切り替える方法を紹介します。 この方法で、１つのjqueryのメソッドで複数の表示切り替えが作れます。 HTML内で同じID名は１ページにつき１つのみ...

画像を使うとなると、要素の大きさにより一つ一つ作り直す必要がありますが CSSでエフェクトをつけることで面倒な画像作成の手間がなくなります。 今回は紙がめくれたようなエフェクトを画像を使わずにつける方法を紹介します。 HTML ...

グラデーション効果を出して少し凝ったロゴやテキストにしたいとき、 いちいち画像化させるのが面倒な方はこの方法がおすすめです。 HTML CSS 参考：http://webdesignerwall.com/tutorials/c...

小さめなボックスに長文のテキストやURLを入れると、折り返しされず ボックスからはみ出てしまうことがあります。 この対策にはwhite-spaceが使えます。 HTML CSS 長文のテストです長文のテストです長...

テキストリンクにカーソルを合わせると、色を変化させる効果を使ったページは よく見かけますが、これをCSSだけで色をやわらかく変化させる方法を紹介します。 文字の色をゆっくり変化させる HTML CSS ゆっくり変化するテスト...

画像を使わずちょっとおしゃれなエフェクトをつけてみようの会です。 今回は貼りつけた付箋紙のような効果をつける方法を紹介します。 box-shadowで影をつけ、transformでその影の角度を変えてみましょう。 box-shado...

角丸はborder-radiusプロパティを使うことで表現することができますが、 ブラウザ毎に指定の方法が違います。 そしてIEではそのままでは角丸が使えなかったりします。。 今回はFirefox、Safari、Chrome、IEで使...

ドロップキャップと呼ばれ、雑誌などで見かけるレイアウトです。 今回はCSSを使って文章の最初の１文字を大きくする方法を紹介します。 HTML： CSS： これで、pタグで囲まれた文章の１文字目が大きくなりました。 ...

ブロックなどの要素を自由な位置に配置する方法です。 親要素のpositionにrelativeを指定し、自由な位置に配置したい要素にabsoluteを 指定するだけでできます。 positionボックスの配置方法を指定するプロパティ。...