Webデザインにマテリアルデザインを簡単に取り入れられる、CSSフレームワークを6つ、紹介します。 グーグルが自社のデザインにマテリアルデザイン（Material Design）を導入したのは2014年のことです。以来、Gmail、Docs（Googleドキュメント）、Drive（Googleドライブ）など、マテリアルデザインは多くのグーグル製品に実装されました。マテリアルデザインはAndroid…

Webサイトを効率よくレイアウトできるFlexbox。メガメニューの実装を例に、具体的な活用方法を紹介します。 ご存じの方もいるとおり、Flexboxはブラウザーサポートが増えて、はずみがついています。Flexboxなら、使いたくないCSSやJavaScriptハックを扱わずに、複雑なユーザーインターフェイスを作れます。 Flexboxはリニアレイアウトモデルを採用しており、スペースの計算をせずに…

floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか？ 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイア…

Jekyllで作ったサイトにGumroadを組み合わせれば、データ販売サイトを簡単に立ち上げることができます。 「Jekyllで購入ボタンなどの動的なウィジェットを超簡単に作る方法」では、Jekyllで作ったサイトに動的なウィジェットを追加する方法を学びました。今回はこの知識を使って、JekyllベースのWebサイトを、簡単にオンラインでデータを販売できるGumroadと結びつけて、わずかな時間で…

2020年にFlashのサポートが終了すると発表されました。すでにFlashを使う機会はほとんどなくなっていますが、代替となるWebアニメーション技術を学びたい人のためにGreenSockの使い方を紹介します。 GreenSockはGSAP（GreenSockアニメーションプラットホーム）として知られている、パフォーマンスに優れた、モダンWeb用のプロフェッショナル向けHTML5アニメーションエン…

進化するCSSの機能を駆使して、CSSだけでクロスワードパズルを作りました。JavaScriptは一切使っていません！ JavaScriptを使わずにCSSグリッドで動くCSSオンリーのクロスワードパズルを作成したところ、CodePenで話題になりました。執筆時点でハートマークが350、ページビューは24,000を超えました。 チュートリアルCSS Grid Gardenに触発され、グリッドレイア…

静的サイトジェネレーター「Jekyll」を使って、ブログやサイトで使い回せる動的なウィジェットを簡単に作る方法を紹介します。 静的なサイトを生成するツール「Jekyll」は、軽量ですがマニアックなツールだとWebデザイン界隈で認識されています。しかし、その印象はJekyllの一部でしかありません。できることが多く、技術者ではないユーザーやクライアントが簡単なサイトを作れる強力なツールです。 クライ…

WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。 CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します…

進化し続けるCSSの仕様の中でも使い勝手がいいのが、CSS変数。キーカラーやサイズなど、あとから修正するのが面倒な要素はCSS変数を使って工数を減らし、ストレスを軽減しましょう。 SassやLessなどのプリプロセッサーは、CSSのコードベースを、メンテナンスしやすい整った状態にするのに役立ちます。変数、mixin（ミックスイン）、loop（ループ）などCSSコーディングに動的な機能を追加すると、…

スクロールアニメーション用ライブラリー「AOS」のチュートリアルをお届けします。手軽で柔軟なライブラリーなので、クライアントから要望の多いプロモーションサイトで重宝しそうですね。 フロントエンド開発者は、ページスクロールに合わせて迫力あるアニメーションエフェクトの実装をクライアントから求められることがよくあります。求められた課題を楽にこなせるライブラリーはたくさんあります。AOS（Animate …