WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン

HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ

私たちはアプリケーションをデザインする際、誰でも直感的に使えるものにしたいと考えます。しかし「誰でも」というのは一体誰のことを指すのでしょうか？　良いデザインは、すべての年齢、どんな技術レベルの人にとっても便利なものです。一方で、真のユニバーサルデザインとは様々な身体能力を持つユーザーが利用可能なものです。これを実現するために、デザイナーとデベロッパーは黄斑変性症（眼疾患）、パーキンソン病（運動性疾患）、てんかん（神経疾患）などを考慮する必要があると言えます。 UXにおいてよく言われる「人々のニーズを考慮する」ことは、言うだけなら簡単です。多くのデザイナーはユーザーのニーズを把握するためのペルソナを利用しますが、障がいのあるユーザーを考慮に入れることは稀です。そこで、ユニバーサルデザインの出番です。ユニバーサルデザインは、年齢や能力（精神的身体的）が私たちの体験に大きな影響を与えることを再

マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali