Written by
watanabe
background-size
スマートフォンでの背景画像指定で高解像度のアイコンを表示する方法をご紹介いたします。 「background-size」プロパティを指定して、縦横2倍の画像を1/2に圧縮して表示させます。 4行目の「url(icon_circle.png) no-repeat 5px center」で、アイコンのプロパティをはじめに記述し、次のグラデーションのプロパティとの間に「,(コンマ)」...
Written by
watanabe
スマートフォンでの背景画像指定で高解像度のアイコンを表示する方法をご紹介いたします。 「background-size」プロパティを指定して、縦横2倍の画像を1/2に圧縮して表示させます。 4行目の「url(icon_circle.png) no-repeat 5px center」で、アイコンのプロパティをはじめに記述し、次のグラデーションのプロパティとの間に「,(コンマ)」...
Written by
watanabe
preタグの機能を違うタグでも使用する方法をご紹介いたします。 preタグはソースそのままの表示を可能にするタグです。通常、HTMLソース上で改行などをしてもブラウザで改行されることはありません。 2行目、「white-space: pre;」プロパティでpreタグの機能をpreタグ以外の要素でも持たせることができます。 .pre { white-space: pre; } テ...
Written by
watanabe
行間の高さでテキストを垂直方向にセンタリングする方法をご紹介いたします。 ポイントは3行目の「line-height」で2行目の「height」と同じ値を指定することです。ここでは「height」を「40px」としているので、「line-height」も「40px」としています。 こうするとパディングの上下で調整をする必要がなく、垂直方向にセンタリング表示されます。 ただ、li...
Written by
watanabe
CSSセレクタでボタンの中にアイコンを表示する方法をご紹介いたします。 アイコン画像をボタンに表示させる場合は、backgroundプロパティを用いることが多いと思います。 背景で表示させる方法の他に、CSSセレクタの「：before疑似要素」と「:after疑似要素」でも表示させることができます。 通常時のアイコンとハイライト(hover)時のアイコンのスタイルを作っていきま...
