ふりぶろぐ
Web Engineer's Blog
CSS

【サンプルコード】超初心者向けHTML, CSS, JavaScript実践講座!

HTML, CSS, JavaScriptをとりあえずいろいろ動かしてみたい!
サンプルコードがいろいろほしい!

このようなご希望にお応えします。

まずは基礎を知りたい!という方には入門講座を用意しているので、こちらを先に見てください。

今回はjsFiddleというものを利用します。
そのため、動作させるためのサンプルコードのコピペは不要です!
サンプルコードの表示や動作を見てるだけでも全然大丈夫です。

プログラミングに慣れるには、まずはいろいろと動かしてみるのが一番良いです。
というわけで、今回はHTML, CSS, JavaScriptをいろいろ動かしてみよう!
実際に動かしてみるとプログラミングの楽しさもわかると思いますよ。

読んでほしい人
  • HTML, CSS, JavaScriptが初めての人
  • HTML, CSS, JavaScriptを復習したい人
  • HTML, CSS, JavaScriptを動かしてみたい人

HTMLでページを表示してみよう!

HTMLロゴ

まずは、CSSとJavaScriptの土台となるHTMLを表示してみましょう!

HTMLにはいろいろなタグが存在します。
よく使われるタグを使用してみて、どのように表示されるのか確認してみましょう。

h1〜h6タグ

見出しを表示するために使用するのが見出しタグです。
Headingの頭文字を取って、<h1>, <h2>のように記述します。

<h1><h6>まで存在し、数字が大きくなると文字の大きさが小さくなっていきます。

jsFiddleの使い方
りーふ

表示を確認したり、コードを編集したりすることで更に理解が深まるよ!

aタグ

リンクを指定するために使用するのがaタグです。
Anchorの頭文字を取って、<a>のように記述します。

ページ内の別の場所へ遷移させたいとき、外部ページへ遷移させたいときに使用します。
遷移先を指定するにはhref属性を使用します。

pタグ

段落を指定するために使用するのがpタグです。
Paragraphの頭文字を取って、<p>のように記述します。

<p></p>で囲まれたテキストは、1つの段落であることを意味します。

ul, liタグ

リストを表示するために使用するのがul, liタグです。
unordered list(順序がないリスト)の略です。liはlistですね。

ulタグの中でliタグを使用することでリストを表示することができます。

divタグ

特に意味を持たないのですが、一番使用するのがこのdivタグです。

どのようなときに使用するのかというと、以下のとおりです。

  • CSSで装飾したいとき
  • JavaScriptで操作したいとき

CSSやJavaScriptはタグで囲まれていないと使えません。
そのため、何も意味を持たないdivタグで囲ってあげます。

りーふ

どのタグで囲ったらいいんだろうっていうときは、とりあえずdivタグでOK!


紹介できていないタグもいろいろあるのですが、とりあえずはこのくらい知ってもらえれば大丈夫です。

CSSでHTMLを装飾してみよう!

CSSロゴ

今度はCSSを使ってHTMLを装飾してみましょう!

CSSには多くのプロパティ(装飾するためのもの)が存在します。

プロパティ名から挙動を想像できるものが多いです。
どのようなプロパティが存在して、どのような挙動をするのか実際に見ていきましょう。

フォント関連のプロパティ

様々なプロパティを使用してフォントを装飾してみました。
1つずつ解説していきます。

これがプロパティ!
りーふ

color, font-size, font-weightみたいなのをプロパティって言うよ!

colorプロパティ

<p style="color: red;">こんにちは、りーふです。</p>

入門講座でも使用したのですが、フォントに色をつけるプロパティです。

