sside.net

blog作り直すときに今時のHTMLやCSS使った話

今回、Blogを再開するにあたって個人的に決めた事柄があったので残しておきます。今時Blogやる人もそうそう居ないでしょうが、ましてや自分でHTML書こうとなると面倒だしほぼ無意味ですが、こういう方針でやりましたということで。

テンプレート作るときの環境

PHP使えてWordPressの入力補完してくれるエディタやIDEねえかなーと思ってとりあえず色々入れてみました。試したのは以下。

  • Visual Studio Code
  • Aptana Studio
  • Visual Studio 2017 Community Edition
  • Sublime Text
  • Netbeans(PHP Edition)

結局どれもWordPressの入力補完は出来なかったんですが、NetbeansがPHPの入力補完や、IDEにWebサーバ含んでたり、FTPクライアント内蔵でCtrl + SするだけでWordPressのサーバ側に反映出来たりと素晴らしいIDEでした。他のエディタやIDEでも同様のことが出来るんでしょうが、圧倒的に簡単。

挙句にLESSも標準サポートしておりやっぱり保存するだけでCSSへの変換までやってくれるんですが、新しめのCSSプロパティに対応してないので警告が出まくるのは難ではありました。あとLESSの構文解釈がおかしいのか、補完や候補が出ないこともしばしば。とはいえ、これ一つで済むのは大きい。

やったこと

  • 基本的にラッパーDOMを使わないセマンティックなHTML
  • CSSはBEM記法に準ずる
  • 携帯電話でのレイアウトも作る

セマンティックなHTML

ラッパーDOM、WordPressの編集画面では要素にclassが指定できないので本文はDIVで囲んだのと、paddingしてるスペースもリンクにしたいのでaタグでli囲んだりしてますが、それ以外は意味の通るHTMLになってるはずです。どんな風になってるかはF12押して確認してください。あとHTML5で省略できる要素は基本的に省略しました。

WordPressのテンプレートは意味もなく自分で書きましたが、HTML側で見た目を考慮しないようにした結果、雛型のHTMLは早々に出来上がるし、テンプレートも簡潔に書けるようになりました。どのような要素を入れるのかだけを考えれば良いので、HTMLは汚れないし、とりあえず装飾するための骨組みがすぐに出来上がるのは良いところでした。

CSS書く際にもF12ツールでDOMの構造を容易に追えるようになるので、見た目のためのDOMは基本的に入れない方が結果的に作るの速くなりました。

CSSのBEM記法

当初はLESSとかSASS分からねえよとCSSべた書きして、今と同様のレイアウトが出来たんですが、メディアクエリ差し込んで携帯電話向けのレイアウト作る段になって「これは無理だな」と気付いたのでCSSで書いた分は放棄して、LESSにしました。

SASSじゃなくてLESSにしたのは、Ruby環境入れる気がなかったからです。あとはJavaScript風の記法の方が馴染みがあったので。

CSSのclass名は最初からBEM風に付けてましたが、LESS使うとネストがHTMLの構造と視覚的に一致するようになりました。CSS直書きで手付けネストするの本当に意味ねえ。結果的にどう組むかが圧倒的に楽になりました。引数付きmixin使えば.buttonとか.menuとかのOOCSS的なclass作る必要もなくなりました。&コンビネータ付けてればclass名を繋いでくれるのでBEM記法との相性も良いです。

LESSで地味に効いたのは、コメントアウトが楽なこと。リセットCSS書いた後に未指定の要素全部真っ赤にして記述漏れ確認してるんですけど、すぐに外せるのは本当に良いです。

メディアクエリ使って携帯電話向けのレイアウトを作る

このレイアウトだと、横に広がる方には問題ないんですが、水平800px割ると厳しい感じになるので、低解像度と携帯向けは縦のレイアウトにしてます。viewport指定をメタ情報に入れてどうすんだよってのは釈然としませんが。

