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

Javascriptを開発する為の開発環境を開発する為の開発環境

プログラムイングを始めたい超初心者向けに、前回はプログラミングをする為の環境のお話をしました。プログラムはコンピューターへの命令文であり、命令文を記述する為のエディタがあるといったことをご紹介しました。

さて、今回は、Javascriptをプログラミングするにあたって必要となるHTML、CSSについてご紹介していきます。

HTMLとCSSとは

HTMLとは、ウェブページの基本構成を作る為の言語です。HTMLは、HyperText Markup Languageの略で、その名の通り、HTMLはハイパーテキストを記述する為のマークアップ言語となります。

ハイパーテキスト

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

分かりやすい例として、「リンク」という文字をクリックすると別のウェブページにブラウザの画面が移動する「linkが張られた文字」があります。これは単なる文字を表しているテキストの機能を大きく超えていますので、ハイパーテキストのひとつであり、「ハイパーリンク」と呼ばれています。

マークアップ言語

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

実際には、視覚マークアップ、手続きマークアップ、意味マークアップやバイナリデータの中で使われるものなど色々とあるのですが、特に覚える必要はないので、割愛します。テキストをタグで囲むヤツね程度で覚えておけば基本はOKです。

htmlの記述例

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

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

CSS

CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLで記述されたテキストの装飾などを指示する為の仕様です。最近のcssは、プログラミング言語のように変数という概念が取り入れられたりして、var関数やcalc関数を使うことでより便利になっているのですが、ここでは「cssはテキストや背景、ボックスなどの装飾を行うもの」と覚えておればOKです。

cssの記述例

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です。

因みに、Javascriptを記述したファイルの拡張子は、.js です。

次の回では、Javascriptのファイル構成についてご紹介したいと思います。

お疲れ様でした。(≧∇≦)o