ど素人から毛を生やす。<延>

ページの隙間の徹底除去を試みる

Web > css 2014年7月2日(最終更新:2年前)

このページは2014.7.2に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
TRPGがやりたくて仕方がない餅。です。

物理的に距離の近いリア友はTRPGに興味を持たない奴らばかりだし、
オンセは経験上オフセよりテンションが下がるというかなんというか…

というか、このコミュ症がどうやって基本初対面のオンセに飛び込むというのか(笑)

 

なにはともあれ、最近話題がないのでコーディングの話をば。

コーディングをしているとき、どうしても悩まされる「謎の隙間」。
これをできるだけ消していこうというコンセプトです。

①ページの上に隙間ができたとき

上に隙間ができる場合は、かなりの確率でmarginやpaddingが原因だと思います。

*{
padding:0;
margin:0
}

で、デフォルトで設定されている隙間を除去します。

これができているのに隙間ができる場合、というのも稀ですが存在します。
そのときにチェックして頂きたいのは、headの中に記述ミスがないかという点です。

特に全角空白が紛れ込んでいる場合、見ただけではわからないのでご注意を。

②ページの下に隙間ができたとき

ページの下に隙間ができたときのパターンは2通りあります。

ひとつは、コンテンツの高さがブラウザの高さに届かない場合。
有名な対処法としては、CSSでフッターを下に固定する方法があります。
ブラウザ差異等が発生し上手く行かなかった、という場合はjsを使うと良いでしょう。

そうではなく、スクロールバーが表示されているのに隙間ができる、という場合は、
「目に見えていない何か」がフッターに下にある、
またはフッターの下まで伸びていると思われます。

特に、フッターの作りが複雑な場合は、
気づかない内に透明な要素がはみ出ているかもしれません。
また、解析ツールなどが生成するimgタグ等が挟まっている可能性もあります。

③ページの横(右)に隙間ができたとき

この場合の原因も大体2通り。
ひとつは、「htmlとbody要素にwidthを設定し忘れている」ことです。
PCで見ても隙間はないのにスマホで見ると隙間ができる、なんて場合は高確率でこれです。
body,html{width:100%; min-widht:サイト幅+最低限の余白;}
を忘れずに設置しましょう。
余白を設置する場合はmargin:0 auto;の設定もお忘れなく。

もうひとつは、「コンテンツがはみ出ていること」です。
特にスマホサイト等の可変幅のサイトでは、imgだけでなく、inputやbuttonタグ等も
きちんとwidthが設定されているかチェックしましょう。
PCサイトの場合は、ページ全体のwidth、
コンテンツのwidthが矛盾していないかチェックです。

また、スマホサイトでCMSを導入する場合、
「折り返さない文字」にも注意しなければなりません。
ユーザーが記事の飾り付けとして(水平線代わりに)折り返さない文字を大量に使用し、
その結果、記事ページに大きな隙間ができてしまった、ということが過去、ありました。
その解決法としましては、overflow-x:hiddenをpやdivタグに設定しておくことです。

④横並べしたinline-block要素に隙間ができたとき

この原因は、HTML内で要素と要素の間に改行がされていることです。
例えば、

<img src="ex01.png"><img src="ex02.png">

とした場合、隙間はできないのですが、

<img src="ex01.png">
<img src="ex02.png">

とした場合、改行が半角空白として認識され、隙間ができてしまいます。
SNSなどでこのような事例に遭遇した方はいるのではないでしょうか。
改行を認識しない、つぶやき機能などでは、
エディタで入力した改行は半角空白として認識されてしまいます。

この解決法は、勿論、要素を横並べにすることなのですが、
それをしてしまうとソースが見づらくなってしまって嫌だ、という場合もあります。

その場合、これらの親要素に

letter-spacing:-.40em;

を設定。これで空白分をマイナスします。
が、この設定は子要素に反映されるので、
inline-block要素に文字を入力する場合は必ずletter-spacingを戻します。

⑤tableで隙間ができたとき

tableタグそのものに、

cellpadding="0" cellspacing="0"

を入力することでtableの隙間がなくなります。

または、tableのCSSに

border-collapse:collapse;

です。

⑥画像の下に隙間ができたとき

この原因は、行中の画像の位置がベースライン(アルファベットのoとかmとかの位置。qやgなどは下の部分がベースラインより出ている)になっているからです。

よって、画像の位置をベースラインではなく、行の下に合わせることができれば画像の下の隙間はなくなります。

img{ vertical-align:bottom;}

これでおkです。

詳しくはこちら:【WEBTECH☆WALKER】 画像の下にできる隙間

 

これで大体、隙間の原因は網羅できたかな?
また見つけたら書いていこうと思います。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (2)