新しいBlogになって、あんまり見た目が変わらないと思った人もいると思うが、
一方でスマートフォン・タブレットで見ている人は、サイドバーがサイドになくなったことに気づいたかも。
画面幅の小さな端末ではサイドバーを下に持っていくようにしたんですね。
PCでも画面幅を狭めていくと、この表示を体験することができる。
あるところで、サイドバーが消えて、右上に▼が表示され、これをクリックするとサイドバー相当の内容に飛ぶ。
これは画面幅に応じてCSSの動作を切り分けているからである。
@media (min-width: 900px) {
.absolute-sidebar {
float:left;
width:30%;
}
.site-content {
float:left;
width:70%;
}
.secondary-link{
display: none;
}
}
900pxよりも画面幅が大きい場合は、サイドバーを画面幅の30%、コンテンツ本体を70%として、左右に並べると。
その上でサイドバーへ飛ぶための▼も必要ないということで表示から消している。
900px未満の場合はこの部分が適用されないので、▼は表示されるし、
コンテンツ・サイドバー共々幅100%で、通常通り上から下にコンテンツが並ぶという形になる。
このような形になったのは参考にしたテーマがこういうものだったから。
- サイドバー相当は通常は表示されていない
- ボタンをクリックしたときだけ表示される
- 画面幅が広い場合は画面の右一部を割いて、狭い場合は画面全体に覆い被さる
これは複雑すぎたが、画面幅が狭いスマートフォンなどで常にサイドバーを表示する不都合はあるわけで、
画面幅によって表示方法を切り分ける部分は採用したということである。
こういうサイドバーが常に表示されるデザインはスマートフォン時代にとっては古風だが、
PCではこのスタイルはやはり使いやすいわけで、使えるところは使ってスマートフォンでも見やすいようにしたと。
(もっとも、こんな文字だらけのBlogはそもそもスマートフォン向きではないのだが)
ただ、これをやるためにはもう1つ仕込みがいるんですよね。
<meta name="viewport" content="width=device-width, initial-scale=1">
これをHTMLの冒頭に書いておく必要がある。
これはスマートフォン・タブレットだけに適用されるものだと思うのだが、
この書き方をすると、デバイスごとに決められたピクセル数を画面幅とみなして表示することになる。
手持ちのスマートフォンだと425px、タブレットだと630px(いずれもAndroid)になってるみたい。
viewport について (Just another memorandum) : Viewport 確認用
width=360とか書くと、どんなサイズのスマートフォン・タブレットでも360px幅とみなして表示される。
デザインを固定できる一方で、画面の大きなタブレットでは不適かなということで、device-widthということで端末お任せにしている。
ちなみに端末を横向きにすると、タブレットでは900px超となりPCと同様の表示になる。
これもwidth=device-widthとするメリットである。
さっきの425pxとか630pxというのは実際の画面サイズとは違う値である。
昔はiPhoneが320px、Androidが360pxが典型的な値だったが、画面の大型化により少し拡大する傾向にある。
width=320とかwidth=360とか指定することが多いのは、この頃の数字を引きずってるということか。
結局、その頃との相対値でいろいろ言ってるので、現状とはいろいろ合わないんですよね。
これをAndroidのChromeで「PC版サイト」にすると、画面サイズによらず980pxを基準にして表示することになるようだ。
典型的PCが980pxなんですかね。
さっき900pxが閾値だと書いたので、PC版にすればスマートフォンでもサイドバーが右側に出る。
viewportが指定されていない場合(すなわちスマートフォン用ではないページ)も同様とみられる。
なので、こうやって見ると、旧Blogをスマートフォンで見た場合とそんなに変わらないと思う。
PCとスマートフォンで大きく見た目が違うページも、
意外にこういう画面幅の切り分けで実現されていることがあるんですね。
だからPCでもズリズリと幅を変えていくと、スマートフォン同様の表示になることがあると。
なかなかどのデバイスでも見やすいというのは難しいところはあるのだが、
自分自身が、PC・タブレット・スマートフォンをどれも使うので、
それぞれの性質によって見やすくなるように工夫しているつもりである。
PCはWindows、スマートフォン・タブレットはAndroidということで、他OSでは事情が違ったりするとは思うが、
それでも大崩れしないようにはしているつもり。(どうにもまずかったら教えてくれるとありがたい)