スタイルシート（CSS）とJavaScriptについて学習！【超初心者向けHTML講座5】

　どうもフリーランスプログラマのTakaです。

　前回、実作業でよく使うHTMLのタグ一覧を簡単にまとめました（詳細は下記参照記事）が、今回は実際のコーディング作業をしていくにあたって、しっかりとしたWebページを構成する上でHTMLの他に必要な言語であるスタイルシート（CSS）とJavaScriptについて紹介したいと思います。

スタイルシート（CSS）とは？

　一般的に現在Web上に無数のようにあるWebページは、HTMLで作られているますが、HTMLはこれまでの記事でも説明してきたように基本的に情報をマークアップすることで意味付けをしブラウザ上で表示させる役割を果たしています。ただし、HTMLの仕事はあくまでそこまでで、デザインに合わせた装飾などはHTMLだけではできません。

スタイルシートは装飾などをする言語

　そこで、登場するのがスタイルシートになります。スタイルシートは、「CSS」とも呼ばれますが、1996年に初めてW3Cによって勧告されました。

　スタイルシートはHTMLのタグに色やマージン（余白）、フォントサイズなど様々な見た目に関する装飾を施すことができ、Webページの見た目の表現の幅を大きく広げてくれる存在です。発表当初は多くのブラウザがスタイルシートに対応していなかったこともあり、あまり使われることもありませんでしたが、今ではWebページを作成する上で欠かすことのできない言語になります。

　例えば、下記のようにcssを記述すると、body要素の背景が白色に設定され、内包されている要素のフォントサイズが16pxに設定されます。

　ちなみに、CSSとは「Cascading Style Sheets」の頭文字を取った略語になります。スタイルシートはHTMLファイルに直接インラインで記述することも可能ですが、実制作では別途「.css」という拡張子を持ったファイルを作りそこにまとめて記述することが多いです。

　また、現在主流のCSSのバージョンは「CSS3」と言われる第3世代にあたり、旧来のCSSではできなかったグラデーションや角丸、ドロップシャドウ、またアニメーションの設定などがCSSだけで可能になりました。

JavaScriptとは？

　Webページの装飾に関しては、スタイルシートで可能ということが分かったと思いますが、よりモダンなWebページを作成したい場合に必要になってくるのが「JavaScript」になります。

　JavaScriptとは、1995年のアメリカ人プログラマーであるブレダン・アイク氏によって開発されたプログラミング言語になります。HTMLやCSSはプログラミング言語には分類されませんが、JavaScriptはれっきとしたプログラミング言語になります。

　JavaScriptは、最近ではNode.jsのようにサーバーサイドでも動くプログラミング言語になりましたが、もともとはブラウザで動作するフロントエンドのプログラミング言語になり、HTMLやCSSだけではできない多くのことを実現してくれます。

よりリッチなコンテンツに変身させてくれる重要言語

　例えば、HTMLの内容を動的に変更したり、アラートを出したり、演算処理をしたり、またサーバーサイドとデータのやり取りをしたり、その役目はとても幅広くWeb開発においてもっとも重要なプログラミング言語のひとつであり、今後もその需要は増えていくと予想されています。

　また、JavaScriptファイルもcss同様HTMLファイルに直接インラインで記述することも可能ですが、別途外部ファイルとして作成して読み込むかたちで記述することも多いです。

まとめ

　ということで、今回はこれから実制作を進めていくにあたって、しっかりとしたWebページを構成する上で欠かせない言語である、スタイルシート（CSS）とJavaScriptに関して簡単に紹介させていただきました。

　cssもJavaScriptもHTML同様、実際に制作しながら学習していく方が効率的なので、初めのうちから必要以上に無理に覚えなくても大丈夫ですが、どちらもWeb開発上、必須のスキル言語になるので何度も繰り返し学習をしていきましょう。

　てことで、今回はここまで！また！

　次の記事は下をクリック。