変態的CSSのまとめから、FlexboxやGrid Layoutを使ったいまどきのCSSレイアウト、Bootstrap代替フレームワークまで。いろいろあった2016年のHTML ＆ CSS関連の人気記事、ベスト20をKADOKAWAが運営するオンラインメディア「WPJ」から届けします。 らアクセス人気順に紹介します。
【第1位】「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選
多少複雑なデザインでも、画像やJavaScriptには頼らず、CSSで実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
【第2位】もう迷わない！ HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。
【第3位】「安倍マリオ」で話題に！世界中でマリオがいかに愛されているかがわかるCSSまとめ
リオオリンピックの閉会式で話題になったのが、突如土管から現れた、安倍晋三首相扮するマリオ。まさかの首相のコスプレでの登場に、国内だけでなく海外でも大ウケだったようです。
【第4位】便利すぎてしびれた！あなたが知らないCSS関数トリック8選
どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？
【第5位】脱Bootstrap！軽量シンプルな最新CSSフレームワーク「Cutestrap」に惚れた！
もはやBootstrapがデファクトになっているCSSフレームワーク界に、ちょっとかわいい期待の新星が登場。 軽くてシンプル、すぐに使えるCutestrapのチュートリアルをいち早くお届けします。
【第6位】Flexboxよりも新しい！CSSレイアウトの最新仕様Grid Layout を先取りしよう
CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxを使うのが常識。でも、仕様策定中の「Grid Layout Module」を使うと、もっと効率よくレイアウトができるようになりそうですよ。
【第7位】もうすぐ使える!? CSSのmaskとSVGならフォトショ不要で画像を自由に切り抜ける
CSSのborder-radiusを使って画像を円形に切り抜くページはよく見かけますが、CSSのmaskプロパティを使えばもっと自由な形のマスクができちゃうそうです。まだ実験段階のプロパティなので、将来に期待しつつ……。
【第8位】Bootstrapの代わりになるか？超軽量CSSフレームワーク「Spectre」を試してみた
あまりにも定番化しているので「とりあえずBootstrapで」というプロジェクトが多いと思いますが、シングルページのようなシンプルな案件ならもっとライトなフレームワークでもいいかもしれません。
【第9位】Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい
明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です！
【第10位】もうすぐIoT案件がやってくる!?フロントエンド開発が備えたい5つの視点
「IoTなんて自分の仕事とは関係なさそう」なんて言わないで。スマートフォンの登場がWeb制作の常識を変えたように、IoTだってフロントエンド開発者やデザイナーが扱う仕事になるかもしれません。
【第11位】やばっ！CSSの先祖返りで消耗したデザイナーにはビジュアル自動化テストがおすすめ
【第12位】まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
【第13位】CSSレイアウトの常識が変わる！Grid Layout Moduleの最新動向を追いかけろ
【第14位】まだfloat使ってるの？ フォームのレイアウトはFlexboxで超簡単に実装できる
【第15位】ダメすぎる6つの事例に学ぶ、半年後に炎上しないCSSコメントの書き方
【第16位】まだ使ってないでしょ？動画や画像のサイズ調整にobject-fitとobject-positionが便利すぎ
【第17位】これは便利！CSS3で段組みを作るいまどきのやり方をまとめてみた
【第18位】これは便利だ！CSSでイラレみたいに行揃えを調整できるtext-align-lastを覚えた
【第19位】最近流行の斜めのデザインをSassで実装する理想的なコードを考えてみた！
【第20位】いつもコピペで済ませてない？いまどきのボタンのCSS実装をマジメに考えた
