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
190
REALITY コマンド作成チュートリアル
ハムチレクチャー - HTML 初⼼者向け解説資料
にしうり らく
April 27, 2025
Tweet
Share
More Decks by にしうり らく
See All by にしうり らく
えちゃはむはらぺこぱじゃまぱーてぃ
nishiuriraku
0
26
Other Decks in Programming
See All in Programming
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
430
Software Architecture
hschwentner
6
2.3k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
490
Swift Concurrency - 状態監視の罠
objectiveaudio
2
510
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
560
明日から始めるリファクタリング
ryounasso
0
130
Catch Up: Go Style Guide Update
andpad
0
220
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
470
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
Devoxx BE - Local Development in the AI Era
kdubois
0
130
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Practical Orchestrator
shlominoach
190
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The Cost Of JavaScript in 2023
addyosmani
54
9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Embracing the Ebb and Flow
colly
88
4.8k
Side Projects
sachag
455
43k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Agile that works and the tools we love
rasmusluckow
331
21k
Scaling GitHub
holman
463
140k
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!