地味に使える6つのHTML/CSS小技
どれも最近使ったものだが頻繁に使う機会はなさそう。
ただ頭の片隅に置いておくと役に立つ。
検証したブラウザとOS
- IE 8～
- Firefox
- Google Chrome
- iOS 7～
- Android 4.1～
テキストの画像置換
See the Pen テキストの画像置換 by keita hirai (@keitahirai) on CodePen.
-9999em は好ましくないので、100% で領域分だけ飛ばし改行を禁止・非表示にする。
1 2 3 4 5 6 7 8 9 10 11 12 | <dl> <dt>お名前</dt> <dd>平井圭太</dd> </dl> <dl> <dt>電話番号</dt> <dd>090-1234-5678</dd> </dl> <dl> <dt>メールアドレス</dt> <dd>example@keitahirai.net</dd> </dl> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | dt { width: 170px; height: 34px; text-indent: 100%; white-space: nowrap; overflow: hidden; float: left; } dl:first-of-type dt { background: url(//keitahirai.net/wp-content/uploads/2015/07/ic_name.png) no-repeat; } dl:nth-of-type(2) dt { background: url(//keitahirai.net/wp-content/uploads/2015/07/ic_phone.png) no-repeat; } dl:last-of-type dt { background: url(//keitahirai.net/wp-content/uploads/2015/07/ic_mail.png) no-repeat; } dd { line-height: 34px; } |
アイコンフォントとテキストの距離を調整
See the Pen アイコンフォントとテキストの距離を調整 by keita hirai (@keitahirai) on CodePen.
1px単位での余白調整が可能。
1 2 3 4 5 6 7 | <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <p><a href=""><i class="fa fa-external-link"></i>別ウィンドウで確認する</a></p> <p><i class="fa fa-clock-o"></i>2015/07/14</p> <p><i class="fa fa-codepen"></i>CODEPEN</p> <p><i class="fa fa-github"></i>GitHub</p> <p><i class="fa fa-wordpress"></i>WordPress</p> |
1 2 3 | i { letter-spacing: 5px; } |
定義タグの背景をテキスト領域だけに
See the Pen 定義タグの背景を、テキスト領域だけにする by keita hirai (@keitahirai) on CodePen.
dt はブロック要素のため、デフォルトは横幅100%となる。
float を指定して浮かせることで背景をテキスト領域だけにし dd で float をクリア。
1 2 3 4 5 6 7 8 9 10 | <dl> <dt>名称</dt> <dd>Lorem ipsum dolor sit amet</dd> <dt>主要成分</dt> <dd>この要素に含まれる主要成分は、ダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</dd> <dt>人体への影響</dt> <dd>後ろで大きな爆発音がした。俺は驚いて振り返った。</dd> <dt>製品化可否</dt> <dd>親譲りの無鉄砲で小供の時から損ばかりしている。</dd> </dl> |
1 2 3 4 5 6 7 8 9 10 11 12 | dt { color: white; float: left; margin-bottom: 10px; padding: 0 20px; background: #478384; } dd { clear: both; margin-bottom: 20px; } |
ol タグで丸数字
See the Pen olタグで丸数字 by keita hirai (@keitahirai) on CodePen.
ol リストスタイルをリセットして、li に position: relative; を指定。
実体参照の丸数字を span で囲み position: absolute; を指定する。
1 2 3 4 5 6 7 8 | <ol> <li><span>①</span> 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</li> <li><span>②</span> 別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。</li> <li><span>③</span> 弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</li> </ol> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ol { list-style: none; } li { position: relative; margin-bottom: 20px; span { color: #478384; font-size: 32px; position: absolute; top: -7px; left: -40px; } } |
画像のロールオーバー/アクティブ時に内側ボーダー
See the Pen 画像のロールオーバー/アクティブ時に内側ボーダー by keita hirai (@keitahirai) on CodePen.
主な用途としては、カルーセルスライダーのサムネイルをアクティブにさせる時。
わりと有名だが検証もせず、海外サイトをコピペしているだけのブログが多いので書いておく。
ポイント
- reset.cssで max-width: 100%; として崩れる場合は、max-width: 100px; と、サムネイル幅を再指定
- 必要に応じて、img に vertical-align: middle; を指定
- a には float でなく、display: inline-block; でもOK
1 2 3 4 5 | <ul> <li><a href=""><img src="http://placeimg.com/100/70/animals" alt=""></a></li><!-- --><li><a href=""><img src="http://placeimg.com/100/70/arch" alt=""></a></li><!-- --><li><a href=""><img src="http://placeimg.com/100/70/nature" alt=""></a></li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | li { margin-right: 10px; display: inline-block; img { max-width: 100px; // 必要に応じて vertical-align: middle; // 必要に応じて } } a { overflow: hidden; display: inline-block; // or float &:hover { border: 5px solid #478384; } &:hover img { margin: -5px; } } |
透明度変更のロールオーバーで画像背景を白に
See the Pen 透明度変更のロールオーバーで、画像背景を白に by keita hirai (@keitahirai) on CodePen.
ブロックの背景色が暗いと、マウスオーバーで透明度を高くした時に画像が暗くなる。
ロールオーバー画像とJavaScriptの作成が面倒なときに。
ポイント
- div で画像をネストして、白背景を指定
- 発生する余白を消すには、font-size: 0; もしくは line-height: 0; を指定
- IE対策で font-size: 0; と line-height: 0; の使い分けが必要なため、多少面倒
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul> <li><div><a href=""><img src="http://placeimg.com/150/100/animals" alt=""></a></div></li><!-- --><li><a href=""><img src="http://placeimg.com/150/100/animals" alt=""></a></li><!-- --><li><a href=""><img src="http://placeimg.com/150/100/animals" alt=""></a></li> </ul> <section id="block-normal"> <h1>後ろで大きな爆発音がした。俺は驚いて振り返った。</h1> <a href=""><div><img src="http://placeimg.com/300/200/tech" alt=""></div> <p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</p></a> </section> <section id="block-float"> <h1>後ろで大きな爆発音がした。俺は驚いて振り返った。</h1> <a href=""><div><img src="http://placeimg.com/300/200/nature" alt=""></div> <p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</p></a> </section> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | @import "compass"; .cf { zoom: 1; &:after { content: ""; display: table; clear: both; } } a { color: white; text-decoration: none; &:hover { text-decoration: underline; } } a:hover img { @include opacity(0.7); } ul, #block-normal, #block-float { color: white; margin-bottom: 40px; padding: 20px; background: #333; } li { vertical-align: bottom; // IE display: inline-block; margin-right: 20px; div { background: white; } img { font-size: 0; vertical-align: bottom; } } #block-normal, #block-float { div { width: 300px; line-height: 0; background: white; } } #block-float { div { float: left; margin-right: 20px; } @extend .cf; } |
コメントを投稿する