HOME > 開発者向けBLOG >  2012 March

Technology Note 開発者向けBLOG

開発者向けBLOG アーカイブ March, 2012

box-shadow

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

続きを読む

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

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

続きを読む

テーブルセルの内側に1pxの線

テーブルセルの内側に1pxの線を表示する方法をご紹介いたします。 まず、1行目の「table.data」クラスの「border-spacing: 1px;」ではテーブルの間に隙間をいれています。4行目の「background: #999;」でテーブルのボーダー線を表示します。 12行目の「table.data th」の「border: 1px solid #FFF;」で見出し内...

続きを読む

幅を指定せずにフォーム部品の下にテキストを回り込ませない

テキストとフォーム部品に幅を指定せず、テキストが下に回り込むのを防止する方法をご紹介いたします。 1行目の「ul.keep input」でinput要素をブロック要素にして、floatプロパティを指定します。これによりinput要素とテキストが横並びになります。 6行目の「ul.keep span」ではspan要素をブロック要素にしています。8行目の「overflow: hid...

続きを読む

PAGETOP