【Webプログラミング入門】ブラウザですぐに実行できるHTML、CSS、Javascript
まとめ (TL;DR)
ここでは Web ページを作成する最も基本的な３つの要素、HTML・CSS・Javascript を簡単にすぐに実行することができます。これで Web ページがどのように動くのかを理解するきっかけになります。
バックグラウンド
ブラウザで表示されるこのサイトも含めた Web についての技術は、OSI 参照モデルをベースに説明するととてもとても大変になってしまい、挫折してしまうレベルです。今回は Web ページってどうやって作っているんだろうかという最初の手がかりとしての一助となれば幸いです。何はともあれ、まずは自分で書いて、その結果をすぐに確認できる。すぐにフィードバックが得られることは学習するうえでとても大切なプロセスです。
使い方
- HTML、CSS、Javascript それぞれ３つの入力欄があります。そこにそれぞれの言語に合わせて入力すると、右側の結果エリアにすぐに反映されます。ただし、Javascript の場合は入力が終わったら、実行ボタンを押してください。
- Ctrl ボタンとスペースキーを同時に押すと、入力候補が表示されます。これを活用すると、正確に素早くプログラムを書くことができます。
- 結果がうまく表示されない場合は、プログラムの内容に不備がある可能性があります。例えば HTML のところでタグを閉じ忘れがないかなどです。注意してみてみましょう。
HTML、CSS、Javascript を書くためのヒント
HTML
HTML: Hypertext Markup Language by MDN
HTML について網羅的にかつ詳細に記載されているサイトです。Mozilla が運営しており、最も充実した内容になっています。
最近、HTML はじめ CSS や Javascript で Google 検索をすると上位に表示されるサイトです。MDN よりは見やすく、とっつきやすいサイトです。
CSS
CSS: Cascading Style Sheets by MDN
同じく MDN の CSS サイトです。
同じく w3school の CSS サイトです。
Javascript
CSS: Cascading Style Sheets by MDN
同じく MDN の Javascript サイトです。
Javascript Tutorial by w3school
同じく w3school の Javascript サイトです。
さいごに
ごくごく簡単なものになります。 何かのお役に立てれば幸いです。