CSS（スタイルシート）だけでグラデーションを表現する方法のまとめ｜web bibo
タイトルやボタンの背景にグラデーションを施したいとき、グラデーションの画像を用意して、それを背景に敷くと思います。ただ、線形グラデーションのような単純なものなら、画像を使わずスタイルシートだけで表現することができます。一応メモとして載せておきますが、使える方法かどうかは個人の判断に任せます。-webkit-gradientの方法は各サイトで取り上げられているCSS3の注目の方法なので覚えておいても損はないかと思います。 各ブラウザで表現できるCSSグラデーション方法の一覧表 左項目のボックスにグラデーションがかかっていたら、実際に適用されている証拠です。 6/7 8 2/3 9.5 4 2 filterで グラデーション
垂直型リストで画像を並べた時の隙間を消す方法｜web bibo
画像の下に隙間ができるサンプル 画像をリストで並べた場合、画像の下に隙間が生じます。この隙間を消す方法。解決策は以下のとおり。 HTMLコード <ul> <li><img src="/images/tips/list_img_space.jpg" alt="" /></li> <li><img src="/images/tips/list_img_space.jpg" alt="" /></li> <li><img src="/images/tips/list_img_space.jpg" alt="" /></li> </ul> CSSコード ul { list-style-type: none; } li img { vertical-align: bottom; } →隙間を消したサンプル リストの中のimgタグにvertical-align: bottom;を指定することで解決でき
フッターを画面下部に固定する方法（Opera 9.51対策含む）｜web bibo
CSSでレイアウトして、フッターを設置する際、コンテンツの量が少ないページの場合、フッターが画面の下から離れてしまいます。そこでフッターを画面下部に固定する方法を使います。 ただ、他サイトで色々な方法が載っていますがOpera 9.51だとレイアウトが崩れることがわかりました。 まずは下記ソースをご覧ください。 HTMLコード <div id="container"> <div id="header">ヘッダー</div> <div id="contents"> <h1>タイトル</h1> <p>コンテンツ</p> </div> <div id="footer"><p>フッター</p></div> </div> CSSコード * { margin: 0; padding: 0; } html,body { height: 100%; background-color: #222222; t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セレクタでのCSSハック一覧表｜web bibo
