Nagashima Laboratory

CSSボックスの演習

ボックスモデルを利用して、ボタンやカード型のインタフェースを作ります。cssについては、これまでに触れたプロパティをもとに作成してみてください。

【準備】

  1. css_box フォルダを作成します
  2. index.html を作成し、フォルダに保存します。HTMLには、基本のコードを入力しておきます（tab + ! で入力）
  3. style.css を作成し、フォルダに保存します。
  4. index.htmlの<head>要素内に下記を追加し、CSSをリンクします。（</head>の直前に挿入）
<link rel="stylesheet" href="style.css">

▼index.html（body要素内に記述）

<h1>CSSボックス演習</h1>
<h2>ボタンバリエーション</h2>

  <a href="#" class="btn-radius">角丸ボタン</a>
  <a href="#" class="btn-outline">枠線のみボタン</a>
  <a href="#" class="btn-hover">色が変わるボタン</a>

<h2>ボックスバリエーション（プロフィールカード）</h2>
<div class="profile-card">
    <div class="profile-image">PHOTO</div>
    <div class="profile-content">
        <h3>名前</h3>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
</div>

マウスを載せると変化する仕組み（:hover）

セレクタに :hover を指定すると、マウスが載ったときの振る舞いを制御できます。:hover のような設定を、擬似クラスといいます。色が変わるボタンを作るときには、下記のように記述することで、マウスを載せたときの変化を設定できます。

.btn-hover {
  /* 任意のプロパティ設定 */
}

.btn-hover:hover {
  background-color: #ffc107; /* マウスを乗せた時の色 */
  color: #333;
}

なお、スマートフォンをはじめとするタッチスクリーンでは、:hover はタップ時に反応することになります。:hover 時のみに表示されるコンテンツは避け、タップされたことをユーザーに伝えるような補助的な使い方が望まれます。

アニメーション効果をつける（transition）

transtionプロパティを使用することで、:hover時の振る舞いをなめらかに変化させます。

.btn-hover {
  /* 任意のプロパティ設定 */
  transition: background-color 0.3s; /* 色の変化を滑らかにする */
}

※下記は作例です。制作するボタンの色・形状などは自由です

参考

() Category: 資料 Tags: