Written by
watanabe
縦と横に可変可能な角丸ボックス
テーブルタグを使用せずに、縦と横に可変可能な角丸画像を表示する方法をご紹介いたします。 使用する画像は下記の4つです。 左上の角丸画像(13x13) 右上の角丸画像(13x13) ......
Written by
watanabe
テーブルタグを使用せずに、縦と横に可変可能な角丸画像を表示する方法をご紹介いたします。 使用する画像は下記の4つです。 左上の角丸画像(13x13) 右上の角丸画像(13x13) ......
Written by
watanabe
CSSだけで画像に白い半透明のマウスオーバーを実現する方法をご紹介いたします。 下記のCSSでは「.alpha」クラスのa要素がhoverする際のimgに対してスタイルが効くようにしています。 1行目の「opacity: 0.7;」でimgの透明度を変更しています。 2行目の「 filter: alpha(opacity=70);」はIE用の指定で、IEにも対応するようにしてい...
Written by
watanabe
テキストエリアに対して、任意で高さを変更できる、角丸背景の画像を表示する方法をご紹介いたします。 まず、テキストエリアのスタイルをリセットするプロパティを指定します。 「-webkit-appearance: none;」、「-webkit-border-radius: 0;」はスマートフォン用に記述しています。 textarea { outline: none; overfl...
Written by
watanabe
input type textに対して、任意で幅を変更できる角丸背景の画像を表示する方法をご紹介いたします。 まず、inputのスタイルをリセットするプロパティを指定します。 「-webkit-appearance: none;」、「-webkit-border-radius: 0;」はスマートフォン用に記述しています。 input { outline: none; backg...
Written by
watanabe
以前、「幅と高さが異なる画像をボックスの中で垂直中央に表示」する方法をご紹介いたしました。今回はその改訂版をご紹介いたします。 今回はIEの独自仕様である「layout-grid-line」というプロパティを追加しています。 「layout-grid-line」というプロパティは行グリッドの高さを指定するもので、ここでは「height」プロパティと同様の値を指定することで、IE...