はじめに
この記事を読めば、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>
まとめ
これらのサンプルコードを参考に、自分のプロジェクトに合ったバナーを作成してみてください。
HTMLとCSSを組み合わせることで、さまざまなデザインのバナーが実現できます。