calc() を使用した高度なレイアウト構築と JavaScript の連携

CSS の calc() は単体でも非常に便利ですが、さらに高度なレイアウト構築や
JavaScript と組み合わせることで、より動的で柔軟なウェブデザインが可能になります。
このセクションでは、次のステップとして活用できる実践的なアイデアを紹介します。

複雑なレイアウト構築への応用例

フレキシブルなグリッドシステムの構築

CSS グリッドと calc() を組み合わせることで、
動的にサイズを調整する柔軟なレイアウトを作成できます。

例: 固定カラムと可変カラムの組み合わせ

.container {
  display: grid;
  grid-template-columns: calc(200px) calc(100% - 200px);
  gap: 20px;
}

左側に固定幅200px、右側に残りの幅を動的に計算して割り当てる。

応用例: カラム間に動的なギャップを追加

.container {
  display: grid;
  grid-template-columns: repeat(3, calc(33.33% - 10px));
  gap: calc(10px + 1vw);
}

画面サイズに応じてギャップやカラムの幅が変わるグリッドを構築可能。

中央揃えとスペースの調整

親要素の中央に要素を配置しつつ、残りのスペースを動的に配分するレイアウトも可能です。

例: コンテンツの中央揃え

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: calc(50% - 20px);
  padding: calc(10px + 1vw);
}

ビューポート全体の中央に配置し、サイズとパディングを柔軟に調整。

calc() と JavaScript の組み合わせ

CSS の動的な計算をさらにカスタマイズするために、JavaScript を使ってリアルタイムで値を更新できます。

ウィンドウサイズに応じた計算

calc() を使いつつ、JavaScript でウィンドウサイズを取得してスタイルを動的に変更します。

例: 動的に高さを調整

<div class="dynamic-box"></div>

.dynamic-box {
  background-color: #f0f0f0;
  width: 100%;
  height: calc(100vh - 50px); /* 初期値 */
}

JavaScript の追加

function adjustHeight() {
  const headerHeight = 50;
  const windowHeight = window.innerHeight;
  const box = document.querySelector('.dynamic-box');
  box.style.height = `calc(${windowHeight}px - ${headerHeight}px)`;
}

window.addEventListener('resize', adjustHeight);
adjustHeight();

ウィンドウサイズが変更されるたびに高さを再計算し、動的に反映。

ユーザー入力に基づく動的調整

ユーザーが入力した値を calc() に組み込んで、動的なデザインを実現します。

例: スライダーでパディングを調整

<div class="box">Dynamic Box</div>
<input type="range" id="padding-slider" min="0" max="50" value="10">

.box {
  background-color: #ddd;
  width: 200px;
  height: 200px;
  padding: 10px;
  transition: padding 0.3s;
}

JavaScript の追加

const slider = document.getElementById('padding-slider');
const box = document.querySelector('.box');

slider.addEventListener('input', (event) => {
  const paddingValue = event.target.value;
  box.style.padding = `calc(${paddingValue}px)`;
});

スライダーを操作することで、ボックスのパディングが動的に変更。

ユニークなアイデア: 動的な背景効果

calc() と CSS カスタムプロパティを組み合わせて、
JavaScript から背景のアニメーションや動的な効果を追加できます。

例: 動的背景グラデーション

<div class="gradient-box"></div>

:root {
  --start: 0%;
  --end: 100%;
}

.gradient-box {
  width: 100%;
  height: 300px;
  background: linear-gradient(90deg, #ff7e5f var(--start), #feb47b var(--end));
  transition: all 0.3s;
}

JavaScript の追加

let start = 0;
let end = 100;

function updateGradient() {
  start = (start + 1) % 100;
  end = (end - 1) % 100;
  document.documentElement.style.setProperty('--start', `${start}%`);
  document.documentElement.style.setProperty('--end', `${end}%`);
}

setInterval(updateGradient, 50);

グラデーションの開始点と終了点が動的に変化する効果を実現。

まとめ

CSS の calc() は、単体でも強力ですが、JavaScript と連携することでデザインの幅が無限に広がります。
この記事で紹介した例を参考に、次のステップとして動的なデザインに挑戦してみてください！

Favorite