変態的CSSからFlexboxまで!2016年話題になったHTML&CSS記事ベスト20

アスキー 12月07日(水)18時05分配信

【第1位】「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選

023-zu

多少複雑なデザインでも、画像やJavaScriptには頼らず、CSSで実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。

【第2位】もう迷わない! HTML5のもっとも基本的なテンプレートはこれだ!(2016年版)

023-zu

HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。

【第3位】「安倍マリオ」で話題に!世界中でマリオがいかに愛されているかがわかるCSSまとめ

023-zu

リオオリンピックの閉会式で話題になったのが、突如土管から現れた、安倍晋三首相扮するマリオ。まさかの首相のコスプレでの登場に、国内だけでなく海外でも大ウケだったようです。

【第4位】便利すぎてしびれた!あなたが知らないCSS関数トリック8選

023-zu

どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか?

【第5位】脱Bootstrap!軽量シンプルな最新CSSフレームワーク「Cutestrap」に惚れた!

023-zu

もはやBootstrapがデファクト<3545>になっているCSSフレームワーク界に、ちょっとかわいい期待の新星が登場。 軽くてシンプル、すぐに使えるCutestrapのチュートリアルをいち早くお届けします。

【第6位】Flexboxよりも新しい!CSSレイアウトの最新仕様Grid Layout を先取りしよう

023-zu

CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxを使うのが常識。でも、仕様策定中の「Grid Layout Module」を使うと、もっと効率よくレイアウトができるようになりそうですよ。

【第7位】もうすぐ使える!? CSSのmaskとSVGならフォトショ不要で画像を自由に切り抜ける

023-zu

CSSのborder-radiusを使って画像を円形に切り抜くページはよく見かけますが、CSSのmaskプロパティを使えばもっと自由な形のマスクができちゃうそうです。まだ実験段階のプロパティなので、将来に期待しつつ……。

【第8位】Bootstrapの代わりになるか?超軽量CSSフレームワーク「Spectre」を試してみた

023-zu

あまりにも定番化しているので「とりあえずBootstrapで」というプロジェクトが多いと思いますが、シングルページのようなシンプルな案件ならもっとライトなフレームワークでもいいかもしれません。

【第9位】Photoshopはもういらない?明度も彩度も超手軽に変えられるCSSフィルターがスゴい

023-zu

明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です!

【第10位】もうすぐIoT案件がやってくる!?フロントエンド開発が備えたい5つの視点

023-zu

「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実装をマジメに考えた

アスキー
もっと見る もっと見る

【あわせて読む】

    最終更新: 12月07日(水)18時05分

    【関連ニュース】

    【コメント】

    • ※コメントは個人の見解であり、記事提供社と関係はありません。

    【あなたにおススメ】