WEBプログラミングに触れてみよう！【体験コース全1回】
インストールしたアプリのおさらい
Zoom
今話題のZoomの使い方を簡単に解説。
WEB飲み会はこんなにも簡単に始められます！
Slack
数あるビジネスチャットからSlackを選択したのはなぜか？
Slackのチャンネルの使い方や便利な小技を紹介します。
Google Chrome
なぜChromeを使うのか、Chromeの便利なところは？
GoogleアカウントとChromeの上手な連携方法を紹介します。
サクラエディタ
サクラエディタはあってもなくてもさほど困りませんが、あったら便利なこともあります。
サクラエディタの使いどころを紹介します。
Visual Studio Code
Visual Studio Codeはプログラミングをするなら必須のアプリです。
慣れないうちはどうにも使いづらいところがあるので、愛着がわくようなカスタマイズ方法を紹介します。
WEBページを作ってプログラミング体験
ファイルの準備
以下のページを開き、採用を参考にしてHTMLファイルを作成しましょう。
HTMLとBootstrapを体験
以下のコードを作成したlesson_xx.htmlにコピペしてみましょう。
<div class="card-header">ブロックタイトル</div>
さらに以下のコードを.card-bodyの中にコピペしましょう。
<a class="btn btn-primary" href="https://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a>
以下のコードはGoogleマップの埋め込みコードです。
.card-bodyの中にコピペしてみましょう。
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12844.140427681466!2d136.4455433!3d36.4083459!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf01b34181bf194c4!2z5bCP5p2-5biC5b255omA!5e0!3m2!1sja!2sjp!4v1567401939636!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
このようにHTMLでは、HTMLタグを追加することでWEBページに様々な要素を追加することが出来ます。
そして、Bootstrapを利用することであらかじめ見やすいデザインが各要素に適用されます。
CSSを体験
以下のコードを作成したstyle.cssファイルにコピペしてみましょう。
body{background-color: red;}
.btn{font-size: 30px;}
iframe{width: 100%;}
このようにCSSでは、見た目の装飾を追加ことが出来ます。
このCSSを駆使することで、WEBサイトが見やすく使いやすくなるわけです。
JavaScriptプログラミングを体験
以下のコードをlesson_xx.htmlの中にある.card-bodyの中にコピペしましょう。
<button id="action_1" class="btn btn-success">動作1</button> <button id="action_2" class="btn btn-danger">動作2</button> <code id="target"></code>
次に、以下のコードをscript.jsにコピペしましょう。
//動作1
let action_1 = document.getElementById('action_1');
action_1.addEventListener('click', function(e){
action_1.classList.toggle('btn-success');
});
//動作2
let action_2 = document.getElementById('action_2');
let target_2 = document.getElementById('target');
action_2.addEventListener('click', function(e){
const today = new Date();
target_2.innerHTML = today.toLocaleString();
});
このようにJavaScriptでは、表示されている要素に変化を加える役割を持ちます。
今回紹介した言語の中で唯一のプログラミング言語になります。
まとめ
プログラミング言語は数あれど、WEBプログラミングに限定すれば、上記の3言語は必須知識となります。
今回の講義でプログラミングに興味を持ったり、WEBサイトを作ってみたいと感じた方は、一つ踏み込んで学習してみてはいかがでしょうか。
今はプログラミングを学習するためのサービスは世に溢れていますので、触り続けることを心掛けて学んでいってください。
