1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本） 価格:747円 (2024/12/16 23:17時点) 感想(2件)

1. HTML5の新要素を活用する

HTML5では、従来のHTMLに加えて、さまざまな新しい要素が導入されています。これらの要素は、Webページの構造や意味をより明確にし、SEOやアクセシビリティの向上にも寄与します。以下に、いくつかの新要素を紹介します。

1.1 videoとaudio

video と audio 要素を使えば、ブラウザ上で直接動画や音声を再生できます。
例えば、以下のコードは動画を表示する方法です。

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  お使いのブラウザはvideoタグに対応していません。
</video>

1.2 canvas

canvas 要素は、動的なグラフィックスやゲーム、データビジュアライゼーションなどに利用されます。
以下は、canvasを使って簡単な図形を描く例です。

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #ccc;"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 100, 100);

1.3 detailsとsummary

details と summary 要素を使うと、折りたたみ可能なコンテンツを簡単に作成できます。
例として、以下のコードはFAQのような形式で使えます。

<details>
  <summary>質問：HTML5って何？</summary>
  HTML5は、最新のHTML仕様で、より意味のあるマークアップが可能です。
</details>

2. CSS3でインタラクティブなデザインを実現する

CSS3は、Webデザインに動きを取り入れるための強力なツールです。
ここでは、トランジション、アニメーション、グラデーション、そしてレスポンシブデザインの基本を見ていきます。

2.1 トランジションとアニメーション

トランジションを使えば、プロパティの変化をスムーズに見せることができます。アニメーションでは、複雑な動きを実現することが可能です。

/* トランジションの例 */
.button {
  background-color: #007BFF;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #0056b3;
}

/* キーフレームアニメーションの例 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.animated-box {
  width: 100px;
  height: 100px;
  background-color: #E74C3C;
  animation: slideIn 0.5s forwards;
}

2.2 グラデーションとシャドウ

CSSグラデーションやシャドウを使うと、要素に奥行きや動きを与え、視覚的に魅力的なデザインに仕上げることができます。

/* 線形グラデーションの例 */
.gradient-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #f06, #4a90e2);
}

/* ボックスシャドウの例 */
.shadow-box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

3. HTML5とCSS3を連携したインタラクティブコンテンツの実装例

ここでは、HTML5とCSS3の機能を組み合わせた実践例として、画像ギャラリーや簡単なアニメーション効果を実装する方法を紹介します。
例えば、画像ギャラリーでは、画像をクリックすると拡大表示するモーダルウィンドウを実装できます。

3.1 画像ギャラリーとモーダルウィンドウ

<div id="gallery">
  <img src="https://kamechannel.com/images/sample1.jpg" alt="サンプル画像1" class="gallery-img">
  <img src="https://kamechannel.com/images/sample2.jpg" alt="サンプル画像2" class="gallery-img">
  <img src="https://kamechannel.com/images/sample3.jpg" alt="サンプル画像3" class="gallery-img">
</div>

<div id="modal" class="modal">
  <span id="closeModal" class="close-modal">×</span>
  <img id="modalContent" class="modal-content" src="" alt="拡大画像">
</div>

/* ギャラリーのスタイル */
#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.gallery-img {
  width: 100%;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.gallery-img:hover {
  transform: scale(1.05);
}

/* モーダルウィンドウのスタイル */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}
.modal-content {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid #fff;
  border-radius: 5px;
}
.close-modal {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

// JavaScriptによるモーダル機能の実装例
document.addEventListener("DOMContentLoaded", function() {
  const modal = document.getElementById("modal");
  const modalContent = document.getElementById("modalContent");
  const closeModal = document.getElementById("closeModal");
  const galleryImages = document.querySelectorAll(".gallery-img");
  
  galleryImages.forEach(img => {
    img.addEventListener("click", function() {
      modal.style.display = "flex";
      modalContent.src = this.src;
    });
  });
  
  closeModal.addEventListener("click", function() {
    modal.style.display = "none";
  });
  
  // モーダル外クリックで閉じる
  modal.addEventListener("click", function(e) {
    if (e.target === modal) {
      modal.style.display = "none";
    }
  });
});

4. レスポンシブデザインの工夫

モバイルやタブレットなどの小さな画面でも快適に閲覧できるように、メディアクエリを使ってレイアウトを最適化します。
例えば、画像ギャラリーの列数を画面幅に合わせて調整することで、どのデバイスでもバランスの取れた表示が可能です。

@media (max-width: 600px) {
  #gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

5. まとめと今後の展望

本記事では、HTML5新要素とCSS3機能を組み合わせ、インタラクティブな画像ギャラリーとモーダルウィンドウの作成方法を詳しく解説しました。
基本のHTML構造、CSSによるグリッドレイアウト、ホバー効果、そしてJavaScriptでの動的コンテンツ生成とモーダル表示を学ぶことで、初心者から中級者へのステップアップが可能となります。
今後は、さらに応用例として、画像のスライドショー、フィルタリング、そしてレスポンシブなデザインの強化などに挑戦してみてください。

6. 参考リンク

• MDN: HTML入門
• MDN: CSS入門
• MDN: JavaScript入門
• W3Schools
• freeCodeCamp