HTML - ウェブスライドデスク

ウェブスライドデックの導入

こんにちは、ウェブ開発者志望の方々！今日は、HTMLの世界に足を踏み入れ、自分だけのウェブスライドデックを作成する興奮人心的な旅に出かけます。近所の親切なコンピュータ教師として、私はこのプロセスをガイドするのを楽しみにしています。コードを一行も書いたことがない方でも大丈夫です。シートベルトを締めて、一緒に飛び込んでみましょう！

HTML - Web slide Desk

ウェブスライドデックとは？

コーディングを始める前に、私たちが作成するものを理解しましょう。ウェブスライドデックは、ウェブブラウザで動作するプレゼンテーションです。PowerPointのようですが、もっとカッコよくて、HTMLを使ってから scratch（ scratch は " zero " の意味）で作成しています！これは、インターネットにアクセスできるどこでもいつでもアクセスできるという利点があります。

HTMLドキュメントの基本構造

まずは、私たちのHTMLドキュメントの基本構造から始めましょう。初めて見ると少し威圧的かもしれませんが、ステップバイステップで分解します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私の素晴らしいウェブスライドデック</title>
<style>
/* 後でCSSをここに追加します */
</style>
</head>
<body>
<!-- スライドはここに配置されます -->
</body>
</html>

これを分解すると：

<!DOCTYPE html> はブラウザにこれがHTML5ドキュメントであることを伝えます。
<html lang="ja"> は私たちのHTMLページのルート要素で、 "ja" は日本語を指定します。
<head> セクションにはドキュメントに関するメタ情報が含まれています。
<meta charset="UTF-8"> はドキュメントの文字エンコーディングを指定します。
<meta name="viewport"...> はモバイルデバイスでの適切なレンダリングを確保します。
<title> はウェブページのタイトルを設定します。
<style> タグは後でCSSを追加する場所です。
<body> はスライドデックの可視コンテンツが配置されます。

最初のスライドを作成する

それでは、最初のスライドを作成しましょう。各スライドを定義するために <section> タグを使用します。

<body>
<div class="slideshow-container">
<section class="slide">
<h1>私のウェブスライドデックへようこそ！</h1>
<p>作成者：[あなたの名前]</p>
</section>
</div>
</body>

ここでは：

<div> にクラス "slideshow-container" を追加して、すべてのスライドを保持します。
<section> にクラス "slide" を追加して、最初のスライドを作成します。
スライドに <h1> と <p> を追加します。

もっとスライドを追加する

デックにいくつかのスライドを追加しましょう：

<div class="slideshow-container">
<section class="slide">
<h1>私のウェブスライドデックへようこそ！</h1>
<p>作成者：[あなたの名前]</p>
</section>

<section class="slide">
<h2>カバーする内容</h2>
<ul>
<li>HTMLの基本</li>
<li>CSSのスタイル</li>
<li>シンプルなJavaScript</li>
</ul>
</section>

<section class="slide">
<h2>ありがとうございます！</h2>
<p>質問はありますか？</p>
</section>
</div>

ここで2つのスライドを追加し、異なるコンテンツ構造を使用しています。2番目のスライドは無秩序リスト <ul> を使用してバULLETポイントを表示しています。

スライドにCSSを適用する

それでは、スライドに少しスタイルを追加しましょう。これを <head> セクションの <style> タグに挿入します：

<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.slideshow-container {
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
}
.slide:nth-child(1) { background-color: #f4f4f4; }
.slide:nth-child(2) { background-color: #e8e8e8; }
.slide:nth-child(3) { background-color: #dcdcdc; }
</style>

このCSSを分解すると：

body と html は全高さを設定し、デフォルトのマージンを削除します。
.slideshow-container はflexboxを使用し、スムーズなスライディングのための scroll-snap-type を設定します。
各 .slide は全幅と全高さを設定し、コンテンツを中央に配置します。
scroll-snap-align を使用してスライドがスナップするようにします。
各スライドに異なる背景色を設定します。

ナビゲーションボタンを追加する

スライドデックをよりユーザーフレンドリーにするために、ナビゲーションボタンを追加しましょう：

<body>
<div class="slideshow-container">
<!-- ... スライドここに ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ 前へ</button>
<button class="next" onclick="changeSlide(1)">次へ ❯</button>

<script>
function changeSlide(n) {
const slides = document.querySelectorAll('.slide');
const currentSlide = document.querySelector('.slide:target') || slides[0];
let index = Array.from(slides).indexOf(currentSlide);
index = (index + n + slides.length) % slides.length;
location.hash = '#' + slides[index].id;
}
</script>
</body>

以下を追加しました：

"前へ" と "次へ" ボタンに onclick イベントを設定。
changeSlide ファンクションをJavaScriptでナビゲーションを処理します。

ボタンのスタイルを追加します：

<style>
/* ... 以前のスタイル ... */
.prev, .next {
position: fixed;
top: 50%;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

最後の仕上げ

ナビゲーションがスムーズに動作するように、スライドにIDを追加します：

<section id="slide1" class="slide">
<h1>私のウェブスライドデックへようこそ！</h1>
<p>作成者：[あなたの名前]</p>
</section>

<section id="slide2" class="slide">
<h2>カバーする内容</h2>
<ul>
<li>HTMLの基本</li>
<li>CSSのスタイル</li>
<li>シンプルなJavaScript</li>
</ul>
</section>

<section id="slide3" class="slide">
<h2>ありがとうございます！</h2>
<p>質問はありますか？</p>
</section>

結論

おめでとうございます！あなたは刚刚、HTML、CSS、そして少しのJavaScriptを使って自分だけのウェブスライドデックを作成しました。これはただの始まりです。異なるスタイルを試してみたり、もっとインタラクティブな要素を追加したり、アニメーションを追加したりすることができます。

ウェブ開発は練習と創造力が全てです。コードを少しでもいじってみて、何が起きるかを確認してください。もしかしたら素晴らしい発見をするかもしれません！

未来のウェブ魔術師たち、ハッピーコーディング！



この翻訳は、原文の意味、トーン、ニュアンスを保ちつつ、日本語の文法と文体に合わせて行っています。

Credits: Image by storyset