HTML・CSS

はじめに


JavaScriptを学習するのに必ず習得しておきたいのがHTML・CSS等のブラウザ専用の言語です。
なぜならJavaScriptはブラウザで動く言語だからです。
難しいところではないので肩肘貼らずに楽しみながら進めて行きましょう!

HTML・CSSとは


HTMLとはブラウザで動く言語です。
色々な会社で作られているホームページやアプリは全てHTML,CSSで作られているんです。
今見ているこのドキュメントも紐解けば全てHTML,CSSで作られています。

そしてなぜJavaScriptの学習なのにHTML,CSSが必要かというとクライアントサイドでの
JavaScriptの動きはHTML,CSSを操作する事だからです。
HTMLはホームページの部品を作成し、CSSは各部品の色や配置を決めます。

実際にエディタで使ってみよう


エンジニア基礎で学べるHTML,CSSですが、今回は
JavaScriptを学習するにあたって習得しておくべきところまで学んでいきます。
まずはエディタを開いて、ファイル名をJavaScript-curriculumで作成します。

そしたらその中にindex.htmlとstyle.cssを作成しましょう。

ここからHTMLの雛形を作っていきましょう。
しかし毎回htmlの雛形を書くのはかなり大変だと思います。

簡単にこの雛形を準備するemmetという補完機能があるので
楽なやり方を知りたいという方は検索してみてください。

style.cssを紐づけることを忘れないでくださいね!⬇️⬇︎
headタグ内に記入しましょう。

そしてbodyタグ内にbuttonタグを作成しましょう!

こんな感じですね。
これをブラウザで確認してみてください。
右上にクリックボタンが出来てれば成功です!

ボタンタグは文字の通りボタンを作成するときに使います。
このタグは属性を指定してあげることができるんです。

要するにどんなシチュエーションで使うか役割を指定してあげることができます。
例えば送信用のボタンなのか、修正用のリセットボタンなのか、それともただのボタンなのか?
属性はいくつか指定できるので代表的なものをピックアップしてみました!

 

・name属性{ボタンに名前をつけます。サーバー側とつなげたりする時に使う}

・type属性{submit=送信ボタン,reset=修正ボタン,button=ただのボタン}

・value属性{ボタンタグのテキストを決めます}

そしたら次は、実際に上で書いたbuttonタグのコードを
使ってギミック
をつけてみましょう!!

 

ボタンを押したらポップアップウィンドウを表示する


ポップアップウィンドウとは…?という方ご安心ください。
皆さんがネットサーフィンをしている中で、一度は見たことがあると思います。

実はやり方はものすごく簡単!bodyタグの中にこのように書いてみましょう!


左上に表示されたクリックボタンをポチッとしてみてください。
すると下の図のようにモーダルが出ると思います。

実はこの動き自体はJavaScriptの動きそのものになります!
ボタンにalert関数を忍ばせてclickされたら実行します。
これをJavaScriptで書くとこんな感じになります。
書く量が圧倒的に増えますよね…

だったらJavaScriptを使わなくてもそれなりのものを作れるのではないか?
と思う方が多いと思います。

しかし!

onclickの様に簡単になる事は確かなのですが汎用性がないのでやはりもっと
凝ったものにするにはちゃんとコード描かないといけないわけです。
そのため、JavaScriptの習得が必須となってくるのです。

ハンバーガーメニューを作ってみよう


続いてはハンバーガーメニューを作ってみましょう!
web制作で欠かせないエフェクトをつけるとしたらこれを外すことは出来ないでしょう!
皆さんもこのような三本線を見た事があると思います。⬇︎⬇️

クリックしたりカーソルを上に持ってきた時、×印になったりするものですね。
もちろんこいつもHTML,CSSで作る事ができ、JavaScriptで動きをつけるには格好のオブジェクトになります!
ハンバーガーメニューもここで必ず作れる様にしておきましょう。

< HTMLのコード>

ボディタグの中にこの様に書いてあげましょう!
ここでは3本の横棒がiタグになります。
CSSのコードは特殊な書き方をしますのでしっかり覚えていきましょう!

< CSSのコード>

まずこちらの画像では、iタグを格納している箱の修飾をし、次にiタグそのものに修飾をしてあげています。
ここで注意することは、横棒の色を決めるのにcolorではなく
background-colorを使うことと、positionプロパティの使い方です!
特にpositionプロパティは頻出プロパティプリンスです。必ず自在に使える様になりましょう!

次に注目したいのは、上の画像の:nth-child()です。
こちらはiタグ1つ1つにスタイルを当てて、高さを出してあげています!
カッコ内の数字はインデックスです。上から順に0から始まっています。
始まりは「1」ではなく「0」からなので注意して下さい!

cssで動きをつけてみよう


今まで何気なく使ってきたCSSなんですが実は簡単なエフェクトをつける事ができます。
マウスを乗っけたら色が変わったり…クリックしたらものが移動したり…
でも本当は全然それだけじゃないんです。

扉が開く様な文字が作れたり、画面の中で浮いている様なロゴが作れたり!
こんなエフェクト付けられればもうどんな職人も怖くないです。
詳細はを知りたい方はこちらをご覧ください。

まずCSSで動き(アニメーション)を付ける時に忘れないで欲しい事が3つあります。

擬似クラスの使い方
transitionプロパティの使い方
・頭の中でどんな風に動くかイメージする

こちらの3項目に関して、詳しく見ていきましょう!

擬似クラス


CSSで動きを付ける為のロジックをまずは理解しましょう。
それは1つのオブジェクトに2つのCSSスタイルを付けてあげる事です!

下の2枚の写真を見てください。



:hover(マウスがオブジェクトの上に来た時)が着いている写真と着いてない写真です。
つまりhoverした時に下のスタイル適用、hoverしていない時は通常の上のスタイルを適用します。

これだけです!!
もちろん擬似クラスは他にもあります。
hoverは主要な物ですので覚えておきましょう!

transitionプロパティ


擬似クラスの学習でスタイリングの切り替えを学習しました。
ただそれではただ切り替えをするだけでアニメーションを付けることは出来ていません。
そこでtransitionプロパティを学習しましょう。
下の画像の部分がアニメーションの正体です。



・1つ目のallは全てのプロパティにスタイル適用させます。
もちろんwidth,color,background-imageだけとして指定することもできます。

・2つ目の5sは時間を指定しています。
直訳で5秒かけてという意味です。

・最後のeaseは動き方です!
はじめゆっくり、あと早くみたいな…

こちらが、transitionプロパティについてまとめた表になります。


イメージ練習


アニメーションを付ける基本的な部分はこれでばっちり学びました!
あとは頭の中でイメージしながら、擬似要素とtransitionプロパティを使って
簡単なアニメーションを作ってみましょう!

どんな物を作ろう…と悩んでしまう方もいると思いますので
こちらを参考にして作ってみてください!

※こちらは課題の提出は必要ありません。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami