ホームページを作っているとどうしてもデザインにこだわってしまう。
そして、CSSとにらめっこをする時間が結構かかってしまう。
個人的にはこの時間は一番好きで、あーだこーだしている間に色々なCSSコードを書き込んでいる間に、新しい発見があったりもする。
でも、そんなことばっかりやっていたら仕事は全く片付かない。
しかし、そんなことをやっていて、CSSの裏技を見つける事でスキルアップするという事実もある。
タグとタグの間に隙間ができるんです
画像をいっぱい並べる
pinterestのようなページを作りたい時に、作成したHTMLソースですが、画像の周辺に隙間ができちゃうんですよね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>spacer</title>
<style>
#image-lists{
width:100%;
margin:0;
padding:0;
border:0;
}
#image-lists .images{
width:49%;
height:200px;
display:inline-block;
margin:0;
padding:0;
border:1px solid red;
}
#image-lists .images img{
width:100%;
height:100%;
object-fit: cover;
margin:0;
padding:0;
border:0;
}
</style>
</head>
<body>
<div id="image-lists">
<div class="images">
<img src="img/318ne1hLouL.jpg">
</div>
<div class="images">
<img src="img/31PGDWdTTFL.jpg">
</div>
<div class="images">
<img src="img/41-+GHIWgxL.jpg">
</div>
<div class="images">
<img src="img/414udNbJ3ZL.jpg">
</div>
<div class="images">
<img src="img/41Ea+HPdffL.jpg">
</div>
<div class="images">
<img src="img/41F0RwhAWUL.jpg">
</div>
<div class="images">
<img src="img/41G+pUsUm4L.jpg">
</div>
<div class="images">
<img src="img/41Q6U+HtSrL.jpg">
</div>
<div class="images">
<img src="img/41Ru+MoISjL.jpg">
</div>
<div class="images">
<img src="img/41dEs5SfOkL.jpg">
</div>
<div class="images">
<img src="img/41iAV5KGmRL.jpg">
</div>
<div class="images">
<img src="img/5107dPT48dL.jpg">
</div>
<div class="images">
<img src="img/5185zAsv6-L.jpg">
</div>
<div class="images">
<img src="img/518zUfXTv9L.jpg">
</div>
<div class="images">
<img src="img/51AMk3dXKJL.jpg">
</div>
<div class="images">
<img src="img/51AaSA-r-1L.jpg">
</div>
<div class="images">
<img src="img/51FcQLvkbWL.jpg">
</div>
<div class="images">
<img src="img/51GbL7+0bYL.jpg">
</div>
<div class="images">
<img src="img/51Hdzh3NYaL.jpg">
</div>
<div class="images">
<img src="img/51I3SPU3LEL.jpg">
</div>
<div class="images">
<img src="img/51f2pcDnztL.jpg">
</div>
<div class="images">
<img src="img/51koXsCY24L.jpg">
</div>
<div class="images">
<img src="img/51lKzXQq-6L.jpg">
</div>
<div class="images">
<img src="img/51rIcbjEG4L.jpg">
</div>
<div class="images">
<img src="img/51sQPCO46KL.jpg">
</div>
<div class="images">
<img src="img/51tJJs0iDfL.jpg">
</div>
<div class="images">
<img src="img/619HZVCR78L.jpg">
</div>
<div class="images">
<img src="img/61AScvSYFbL._SL1000_.jpg">
</div>
<div class="images">
<img src="img/61B6-0-c2aL._SL1000_.jpg">
</div>
<div class="images">
<img src="img/61BPRf6FcWL.jpg">
</div>
<div class="images">
<img src="img/61IIggWngdL.jpg">
</div>
<div class="images">
<img src="img/61cMAnYLcIL.jpg">
</div>
<div class="images">
<img src="img/61f6-wopBHL.jpg">
</div>
<div class="images" >
<img src="img/61pOXUcEsoL._SL1000_.jpg">
</div>
<div class="images">
<img src="img/61sOsxWQ1bL.jpg">
</div>
<div class="images">
<img src="img/61tClruAgXL.jpg">
</div>
<div class="images">
<img src="img/61znyg0gs5L.jpg">
</div>
<div class="images">
<img src="img/71B5OFayiOL._SL1333_.jpg">
</div>
<div class="images">
<img src="img/71L9PnwlXGL._SL1000_.jpg">
</div>
<div class="images">
<img src="img/71MsEWEuxLL._SL1105_.jpg">
</div>
<div class="images">
<img src="img/71gXdYzjOCL._SL1500_.jpg">
</div>
<div class="images">
<img src="img/71usnmVypXL._SL1000_.jpg">
</div>
<div class="images">
<img src="img/81BB3YCLWEL._SL1500_.jpg">
</div>
<div class="images">
<img src="img/81gJIWw9nvL._SL1318_.jpg">
</div>
<div class="images">
<img src="img/ダウンロード.jpeg">
</div>
</div>
</body>
</html>
※画像は適当に設置してお試しください。
わかりやすく画像に赤枠をつけて見ました。
微妙な隙間ができているのがわかりますか？
隙間の原因
この隙間の原因は、明確で、HTMLソースコード内に記述されている「改行コード」です。
HTMLは少し不思議な仕様があって、半角スペースを1個記述すると、半角スペースとして表示されるんですが、2個以上記述しても、1個分しか表示されません。
似たような事象として、改行コードも文字列として存在していて、改行されるわけではないのに、見えない文字として表示されてしまうようです。
色々な解決方法
これを解決する方法は3つほどあり、それらを順番に説明してみます。
1. CSSなどを記述せず、とにかく改行コードを無くしてしまう。
HTMLのソースコードしか修正できない場合などは、手っ取り早いこの方法は最適ですが、
HTMLソースコードのネストがわかり辛くなってしまうので、プログラマーの人たちは気持ちが悪いでしょうね。
<div id="image-lists"><div class="images"><img src="img/318ne1hLouL.jpg"></div><div class="images"><img src="img/31PGDWdTTFL.jpg"></div><div class="images"><img src="img/41-+GHIWgxL.jpg"></div><div class="images"><img src="img/414udNbJ3ZL.jpg"></div><div class="images"><img src="img/41Ea+HPdffL.jpg"></div><div class="images"><img src="img/41F0RwhAWUL.jpg"></div><div class="images"><img src="img/41G+pUsUm4L.jpg"></div><div class="images"><img src="img/41Q6U+HtSrL.jpg"></div><div class="images"><img src="img/41Ru+MoISjL.jpg"></div><div class="images"><img src="img/41dEs5SfOkL.jpg"></div><div class="images"><img src="img/41iAV5KGmRL.jpg"></div><div class="images"><img src="img/5107dPT48dL.jpg"></div><div class="images"><img src="img/5185zAsv6-L.jpg"></div><div class="images"><img src="img/518zUfXTv9L.jpg"></div><div class="images"><img src="img/51AMk3dXKJL.jpg"></div><div class="images"><img src="img/51AaSA-r-1L.jpg"></div><div class="images"><img src="img/51FcQLvkbWL.jpg"></div><div class="images"><img src="img/51GbL7+0bYL.jpg"></div><div class="images"><img src="img/51Hdzh3NYaL.jpg"></div><div class="images"><img src="img/51I3SPU3LEL.jpg"></div><div class="images"><img src="img/51f2pcDnztL.jpg"></div><div class="images"><img src="img/51koXsCY24L.jpg"></div><div class="images"><img src="img/51lKzXQq-6L.jpg"></div><div class="images"><img src="img/51rIcbjEG4L.jpg"></div><div class="images"><img src="img/51sQPCO46KL.jpg"></div><div class="images"><img src="img/51tJJs0iDfL.jpg"></div><div class="images"><img src="img/619HZVCR78L.jpg"></div><div class="images"><img src="img/61AScvSYFbL._SL1000_.jpg"></div><div class="images"><img src="img/61B6-0-c2aL._SL1000_.jpg"></div><div class="images"><img src="img/61BPRf6FcWL.jpg"></div><div class="images"><img src="img/61IIggWngdL.jpg"></div><div class="images"><img src="img/61cMAnYLcIL.jpg"></div><div class="images"><img src="img/61f6-wopBHL.jpg"></div><div class="images" ><img src="img/61pOXUcEsoL._SL1000_.jpg"></div><div class="images"><img src="img/61sOsxWQ1bL.jpg"></div><div class="images"><img src="img/61tClruAgXL.jpg"></div><div class="images"><img src="img/61znyg0gs5L.jpg"></div><div class="images"><img src="img/71B5OFayiOL._SL1333_.jpg"></div><div class="images"><img src="img/71L9PnwlXGL._SL1000_.jpg"></div><div class="images"><img src="img/71MsEWEuxLL._SL1105_.jpg"></div><div class="images"><img src="img/71gXdYzjOCL._SL1500_.jpg"></div><div class="images"><img src="img/71usnmVypXL._SL1000_.jpg"></div><div class="images"><img src="img/81BB3YCLWEL._SL1500_.jpg"></div><div class="images"><img src="img/81gJIWw9nvL._SL1318_.jpg"></div><div class="images"><img src="img/ダウンロード.jpeg"></div></div>
・・・これは見づらい・・・
2. .imagesに"float:left"を記述。
サイズにより改行がまちまちになるこうした要素は右並びで構成されている事が多く、"float:left"記述をすると、綺麗なリスト表示がされます。
#image-lists .images{
width:49%;
height:200px;
display:inline-block;
margin:0;
padding:0;
border:1px solid red;
/*追加*/
float:left;
}
cssの1文を追加するだけなので手軽ではありますが、float:leftは、前後階層にも営業を及ぼすことから、ちゃんと"clear:both"処理を行ってあげないといけない事から、少し扱いづらいと考える人もいます。
確かに、ネスと構成によっては利用できない場合もあるので、要注意ですね。
3. "font-size:0"を指定してあげる。
もっともおすすめ方法が、この方法で、改行コードのフォントサイズを0にして、実質見えなくしてあげる事です。
#image-lists{
width:100%;
margin:0;
padding:0;
border:0;
/*追加*/
font-size:0;
}
これも改行コードを表示したくない、親要素に1文追加するだけだけなので、かなりお手軽ですが、同時にこの階層に文字が表示できなくなるので、文字表示したい場合は、タグで囲ってあげて ネストを掘り下げてあげましょう。
無駄スペースが無くなった状態。
スマートな設定とデフォルト値と必要な知識
今回の件とは少し違いますが、この他にもBRタグを無くしたい場合は、"br{display:none;}"と記述したり、
ソースコードに書いた通りの改行をそのまま表示したい場合は"PRE"タグを使うか、"white-space:pre;"を記述したりする事で、改行とうまく付き合えるようになります。
こうしたCSSの設定は、慣れと経験が必要であるため、もし初心者が行う場合は、非常に困難な道のりになる場合が想像されます。
HTMLもCSSもJAVASCRIPTもどれも特効薬のような「おなじない」はたくさん存在するので、ゲームの裏技を探す感覚でそれらを見つけてみるのも楽しいかもしれませんね。
え？楽しくない？
これが楽しめる人はコーダーという職業が天職と考えてもいいかもしれません。
楽しめない人は・・・・ググってください。
0 件のコメント:
コメントを投稿