エンジニアが学んだことをお伝えするブログ

” ”に注意。PHP内のコードにあるスペースがデザイン崩れの原因だった。

2022-01-10Blog

当ブログは自作のオリジナルWordPressテーマを使用している。

ブラウザのサイズを小さくしていき、iPhone SEレベルまで狭めるとトップページのデザインが若干崩れる事象があった。

何かが悪さしているようでアイキャッチ画像が十数px動いてしまう。

原因不明のまま諦めていた。

ブログテーマをWordPressでオリジナルで作ると、不具合があったときに誰も助けてくれない。

自分で作ったコードのどこかがおかしい。でもわからない。

大きな影響がないのでしばらく放置していたのだけど、別の英語ブログをまたオリジナルテーマで作って編集してるときに気がついた。

大体こういうものだ。気づくときは忘れた頃に訪れる。無くしたものはひょんなときに見つかる。

原因はスペースだった

全く同じコードに見えるのに、ブラウザに表示される見た目が違うことに気がついた。

なぜか。じっくりコードの違いを観察。

そして以下の編集を行うことによって解決した。

スペースが残った状態
編集前(スペース有)
スペースを消した状態
編集前(スペース消去)

気になったのはスペース。

改行したときに勝手に作られたものと思ったら、なぜかスペースを複数入力して作ったものが紛れ込んでいた。

素人の仕事。。。

そう僕は素人。わかりやすく見えるために、むかーしコードを打ち込んだときにスペースキーを複数回叩いて入力していたらしい。

ああ数年前の自分よ。

スペースを消去してみたら、なんとデザインの崩れがなくなった。

これか、これだったのか。。と。

おわりに

htmlとかphpとか素人だけど自分のオリジナルテーマを作っている方にお伝えしたい。

スペースにご注意を!

HOME

Related Posts

   

Category



Yo
エンジニア(Mechanical)。日々の生活や読書、仕事などから学んだことをまとめます。
好きなものはApple製品、コーヒー、革製品、デニム。旅とカメラも。Less is More.な生活に憧れる。
Profile詳細

© Yo 2017-2022