ここまでCSSを書いてきましたが、このままstyle=”〜”のところに間取りや装飾の指示を書き足し続けていると、めちゃくちゃ読みにくくならない......?と思った方、いらっしゃるでしょう。ナイスな指摘です!実のところ、Webサイト制作の現場では、HTMLに直接CSSを書き込むことはありません。今HTMLを書いているファイルとは別に、CSSを書くためのファイルを作り、それを読み込むのです。{width:200px;height:300px;background-color:#ff0000;}と書く。この状態で、index.htmlにstyle.cssを読み込ませれば、骨組みと間取り・装飾の指示が整理されてとても見やすくなります。機能、動きさて、ここまでHTMLとCSSを見てきましたが、実はその2つの言語が扱えるだけでWebサイト制作はできてしまいます。ここまでで読むのをやめて本を見ながら試してみます!でももちろんいいのですが、もうちょっと知りたいな!という方がいたら、この後も読み進めてみてください。みなさんが実際に家を建てて住むとき、ただ壁で仕切られたスペースに物が置いてあるだけではないですよね?例えば、家電を置きますよね。冷蔵庫なら、電源を挿せば庫内が冷えて食物を保存できるという機能があります。電子レンジなら、つまみを回せば物を温められるという機能があります。他にも、お風呂は「お湯はり」ボタンを押すと、お湯が出てきて溜まりますよね。来訪者がインターフォンを押せば、ピンポーンと音が鳴ります。いったなんらかの機能や動きを持たせるために使う言語があります。Javascriptと言います。余談ですが、あ、Javaですか?と言われることよくありますが、ナナシロ違います!JavaとJavascriptは別の言語です!なので、気をつけましょう。今回は具体的にJavascriptの書き方を指南するつもりはありませんが、この言語を使えば、ボタンを押すとページの先頭へスルスルとスクロールして戻る画面の幅が1200px以上になったら画面右端に広告バナーを表示する特定のエリアにカーソルを乗せると注意書きが書かれたウィンドウが表示されるといったことができます。実はこのJavascript、HTMLとCSSから勉強した人にとってはちょっと難しく使いづらいんですよね〜。(少しでもやってみたことがある人なら分かると思いますが......。)そんなあなたに!このJavascriptという言語をCSSを書くように使いやすくしたものがあるのです。その名もjQuery。jQueryは、Javascriptのライブラリの一つです。ライブラリとは、誰でも使いやすいように必要な機能をセットにしたものです。どれくらい使いやすくなるかを、電子レンジを部屋に設置することを例に挙げて説明すると、Javascript:まず電子レンジを作るところからやるか......。jQuery:電子レンジ買ってきたから、キッチンに置いて使いましょ!という感じ。それくらいめちゃくちゃ使いやすくなるのです。Javascriptのことを知らなくても、jQueryを使えば動きや機能を設定することができます。今回はご紹介のみ、ということで。まとめ今回は、家を建てるイメージでWebサイト制作を覚えていきましょう〜という話をしてきました。HTML:基礎、骨組みCSS:間取り、装飾Javascript(jQuery):機能、動きといったことを学んできました。実を言うと、この3つの言語以外にも、問い合わせフォームを作る場合などはPHPという言語を使う必要があります。今回はあくまでただのデザインの状態からWebサイトをコーディングする部分に重きを置いてご紹介しました。Webサイト制作は独学でもすいすい学べる人がいる一方で、構造をつかむことができず四苦八苦する人も多々います。問い合わせ関連記事デザインのひっくり返しをなくすための3つのポイント【本気の人限定】無料&最速でプログラミングを習得する方法Webサイト公開の手順は、借りた土地の家に人を呼ぶイメージで覚えよう!【挫折しそうなあなたへ】プログラミングを習得したいなら作りたいものを作ろう!【駆け出しエンジニア向け】最速で問題解決するググり方プロフィールナナシロメンターのナナシロです。※くわしい自己紹介についてはこちら。・現代社会で生きることに対して障害を感じている人へ向けて、発信をおこなっています。人生に悩んでいる方向けに人生相談にも乗っております。ご興味がある方はこちら。