マウスホバーで広がる！インタラクティブなリンクレイアウトの作り方

CSS、JavaScript

シンプルな2カラム構成でも、マウスホバーを使えば動きのある魅力的なUIに変身します。今回は、ホバー時に片方の要素が拡大・もう片方が縮小するレイアウトをCSSだけで実装する方法をご紹介します。

  • マウスを左右のリンクに当てると、それぞれが拡大して目立つように変化します。
  • 背景色や角丸、ドロップシャドウも加わって、視覚的に楽しいインタラクションになります。

サンプル

マウスをボタンに乗せると、そのボタンが大きくなり、もう一方は少し小さくなります。さらに、ホバー時は背景が黒、文字が白、角丸やドロップシャドウもついて、シンプルなのに印象的なUIになります！

See the Pen Hover-based Flexbox Resizing_A by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTML&CSS構造

HTML構造

<div class="container">
  <a href="https://example.com" class="contents">contentsA</a>
  <a href="https://example.com" class="contents">contentsB</a>
</div>

CSSスタイル

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  width: 80vw;
  height: 40vh;
  overflow: visible;
}

.contents {
  width: 48%;
  height: 100%;
  margin: 0 1%;
  background-color: #f0f0f0;
  text-decoration: none;
  color: #333;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
  border-radius: 0px;
}

.contents:hover {
  background-color: #000;
  color: #fff;
  border-radius: 20px;
  filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.3));
}

.container:hover .contents:first-child:hover {
  width: 58%;
}
.container:hover .contents:first-child:hover ~ .contents {
  width: 38%;
}

.container:hover .contents:last-child:hover {
  width: 58%;
}
.container:hover .contents:last-child:hover ~ .contents {
  width: 38%;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    width: 90vw;
    height: auto;
  }

  .contents {
    width: 100% !important;
    height: 25vh;
    margin: 10px 0;
    font-size: 1.5rem;
    transition: all 0.3s ease;
  }

  .contents:hover {
    background-color: #000;
    color: #fff;
    border-radius: 20px;
    filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.3));
    height: 35vh;
    width: 100% !important;
    font-size: 1.5rem;
  }

  .container:hover .contents:not(:hover) {
    height: 25vh;
    width: 100% !important;
  }
}

フルスクリーンレイアウトで大胆に見せる

このホバー拡張エフェクトは、画面幅いっぱいを使ったレイアウトでも活用できます。例えば、width: 100vw に設定すれば、左右2分割のインタラクティブなリンクバナーとして活躍します。

こんなときに使える！

  • サイトのトップにあるヒーローバナー的なリンクエリア
  • ポートフォリオサイトのカテゴリ紹介
  • ランディングページのセクション導線

コード例

HTML構造

<div class="container">
  <a href="https://example.com" class="contents">contentsA</a>
  <a href="https://example.com" class="contents">contentsB</a>
</div>

CSSスタイル

.container {
  display: flex;
  width: 100vw;
  height: 40vh;
  overflow: visible;
}

.contents {
  width: 50%;
  height: 100%;
  margin: 0;
  background-color: #f0f0f0;
  text-decoration: none;
  color: #333;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
  border-radius: 0px;
}

.contents:hover {
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.3));
}

.container:hover .contents:first-child:hover {
  width: 60%;
}
.container:hover .contents:first-child:hover ~ .contents {
  width: 40%;
}

.container:hover .contents:last-child:hover {
  width: 60%;
}
.container:hover .contents:last-child:hover ~ .contents {
  width: 40%;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    width: 100vw;
    height: auto;
  }

  .contents {
    width: 100% !important;
    height: 25vh;
    margin: 0;
    font-size: 1.5rem;
    transition: all 0.3s ease;
  }

  .contents:hover {
    background-color: #000;
    color: #fff;
    filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.3));
    height: 35vh;
    width: 100% !important;
    font-size: 1.5rem;
  }

  .container:hover .contents:not(:hover) {
    height: 25vh;
    width: 100% !important;
  }
}
  • スクロールしなくても視認性が高いインパクトのあるデザイン
  • 視線誘導のために、拡大されるリンクが明確
  • モバイルでも崩れず、タップ操作に適した切り替え

サンプル

幅いっぱいに広がっており、マウスをボタンに乗せると、そのボタンが大きくなり、もう一方は少し小さくなります。

See the Pen Hover-based Flexbox Resizing_B by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

その他

ボックスの数を増やすカスタマイズ

現在は2つのボックスですが、3カラムレイアウトをスマホ対応（レスポンシブ）にする場合、メディアクエリを使って「横並び→縦並び」に切り替えるのが一般的です。
PCではflex: 1;やflex: 2;などで横並び・拡大縮小を実現し、スマホではflex-direction: column;にすることで、各カラムが縦に並びます。

HTML

<div class="container">
  <a href="#" class="contents">ダミーA</a>
  <a href="#" class="contents">ダミーB</a>
  <a href="#" class="contents">ダミーC</a>
</div>

CSS

/* ===========================
   PC表示（デスクトップ）用
   =========================== */
.container {
  display: flex;        /* 子要素を横並びに */
  width: 100vw;         /* 画面幅いっぱいに広げる */
  height: 40vh;         /* 高さは画面の40% */
}

.contents {
  flex: 1;              /* 3つのカラムを均等幅に */
  display: flex;        /* 中のテキストも中央寄せにするためflexを指定 */
  align-items: center;  /* 垂直方向中央寄せ */
  justify-content: center; /* 水平方向中央寄せ */
  background: #f0f0f0;  /* 背景色（薄いグレー） */
  color: #333;          /* 文字色（濃いグレー） */
  font-size: 1.5rem;    /* 文字サイズ */
  text-decoration: none;/* 下線を消す（リンクの場合） */
  border: 1px solid #ccc; /* 枠線（薄いグレー） */
  /* 幅・色の変化をなめらかにアニメーション */
  transition: flex 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.contents:hover {
  flex: 2;              /* ホバーしたカラムだけ幅を2倍に拡大 */
  background: #000;     /* 背景を黒に */
  color: #fff;          /* 文字を白に */
  /* ふんわり浮き上がる影を追加 */
  filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.3));
}

/* ===========================
   スマホ表示（レスポンシブ）用
   =========================== */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* カラムを縦並びに切り替え */
    height: auto;           /* 高さを自動調整（内容に合わせる） */
  }

  .contents {
    flex: none;           /* flexの自動伸縮を解除。heightが効くようにする */
    width: 100%;          /* 横幅いっぱいに */
    height: 25vh;         /* 1つあたりの高さを画面の25%に */
    font-size: 1.2rem;    /* 文字サイズを少し小さく */
    margin: 0;            /* マージンをリセット */
    transition: height 0.3s ease; /* 高さの変化だけアニメーション */
  }

  .contents:hover {
    flex: none;           /* 念のためflex解除（なくてもOKだが明示的に） */
    height: 35vh;         /* ホバーしたとき高さを拡大 */
  }
}

PC表示

  • .container { display: flex; }で横並び。
  • .contents { flex: 1; }で均等割り、hover時はflex: 2;で拡大。

スマホ表示

  • @media (max-width: 768px)で.container { flex-direction: column; }に切り替え。
  • 各.contentsはwidth: 100%で縦並び、hover時は高さを大きくするなどの演出が可能
  • flex: none;を指定しないと、heightが効かずホバー時の高さ変化が反映されません。

このテクニックは、4カラムやそれ以上にも応用可能です。
.contentsにflex: 1;を指定し、ホバー時だけflex: 2;にするだけで、どのボックスも「ホバー時だけ拡大」が実現できますので

サンプル

See the Pen Hover-based Flexbox Resizing_C by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

アニメーションのカスタマイズ

transition プロパティを活用して、アニメーションのタイミングやイージングを調整する方法を紹介すると、より洗練された動きを実現できます。

.contents {
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

まとめ

CSSだけでも、ここまでインタラクティブで印象的なレイアウトが作れます。動きのあるUIはユーザー体験を向上させ、リンクのクリック率もアップするかもしれません。用途に合わせてカスタマイズして、あなたのサイトに取り入れてみてください！

タイトルとURLをコピーしました