ゼロからはじめるJavaScript超入門編その3 -開発環境

Javascriptを開発する為にHTMLとCSSを理解する

ゼロからはじめるJavaScript超入門、第二回目の前回ではプログラミングをする為の環境づくりについてご紹介しました。

さて、今回は、JavaScriptをプログラミングするにあたって基本のキとなる”HTML”と”CSS”についてご紹介していきます。

HTMLとCSSとは

HTMLとは、ウェブページの基本構成を作る為の言語です。”ゼロからはじめるJavaScript 第一回目”でもご紹介しましたがHTMLは、HyperText Markup Languageの略で、その名の通り、HTMLはハイパーテキストを記述する為のマークアップ言語です。

ハイパーテキスト (hypertext)

ハイパーテキスト (hypertext) とは、複数のテキストを結びつける仕組みで、所謂文字だけを記述するテキストを超えたtextということで、ハイパーテキストと名付けられました。

分かりやすい例として、「リンク」という文字をクリックすると別のウェブページにブラウザの画面が移動する「linkが張られた文字」があります。

これは単なる文字を表しているテキストの機能を大きく超えていますので、ハイパーテキストのひとつであり、「ハイパーリンク」と呼ばれています。

マークアップ言語

ここでは、マークアップ言語については、「目的のテキストを　特定の記号で指定したタグ（tag）で囲んで　構造や見栄えを記述したもの」と覚えておけばOKです。

実際には、視覚マークアップ、手続きマークアップ、意味マークアップやバイナリデータの中で使われるものなど色々とあるのですが、特に覚える必要はないので、ここでは割愛します。

テキストをタグで囲むヤツ！程度で覚えておけばいいでしょう。

htmlの記述例

↓に簡単なHTMLで書かれたコードを用意しておきました。htmlと/html、headと/head。それぞれ、<>で囲まれていますが、同じタグで両端を囲んでいるのがHTMLの特長です。

<>からはじまり</>で終わります。<></>の中にさらに<></>を挟むことで、親子関係、さらには親、子、孫・・・などの関係をつくることができるのがHTMLの特長です。

<html>
　<head></head>
　<body class="hogehoge">
　<div></div>
　</body>
</html>

上記をエディタに書き込んた後は、ファイルとして拡張子をつけて保存します。HTMLファイルの拡張子は、.html または、.htmです。

文字の違い以外、特に違いはありません。お好みでどちらか好きな拡張子を使うことができます。個人的には、「.html」を使っています。

CSS

CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLで記述されたテキストの装飾などを指示する為の仕様です。

最近のcssは、プログラミング言語のように変数という概念が取り入れられたりして、var関数やcalc関数を使うことでより便利になっているのですが、ここでは「cssはテキストや背景、ボックスなどの装飾を行うもの」と覚えきましょう。

cssの記述例

CSSの書き方の基本は、｛｝の中に装飾を施したい内容を記述します。以下の例では、<html>・・・</html>の中で使われる文字のフォントファミリー（font-family）は、Yu Cothicやヒイラギ角ゴ・・・を使ってね～と指定している例です。ラインの高さや文字の色、背景の色についての記述もあります。

html {
    font-family: "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    line-height: 2.3125;
    color: #040429;
    background-color: #fff;
}

CSSをファイルとして保存する場合の拡張子は、.cssです。すっかり、JavaScriptの話題から遠ざかってしまっていますので参考程度にJavaScriptを記述したファイルの拡張子についても触れておきますが、JavaScriptが記述されたファイルの拡張詩は、.js です。

ゼロからはじめるJavaScript超入門第四回目は、話をJavaScriptに戻し、”JavaScriptのファイル構成”についてご紹介したいと思います。

ゼロからはじめるJavaScript超入門編その3 -開発環境JavaScriptプログラミングの基礎を学ぼう！