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

Technology Note 開発者向けBLOG

Webデザイン

テーブルセルの内側に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...

続きを読む

CSSだけで角丸を表現

CSSだけで疑似的に角丸ボックスを表現する方法をご紹介いたします。 下記の4つパターンをご紹介いたします。 背景色のみで画面いっぱいまで伸びる 背景色のみで要素がある場所まで伸びる 背景色にボーダー付きで画面端まで伸びる 背景色にボーダー付きで要素がある場所まで伸びる まず、1パターン目では7行目の「div.radius_block div」にある「padding: 1px 0...

続きを読む

オートで横にスライド(一時停止、再生)

animationとkeyframesで画像を横にオートスライドさせ、ボタンクリックで一時停止と再生を実行する方法をご紹介いたします。 使用している画像は4枚になります。 まず、2行目の「div.slide_area」でスライドエリア全体を中央に表示します。次に11行目の「div.slide_mask」で指定した幅と高さを決めて、現在表示する画像以外のものを非表示にします。 1...

続きを読む

checkedセレクタでチェックボックスを表現

checkedセレクタで、画像を使用せずにチェックボックスを表現する方法ご紹介いたします。 ポイントは20行目の「opacity: 0;」と26行目の「input[type="checkbox"]:checked + label」です。 「opacity: 0;」を使用している理由は、「dispay: none;」ではスマートフォンのアンドロイド携帯では表示されてしまいますので...

続きを読む

PAGETOP