HOME > 開発者向けBLOG >  2012 January

Technology Note 開発者向けBLOG

開発者向けBLOG アーカイブ January, 2012

2カラムの固定、可変レイアウト

2カラムの固定と可変があるレイアウトをご紹介いたします。 カラムレイアウトと言えば、pxでの固定レイアウト、または%での可変レイアウトが思い出されると思います。今回は2カラム構成で、片方がpxでの固定、片方が%での可変レイアウトを作成します。 下記のソースは左カラムが固定で、右カラムが可変のCSSです。 左カラムは2行目の「.l_col_fix」で「float: left;」と...

続きを読む

transitionとtargetでクリック時に画像を横にスライド

クリックで画像を横にスライドさせる方法をご紹介いたします。CSS3のtransitionとa要素のtarget属性がスライドの肝です。 使用している画像は4枚になります。 まず、2行目の「div.photo_area」でスライドエリア全体を中央に表示します。次に10行目の「div.photo_block」で指定した幅と高さを決めて、現在表示する画像以外のものを非表示にします。 ...

続きを読む

横並びのリストタグの高さを揃える

CSSだけで横並びのリストタグの高さを揃える方法をご紹介いたします。 リストタグの横並びは「float」プロパティが思い浮かぶと思います。ここでは横並びに関しては、「display: inline-block;」を使用します。 2行目の「display: inline-block;」で横並びにし、4行目の「vertical-align: top; 」でli要素を上端揃えにします...

続きを読む

CSS Expression

CSS Expressionでmax-width、max-heightをIE6で使用する方法をご紹介いたします。 CSS ExpressionはCSS内にJavaScriptを記述できるCSSの拡張機能です。 プロパティの値にダイナミック・プロパティを書き入れてスクリプトを記述することがきます。 2行目から3行目はIE6以外のブラウザ、7行目から8行目はIE6用のプロパティです...

続きを読む

立体的な影を表示

CSSだけで立体的な影を表示する方法をご紹介いたします。 ポイントは「div.shadow_box」での「position: relative;」の相対指定と「top: -5px;」、「left: -5px;」です。位置を移動させる要素に相対指定し、上と左にマイナスを指定をして、影があるように見せています。 div.shadow_area { width: 150px; hei...

続きを読む

PAGETOP