SIGA BLOG

お役立ち情報・社会・教養・雑学・哲学・ゲーム　書きたいことばかり書いている 何でもござれな自由ブログ

SIGA BLOG

トップ > ブログ運営 > ウインドウの幅が変わるとCSSが効かなくなる問題。その答えは意外と単純だった。

ウインドウの幅が変わるとCSSが効かなくなる問題。その答えは意外と単純だった。

ブログ運営

ウインドウの幅が変わるとCSSが効かなくなる問題のアイキャッチ画像

はてなブログやWordPressでは、テーマをインストールすることでWEBデザインの知識がなくてもデザインされた見た目の良いブログを誰でも簡単につくることができますね。

 

しかし、知識がないからこそ問題が発生したときの解決方法が分かりません。

 

今回は私が直面した【ウインドウの幅が変わった時にCSSが効かなくなる（非表示になる）】問題について、どのように悩み、結局の原因は何であったのかをご紹介しようと思います。

 

スポンサーリンク  

問題発生の原因と解決方法

最初に結論から述べます。

 

デザインCSSの中にテーマのカスタマイズとして追加していたコード

@media screen and (max-width:1200px)

の記述の中に}の数が１つ不足していたことが原因でした。

 

コードの閉じ忘れですね。

 

そのせいで、以降に記述した全てのCSSが1200px以下の時にしか機能しなくなっていたのです。

 

他サイトからコピペしてきたコードは記述に問題がないことを確認していましたが、テーマ用の追加コードまでは目を通していませんでした……。

 

結局、件のコードの後ろに}を１つ足すことで、CSSが効かなくなる問題は無事に解消されました。

 

問題と結論だけで言えばもう終わりなのですが、そこに辿り着くまで２日間の激闘があったため、学習したことの備忘録も兼ねて紹介しようと思います。

 

結論を知ってから読み直すと実に的外れな考察をしていると思いますが、当時は本当に必死になって原因を探していたものですから……笑ってやってください（笑）

 

問題に気付いたきっかけ

ブログを読んだ友人から「記事中に使っている吹き出しの表示が変」と一報を受けたことがきっかけでした。

 

それで確認をしたところ、たしかにウインドウを大きくしてみると吹き出しに限らず、追加したすべてのCSSが無効化されてしまっていました！

 

私は普段パソコンの画面を左右半分に分けて使っているので気付きませんでした。

 

おそらくは半年以上も放置されていましたが……案外、誰からも指摘されないものなんですね。

 

問題が起きている原因を考えた

最初ははてなブログのシステムによる影響なのかもとも考えたのですが、そうだとしたら調べても調べても情報がまったく出てこないのはおかしいですよね。誰も話題にしないほどはてなブログ利用者が少ないという話になってしまいますから。

 

そこでいろいろな検索ワードで原因を探してみたところ、以下の記事を見つけました。

 

こちらの記事の内容は、私が抱えていた問題とは直接の関係はなかったのですが、「メディアクエリ」という存在を知るきっかけになりました。

 

参考記事：メディアクエリの罠！？cssが効かなくなるブラウザサイズを解決！

 

そして、インストールしたテーマのCSSにある「メディアクエリ」が原因ではないかと考えたのです。

 

解決方法を想定した

CSSは下に追加したコードが優先される仕様であるため、もし正しく機能する「メディアクエリ」が分かれば問題が解消されるCSSを追加すれば良いだけのはず。

 

実際の原因は少し違ったのですが、着眼点自体は合っていましたね。

 

具体的にはどうすれば良いのか？

テーマのCSSは「デザインCSS」の頭に記載されているURLから読み込んでいます。

 

例：@import url("https://blog.hatena.ne.jp/-/theme/17391345971653699552.css");

 

括弧の中に記述されたURLをコピーして、URL検索にかければテーマのCSSページが閲覧できます。

 

そのページから以下の記述（メディアクエリ）に近しいコードを確認すれば、そこから突破口が開けると思いました。

 

.img {
@media screen and (max-width: 767.9px){display: none; }
}

 

※この指定内容を言語化すると、（ウインドウの幅が767.9px以下）では img を {表示しない} になります。

 

検索で17件のコードが引っかかった

テーマのCSSページを開いたところでショートカットキー「Ctrl＋F」もしくは「commnd＋F」を使って「@media」と検索をかけました。

 

すると17件のコードが引っかかりました。

 

ここからさらに該当するコードを絞り込む必要があります。

 

目当てのコードをデベロッパーツールをもとに探した

ブラウザ上で「F12」キーを押す、あるいは「右クリック→検証」を選択すると、デベロッパーツールが開きます。

 

今回の話ではデベロッパーツールについての知識は特に必要ありませんので、デベロッパーツールが何であるかは分からなくても問題ありません。

 

デベロッパーツールが開けたらウインドウのサイズを左右に伸縮してみてください。

 

画面上にpx数が表示されます。

 

デベロッパツール(F12)を使って表示中のpx値を確認している画像

 

例えば上記の画像では 1150px × 947px と表示されていますね。

 

左側の 1150px がウインドウの幅を、右側の 947px が高さを表しています。

 

これでCSSが機能しなくなる境界を探したところ、私のブログの問題は 1184px 以上の時に発生していることが分かりました。（※検証の画面が邪魔になっているのか、本当は1200pxで切り替わるので多少の誤差があるようです。）

 

また、今まではなぜこのように表示が変わってしまうかを私は理解していなかったのですが、この確認作業中に原因が判明しました。

 

サイドバーの有無です。（←この時点では気付いていませんでしたが誤りです。たしかに切り替わる境界は一緒ですが直接の原因ではありません。）

 

サイドバーが表示されている＝CSSが表示されない。

 

私がブログに使用しているテーマの場合、ウインドウの表示幅が小さい時にはサイドメニューは記事より下の位置に表示されます。そして、ウインドウの表示幅が大きい時にはサイドバーとして記事の右側に表示される仕様でした。

 

よって、サイドバー（サイドメニュー）の表示に関わるコードを探すことにしました。

 

……とは言いましても、それがどのコードなのかは分かりません。

 

そのため、当初の予定どおりに【px】を使って考えます。

 

各コードのmax-width、またはmin-widthのpx数を確認していき、1184px か、それに近しいpx数のコードに当たりを付ければ良いわけです。

 

原因となるコードは見つかったのか？

見つかりませんでした！

 

WEBデザインの知識がないと分からないと思います！

 

…ということで切り口を変えました。

 

【サイドメニューの表示位置でCSSが効かなくなる】

 

これでWEB検索をかけて当たりを探っていきます。

 

……今だから言えますが、ここから少し迷走します。ツッコミも増えます。

((((；ﾟДﾟ))))ｶﾞｸﾌﾞﾙ

 

サイドメニューの表示位置が原因と仮定して解決方法を探した

検索をかけましたが直接的なヒントは得られなかったため、まずはウインドウの幅に応じてサイドバーの表示位置を変更するコードを判明させることにしました。

 

サイドバーをページ下部に移動させる方法：

https://support.teampage.jp/traction#/single&proj=FAQ&rec=2653&brief=n

 

上記の記事をもとに、自分の使っているテーマの同じ箇所を探しました。

 

@media screen and (max-width:1200px) {
  #wrapper {
    width: 100%;
  }
  #content-inner {
    margin: 0 15px;
  }
  .archive-entries {
    grid-template-columns: repeat(2, 1fr);
  }
  #box2 {
    width: 100%;
  }
  #box2-inner {
    margin-left: 0px;
  }
}

 

サイドバーを示す名称が「sidebar」と直球な表現ではなく「box2」だったので分かりにくかったですが、前述のデベロッパーツールを使ってサイドバーが「box2」であることを突き止めたおかげで確信が持てました。

 

 補足

はてなブログはサイドバー（サイドメニュー）を「box2」のコードで記述しています。テーマ製作者もそれに倣ったようです。

 

ただ、上記内容はトップページに関する指定コードであり、記事ページの表示に関する設定ではありませんでした。

 

しかもこのコードを見ても、なぜ表示位置が変わるのかが分かりません。

 

おそらく、特に指定をしないからこそ上から下へと表示されるのだと思いますが。

 

アプローチを変えてみた

アプローチを変えて、今度はとにかくコードを読んでみることにしました。

 

@media screen and (max-width:768px) {
  .page-entry .pager {
    grid-template-columns: 1fr;
    margin: 15px 10px;
  }
}

 

この項目の近くが怪しい……。（←的外れ）

 

理由としては、grid-template-columns: 1fr;はページの幅全体の中に１列分のコンテンツを表示することを指定するコードだからです。

 

つまり、１カラム（列）。

 

しかし、記事の横にサイドバーが並ぶのであればgrid-template-columns: repeat(○, 1fr);とかになるはずなので、サイドバーを示したものではないでしょう。（←この記述の場合はカラムが等間隔に並ぶので、サイドバーが並ぶ場合の想定も間違っています）

 

それからもひたすら探し続け……。

 

それらしいコードを発見しました！（←的外れpart2）

 

