プラカンブログSTAFF BLOG

2015.07.17

【CSS】うれCはずかCSS小ネタ集

アイキャッチ07

探偵ナイトスクープの小ネタ集が好きな(大)です。
タイトルがすでに恥ずかしい感じになっている気がしないでもないですが、皆様に昭和の香りを感じていただければ幸いでございます。

私は前職がWEBとは関係ない職種からの転職だったこともあり、プラカンに入るまでの短期間の職業訓練と独学で今まで過ごしてきました。
恥ずかしながらたまに「え!こういうこと出来るんだ!?」とか「こんなことが起きるのか!」という発見がありますので、今日はそれをまとめたいと思います。

今回のブログはいわば私のためのメモです。
三本立てでお送りしたいと思います。

もくじ

  1. Chromeでclearfixを指定した部分に1pxの隙間が生じる
  2. 背景画像って重ねられた
  3. htmlタグ直書きstyleに!importantが勝つ

Chromeでclearfixを指定した部分に1pxの隙間が生じる

ある日、他の人の案件をヘルプしていた時に気づいたのです「あれ?Chromeだけ隙間があいてるぞ」と。
その時のcrearfixの記述はこちら。

.clearfix:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

このclearfixを使った時にChromeで1pxの隙間が現れます(とりいそぎ再現した下記の画像参考ください)。
clearfix

そして修正したものがこちら。

.clearfix:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

原因はheight:0.1pxだったようです。0にしたことで3ブラウザで問題なく表示されることを確認しました。

何故0.1pxになったのかはわかりませんが、恐らくこの記述が作られた当時は高さを入れないとうまくいかない理由があったのだと思います。
Firefoxではこの記述じゃないと隙間ができるという記事は1つありましたがfont-sizeの問題と書かれていたので真偽の程はわかりません。
投げっぱなしですみません。

背景画像って重ねられた

ある日、背景画像の上に背景画像を乗せたい状況に陥りました。
今まではその2つを1つの画像にすることでどうにか回避できていたのですが、今回ばかりはそれが出来ずどうしたものかと色々探しました。
下の背景画像がある要素の中に

を入れてそこに背景画像を…と試みましたが出来ず、困った末に「いや、もしかしたら案外出来るかも?」と検索したら、出来たんです!
これにはびっくりして色んな人に伝えたかったのですが、常識のようだったのでその時はそっと心に秘めました。
でも、私的には2015びっくり大賞の中に入る出来事だったのでここで言わせてください。
背景画像は重ねられるぞー!

記述の仕方

画像はコンマで区切り、先に記述した方が上に表示されます。いくつでも並べられます。

.ex {
	background:url(ue.gif),url(mannaka.gif),url(shita.gif);
}

参考サイト:
[CSS]backgroundプロパティを使って背景画像を複数設置する方法と注意点など

htmlタグ直書きstyleに!importantが勝つ

先日ある案件で「htmlは触らず、CSSのみを更新して見た目を変える」必要がありました。
しかしhtmlを見るとタグに直接CSSが書き込まれているではありませんか…!絶望!

何故私が絶望したのか。
職業訓練では!importantは習わず、この業界に入ってからその存在を知りました。
その時に習っていた私の優先順位の知識は「タグ直書きCSS>埋め込みCSS>外部CSS」です。
!importantは強力だけど所詮外部という私の思い込みがありました。
しかし、調べてみると「!important>タグ直書きCSS>埋め込みCSS>外部CSS」とのこと。
!important最強伝説…!

参考サイト:
【CSS】タグの style=”…” で指定するよりも優先度を上げることができるclass「!important」

!importantのような人になりたい。

この記事は、OHMATA が書きました。