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

Technology Note 開発者向けBLOG

Webデザイン

input type textに角丸背景の画像を表示

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

続きを読む

画像の垂直中央表示(改訂版)

以前、「幅と高さが異なる画像をボックスの中で垂直中央に表示」する方法をご紹介いたしました。今回はその改訂版をご紹介いたします。 今回はIEの独自仕様である「layout-grid-line」というプロパティを追加しています。 「layout-grid-line」というプロパティは行グリッドの高さを指定するもので、ここでは「height」プロパティと同様の値を指定することで、IE...

続きを読む

androidで日本語文字を太文字で表示

androidで日本語文字を太文字で表示する方法をご紹介いたします。 環境にもよりますが、基本的にandroidでは「font-weight: bold;」などを指定しても、日本語文字は太文字にはなりません。太文字に見せる方法はいくつかありますが、ここでは「text-shadow」を用いた方法をご紹介いたします。 3行目は「text-shadow」を指定、8行目は「font-w...

続きを読む

input type textに表示するアイコンの位置

input type textにアイコン表示する方法をご紹介いたします。 input type textに検索用のアイコンなどを表示する場合、input type text内に背景で表示する方法が浮かぶと思います。 表示することはたしかにできますが、IEブラウザの場合、検索文字が表示する領域にいっぱいになった場合、アイコンがずれて隠れてしまうか、文字がアイコンの上を素通りしてし...

続きを読む

background-size

スマートフォンでの背景画像指定で高解像度のアイコンを表示する方法をご紹介いたします。 「background-size」プロパティを指定して、縦横2倍の画像を1/2に圧縮して表示させます。 4行目の「url(icon_circle.png) no-repeat 5px center」で、アイコンのプロパティをはじめに記述し、次のグラデーションのプロパティとの間に「,(コンマ)」...

続きを読む

PAGETOP