Written by
watanabe
2カラムの固定、可変レイアウト
2カラムの固定と可変があるレイアウトをご紹介いたします。 カラムレイアウトと言えば、pxでの固定レイアウト、または%での可変レイアウトが思い出されると思います。今回は2カラム構成で、片方がpxでの固定、片方が%での可変レイアウトを作成します。 下記のソースは左カラムが固定で、右カラムが可変のCSSです。 左カラムは2行目の「.l_col_fix」で「float: left;」と...
Written by
watanabe
2カラムの固定と可変があるレイアウトをご紹介いたします。 カラムレイアウトと言えば、pxでの固定レイアウト、または%での可変レイアウトが思い出されると思います。今回は2カラム構成で、片方がpxでの固定、片方が%での可変レイアウトを作成します。 下記のソースは左カラムが固定で、右カラムが可変のCSSです。 左カラムは2行目の「.l_col_fix」で「float: left;」と...
Written by
watanabe
クリックで画像を横にスライドさせる方法をご紹介いたします。CSS3のtransitionとa要素のtarget属性がスライドの肝です。 使用している画像は4枚になります。 まず、2行目の「div.photo_area」でスライドエリア全体を中央に表示します。次に10行目の「div.photo_block」で指定した幅と高さを決めて、現在表示する画像以外のものを非表示にします。 ...
Written by
watanabe
CSSだけで横並びのリストタグの高さを揃える方法をご紹介いたします。 リストタグの横並びは「float」プロパティが思い浮かぶと思います。ここでは横並びに関しては、「display: inline-block;」を使用します。 2行目の「display: inline-block;」で横並びにし、4行目の「vertical-align: top; 」でli要素を上端揃えにします...
Written by
watanabe
CSS Expressionでmax-width、max-heightをIE6で使用する方法をご紹介いたします。 CSS ExpressionはCSS内にJavaScriptを記述できるCSSの拡張機能です。 プロパティの値にダイナミック・プロパティを書き入れてスクリプトを記述することがきます。 2行目から3行目はIE6以外のブラウザ、7行目から8行目はIE6用のプロパティです...
Written by
watanabe