Language(ハイパーテキスト・マークアップ・ランゲージ)」。略して「HTML」といいます。簡単に言うと普段みなさんが目にするWebページの土台を作るための言語ですね。言語といっても、日本語や英語のような自然言語ではなく、「マークアップ言語」と呼ばれるコンピュータに文書構造を伝える命令を出す為の言語になります。Webページは、HTMLでマークアップされることによって、見た目が形成されます。HTMLのバージョンHTMLといっても、様々なバージョンがあります。9以降のバージョンになりますので注意してください。そのため、数年前まではHTML4やXHTML1.0を使うことが多かったのです。インターネット上にはHTML5以外のバージョンで作成されたWebサイトも数多く存在しています。そこで、どのようにしてHTMLのバージョンを使い分けるのかという疑問が生まれてくるかと思いますが、HTMLのバージョンはHTMLファイル内の「宣言文」によって決まります。"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTMLファイルを開くと、このような記述が一番上にあるので、これを見てどのバージョンを使用しているのか判断します。ちなみに、XHTML1.0での宣言方法は「厳密型」や「フレーム設定型」など複数の宣言方法があるので興味がある方は調べてみてください。例として上記で紹介している宣言は、「以降型」と呼ばれる宣言方法です。HTMLの書き方さて、次は「HTMLの書き方」をご紹介していきます。HTMLを記述していくには以下のものが必要です。・PC・テキストエディタ(メモ帳でも可)・Webブラウザこれだけあれば、今すぐにでもHTMLを記述して、仕上がりを確かめることができます。HTML、CSS、Javascriptを記述してブラウザで確認するには「ディレクトリ」を用意する必要があります。言っても、一つのhtmlファイルのみで完結する方法もあるのですが、ディレクトリを作成する事が一般的なので今回はその方法で進めていきます。ディレクトリを用意した後、HTMLファイルのソースに、CSSファイルとJSファイルを読み込むための記述をして初めて確認できるようになるのですが、その辺りは順次解説していきます。デスクトップでもどこでも大丈夫なので、自分の管理しやすい場所にディレクトリを作成してください。今回作成するディレクトリの構成は以下のとおりです。【ディレクトリ階層】さて、準備が整ったら早速次のソースを記述してみましょう。</footer></body></html>記述が終わったら、保存をしてブラウザで確認してみてください。CodePen.このように出てきたら、正しく反映されています。何をしているかというと、ページに「ヘッダー(headerタグ)」「見出し(hタグ)」「フッター(footerタグ)」を反映させるための記述をしています。ここで大事なのは、正しい文書構造を意識して、適切なマークアップをするということです。初めのうちは文書構造など意識せずに、「ひたすらにHTMLを書いてみては表示されることを確認する」のが一番です。CSSとは上でHTMLとは何かを学びました。次にCSSとは何かを学んでいきましょう。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を記述してみたいと思います。href="css/style.css">何をしているかというと、HTMLファイルからCSSファイルを読み込む際の記述です。この記述を加えることで、CSSファイルでのスタイル適用が実現されます。ちなみにこれは「相対パス」で記述しています。「絶対パス」「相対パス」「サイトルートパス」など、幾つか種類があるので調べてみてください。CSSで見出しを作ろうそれでは、style.cssに記述していってみましょう。何をするのかというと「見出しにスタイルを適用して見栄えを変える」といった内容です。CodePen.ここでは次のような設定をしています。・見出し横にボーダーをつけるこのように、CSSでは様々な「プロパティと値」が用意されています。JavaScriptとはでは、最後にJavaScriptについて簡単に説明していきます。JavaScriptの主な使われ方は、Webページに動きをつけることです。それ以外にも様々な活用方法があり、いろいろな場面で活躍しています。・ゲーム開発ざっくり言うとこのような用途で使われています!最近では「Node.js」というサーバーサイドの処理が出来る技術が出てきたりと、進化し続けているみたいですね。ちなみに、JavaScriptとJavaを混同されがちですが、この2つの言語は全然違いますので要注意!名前は似ていますが、全くの別物です!JavaScriptでできることは幅広く、JavaScriptをマスターすれば幅広い分野で活躍することができます。JavaScriptの書き方では、実際にJavaScriptを使うには何をすれば良いのでしょうか?・HTML上で動かす・外部ファイルとして読み込むこの2パターンです。先ほど作成した「index.html」に直接記述をすることも出来るし、外部ファイル「script.js(今回はこの名称だがファイル名は任意)」に記述してもHTMLファイルから読み込むことができます。JavaScriptでアコーディオンメニューを作ろうでは、実際にJavaScriptの記述をしてみましょう!アコーディオンメニューというのは、親メニューをクリックしたら、子メニューが表示される、あれです。先ほど作成したそれぞれのファイルに記述していく形で進めていきます。「script.js」読み込み部分の真上に「jQuery」を読み込むための記述をします。src="https://code.jquery.com/jquery-3.2.1.min.js"></script>この記述が無いと、jQueyを記述したところで意味がないので注意してください。jQueryの読み込み記述は「script.js」よりも先に読み込ませないといけません。*/」のコメントの下にアコーディオンメニューのスタイルを記述していきます。*/そして最後にJSファイルにjQueryの記述をしていきます。JSファイルにjQueryで「ある要素をクリックしたらメニューを開閉させるメソッドを呼ぶ」記述をするこうなります。まとめずらずらと書いてきましたが、概要だけ掴んでいれば全く問題無いです。深く学んでみたい人は、書籍やサイトなど世の中にたくさん転がっていますので、是非勉強してみてください。(2)担当者に相談する広告運用やSEO、解析・サイト制作などに関するお悩み・ご提案を受けつけております。下記のボタンからお気軽にご連絡ください。お問い合わせ無料ebookデジタル業界に関わる幅広いニュースやホットな情報を毎月お届けしています。購読をご希望の方は下記ページからご登録ください。