【はてなブログ】横幅がCSS通りに反映されない！？｜HTML&CSS勉強中

このブログはてなブログ作成なんですが、ウィンドウサイズによって表示を変えていて、

こんな感じ。

左は、ウィンドウサイズが900px以上でブログタイトルが左端に、記事とサイドバーが2列に横並び。
右は、ウィンドウサイズが900px以下でブログタイトルが中央に、記事の下にサイドバーが表示され1列に縦並び。

ただ、これをChromeのデベロッパーツールで確認すると…

あれ？

ウィンドウサイズは916pxだから、ブログタイトルが左＆記事とサイドバー横並びになるはず。

なのに反映されてない…？

原因はこれ。

・はてなブログ管理画面→デザイン

で出てくるサイドバー。

PCでHTMLやCSS弄る時は皆この画面開くと思います。
このサイドバーの横幅が、ウィンドウサイズに含まれているみたい。

なので、この横幅の長さを調べました。

例えば、　max-width: 900px　だと、
デベロッパーツール右上のウィンドウサイズの表示が1180px（サイドバー開）、930px（サイドバー閉）になる。

（※ウィンドウサイズはpxで設定してるけど、記事等のコンテンツ幅は%で設定しているので、1～2px程度誤差が出たりする時もある。）

なので、はてなブログでレスポンシブデザインをしたい時は、

・デザイン設定画面でプレビュー確認する時は注意！
・（面倒なら）別タブでブログを表示して確認！

以上気を付けましょう。

余談ですが、
@media all and ～
は一番下に記述しましょう。

CSSは上から順に読み込むので、下に記述している方が新しいです。

例えば、
「ウィンドウサイズが900px以下で文字が青くなる」
ように書いてみます。

See the Pen
vqVzNq by cv (@cfgbhjnk)
on CodePen.

ウィンドウサイズを900px以下にしてみてください。
文字は赤いままになっていると思います。

これは、
@media all and ～　が　.blue {color: red;}　より前に記述されているから。
.blue {color: red;}　が　@media all and ～　のスタイルを上書きしているという事です。

なので、@media all and ～　を、 .blue {color: red;}　の後に記述すると、

See the Pen
agQJbY by cv (@cfgbhjnk)
on CodePen.

ウィンドウサイズを900px以下にすると、ちゃんと文字が青くなりました。

（CODEPEN、Result非表示にしたいなーと思ってたけど、Embedボタン押して設定画面出てきた時にResultボタンクリックで非表示にできた。
完全に消去させることはできないのかなー？ちな無料版）

まあ普通レスポンシブ用のCSSは別のスタイルシートに書くと思うけど、はてなブログとかでは注意しようって事で。

あと、デベロッパーツールで右上に表示されるウィンドウサイズは、スクロールバー含めた長さ。

これです。
ブラウザの外枠は含まないので注意。

以上、はてなブログで躓いた話でした。
一旦タグ弄りは終わり！次はアフィ設定したいと思います。

コミュ障ニートは生きる価値なし