こんばんは！ヒカリです。
Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。
今回はこのようなご要望をいただきました。
HTML, CSS, JavaScriptをとりあえずいろいろ動かしてみたい！
プログラミングに慣れるには、まずはいろいろと動かしてみるのが一番です。
というわけで、今回はHTML, CSS, JavaScriptをいろいろ動かしてみよう！
実際に動かしてみるとプログラミングの楽しさもわかると思いますよ。
HTMLでページを表示してみよう！
まずは、CSSとJavaScriptの土台となるHTMLを表示してみましょう！
HTMLにはいろいろなタグが存在します。
よく使われるタグを使用してみて、どのように表示されるのか確認してみましょう。
h1〜h6タグ
見出しを表示するために使用するのが見出しタグです。
Headingの頭文字を取って、<h1>, <h2>のように記述します。
<h1>〜<h6>まで存在し、数字が大きくなると文字の大きさが小さくなっていきます。
表示を確認したり、コードを編集したりすることで更に理解が深まります！
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タグで囲ってあげます。
紹介できていないタグもいろいろあるのですが、とりあえずはこのくらい知ってもらえれば大丈夫です。
CSSでHTMLを装飾してみよう！
今度はCSSを使ってHTMLを装飾してみましょう！
CSSには多くのプロパティ（装飾するためのもの）が存在します。
プロパティ名から挙動を想像できるものが多いです。
どのようなプロパティが存在して、どのような挙動をするのか実際に見ていきましょう。
フォント関連のプロパティ
様々なプロパティを使用してフォントを装飾してみました。
１つずつ解説していきます。
color, font-size, font-weightみたいなのをプロパティといいます。
colorプロパティ
<p style="color: red;">こんにちは、光です。</p>入門講座でも使用したのですが、colorはフォントに色をつけるプロパティです。
今回は値として色の名前を指定していますが、カラーコード（#ffffffみたいなやつ）やRGB（rgb(0,0,0)みたいなやつ）を指定することもできます。
font-sizeプロパティ
<p style="font-size: 10px;">ウェブエンジニアです。</p>font-sizeはフォントの大きさを指定するプロパティです。
pxだけでなく、%、em、ptなんかも使うことができます。
font-weightプロパティ
<p style="font-weight: bold;">ブログを書いています。</p>font-weightはフォントの太さを指定するプロパティです。
基本的には太字にしたいときにboldを指定します。
テキスト関連のプロパティ
今度はテキストの装飾をしてみました。
line-heightは少し違いがわかりにくいのですが、わかりますか？
brタグは改行を意味します。
text-alignプロパティ
<p style="text-align: center;">こんにちは、光です。</p>text-alignはテキストをどこに寄せるかを指定します。
デフォルトでは左寄せになります。
center（中央揃え）の他にもleft（左寄せ）、right（右寄せ）、justify（均等割付）があります。
この例だとjustifyとleftの違いがわからないですね。
line-heightプロパティ
<p style="line-height: 2em;">
ウェブエンジニアです。<br>
ブログを書いています。
</p>
<p>
ウェブエンジニアです。<br>
ブログを書いています。
</p>line-heightは行間の高さを設定できます。
若干、行間の高さが違うのに気づきましたか？
emの他に%も使えます。
ボックス関連のプロパティ
マークアップで欠かせないのがこのプロパティ。
そのままでは少しわかりにくかったので、背景色と文字色も指定してみました。
背景色と文字色はCSSファイルで指定しています。
borderプロパティ
<div style="border: solid 2px red;">border: solid 2px red;</div>borderは要素の枠のスタイル、幅、色を順番に指定します。
スタイルは結構いろいろあります。
marginプロパティ・paddingプロパティ
<div style="margin: 10px;">margin:10px;</div>
<div style="padding: 10px;">padding: 10px;</div><br>margin, paddingは余白を指定するプロパティです。
marginとpaddingの違いは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を適用して！という意味になります。
しかし実際には、あまりこのような使い方はしません。
ではどのようにして使うのかというとidとclassを使います。
HTMLのタグにはidとclassという属性を追加することができます。
追加したidやclassをセレクタに指定します。
idとclassは同じように使えるのですが、次のような違いがあります。
- id → 同じ値のものは1つしか設定できない
- class → 同じ値のものを複数設定できる
同じ値のものが1つの場合でもidを使用しないで、classを使用することもあります。
セレクタをclassだけに統一できるのがメリット！
では実際にidとclassを使って指定してみましょう！
このようにidのときは#（ハッシュタグ）、classのときは.（ドット）を使って指定します。
これは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”というところからコードの編集ができるようになっているので、是非そこからいろいろ書き換えてみてください！
更に理解が深まると思います。
少しでもプログラミングの楽しさを知っていただけたなら嬉しいです！
