限りなくどうでもいいけどどこにどう書いたらいいのかが分からなかったので日曜日の検索雑談として。
スマートフォンで「SEM」と検索すると関連検索の部分がズレるという事象を確認しました。
実際の画面
スマホ版Safari/Chromeで確認。
見た目からして既に右の列と左の列の配置が違うわけですが…基準線を引いてみるともっと明確に。
こんな感じ。
1行目と2行目が大きくズレてます。
ちなみに「SEO」で検索するとこんな感じ。
ズレはないですね。
基準線を引いてみても同じ。
気になってきたのでもうちょっと調べてみた
「SEO」「SEM」で「SEM」だけにズレが発生するのであれば「SE」「EM」に秘密があるのではないか?
(もっと他に人生において優先的にやることあるんじゃないのかと思いながら)いくつか調べてみました。
「EM」
こちらはわずかながらズレを確認。
「EM」説が濃厚か。
結論(追記あり 9/28 20:46)
よく分かりませんでした。
単純に「EM」だけではなくてその他の文字列とかでもこういう事例ありそうなんですけどね。どうなんだろ。
(追記)辻さんから文字の高さの違いなのでは?というご意見をいただきました。
@fuguti わかりづらくてすみませんw
左はfe-sem、seo semで2つ、右はゼロで左が低くなりまして、ブログの例のずれないのは左右同じ、emや、他にaseanは左が1、右が2で、左が高くなる、という法則は今のところ確認しましたので文字高さ関連かなとおもいました!
— 辻正浩 | Masahiro Tsuji (@tsuj) 2014, 9月 28
調べてみました。
このCSS周り詳しい人いませんかね?
あとここまで来たら圧倒的に右か左に傾いてるのを見てみたい気がする。
地蔵さんによる解説(追記 9/29 7:37)
font-familyをかえたり、inline-blcokをやめたり、virtical-alignをかえたりで見た目は直せると思う。
— 地蔵@稲垣 (@Cubismer) 2014, 9月 28
これは、「外枠のdivをinline-blockにして横並びしている(vertical-alignのbottomが全体に効いてる)」「フォントの指定がHelveticaNeueなどの英語フォントのみの指定」が理由かな。> http://t.co/qS6PeNikS6
— 地蔵@稲垣 (@Cubismer) 2014, 9月 28
縦に複数のpを並べたdivにinline-blockつけるとこう見えるのは知らんかった。仕組み上は確かにわかるんだけど、見ためが結構異様な調整(上辺ではなく下辺がそろう)よね…。
inline-blockは、使ってもliを横に並べるぐらいだったからなぁ(>_<;
— 地蔵@稲垣 (@Cubismer) 2014, 9月 28
****
というわけでここで1曲。
The Beatles「We Can Work It Out」
Life is very short, and there’s no time.
[…] 【限りなくどうでもいい検索の話】スマホで「SEM」と検索すると関連検索がズレる【追記あり】 […]
[…] そろう関連検索のキーワードが欠けています。 スマホで発見した時「スマホで「SEM」と検索すると関連検索がズレる」と同じ、何かしらのデザイン上の話なのかなと思ったのですがPCで […]
[…] 以前もスマホの検索結果でズレが出るというのがありましたが今回もCSSが関係してるんですかね(曖昧な見解 […]