マークアップのいらない未来を考える

みなさん、マークアップ好きですか? 私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね!

ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな?」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか? と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。

この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまとめてみようとおもいます!

なお、筆者は一人のWebエンジニアに過ぎません。これから少し触れる人工知能や機械学習の専門家でなければ、アクセシビリティの専門家というわけでもありません。いーかげんなことを述べているかもしれない点はご承知おきください。

もっと読む

デザインPSDからコーディングHTMLを自動生成してくれるサービスAUTOCODINGを使ってみた

株式会社プレートさんが、AUTOCODINGというサービスを開始されました。デザインファイルからコーディングを自動生成してくれるというサービスですが、さわりだけ聞くといかにも眉唾な感じです。ほんまにちゃんと作ってくれるんかいな? ということで試してみました。

もっと読む

あと一歩のところでうまくいかないCSSグリッドシステム

しばらく前からわたしはCSSグリッドシステムに取り憑かれたようになっている。このせいで成仏できないので取り憑く側といったほうが正しいのかもしれないが。

わたしが夢想しているグリッドシステムは以下の要件のもの。

  • HTMLとCSSだけで動く。JavaScriptに依存しない
  • リキッドレイアウトである
  • 行ごとに要素で囲む必要がない
  • グリッドの内容は、%指定でフレキシブルにすることもできるし、固定サイズにしておき領域幅をオーバーしたら改行するようにもできる
  • 使用があやういハックは使いたくない
  • IE8以上に対応する

もっと読む

select を JS と CSS で独自にデザインする方法(幅可変版)

ブラウザデフォルトの select 要素は、いろいろな事情で JavaScript でゼロから実装しないといけない場合はあるにせよ、特に理由がなければそのまま使うことが望ましい。独自に実装したものはどうしても、デフォルトのものよりユーザビリティーやアクセシビリティーの面で劣ってしまう。

とはいえそのまんま使うとデザインにそぐわない場面は少なくないし、デザイナーがゆるさんという場合だってある。見た目を変更しなきゃいけない時はよくある。

UA が提供する見た目があまりにもデザインとマッチしなければ select の見た目を CSS を使って調整することになる。このやり方は最近では一般的になってきていて、Google などでも使われている(路線検索時)など。やり方をググればブログなどがいくつか引っかかる程度にはメジャーだ。が、これらは全部、幅を固定しなければいけないという制約がある。

そういうわけで、幅を可変にしつつ、select の見た目を独自にデザインする方法を探った。

成果物はこちら。

もっと読む