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

Technology Note 開発者向けBLOG

Webデザイン

preタグの機能を違うタグでも使用する

preタグの機能を違うタグでも使用する方法をご紹介いたします。 preタグはソースそのままの表示を可能にするタグです。通常、HTMLソース上で改行などをしてもブラウザで改行されることはありません。 2行目、「white-space: pre;」プロパティでpreタグの機能をpreタグ以外の要素でも持たせることができます。 .pre { white-space: pre; } テ...

続きを読む

行間の高さで垂直方向のセンタリング

行間の高さでテキストを垂直方向にセンタリングする方法をご紹介いたします。 ポイントは3行目の「line-height」で2行目の「height」と同じ値を指定することです。ここでは「height」を「40px」としているので、「line-height」も「40px」としています。 こうするとパディングの上下で調整をする必要がなく、垂直方向にセンタリング表示されます。 ただ、li...

続きを読む

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