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

Technology Note 開発者向けBLOG

Webデザイン

CSSだけで画像に白い半透明のマウスオーバー

CSSだけで画像に白い半透明のマウスオーバーを実現する方法をご紹介いたします。 下記のCSSでは「.alpha」クラスのa要素がhoverする際のimgに対してスタイルが効くようにしています。 1行目の「opacity: 0.7;」でimgの透明度を変更しています。 2行目の「 filter: alpha(opacity=70);」はIE用の指定で、IEにも対応するようにしてい...

続きを読む

スマートフォンでinput type text等の幅を揃える

スマートフォンで見たときに「input type text」等の幅を合わせる方法をご紹介いたします。 「input type text」や「textarea」で幅が合わない場合、大抵の理由はその要素が持っているパディングやボーダーにあります。 左右のパディングに対して「0px」を指定すると、実際に指定した「width」以外の幅の要素を除外することができますが、その場合、入力時に...

続きを読む

iscrollのスクロールバーのスタイルを変更

前回は「iscroll.js」を使用して、スマートフォンで横スクロールバーを出しつつ、横スクロールする方法をご紹介いたしました。 今回は、スクロールバーのスタイルを変更する方法をご紹介いたします。 前回同様、元となる「jquery.js」と「iscroll.js」をダウンロードして、読み込みます。 <script type="text/javascript&qu...

続きを読む

スマートフォンで部分横スクロール

スマートフォンで横スクロールバーを出しつつ、横スクロールする方法をご紹介いたします。 通常、Androidではスクロールバーを出すことはできません。iOSに関しては、iOS5以上ですが「-webkit-overflow-scrolling: touch;」により一本指でスクロールさせることができます。ここでは「iscroll.js」を使うことによって、AndroidとiOSで同...

続きを読む

テキストエリアに角丸背景の画像を表示

テキストエリアに対して、任意で高さを変更できる、角丸背景の画像を表示する方法をご紹介いたします。 まず、テキストエリアのスタイルをリセットするプロパティを指定します。 「-webkit-appearance: none;」、「-webkit-border-radius: 0;」はスマートフォン用に記述しています。 textarea { outline: none; overfl...

続きを読む

PAGETOP