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
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
140
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
550
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
760
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
290
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
ニーリーにおけるプロダクトエンジニア
nealle
0
800
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Code Review Best Practice
trishagee
69
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Music & Morning Musume
bryan
46
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
YesSQL, Process and Tooling at Scale
rocio
173
14k
Into the Great Unknown - MozCon
thekraken
40
1.9k
RailsConf 2023
tenderlove
30
1.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The World Runs on Bad Software
bkeepers
PRO
69
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!