CSSでつくるボタンデザイン

html と css のみで作成するボタンのデザインと、コードの詳細を紹介しています。
普段 css に触れることのないプログラマーや、html と css でサイトを作ることを学び始めた方でも、コードの内容からどのようにボタンが構成されているか理解でき、またそこから css のテクニックを学び取ってもらえることを願って書かれています。

はじめの章では、css でボタンを表示するのに必要なコードを、順を追って説明していきます。html と css の基本的な書き方に加え、ちょっとした小ネタや、豆知識なども紹介しています。html でボタンを作る足掛かりに、こちらの章を参照していただければと思います。

続いての章では、作成したボタンをさらに css で凝ったデザインにするテクニックとデザインのサンプルを紹介しています。枠線、角丸、アイコン付きのボタンなど、css のみでできる簡単なデザインのアレンジから、複数の css を組み合わせるテクニックとデザインのアイディアも紹介しています。

ここで紹介されているのは css で出来る表現のほんの一部ですが、わずかでもクリエイターの学びや気づきの手助けになれば幸いです。