Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
REALITY コマンド作成チュートリアル
Search
にしうり らく
April 27, 2025
Programming
0
140
REALITY コマンド作成チュートリアル
ハムチレクチャー - HTML 初⼼者向け解説資料
にしうり らく
April 27, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
ふつうの技術スタックでアート作品を作ってみる
akira888
1
890
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
130
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
190
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
520
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
410
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Making Projects Easy
brettharned
116
6.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Six Lessons from altMBA
skipperchong
28
3.9k
Site-Speed That Sticks
csswizardry
10
690
How to Ace a Technical Interview
jacobian
278
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Documentation Writing (for coders)
carmenintech
72
4.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
ハムチレクチャー - HTML 初心者向け解説資料 REALITY コマンド作成チュートリアル
0. うぇぶぺーじとは HTML (えいちてぃーえむえる) CSS (しーえすえす) JavaScript (じゃばすくりぷと) の 3
つであーだこーだするやつ
1-1. HTML ウェブページの土台、骨組みを作る言語だぴょん 家で言ったら柱とか壁みたいなもん。 <html lang="ja"> <head> <!-- へっど! -->
</head> <body> <!-- ぼでぃー! --> </body> </html> <html> : 「ここからここまでがウェブページだよ!」って宣言する親玉 <head> : ページの設定とか、裏方さん。表には出ないけど超重要 <body> : ユーザーが実際に見る画面の中身!主役級!
1-2. CSS ! CSS (Cascading Style Sheets) はウェブページの見た目を担当するぴょん HTML が骨組みなら、CSS
は服やメイクのようなもの。文字の色、大きさ、背 景、配置などを指定できる h1 { /* セレクタ: どの要素にスタイルを適用するか */ color: blue; /* プロパティ: 何を */ } /* classセレクタ: 特定のクラスを持つ要素 */ .important-text { font-weight: bold; } <head> の中に書くか <style> にかくか、別の .css ファイルを作るのが普通
1-2. JavaScript ウェブページに「動き」を与える魔法の呪文、それが JavaScript だぴょん! HTML ( 骨) と CSS
( 見た目) だけじゃできない、あんなことやこんなことを実現! 例えば… ボタンを押したら「こんにちは!」って挨拶させたり 画像がシュッと出てきたり、クルクル回ったり ユーザーが何か入力したら、それに合わせて表示を変えたり <script> // JavaScriptのこーーーーど function greetMe() { alert('やあ!JavaScriptの世界へようこそ! '); } greetMe(); // この呪文を唱えると... ポップアップが出る! </script>
2. セクション 1: Hello Hamuchi <section> <h2 class="...">No.1 Hello Hamuchi</h2>
<button id="hamu-button-01" class="...">出す</button> <script> 問題! </script> </section> 説明: ボタンをクリックでコンソール(F12 で出すでばっぐつーる)にメッセージ表示 document.getElementById('hamu-button-01') : ID で要素をとる addEventListener('click', ...) : ボタンがクリックされるのを待ち構える
3-2. Hello Hamuchi 問題 <script> function onClickHamuchi01() { // ここの処理が問題!
} // ボタンを取ってきて const hamuButton01 = document.getElementById('hamu-button-01'); // ボタンがクリックされたら onClickHamuchi01 を発動するように設定! hamuButton01.addEventListener('click', onClickHamuchi01); </script> ミッション: 上のコードのコメント部分 ( // ここに... ) に、コンソールにメッセージを出す JavaScript のコードを書こう! 正しく書ければ、ボタンを押すと開発者ツールにメッセージが出るはず!
3-1. セクション 2: 簡単な計算 <section> <h2 class="...">No.2 簡単な計算</h2> <button id="hamu-button-02"
class="...">計算開始</button> <script> 問題! </script> </section> 説明: コンピューター得意の計算をやらせてみよう! 足し算 (+), 引き算 (-), 掛け算 (*), 割り算 (/) を使ってみるよ。 ボタンを押したら、 「8686 × 8686 」の答えをコンソールに出してみよう! 暗算禁 止!
3-2. 簡単な計算 問題 <script> function onClickHamuchi02() { // ここの処理が問題! }
// ボタンを探してきて... const hamuButton02 = document.getElementById('hamu-button-02'); // クリックされたら計算を発動! hamuButton02.addEventListener('click', onClickHamuchi02); </script> ミッション: 上のコードのコメント部分 ( // ここに... ) に、計算してコンソールに表示する コードを書こう! 掛け算は * を使う
4-1. セクション 3: HTML を操作する <section> <h2 class="...">No.3 HTMLを操作する</h2> <img
id="image" src="/600.png" alt="ハムチ" class="..." /> <button id="hamu-button-03" class="...">消える</button> <script> 問題! </script> </section> ボタンクリックで画像の表示/ 非表示を切り替え isVisible 変数で状態管理 ボタンテキストも状態に応じて変化 CSS アニメーションでスケールイン/ アウト
4-2. HTML を操作する 問題 <script> let isVisible = true; //
今、画像が見えてる? function onClickHamuchi03() { const image = document.getElementById('image'); // 画像を探す const button = document.getElementById('hamu-button-03'); // ボタンを探す if (isVisible) { image.className = 'w-[300px] animate-scale-out-center'; // アニメーション button.innerHTML = // 問題1!; isVisible = // 問題2!; } else { image.className = 'w-[300px] animate-scale-in-center'; // アニメーション button.innerHTML = // 問題3!; isVisible = // 問題4!; } }; const hamuButton03 = document.getElementById('hamu-button-03'); hamuButton03.addEventListener('click', onClickHamuchi03); </script>
5-1. セクション 4: コマンドを実装する <section> <h2 class="...">No.4 コマンドを実装する</h2> <div id="janken-result">結果:<span
id="janken-result-text"></span></div> <input id="input-command" placeholder="..." /> <button id="hamu-button-04" class="...">実行する</button> <script> 問題! </script> </section> ミッション: テキスト入力とボタンでコマンド実行 /janken コマンドでランダムなじゃんけん結果を表示 未知のコマンドはエラー表示
5-2. コマンドを実装する 問題 <script> const onClickHamuchi04 = () => {
const input = document.getElementById('input-command'); const button = document.getElementById('hamu-button-04'); const command = input.value; const result = document.getElementById('janken-result-text'); const random = Math.floor(Math.random() * 3); const janken = ['問題1!', '問題2!', '問題3!']; if (条件!問題4) { result.innerHTML = // 難問 ; result.style.color = 'initial'; } else { result.innerHTML = 'そんなコマンドないよ! (`/janken` って入れてみて)'; result.style.color = 'red'; } }; // ボタンを探してきて... const hamuButton04 = document.getElementById('hamu-button-04'); // クリックされたら、コマンド実行の魔法を発動! hamuButton04.addEventListener('click', onClickHamuchi04); </script>
まとめ このスライドで、ウェブページの基本がなんとなくわかったかな? HTML で骨組みを作り、CSS で飾り付け、JavaScript で動きをつける! この 3 つ がキホン!
各セクションの問題をクリアすれば、君も立派なウェブ魔法使い見習いだ! どんどん試して、壊して、学んでいこう! Let's Enjoy Hacking!