LESS使った結果、携帯電話ブラウザへの対応もとりあえずPC向け作った後、変更したい箇所にメディアクエリ差し込んで書き換えるだけなので圧倒的に楽でした。

出力されるのは全くヒューマンリーダブルでないCSSですが、どうせCSSに文書的意味はないので機械が勝手に解釈すればいいんですよ。完全に阿呆になれるし、阿呆の状態のままCSSが出来上がる。

やらないこと

  • スクリプトを使ったコンテンツ操作
  • 自サーバでの画像や動画の保持、配信
  • 自サーバ内でのアクセス解析
  • モダンブラウザ以外での表示

スクリプト使ったコンテンツ操作

レイアウト考えたときは、ハンバーガーボタンでも置いてメニュー出すかと思ったんですが、どう考えても表示領域に余裕があるし、無理にメニューをposition: absoluteで表示に追従させる意味もねえなと気付いたので止めました。その前にコンテンツが真っ先に目に入るように作るのが先。アニメーションさせるのが目的のサイトでもない限り、基本的には要らねえなあとは思います。

ただ、ヘッダズラッと並べてジャンプするようにしようと思ったら、コンテンツの内容に追従してアンカー降ったりメニュー出したりする程度ならスクリプトでいいかもという感じはあります。

自サーバ内にメディアコンテンツを置かない

自宅のサーバでISP契約も一般家庭向けなので、上り帯域使わないために画像はflickr、動画はYoutubeに置いてリンク張ってます。勝手にiframeやscript突っ込まれるし、ページロード時間が壊滅的に増えますが(16倍遅くなった)、アーティクルの表示をブロックするわけではないのでまあいいかと。

と思ってましたが、今携帯(iPhone 6)で見たら滅茶苦茶レンダリング遅い…。パフォーマンスプロファイル見たらコンテンツのサイズがデカいんじゃなくて、単にレンダリングが重い奴だ…。やってしまった…。

自サーバでアクセス解析を見ない

環境やテンプレートやその他コンテンツも、ついスクラップにしてまた作り直すとか、公開しているサーバで平然とやる癖があるんですが、その際にログのバックアップを取らないとか取り忘れるとか明示的に捨てるとかをやってしまうので一貫性のあるデータ取れないので、今回はGoogle Analyticsのスクリプトを差し込んでおきました。

余談というかこれが本題ですが、Google Analyticsのデータ、PowerQueryに食わせられるので自分用のグラフ作るのにすげえ便利です。最悪Excelが手元になくても、PowerBI Desktopが無償で使えるので現状最強のアクセス解析サービスですね。

モダンブラウザでしか表示確認しない

今回、IE11でまともに表示できなくなりました。わざとそうしたわけではなく、全部CSS grid layoutにしたからです。flexboxで頑張ればIE11も結果的に問題なかったんでしょうが、レスポンシブにレイアウト変更する場合、gridが死ぬほど楽です。携帯電話ブラウザ、ChromeやSafariのgrid対応も済んでるし、正直grid使わない理由はないです。

前述のGoogle Analyticsでも、ここを見るような向きのIE比率は5%未満なので、正直もう無視していいかなという感じですね。

どうしてもIE11で表示させたい、となったらIE用だけ別のCSS書いた方が多分早いレベル。やりませんが。

やってみた感想

今時のHTMLとかCSSとか全然知らなかったので、書いてみたらHTML4の頃よりも意味の通るHTMLになるし、CSSもかなり平易かつ思い通りにレイアウトできるようになってます。

HTML5、文書構造を記述する言語じゃなくてプレゼンテーション言語だろみたいによく言われますけど、あくまで使われ方の話であって、Blogみたいな明確に文章を載せるページに限れば、かなり良くなってるんだなあと思わされました。

最後に、HTMLやLESS書くにあたって参考にしたのはこの辺です。綺麗に纏まっててありがたい話です。