アニテマ

アニメ・新潟・鉄道の事などを書いていくブログ

お知らせ など

ブログを移転しました。(2016-08-01)

【メディアクエリ】ブログ(ページ)の表示をちょっと変えました【CSS3】

今まではページの幅を「画面の80%」にして、更に幅の限界を1440ピクセルにしていたんです(解像度の高いモニタで大きくなりすぎて見にくくなるのを防ぐため)。

でもそれだとページ全体としてはいいんですけど、記事本文とかの細かい所で不都合があったんです。

 


で、「小さい解像度から大きい解像度でも見やすいブログにしたい」という思いと、「%で指定すると不都合があるからピクセルで指定しないといけない」という現実とのせめぎあいでした(^_^;)


そして先日、「CSS3のMedia Queries(メディアクエリ)という機能なら実現できる!」という結論にたどり着き、無事実装できました(・∀・)


細かい解説はこの下に書きますが、要は「画面の大きさに合わせてデザインCSSを変えられる機能」ということです。



まず、

body {
  min-width: 966px;
  width: 80%;
  max-width: 1440px;
  }

前はこんな感じで指定してました。これだと「ページ幅は最小で966ピクセル、標準で画面の80%、最大で1440ピクセル」ということになります。


そしてこれを下のようにしました。

/* =====基本===== */
body {
  width: 966px;
  }
  
/* =====PC小モニタ用===== */
@media screen and (max-width: 1400px) {
body {width: 966px;}
}

/* =====PC中モニタ用===== */
@media screen and (min-width: 1410px) and (max-width: 1700px) {
body {width: 1366px;}
}

/* =====PC大モニタ用===== */
@media screen and (min-width: 1710px) {
body {width: 1866px;}
}

「@media」のところがメディアクエリです。
このブログでは現在、安いモニターやノートPCで主流の「横幅1366px」までを小モニタとし、
フルHD「横1920px」以上を大モニタその中間を中モニタと分けています。


「@media screen and (min-width: 1410px) and (max-width: 1700px)」
というふうに指定サイズに幅を持たせてあるのは、モニタやメーカー(主にノートPCとか)によって特殊な解像度があったりするかもしれないのでそこを考慮しています。


で、最初に「基本」としてメディアクエリを使わずに幅を指定しましたが、メディアクエリはCSS3という「最新」のCSSバージョンに入っている「新機能」ということになるので、古いブラウザなどではこれが機能しないことになります。
なので、メディアクエリが使えない環境のためにこういうものを書いておきます(メディアクエリが使える環境なら画面の大きさに合わせて自動調整されるので問題ないです)。


あ、実際にはてなブログやその他サイトでこれを使うときはもちろん「body」だけの指定では多分うまくいかないはずです(中身の要素も指定しないといけない)。
なので、「こういうことも出来るよ(/・ω・)/」という参考程度に思ってもらえるといいです。


ぶっちゃけ、詳しく知りたい人は「メディアクエリ」でググると分かりやすく説明してるサイトがいっぱいあると思います。

広告を非表示にする