1 何ができるのか?
JavaScript では何ができるのでしょうか?
HTML と CSS の組み合わせで充分なのでは?
2 できること
ポップアップウインドウの表示
あの「ウザい」やつですね。
入力フォームの入力内容の確認
これは有用かも。
ブラウザの拡張機能
あればいいけど。
マウスをのせたときアニメーションを表示
まあ楽しいんでしょうが、あまり実利的ではないか。
クリックすることで
文字を変更したり、文字の大きさや色を変えることができる。
要は閲覧者の操作によってホームページに表示する内容が変わるこということですね。
リアルタイムで動くグラフ
これは面白そうですね。表現の幅が広がりそうです。
Webアプリの作成
HTML と CSS と JavaScript を組み合わせれば可能だそうです。
ただし、一般的にはLAMPといって、Linux、Apache、MySQL、PHPなどが必要なようです。
最終的にはこの領域を目指したいですね。
3 環境構築
VS Code のインストール
開発用の環境です。
当分の間、こちらを使っていくのがいいと思います。
4 簡単な HTML の入力
簡単な HTML ファイルを作ってみる
簡単なものといっても、ある程度のボリュームがあります。
HTML(コード入力)
<!DOCTYPE html> <html> <head> <title>サンプル</title> <meta charset="UTF-8"> </head> <body> <h1>入門</h1> <p>① まずは HTML の基本。<br>② JavaScript はその次。</p> <p>③ css も知っているといい。</p> </body> </html>
ブラウザ(実行結果)
入門
① まずは HTML の基本。
② JavaScript はその次。
③ css も知っているといい。
<h1> は見出しなどに用いるタグで、文字が大きくなりますね。ほかに <h2> ~ <h6> まであります。
<p> は普通の文字ですが <br> を入れるとそこで改行されます。実行結果では、①と②は別の行になっていますね。
そして、<p> タグを別々にするとこれも別の行になりますね。① ② と ③ とは別の行になっています。
見出しタグを試してみる
hタグを使ってみましょう。
HTML(コード入力)
<!DOCTYPE html> <html> <head> <title>サンプル</title> <style> h1 {font-size:70px;} h2 {font-size:60px;} h3 {font-size:50px;} h4 {font-size:40px;} h5 {font-size:30px;} h6 {font-size:20px;} </style> <meta charset="UTF-8"> </head> <body> <h1>H1H1H1</h1> <h2>H2H2H2</h2> <h3>H3H3H3</h3> <h4>H4H4H4</h4> <h5>H5H5H5</h5> <h6>H6H6H6</h6> <p>PPPPPP</p> </body> </html>
ブラウザ(実行結果)
H1H1H1
H2H2H2
H3H3H3
H4H4H4
H5H5H5
H6H6H6
PPPPPP
デフォルトの設定を使うのは面白くないので、<head> の <style> で定義してみました。
ピクセル単位でも自由に指定できます。まあ普通は CSS で定義するんでしょうけど。
文字の色なども定義できるので、自分好みで できるのがいいところですね。
5 次回
さて、次回からはいよいよ HTML 内に JavaScript のコードを加えていきます。
カテゴリー
更新記事
- 『日本経済新聞』を読む 2(DAC、株主優待、オピオイド、ベトナム車市場、離れ小島)
- 『日本経済新聞』を読む 1(リバースメンタリング、CBT、EBPM、地方創生DAO、IBD)
- テーマ株投資(7か月)
- 『会社四季報 2024年 3集 夏号』を読む 20(RPF、DtoC、ToF、駅ナカ、CX)
- 『会社四季報 2024年 3集 夏号』を読む 19(ATC、プローブカード、ニューデリー、商品CFD、SUV、FPC、IFRS)
- 『会社四季報 2024年 3集 夏号』を読む 18(シャリ玉ロボット、YAGレーザー、シナジー、SaaS、クルーズ、DFBレーザー)
- 『会社四季報 2024年 3集 夏号』を読む 17(DSP、サーメタル、自動小銃、ダイカストマシン、FPSO、サーボモーター、水晶振動子)
- 『会社四季報 2024年 3集 夏号』を読む 16(クロスセル、eVTOL、CFCC、RFID、配当性向、事業承継)
- 『会社四季報 2024年 3集 夏号』を読む 15(SiC半導体、NAS電池、フェロニッケル、フェライト粉、スポンジチタン)
- 『会社四季報 2024年 3集 夏号』を読む 14(AI警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード)
- 『会社四季報 2024年 3集 夏号』を読む 13(PLM、ファクタリング、BCP、グリシン、メタクリル樹脂、アクティブシニア)
- テーマ株投資(6か月)
- 『会社四季報 2024年 3集 夏号』を読む 12(カプロラクタム、ゼロトラスト、RAG、ERP、シリカ)
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
- JavaScript でオブジェクト 4
- JavaScript でオブジェクト 3
- JavaScript でオブジェクト 2
- JavaScript でオブジェクト 1
- JavaScript で関数 3
- JavaScript で関数 2
- JavaScript で関数 1
- JavaScript で配列 6
- JavaScript で配列 5
- JavaScript で配列 4
- テーマ株投資(3カ月目)
- JavaScript で配列 3
- JavaScript で配列 2
- JavaScript で配列 1
- JavaScript で「繰り返し」2
- 『チーズはどこへ消えた?』を読む 2
- 『チーズはどこへ消えた?』を読む 1
- JavaScript で「繰り返し」1
- JavaScript で「もし」3
- テーマ株投資(2カ月目)
- JavaScript で「もし」2
- 「記憶」本 5冊を読む 3
- 「記憶」本 5冊を読む 2
- 「記憶」本 5冊を読む 1
- テーマ株投資(1カ月半)
- 「睡眠」本 6冊を読む3(夜間・朝の行動)
- 「睡眠」本 6冊を読む2(昼間の行動)
- テーマ株投資(1か月目)
- JavaScript で「もし」1
- JavaScript で変数3
- 「睡眠」本 6冊を読む1(理論)
- JavaScript で変数2
- テーマ株投資(第3週目)
- JavaScript でヘンな数
- 「メモ」本 6冊を読む2(メモの方法)
- テーマ株投資(第2週目)
- JavaScript で足し算
- 「メモ」本 6冊を読む1(メモの意義)
- テーマ株投資(第1週目)
- JavaScript で「こんにちは世界」
- 「コーチング」本 6冊を読む
- はじめてのテーマ株投資
- JavaScript とは
- 「怒り」「アンガーマネジメント」本 7冊を読む
- JavaScript を始めてみる
- 初めての自動給水器
- 「ブランディング」本 6冊を読む
タグ
break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) ことば (2) アンガーマネジメント (1) インソース (1) ココナラ (11) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (3) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (2) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (29) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (11) IGS (11) Kラーニング (1)