ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。

連載第三回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。

CSSのレイアウトに使うのはFlexboxが多い

ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。


727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。

Flexboxが最多となったのは、未対応ブラウザ(例:IE9)が無視できるシェアまで下がったことや、floatよりFlexboxのほうが利便性が高いことが背景にあると思います。

2017年に主要ブラウザが一斉にGrid Layoutに対応しましたが、実際にGrid Layoutを利用している人は少ないままです。Grid LayoutはFlexboxやfloatと比べると対応ブラウザが限定的(かつIEへの対応方法に癖があり)で採用しにくいのかもしれません。

IE11対応はいつまで続く?

Internet Explorer 11(略称:IE11)をいつまで対象ブラウザに含めることになりそうか質問しました。


62票の回答があり「2022〜2025年まで」が21%、「2019〜2021年まで」が32%、「2018年まで」が18%、「既にサポート外にしている」が29%でした。

Windows 10のIE 11は2025年までサポート期間となります(参照「一目で分かる、各Windows OSでのIEのサポート終了時期 – @IT」)。アンケート結果の通り、長期にわたってIE11と付き合うことになると考えている人は多いようです。

ファイルパスの種類で多いのは?

HTMLのコーディングで最も利用する頻度が高いファイルパスを質問しました。img要素のsrc属性や、外部CSSやJSファイルへのパスの指定方法についてです。


545票の回答があり「相対パス」が57%、「絶対パス」が15%、「ルートパス」が28%でした。

それぞれに利点があるのでウェブサイトの方針によりけりでしょう。相対パスはディレクトリの変更に強かったり、ローカルで確認できるといった利点があります。

San Franciscoフォントを使ってる?

フォントの種類に「-apple-system」(Safari用)や「BlinkMacSystemFont」(Chrome用)を指定すると、iOSやmacOSのブラウザで欧文にSan Franciscoフォントが適用されます。San Franciscoフォントはsans-serif(iOSやmacOSではHelveticaとなる)に比べて小さいフォントサイズでも可読性が高いといった利点があります


256票の回答があり「指定している」が14%、「指定していない」が32%、「-apple-systemを初めて知った」が54%でした。Windows/Androidユーザーにはあまり馴染みがなかったかもしれません。

割合としては14%と少なかったですが、「読者に読みやすい字体で届けたい」とフォントを大事にしているHTMLコーダーは少なくないでしょう。

Sassのコンパイル

CSSのプリプロセッサのSass。柔軟かつ高度にスタイルシートを書けるので、CSSではなくSassを利用する人も多いでしょう。Sassのコンパイル方法には様々な種類があるので、どれがメジャーであるか質問しました。


257票の回答があり「コマンドライン(Ruby)」が6%、「コマンドライン(Node.js)」が16%、「タスクランナー(Gulp, Grunt等)」が60%、「アプリケーション(Dw, WebStorm等)」が18%でした。

公式サイト「sass-lang.com」やGoogle検索結果の上位の入門記事では、RubyでSassのインストール手順を解説されています。しかし、現場ではGulpやnode-sassを使う場面が多く、入門方法と現場の使い方が異なってきています

少数派となったRuby Sassはセットアップの手順が多く、コンパイル速度が遅いといったデメリットがありますが、かつて人気だったCSSフレームワーク「Compass」が利用可能です。古い時代のサイトのメンテナンスのために利用しているケースもあるでしょう。

本サイトの記事「絶対つまずかないGulp入門」ではGulpとnode-sassを使う方法で解説しています。

次のページではフロントエンドやJavaScriptのアンケートを紹介します。