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

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

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

本プロジェクトで作成するデモサイトでも、このcss、JavaScriptどちらも使用していくので覚えておいてください。

スタイルシート(CSS)とは?

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

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

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

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

スタイルシートはHTMLのもっとも仲の良い友達でありWebページを構成する上で欠かせない存在だよ

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

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

headタグ内に下記のように記述するとcssファイルを読み込めるよ

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

CSS3のおかげでWeb制作の効率は飛躍的に上がりましたね

JavaScriptとは?

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

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

ちなみに、Javaという名前が付いているのでJava言語と何か関係のあるプログラミング言語だと思われがちですが、Javaとは何も関係ありません。

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

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

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

例えば下記のように書くと画面に「Hello World」という文言をアラートで表示してくれるよ

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

下記のように記述するとjsファイルを読み込めるよ

まとめ

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

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

本記事のまとめ

  • HTMLをかっこよく装飾してくれるスタイルシート(CSS)
  • HTMLとCSSだけでは出来ない高度な処理の多くを担ってくれるJavaScript
  • cssもJavaScriptも現在のWeb制作では欠かせない言語

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

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

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

シェアありがとうございます!

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です