LoginSignup
2
1

More than 1 year has passed since last update.

@Yuriko-Y(Yuriko)

HTML/CSS/JSデモ

Last updated at Posted at 2020-03-14

##HTML/CSS/JSが動くか試してみよう！！
今回は、Visual Studio Codeでプロジェクトを入れるためのフォルダ内にそれぞれのファイルを作り、動くか試して行きたいと思います:relaxed:

今回の記事

  • HTMLでWebページの土台ファイルを作ろう!
  • CSSで見た目の調整をしよう!
  • リセットCSSを入れよう!
  • JavaScriptで動きを付けよう!
  • jQueryでJavaScriptを簡単に導入しよう！

##HTMLでWebページの土台ファイルを作ろう！
HTMLとは「Hyper Text Markup Langage」の略で、簡単に言うとWebページの土台となるファイルを作成する言語です。
Webページに表示させたい文章などを「<」「>」で挟まれた「タグ」と呼ばれる文字列で囲んでいきます。
詳しい書き方については別記事にまとめてありますので、今回はHTMLがブラウザーで反映できるか試してみましょう。
※プロジェクトを入れるためのフォルダは作成済みとします。

プロジェクトを入れるためのフォルダの作り方はこの記事参照:point_down_tone2:
Visual Studio Codeの導入と使い方

HTMLのファイルを作ってみましょう！

新規ファイルを作成を選択
スクリーンショット 2020-03-01 11.15.46.png

ファイル名は「～.html」にします。
スクリーンショット 2020-03-01 11.17.40.png

HTMLファイルに試しに書き込んでいきます。
「！」を入れるとVisual Studio Codeでは自動でHTMLの型を作成してくれます。
image.png

ここまで作ってくれます:thumbsup_tone2:
image.png

titleタグの中身を変更したり、bodyタグの中にh1タグ(見出し)やpタグを追加してみます。
コメント 2020-03-01 115942.png

HTMLが反映されているか見てみましょう。
index.htmlファイルの上で右クリック→エクスプローラーで表示する
image.png

クロームのマークが入ったindex.htmlが表示されます。
コメント 2020-03-01 113427.png

クロームで表示されば成功です。
コメント 2020-03-01 113905.png

※うまくいかない場合はVisual Studio Codeでしっかり上書き保存しているか確認しましょう:bangbang:

これでHTMLファイルは反映されました。

##CSSで見た目の調整をしよう！
次はCSSファイルを作り、反映させてみます。
CSSとは、「Cascading Style Sheets」の略で、見た目の装飾をするするための言語です。
つまり先ほど作成したHTMLの見た目を華やかに装飾できるのです。

先ほどのHTMLで作成したWebページは白い背景、黒い文字ですが、文字の色を変えたり、大きさを変えたり、レイアウトの変更ができます。

CSSをフォルダ作り、その中にCSSファイルを作成します。
コメント 2020-03-01 124308.png

ファイル名は「～.css」と付けます。
コメント 2020-03-01 124547.png

試しにh1タグ(見出し)の色を変えるコードをCSSファイルに入力します。
image.png

sample.css
h1{
    color: red;
}

しかしこれだけでは、CSSは反映されません。
HTMLファイルにCSSのファイルを読み込ませる必要があります。
コメント 2020-03-01 125523.png

index.html
<link rel="stylesheet" href="">

hrefの中にCSSのファイルがある場所を書きます。

エクスプローラーから実行し、CSSが反映されていることを確認しましょう。
image.png

##リセットCSSを入れよう
リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。

リセットCSSを使用すれば、Google ChromeやSafari、Internet Explorerなど異なるブラウザを使っても同じようにWebサイトが表示されます。

リセットCSSは基本的にコピペでOK！:point_down_tone2:
2019年版！おすすめのリセットCSSまとめ

CSSフォルダの中にreset.cssファイルを作成し、コピーしてきたものを張ります。
コメント 2020-03-01 132812.png

先ほどと同じようにHTMLファイルに反映されておきましょう。
コメント 2020-03-01 133039.png

リセットCSSを反映させ、エクスプローラーで表示するとこんな感じになります。
image.png

このようにデフォルトのCSSを打ち消すのでh1の文字の大きさなども自分で設定することが可能です。
今回はリセットCSSを入れた結果どのような表示になるか見てみたのですが、本来はプロジェクトを作成した際に最初にリセットCSSを入れておくことをオススメします。

##JavaScriptで動きを付けよう!
JavaScriptは簡単いうとWEBサイトに「動き」を加えるものです。
例えば、目立たせたいボタンやメニューにアニメーションや効果を追加したりできるので、ユーザーが使いやすいサイトを作ることが可能なのです。

jsフォルダーを作り、ファイル「～.js」を作成します。
image.png

HTMLでjsファイルを読み込みます。
コメント 2020-03-01 140602.png

index.html
 <script type="text/javascript" src=""></script>

srcの中にJSファイルがある場所を書きます。

わかりやすいようにHTML内にボタンを配置し、ボタンを押したら何か動きが出るようにしてみましょう。
コメント 2020-03-01 141417.png

ボタンを押したらアラートを出してみます。
image.png

sample.js
function btnClick() {
    alert("ボタンをクリックしましたね。");
}

HTMLのボタンタグの中にもこのように追加しましょう。

index.html
 <button  onclick="btnClick()">ボタン</button>

ブラウザで確認すると、JSが反映されています。
image.png

##jQueryでJavaScriptを簡単に導入しよう！

jQueryは、簡単に言うとJavaScriptを使いやすいように拡張してくれているものです。
「JavaScriptのライブラリ」なので、中身事態はJavaScriptです。
余裕がある人はjQueryを導入してみましょう。

jQueryの読み込み
コメント 2020-03-01 144244.png

sample.js
 <script type="text/javascript"src="https://code.jquery.com/jquery-3.4.1.js"></script>

jQueryの公式サイトからのコピペがおすすめです:point_down_tone2:
https://code.jquery.com/

コメント 2020-03-01 144555.png

image.png

先ほどのJavaScriptのコードをjQueryに書き換えてみましょう。

sample.js
$(function() {
    $('button').click(function() {
    alert("jQuery：ボタンがクリック")
    });
  });
index.html
 <button>ボタン</button>

jQueryでの見込みに成功！
image.png

お疲れ様でした:smiley:
HTML/CSS/JSのざっくりとした説明と、読み込み方法でした。
今後は1つ1つじっくり勉強していきましょう:point_up_tone2:

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1