今回は値として色の名前を指定していますが、カラーコード(#ffffffみたいなやつ)やRGB(rgb(0,0,0)みたいなやつ)を指定することもできます。

font-sizeプロパティ

<p style="font-size: 10px;">ウェブエンジニアです。</p>

フォントの大きさを指定するプロパティです。

pxだけでなく、%emptなんかも使うことができます。

font-weightプロパティ

<p style="font-weight: bold;">ブログを書いています。</p>

フォントの太さを指定するプロパティです。

基本的には太字にしたいときにboldを指定します。

テキスト関連のプロパティ

今度はテキストの装飾をしてみました。
line-heightは少し違いがわかりにくいのですが、わかりますか?

brは改行!
りーふ

brタグは改行を意味するよ!

text-alignプロパティ

<p style="text-align: center;">こんにちは、りーふです。</p>

テキストをどこに寄せるかを指定します。
デフォルトでは左寄せになります。

center(中央揃え)の他にもleft(左寄せ)、right(右寄せ)、justify(均等割付)があります。

この例だとjustifyleftの違いがわからないですね。

line-heightプロパティ

<p style="line-height: 2em;">
  ウェブエンジニアです。<br>
  ブログを書いています。
</p>
<p>
  ウェブエンジニアです。<br>
  ブログを書いています。
</p>

実はこのプロパティは行間の高さを設定できます。
若干、行間の高さが違うのに気づいたでしょうか?

emの他に%も使えます。

ボックス関連のプロパティ

マークアップで欠かせないのがこのプロパティ。

そのままでは少しわかりにくかったので、背景色と文字色も指定してみました。
背景色と文字色はCSSファイルで指定しています。

borderプロパティ

<div style="border: solid 2px red;">border: solid 2px red;</div>

要素の枠のスタイル、幅、色を順番に指定します。

スタイルは結構いろいろあります。

marginプロパティ・paddingプロパティ

<div style="margin: 10px;">margin:10px;</div>
<div style="padding: 10px;">padding: 10px;</div><br>

これらのプロパティは余白を指定するプロパティです。
marginpaddingの違いはborder内側か外側かの違いだけです。

  • margin  → border外側の余白を指定する
  • padding → border内側の余白を指定する

また、複数の値を取ることもできます。
複数指定した場合にはそれぞれ次のような意味を持ちます。

  • 1つ指定した場合 → 上下左右
  • 2つ指定した場合 → 1つ目の値が上下、2つ目値が左右
  • 4つ指定した場合 → 時計周り

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
りーふ

上下左右どこか1箇所の余白を指定したい場合はこんなプロパティもあるよ!

おまけ:セレクタについて

styleタグや別ファイルでCSSを扱うときにはセレクタと呼ばれるものを使用する必要があります。
セレクタはどの要素に対してCSSを適用するかを指定するものです。

ボックス関連のプロパティを解説したときに背景色、文字色を指定しましたが、そのときにも使用しています。

これがセレクタ!
りーふ

{ }の前に書いてあるのがセレクタだよ!

このの書き方ではdivタグにこのCSSを適用して!という意味になります。

しかし実際には、あまりこのような使い方はしません。
ではどのようにして使うのかというとidclassを使います

HTMLのタグにはidclassという属性を追加することができます。
追加したidclassをセレクタに指定します。

idclassは同じように使えるのですが、次のような違いがあります。

  • id → 同じ値のものは1つしか設定できない
  • class → 同じ値のものを複数設定できる
りーふ

同じ値のものが1つの場合でもidを使用しないで、classを使用することもあるよ!
セレクタをclassだけに統一できるね!

では実際にidclassを使って指定してみましょう!

このようにidのときは#classのときは.を使って指定します。
これはJavaScriptを使用する際にも重要になってくるので、しっかりと覚えておきましょう。

JavaScriptでページを動的にしてみよう!

JavaScriptロゴ

最後にJavaScriptを使ってHTMLを動的にしてみましょう!

JavaScriptからテキストを変えたり、CSSを適用したりしてみましょう。

HTMLとCSSとは違い、プログラミングっぽい処理を書いていきます。
JavaScriptに慣れておくと、他の言語を勉強しようと思ったときに理解しやすくなります。

早速、JavaScriptの基礎を学んでいきましょう。

アラートの表示

まずはボタンを押したときにアラートを表示してみました。
こちらは入門講座で使用したものと同じです。

buttonタグにonclick属性を指定して、その中で直接JavaScriptを実行しています。

りーふ

onclick属性の中に記述した処理は、その要素がクリックされたときに実行されるよ!

では今度はbuttonタグに直接記述せずに、JavaScriptファイルに処理を記述してみましょう。
その場合はこのようになります。

こちらも入門講座で使用したものとほとんど同じですが、こんな感じになります。
jsFiddleはHTMLが読み込まれたあとにJavaScriptが読み込まれるので、”HTMLを読み込んだ後に処理をする”という記述は不要です。

var button = document.getElementsByTagName('button')[0];

こちらでは、タグ名が”button”の要素をすべて取得して、その中の0番目のものをbuttonという変数に格納してくださいという処理を行っています。

この取得したbuttonをDOM(ドム)と言います。

今回はgetElementsByTagName()を使用したのですが、実はこれはあまり使われません。
よく使われるのはidやclassを設定して、それらを指定して取得する方法です。

では、そのidやclassを指定して取得する方法について見ていきましょう。

DOMの取得

こちらがidを指定して取得する方法になります。
ほとんど同じですね。

DOMを取得するメソッド(関数)がgetElementsByTagName()からgetElementById()に変わって、0番目という指定がなくなっただけです。

なぜ0番目という指定がなくなったかというと、同じidを持つ要素はページ内で1つしか設定できないからです。
そのため、getElementById()を使用してDOMを取得すると1つだけ取得することができます。

ちょっとわかりにくいのですが、メソッド名からもわかります。
getElementsByTagName()は”Elements”と複数形になっていますよね。
ここが複数形になっている場合は、複数のDOMを取得します。

CSSのところでも解説したように、classはidとは違い、同じ名前のものをいくつも設定することができます。
そのため、getElementsByClassName()というメソッドを使用します。

こちらもほとんど同じですね。
他にもDOMを取得する方法はありますが、基本的にはこのように取得することが多いです。

テキストを変換

DOMの取得方法が理解できたら、今度は動的にテキストを変換してみましょう。
ボタンを押したら”こんにちは”が”こんばんは”になります。

このように、取得したDOMの中身を変更することもできます。

テキストの色を変換

最後にJavaScriptとCSSを組み合わせてみましょう。
ボタンを押したら”こんにちは”という文字が赤くなります。

style.colorに色を設定することでCSSで指定した場合と同じ挙動になります。
テキストを変換する処理とほとんど同じですね。

このようにして、JavaScriptからCSSを操作することも可能です。

まとめ

最後まで見ていただき、ありがとうございます。

いかがだったでしょうか?
HTML, CSS, JavaScriptの基本の動きを理解できたでしょうか?

サンプルコード右上の”Edit in JSFiddle”というところからコードの編集ができるようになっているので、是非そこからいろいろ書き換えてみてください。
更に理解が深まると思います。

少しでもプログラミングの楽しさを知っていただけたなら幸いです。

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。