HOME > 開発者向けBLOG >  Webデザイン

Technology Note 開発者向けBLOG

Webデザイン

checkedセレクタでラジオボタンを表現

checkedセレクタで、画像を使用せずにラジオボタンを表現する方法ご紹介いたします。 ポイントは27行目の「opacity: 0;」と32行目の「input[type="radio"]:checked + label」です。 「opacity: 0;」を使用している理由は、「dispay: none;」ではスマートフォンのアンドロイド携帯では表示されてしまいますので、「opa...

続きを読む

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用のプロパティです...

続きを読む

PAGETOP