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

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

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

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

もっと読む

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

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

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

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

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

成果物はこちら。

もっと読む