IE11でも動くCSSテンプレート：レガシー対応が必要な現場のために

投稿日 2025年9月3日
著者 HITMARKET
カテゴリーおすすめ
カテゴリーホームページ

現場によっては「IE11対応が必須」という案件がまだ残っていることもあります。
たとえば社内システム、行政向けサービス、古いイントラサイトなどでは、モダンなCSSが通用しない環境も少なくありません。

この記事では、IE11でも安定して動作するCSSテンプレートを紹介しつつ、気をつけるべきポイントと設計のコツもまとめました。

🧱 なぜ今さらIE11対応？

IE11のサポートはすでにMicrosoftによって終了していますが、以下のような理由で対応を求められることがあります。

古いシステムがIE依存で作られている
特定の業界・業務アプリでIE以外が使用禁止
顧客が未だにIEを使っている

そうした背景のもと、最低限の表示・操作ができるCSS設計が必要になるケースもあります。

🎨 IE11対応CSSテンプレートの特徴

以下は、IE11に対応させるためのテンプレート設計における特徴です。

✅ 使用する技術

レイアウトは float と inline-block
レスポンシブ設計はメディアクエリで調整
box-sizing: border-box で整える
position: relative や absolute のみ使用
CSS変数、flexbox、grid、filter、object-fit などは未使用

❌ 避ける技術

display: flex / grid
position: sticky
var(--color)
object-fit, clip-path
scroll-behavior: smooth

🖼 テンプレート例（基本構成）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IE11対応テンプレート</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header class="site-header">IE11対応レイアウト</header>

  <div class="container">
    <aside class="sidebar">サイドバー</aside>
    <main class="content">コンテンツエリア</main>
  </div>

  <footer class="site-footer">&copy; 2025 Sample Site</footer>

</body>
</html>

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f5f5;
  color: #333;
}

.site-header,
.site-footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

.container {
  overflow: hidden;
  padding: 10px;
  background: #fff;
}

.sidebar {
  float: left;
  width: 30%;
  background: #ddd;
  padding: 10px;
}

.content {
  float: left;
  width: 70%;
  padding: 10px;
}