このページの本文へ

HTML5テンプレートからCSS Grid Layoutまで

Web制作者が絶対読みたいHTML & CSSの最新記事ベスト10

2016年10月26日 18時00分更新

Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

HTMLやCSSも進化しています。Webデザイナーやコーダーなど、Web制作者が押さえておきたい最新のHTML/CSS関連記事をKADOKAWAが運営するオンラインメディア「WPJからアクセス人気順に紹介します。

1.基本的なHTML5のテンプレートを作る

01.png

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

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

2.知らないと損しているCSS関数の世界

02.png

便利すぎてしびれた!あなたが知らないCSS関数トリック8選(WPJ)

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

3.Cutestrapはホントにキュート

03.png

脱Bootstrap!軽量シンプルな最新CSSフレームワーク「Cutestrap」に惚れた!(WPJ)

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

4.Flexboxをマスターしたら次の最新仕様にも注目しよう

04.png

Flexboxよりも新しい!CSSレイアウトの最新仕様Grid Layout を先取りしよう(WPJ)

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

5.もう先祖返りは起こさない

05.png

やばっ!CSSの先祖返りで消耗したデザイナーにはビジュアル自動化テストがおすすめ(WPJ)

CSSを修正したらデザインがいつの間にか先祖返りしていたり、別の部分に影響して崩れてしまったり…そんなトラブルを防ぐのが、ビジュアルリグレッション(回帰)テスト。変更したらテスト。これからの常識になりそうです。

6.IoT案件が来ても恐くない

06.png

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

「IoTなんて自分の仕事とは関係なさそう」なんて言わないで。スマートフォンの登場がWeb制作の常識を変えたように、IoTだってフロントエンド開発者やデザイナーが扱う仕事になるかもしれません。

7.シンプル案件はライトなSpectreで

07.png

Bootstrapの代わりになるか?超軽量CSSフレームワーク「Spectre」を試してみた(WPJ)

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

8.Grid Layout Module標準化の動きをチェックして差をつける

08.png

CSSレイアウトの常識が変わる!Grid Layout Moduleの最新動向を追いかけろ(WPJ)

次世代のCSSレイアウトとして注目されるのが、Grid Layout Module。実用段階まではまだ時間がかかりそうですが、活発な標準化の動きをチェックしておくとライバルに差を付けられそうです。

9.CSSだけで明度・彩度の調整やぼかし、グレースケール化ができる

09.png

Photoshopはもういらない?明度も彩度も超手軽に変えられるCSSフィルターがスゴい(WPJ)

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

10.自由な形のマスクができるmaskプロパティ

10.png

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

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

まとめ

いかがでしたか? HTML & CSSの新技術や基本に取り組んでいる人に役立ちそうな記事をセレクトしてみました。ぜひ、チェックしてみてください。

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く