はじめに

本書では、html と css のみで作成するボタンのデザインと、コードの詳細を紹介しています。

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


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


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


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

目次

html と css で作るボタン

STEP 1 <a> タグでボタンを作成する
  • href 属性について
  • class について
STEP 2 css で文字のデザインを変更する
  • class 名を設定してデザインを変更する
  • 文字の色を変更する
  • 色について
  • 文字の下線を削除する
STEP 3 ボタンのデザインを作成する
  • 文字の太さを変更する
  • 背景色を変更する
STEP 4 ボタンの大きさを調整する
  • ボタン内の余白を変更する
  • 余白の値の順序について
  • ボタンサイズの可変について
STEP 5 マウスオーバー時のデザインを設定する
  • ボタンを透過する
  • マウスオーバー時の変化について
  • 変化するまでの時間を設定する

ボタンのアレンジデザイン

枠線のアレンジ
  • 太線
  • 破線
  • 点線
  • 二重線
角丸のアレンジ
  • 角丸の大きさを個別に指定する
  • 丸いデザイン
アイコンをつけたデザイン
  • 矢印アイコン
  • アイコンの位置指定について
  • バツアイコン

css を応用したデザインのボタン

角丸とボーダーのアレンジ
  • 立体的
  • ステッチ
擬似要素を使ったラインテクニック
  • 枠線の交差
  • 淵の丸い線
画像を使わない背景のアレンジ
  • 背景グラデーション
  • 背景ストライプ

あとがき

試し読みはここまでです。
この続きは、製品版でお楽しみください。