.page-index .enable-top-editarea .page-archive #box2-inner,.page-archive #box2-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
}
#box2-inner {
  grid-template-columns: 1fr;
}
@media screen and (max-width:1200px) {
  #box2 {
    margin:0 15px;
  }
  #box2-inner,.page-index .enable-top-editarea .page-archive #box2-inner,.page-archive #box2-inner {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    grid-gap: 25px;
  }
}
@media screen and (max-width:768px) {
  #box2-inner,.page-index .enable-top-editarea .page-archive #box2-inner,.page-archive #box2-inner {
    grid-template-columns: 1fr;
  }
}

 

  • 先にデベロッパーツールで調べたとおり、box2（サイドバー）について記述されている
  • 通常は３列、1200px以下では２列、768px以下では１列で表示する特徴が一致している。

 

このことから、上記コードの部分がサイドメニューの指定をしていると判断できました。

 

しかし、記事ページの場合はウインドウを最大化してもサイドメニューは２列までしか表示されないため、上記コードはトップページに関する記述だと分かりました。

 

つまりコレでもありません。

 

私が探しているのは「記事ページでサイドバーが表示されるとき」の記述です。

 

……ふと、ここで思い至りました。

 

はてなブログでは、サイドバーが標準仕様なのではないでしょうか？

 

つまり、テーマのCSSコードではサイドメニューをページ下部に表示できれば良いため、記事横にサイドバーを設置するコードを設定する必要がないのです。

 

そうであれば、はてなブログ側の問題であるような気がしますが、実際にWEBでいろいろなワードで検索してみても同じ悩みを訴えている記事は見当たりません。

 

そうなると、やはりテーマの中で起き得る問題なのでしょうか？

 

迷宮入りです。(ノД`)・゜・。

 

対策を思考錯誤してみましたが……

その後しばらく考えて、思いついた対策は２つあります。

 

１つはサイドバーを表示しないこと。

 

すなわち、記事ページ内のサイドバーを指定するコードmax-width:1200pxの条件を取り外すことで、どんな大きさになっても記事の下へ移動するように設定することです。

 

おそらく、こちらの方法は確実に上手くいくのではないでしょうか。（←失敗します）

 

２つ目は記事部分の幅を指定すること。

 

これは、CSSが親要素の変移によって正しく機能できなくなったものと仮定して、親要素である記事部分の幅を指定してあげることを主旨としています。

 

例えば、幅が1200.1px以上の時（min-width:1200.1px）は、記事部分の幅を100%にする……と言った感じです。

 

２つ目の対策方法は効果が出るか分かりません。（←出ません）

 

ただ、解決できなくても困りますし、サイドバーはできれば表示して欲しいので、現状の構成のまま正常に動作する方法を見つけたいと考えていました。

 

～的外れな調査中の記録～

 

▼パソコンでウインドウ幅が小さい時、記事コンテンツ部分の最大値は805px

@media screen and (max-width:1200px) {
  #content {
    max-width:805px;
  }
}

 

▼タブレットやスマホサイズの時、記事コンテンツ部分の最大値は100％

@media screen and (max-width:768px) {
  #content {
    max-width:100%;
  }
}

 

▼通常の記事部分の幅

#wrapper {
  width: 70%;
}

 

▼通常のサイドバーの幅

#box2 {
  width: 30%;
}

 

▼上記２つは下記コード（最大表示）に対する割合なので、実質固定値

#content {
  padding: 20px 0px;
  margin: 0 auto;
  width:1170px;
  overflow:hidden;
}

 

～調査結果～

 

どのコードも問題なく設定されてますね。(ノД`)・゜・。

 

あえて挑むのなら

 

#wrapper {
  width: 70%;
}

 

は実質的に1170×70％で819pxと同義になっていますので、

 

#wrapper {
  width: 819px;
}

 

と実数に書き換えてみることでしょうか。おそらく無駄ですが。

 

デザインCSSに書き足せば、下側の記述が優先されるため上書きされるはずです。

 

さっそく試してみましょう。

 

……ダメでした。（←２コマ漫画的展開）

 

CSSがはみ出しました。

 

つまり、２つ目の対策として考えていた【記事部分の幅を指定すること】は既に実行されており、そこに問題は存在しないため対策方法にはなりませんでした。

 

残るは１つ目の【サイドバーを表示しないこと】になりますね。

 

記事ページ内のサイドバーを指定するコードmax-width:1200pxの条件を取り外すことで、どんな大きさになっても記事の下へ移動するように設定します。

 

ただ、はてなブログの場合は右側サイドバーが標準仕様なので、逆に1200px以下の時と同じように条件指定すればいいのだと思います。

 

@media screen and (max-width:1200px) {
  #wrapper {
    width: 100%;
  }
  #content-inner {
    margin: 0 15px;
  }
  .archive-entries {
    grid-template-columns: repeat(2, 1fr);
  }
  #box2 {
    width: 100%;
  }
  #box2-inner {
    margin-left: 0px;
  }
}

 

上記コードをもとにして……

 

  • max→min
  • 1200px→1200.1px
  • 2, 1fr→3, 1fr（サイドメニューが記事の下に移動した時に表示する列数）

 

……に書き換えたコードを作成しました。

 

* サイドバーは画面が大きくても下側に表示する設定 */
@media screen and (min-width:1200.1px) {
  #wrapper {
    width: 100%;
  }
  #content-inner {
    margin: 0 15px;
  }
  .archive-entries {
    grid-template-columns: repeat(3, 1fr);
  }
  #box2 {
    width: 100%;
  }
  #box2-inner {
    margin-left: 0px;
  }
}

 

これをデザインCSSに追加してみます。

 

……ダメでした。（←２回目）

 

サイドバーは下に移動しませんでした。

 

思い付く限りのことをしてみましたが、完全にお手上げです！

ヽ(^o^)丿

 

救いの手が差し伸べられる！

私がTwitterで「ひえ～助けて～」とつぶやいていると、時雨さん（@shigure005）から「WEBデザインをやっているので力になれるかもしれません。」と返信がありました。

 

(；ﾟДﾟ)＜ あなたが神か！

 

…ということでご相談させていただいたのですが、長いので割愛します。

 

詳細を見たい方は下記ツイートからご確認ください。

 


結果、具体的な原因までは特定できないものの、1200px以上のレスポンシブ設定でコードを追加すれば良いと言うアドバイスをいただけました。

 

 

そして、教えていただいたコードをデザインCSSに追加してみたところ、CSSが反映される時とされない時がありました。

 

この時、時雨さんからご紹介いただいたコードの{と}の数が違っていることに気が付き、数を揃えるために「}」を１つ減らしたのですが、かえってCSSが反映されなくなることに気が付きました。

 

……？

 

なぜ数を揃えるとダメになるのか？

 

逆に言えば、}が１つ余分な時にコードが成立している。

 

ならば、余っているはずの}に対応する{はどこにあるのか？

 

ここでようやく本当の原因に気が付きます。（←次章【 解決編 （ ｸﾗｲﾏｯｸｽ ） 】）

 

ついに本当の原因が特定できた！

ウインドウの幅が変わるとCSSが効かなくなる問題。

 

その本当の原因。

 

それは、デザインCSSの中に}が１つ抜けている記述があったからでした！

 

そこからは捜索作業です。

 

その結果、テーマ「マテリアルぽっぷ」のデモサイトに公開されている【ヘッダーを文字から画像に変更する追加コード】に}が１つ抜けていることを発見しました。

 

 

これが原因で、以降に記述した全てのCSSにも「1200px以下の時」の条件が効いてしまって、1200px以上の時に働かなくなっていたのです。

 

いろいろと調べている最中にコードの誤りを指摘しているサイトも見かけましたが、私の頭の中からはテーマのカスタマイズ用の追加コードはすっかり抜け落ちていました。

 

テーマを作っている人が記述漏れをしている可能性はまったく疑ってもいなかったので……。

 

猿も木から落ちる。河童の川流れ。弘法にも筆の誤り。

 

同じ意味のことわざが複数あることからも分かるように、きっと各地のいろいろな人たちが「どんな達人にもミスはある」とおっしゃっていたのでしょう。WEBデザインこわい。

 

テーマ提供者様にはこの件を報告していますので、もしかしたら追加コードを公開しているページが修正されているかもしれません。

→追記：修正していただけたようです。

 

とにかく、不足していた}を付け足すことで問題は解消されました。

 

良かった……。

 

そして長かった……。

 

原因は至極単純な理由でしたが、そこに辿り着くまでの過程１つ１つがあったからこそ、原因を特定するきっかけを掴むことができました。

 

ご親切に相談に乗っていただけた時雨さんにも感謝です！

 

これでブログを見に来る方たちを意図せぬ形でブラウザバックさせてしまう心配もなくなりました。

 

そうしてほっと一息ついた時には、土日が完全に潰れていました！

(ノД`)・゜・。

 

今回の教訓：人の親切心は身に染みる

 

私も人の身に染みるようなブログを運営していきたいと思います！

 

おしまい。