HTMLバナー作成を7選解説！初心者でも超簡単！

はじめに
●HTMLバナーの基本構造
- ○HTML
- ○CSS
●バナー作成方法とサンプルコード
●応用例とサンプルコード
まとめ

はじめに

この記事を読めば、HTMLバナーの作成から応用例、カスタマイズ方法まで理解し、実際に作成できるようになります。

●HTMLバナーの基本構造

HTMLバナーは、HTMLとCSSを組み合わせて作成されます。

まずはそれぞれの要素について簡単に説明します。

○HTML

HTML（HyperText Markup Language）は、ウェブページの構造や内容を記述するためのマークアップ言語です。

タグを使って要素を定義し、ウェブブラウザがその情報を解釈して表示します。

○CSS

CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトを制御するためのスタイルシート言語です。

HTML要素に対してスタイルを適用し、見た目を整えます。

●バナー作成方法とサンプルコード

下記では、バナーの作成方法とそれぞれのサンプルコードを説明します。

○テキストバナー

テキストバナーは、文字だけで構成されたシンプルなバナーです。

CSSでスタイルを調整することで、目立つデザインにできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .text-banner {
      background-color: #ff9800;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="text-banner">HTMLバナー作成完全ガイド</div>
</body>
</html>

○画像バナー

画像バナーは、画像を使用したバナーです。

HTMLで<img>タグを使用して画像を表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div>
    <img src="banner-image.jpg" alt="HTMLバナー作成完全ガイド">
  </div>
</body>
</html>

○リンク付きバナー

リンク付きバナーは、クリックすると特定のURLに遷移するバナーです。

<a>タグを使ってリンクを設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div>
    <a href="https://example.com">
      <img src="banner-image.jpg" alt="HTMLバナー作成完全ガイド">
    </a>
  </div>
</body>
</html>

○レスポンシブバナー

レスポンシブバナーは、画面サイズに応じて自動的にサイズが変わるバナーです。

CSSでwidthやheightをパーセントで指定することで実現できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .responsive-banner img {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="responsive-banner">
    <img src="banner-image.jpg" alt="HTMLバナー作成完全ガイド">
  </div>
</body>
</html>

●応用例とサンプルコード

下記では、バナーの応用例とそれぞれのサンプルコードを説明します。

○スライドショー

スライドショーは、複数の画像が順番に切り替わるバナーです。

JavaScriptを使って画像の切り替えを制御します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .slideshow {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .slideshow img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s;
    }
    .slideshow img.active {
      opacity: 1;
    }
  </style>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const images = document.querySelectorAll('.slideshow img');
      let current = 0;

      function changeImage() {
        images[current].classList.remove('active');
        current = (current + 1) % images.length;
        images[current].classList.add('active');
      }

      setInterval(changeImage, 3000);
    });
  </script>
</head>
<body>
  <div class="slideshow">
    <img src="image1.jpg" alt="画像1" class="active">
    <img src="image2.jpg" alt="画像2">
    <img src="image3.jpg" alt="画像3">
  </div>
</body>
</html>

○カルーセル

カルーセルは、複数の画像が横に並んでスクロールするバナーです。

CSSで横並びにした画像をoverflow: hiddenで隠し、JavaScriptでスクロールさせます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .carousel {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .carousel-inner {
      display: flex;
      width: 300%;
      height: 100%;
      transition: transform 1s;
    }
    .carousel-inner img {
      width: 33.33%;
      height: 100%;
      object-fit: cover;
    }
  </style>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const carouselInner = document.querySelector('.carousel-inner');
      let current = 0;

      function scrollCarousel() {
        current = (current + 1) % 3;
        carouselInner.style.transform = `translateX(-${current * 33.33}%)`;
      }

      setInterval(scrollCarousel, 3000);
    });
  </script>
</head>
<body>
  <div class="carousel">
    <div class="carousel-inner">
      <img src="image1.jpg" alt="画像1">
      <img src="image2.jpg" alt="画像2">
      <img src="image3.jpg" alt="画像3">
    </div>
  </div>
</body>
</html>

○動画バナー

動画バナーは、動画を背景にしたバナーです。

<video>タグを使って動画を再生し、その上にテキストやボタンを重ねます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .video-banner {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .video-banner video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .video-banner-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="video-banner">
    <video src="sample-video.mp4" autoplay loop muted></video>
    <div class="video-banner-text">HTMLバナー作成完全ガイド</div>
  </div>
</body>
</html>