HTML
JavaScript
HTML5
CSS3
HTML,CSS,JavaScript

初学者向け!! HTML / CSS / Javascriptで何ができる?(下書きテスト中)

初学者向け!! HTML / CSS / Javascriptで何ができる?

さて、みなさんは「HTMLって何?」「CSSって何?」「JSって何?」と聞かれた時に、さっ と答えることができますか?
なんとなくは分かっていても、具体的に何をしていくものなのか分かっていない方も多いのではないでしょうか?
そんな方に向けて、軽く紹介していきたいと思います♪

HTMLとは

正式名称は「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」と言います。
略して「HTML」!!
簡単に言うと普段みなさんが目にするWebページの土台を作るための言語ですね。
言語といっても、日本語や英語のような自然言語ではなく、「マークアップ言語」と呼ばれるコンピュータに文書構造を伝える命令を出す為の言語になります。
Webページは、HTMLでマークアップされることによって、見た目が形成されます。

HTMLのバージョン

HTMLといっても、様々なバージョンがあります。
最近では、ほとんどHTML5が使われていますが、HTML5はInternet Explorer 9以降のバージョンに対応していますので注意してください。
そのため、数年前まではHTML4やXHTML1.0を使うことが多かったのです。
インターネット上にはHTML5以外のバージョンで作成されたWebサイトも数多く存在しています。
そこで、「どうやってHTMLのバージョンを使い分けるのか」という疑問が生まれてくるかと思いますが、HTMLのバージョンはHTMLファイル内の「宣言文」によって決まります。

▼HTML5での宣言
<!DOCTYPE html>
▼XHTML1.0での宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

この部分ですね。
HTMLファイルを開くと、このような記述が一番上にあるので、これを見てどのバージョンを使用しているのか判断します^ ^

HTMLの書き方

さて、次は「HTMLの書き方」をご紹介していきます。
HTMLを記述していくにはまずは以下のものが必要です。
・PC
・テキストエディタ(メモ帳でも可)
・Webブラウザ

これだけあれば、今すぐにでもHTMLを記述して、仕上がりを確かめることができます。
ただ、HTML、CSS、Javascriptを記述してブラウザで確認するには「ディレクトリ」を用意する必要があります。
ディレクトリを用意してHTMLファイルにCSSファイル、JSファイルを読み込むための記述をして初めて確認できるようになるのですが、順次解説していくので、一旦ディレクトリの用意をしましょう♪

まずは、デスクトップでもどこでも大丈夫なので、自分の管理しやすい場所にディレクトリを作成してください!
今回作成するディレクトリはこちら!!

【ディレクトリ階層】
all.png

さて、準備が整ったら早速次のソースを記述してみましょう。

HTMLでマークアップしてみよう

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>初学者向け!! HTML / CSS / Javascriptで何ができる?</title>
    <link rel="stylesheet" href="">
    <script type="text/javascript" src=""></script>
</head>
<body>
    <header>
        <!-- ヘッダーはここに記述 -->
    </header>
    <h1>初学者向け!! HTML / CSS / Javascriptで何ができる?</h1>
    <div id="wrapper">
        <section>
            <h2>HTMLとは</h2>
            <p>本文</p>
            <section>
                <h3>HTMLのバージョン</h3>
                <p>本文</p>
            </section>
        </section>
        <section>
            <h2>CSSとは</h2>
            <p>本文</p>
            <section>
                <h3>CSSのバージョン</h3>
                <p>本文</p>
            </section>
        </section>
    <!-- /#wrapper --></div>
    <footer>
        <p>フッターはここに記述</p>
    </footer>
</body>
</html>

記述が終わったら、保存をしてブラウザで確認してみてください。

*** ここに画像入れ込み ***

このように出てきたら、正しく反映されています♪

何をしているかというと、ページに「ヘッダー(header)」「見出し(hタグ)」「フッター(footer)」を反映させるための記述をしています!
ここで大事なのは、正しい文書構造を意識して、適切なマークアップをするということです。

ただ、初めのうちは文書構造など意識せずに、「ひたすらにHTMLを書いてみては表示されることを確認する」のが一番です♪

CSSとは

上でHTMLとは何かを学びました。
では、次にCSSとは何かを学んでいきましょう。
CSSの正式名称はCascading Style Sheets(カスケーディングスタイルシート)と言います。
ページのレイアウトを形成していくためのスタイルシートですね。

上の章では、HTMLのみ記述してページを表示させましたが、なんだか味気ないですよね。。
でも、CSSを加えてあげることで、綺麗な見た目へと変化していきます!
例えば、文字の色や背景色、配置などを自由に変更させることができます。

ただ、「HTMLのタグで囲った範囲に対してCSSを適用させていく」必要があるので、HTMLとCSSは常にセットです。お互いに足りないところを補っていく良きパートナーです。

HTMLでマークアップして、CSSでレイアウトを整える。これがWebページを作成していく際の基本的な流れになります。

CSSのバージョン

・CSS1
・CSS2
・CSS3

このようにCSS1からCSS3までの3つのバージョンが存在しています。
*ちなみに、CSS3では今までのCSSでは実現できなかったことが実現できるようになっています。

現在はCSS3が主流ですが、CSS3のプロパティによっては、対応していないブラウザも多々ありますので、「このブラウザでは正しく表示されたけど、このブラウザでは正しく表示されない」なんてこともあります...
そこはプロパティのブラウザ対応状況を見て正しく記述していく必要があります。

CSSの書き方

CSSの書き方には、色々な方法があります。
・外部ファイルを読み込む
・head内に記述する
・インラインで記述する

上で挙げた方法であればどれを選んでもいいのですが、「外部ファイルを読み込む」ことが一般的な記述方法になります。

ここからは、「外部ファイルに記述する方式」でCSSを記述してみたいと思います♪
ただ、その前に先ほど作成したindex.htmlの「linkタグのhref属性」に下記記述を追記します!

index.html
    <link rel="stylesheet" href="css/style.css">

何をしているかというと、HTMLファイルからCSSファイルを読み込む際の記述です。
この記述を加えることで、CSSファイルでのスタイル適用が実現されます。
ちなみにこれは「相対パス」で記述しています。
「絶対パス」「相対パス」「サイトルートパス」など、幾つか種類があるので、知りたい人はGoogle先生に聞いて見てください!

CSSで見出しを作ろう

それでは、style.cssに記述していってみましょう。
何をするのかというと「見出しにスタイルを適用して見栄えを変える」といった内容です。

style.css
h1 {
    height: auto;
    margin: 40px 0 0 0;
    padding: 0;
    color: #000;
    font-weight: bold;
    font-size: 30px;
    border-top: 0;
    line-height: 1.5;
}

h2 {
    margin: 60px 0 35px 0;
    padding: 0 0 0 15px;
    font-size: 26px;
    font-weight: bold;
    border-width: 0 0 0 4px;
    border-style: solid;
    border-color: #0f5296;
}

h3 {
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 22px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #e6e6e6;
}

正しく記述が出来たら、ブラウザで表示させてみてください!
このような画面になるはずです!

*** ここに画像入れ込み ***

ここでは見出しの「h1タグ」に対して「colorプロパティ」でフォントの色を設定しています。

CSSでは様々な「プロパティと値」が用意されているので、興味がある方は調べてみると面白いですよ♪

JavaScriptとは

では、最後にJavaScriptについて簡単に説明していきます。

JavaScriptの主な使われ方は、Webページに動きをつけることです。
それ以外にも様々な活用方法があり、いろいろな場面で活躍しています。

・WEBページの動作
・WEBアプリ開発
・スマホアプリ開発
・ゲーム開発

ざっくり言うとこのような用途で使われています!
最近では「Node.js」というサーバーサイドの処理が出来る技術が出てきたりと、進化し続けているみたいですね。

ちなみに、JavaScriptとJavaを混同されがちですが、この2つの言語は全然違いますので要注意!
名前は似ていますが、全くの別物です!

JavaScriptでできることは幅広く、JavaScriptをマスターすれば幅広い分野で活躍することができます。

JavaScriptの書き方

では、実際にJavaScriptを使うには何をすれば良いのでしょうか?
・HTML上で動かす
・外部ファイルとして読み込む

この2パターンです。
先ほど作成した「index.html」に直接記述をすることも出来るし、外部ファイル「script.js(今回はこの名称だがファイル名は任意)」に記述してもHTMLファイルから読み込むことができます。

JavaScriptでスライドを作ろう

では、実際にJavaScriptの記述をしてみましょう!
例の如く、まずはHTMLファイルでJSファイルの読み込み記述を行います。

index.html
    <script type="text/javascript" src="js/script.js"></script>

これでJSファイルを読み込むことができるので、「script.js」にJavaScriptの記述をしていきます。

script.js
    alert("Hello World");

*** ここに画像入れ込み ***

ブラウザでページを表示させる際に、アラート文が出ます!

script.js
    document.write("Hello World");

このように書き換えてあげると、「Hello World」という文字列がページ内に書き込まれます。

このようにJavaScriptはブラウザ上ですぐに確認することができる他、ほとんどのブラウザに備わっている開発者用ツールなどでもコンソール時のエラー内容が表示されたりと、他のプログラミング言語に比べると比較的とっつきやすいので興味があれば色々調べてみてください。

でもこれだけじゃ面白くないですよね。
なので「slideToggle」というものを作ってみたいと思います。

まとめ

ずらずらと書いてきましたが、概要だけ掴んでいれば全く問題無いです!
深く学んでみたい人は、書籍やサイトなど世の中にたくさん転がっていますので、是非勉強してみてください^ ^

もっと知識がつくと
CSS3でグラデーション作ったり、JavaScriptでスライダーやlightboxを発動させたり、いろんな楽しいことが待っていますよー