Lycolog

タイトル通りトップページのレイアウトを変えてみました。

誰が見に来てるのか解らない部分なので変えたところでアレですが…ｗ（トップページはアクセス計測してないので。。。）

PCビュー

変更前は縦長のレイアウトだったのですが、もうちょっと余白を活かした方がいいかなと思い、横にもレイアウトしてみました。デザインセンスが皆無なのでなんか余計に微妙になった気もしますが…。

他にも表組だった場所を段落にしたり、Sponsoredのバナーを縦置きにしたり細々と変えてます。

変更前	変更後

SPビュー

経験技術のところは見やすさがマシになったと思います。余白が詰まって少し息苦しくなった気もします。

PCビューが縦長だったのはレスポンシブ対応をサボる為というのもあったので、今回はそこそこ真面目にやりました。結果、まぁまぁちゃんとレスポンシブになっているとは思います。まぁ、一応本業なので…。ブレークポイント周りの挙動は怪しい気もしてますが…（

変更前	変更後

あとがき

半ば何のためにあるかわからないトップページですが、素のHTMLを書く機会が少ないので、それを書くためだけにある節があります。それもあってJSは入れず、HTMLとCSSだけで書いてます。

一応自分なりにセマンティクスには拘って書いているつもりですが、概ね自己満足レベルな気はしています。Lighthouseの数値は悪くない気がするので、無難なところかなという気はしていますが…。

Lighthouseの結果は取り合えずぼちぼちな気はする。

まぁまた気が向いたときにいじろうと思います。この新レイアウトも8月頭に着想して原型を作って、中途半端な状態で今日まで放置してたのを直して何とか形にしたくらいなので…。

こんなんでもやってるとMedia Queries Level 4という新機能を知れたり、HTMLやCSSを書く能力が多少は鍛えられるので悪くないです。

MDNによるとMedia Queries Level 4の対応状況は「それなり」ということですが、今回使用したMedia Queries: Range Syntaxは、どのブラウザも対応してくれてそうで良かったです。MDNでも全てのブラウザがFull supportとあるので安心です。