CSS

CSS でバルーン (吹き出し) を作る

CSS だけで、バルーン (吹き出し) を3パターン作ってみました。 ひらめきのバルーン 話すときのバルーン 思い出すときのバブルバルーン ひらめきのバルーン CSS だけで、バルーン (吹き出し) を作ってみました。これは、ひらめきのバルーンです。 HTML <div class=”balloon-idea”><p>CSS だけで、バルーン (吹き出し) を作ってみました。これは、ひらめきのバルーンです。</p></div> CSS balloon-idea { position: relative; width: 240px; margin: 0 auto; padding: 40px; font-size: 18px; background: linear-gradient(#e5f2ff, #b2d9ff); background: -moz-linear-gradient(center top, #e5f2ff, #b2d9ff); background: -webkit-gradient(linear, center top, center bottom, from(#e5f2ff), to(#b2d9ff)); border-radius: 210px / 120px; -moz-border-radius: 210px […]

Published: 2012年3月5日 | Category & Tags: Web サイト制作, | Comment: 0

nth-child() 疑似クラス

任意の順番の要素を指定することができる nth-child() 疑似クラスを使用し、コードをスマートにしましょう! 偶数の要素に CSS を適用 li:nth-child(2n) または li:nth-child(even) 奇数の要素に CSS を適用 li:nth-child(2n+1) または li:nth-child(odd) 指定数ごとの要素に CSS を適用 li:nth-child(指定数n) 指定スタート数から指定数ごとの要素に CSS を適用 li:nth-child(指定数n+指定スタート数) 指定数の要素に CSS を適用 li:nth-child(指定数) 最後から指定数の要素に CSS を適用 li:nth-last-child(指定数) 最初から指定数までの要素に CSS を適用 li:nth-child(-n+指定数) 最後から指定数からの要素に CSS を適用 li:nth-child(n+指定数) 最初の要素に CSS を適用 li:first-child 最後の要素に CSS を適用 li:last-child

Published: 2009年12月5日 | Category & Tags: Web サイト制作, | Comment: 0

IE6, IE7 のバグ取りに最も簡単な CSS ハック

イライラする IE のバグ!簡単に解決して、次ぎの作業に取りかかりたいものです。 私は管理するするのが簡単な、以下の方法を使用して対処しています。 IE6 以下に CSS を指定 * html {} IE7 のみに CSS を指定 *:first-child+html {} 一応使用例 * html .your_class { color: #990000; /* IE6 */ } *:first-child+html .your_class { color: #990000; /* IE7 */ }

Published: 2008年11月2日 | Category & Tags: Web サイト制作, | Comment: 0

CSS だけで要素をブラウザの中央に配置

Flash を使わずに CSS で <div> をブラウザの中央に配置する方法 実際に使用した例 » www.ludhaus.com CSS #wrap {    position: absolute;    width: 800px;    height: 600px;    left: 50%;    top: 50%;    margin-left: -400px;    margin-top: -300px; } 注意! margin-left は width の半分 margin-top は height の半分 HTML <div id=”wrap”>    your contents </div>

Published: 2007年8月22日 | Category & Tags: Web サイト制作, | Comment: 0