HOME > 開発者向けBLOG >  CSS3

Technology Note 開発者向けBLOG

CSS3

remでフォントサイズを指定

%指定とは違った、フォントを可変にするプロパティをご紹介します。 rem(「root+em」)はCSS3から追加された新しい単位で、ルートであるhtmlに指定されたフォントサイズを基準とします。 %指定とは違い、親要素のフォントサイズの継承を気にせず使用することができます。 基準となるサイズを「62.5%」とした場合、「font-size: 1.3rem;」は「font-siz...

続きを読む

background-size

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

続きを読む

CSSセレクタでボタンにアイコンを表示

CSSセレクタでボタンの中にアイコンを表示する方法をご紹介いたします。 アイコン画像をボタンに表示させる場合は、backgroundプロパティを用いることが多いと思います。 背景で表示させる方法の他に、CSSセレクタの「:before疑似要素」と「:after疑似要素」でも表示させることができます。 通常時のアイコンとハイライト(hover)時のアイコンのスタイルを作っていきま...

続きを読む

box-shadow

今回はbox-shadowプロパティを利用して、一個の要素で外側と内側にボーダー線を表示する方法をご紹介いたします。 ここでは、ボーダー関係のプロパティのみ記述しています。 2行目の「border: 1px solid #333;」で外側のボーダー線を表示しています。 5行目から6行目の「-webkit-box-shadow」で内側のボーダー線を表示しています。 5行目にある「...

続きを読む

フレキシブルボックスレイアウト

フレキシブルボックスレイアウトの機能を利用すると、floatプロパティを使用するよりも、簡単に横並びの表示を実現することができます。 今回は横並びと、その横並び状態での要素の揃え位置、並べる方向をご紹介いたします。 まず、フレキシブルボックスにするために「display: box;」を各ボックスに指定します。2行目から8行目は各ボックスの共通プロパティとして「,(コンマ区切)」...

続きを読む

PAGETOP