「HTML5/CSS3入門」


はじめに

JavaScript/jQuery超入門講座【第0回】です!今回はHTMLをまだご存じない方を対象に、JavaScriptではなくHTML5/CSS3の初歩を解説します。

道具の準備

HTMLはメモ帳などのテキストエディタでも書くことができますが、機能が非常に貧弱なので、まずは「使える」テキストエディタをダウンロードするところからはじめましょう。

おすすめのテキストエディタは以下の通りです。

Notepad++(海外では特に人気!初心者には扱いやすいかも。しかしATOMエディタには機能が劣る)

⇒ダウンロードURL:https://notepad-plus-plus.org/

ATOMエディタ(超高機能で便利なエディタ、最近とても流行っている)

⇒ダウンロードURL:https://atom.io/

Visual Studio Code(Microsoft製の高機能無料エディタ。HTMLやJavaScriptの入力補助はとっても便利!)

⇒ダウンロードURL:https://www.visualstudio.com/downloads/

ATOMエディタの設定

ATOMエディタはそのままでは英語表記ですし、機能も限られています。ATOMエディタにはパッケージというものが存在し、これを追加でインストールすることで機能を増強できます。以下におすすめのパッケージを紹介しておりますので、追加してみて下さい。尚、ATOMエディタへのパッケージのインストールはATOMエディタ内から行います。

パッケージのインストール方法

[File]⇒[Setting]⇒[+install]と遷移すると、以下のような画面になります。

atom_editor

検索欄にパッケージ名をコピペしてインストールして下さい。

おすすめパッケージ

  • japanese-menu(ATOMの日本語化をするパッケージ)
  • autocomplete-js-import(JavaScriptの入力を補助してくれるパッケージ)

尚、パッケージをインストールした場合は念のためATOMエディタを再起動して下さい。

HTML5/CSS3入門

HTMLはあるテキストの意味を明らかにするために使われます。CSSはHTMLで作成した文章のデザインに使われます。

例えば以下の例を見て下さい。

単なる「JavaScriptの概要」というテキストが<h1></h1>で囲まれています。このよな<●>となっているものを「タグ」と呼びます。h1タグは、HTML文章の「大見出し」を意味します。

このようにテキストを<●>テキスト</●>といった具合に、タグで囲むことで、そのテキストに意味を持たせるのです。尚h1タグを例にとれば、<h1>を開始タグ</h1>を終了タグと呼びます。終了タグには</h1>のようにスラッシュ(/)が入っていることに注意して下さいね。

HTML5とは

HTMLには長い歴史があります。ついちょっと前までは、HTML4.x系が主流でしたが、現在ではHTML4.x系を大幅にバージョンアップしたHTML5が主流になりつつあります。

CSS3とは

HTMLは文章に意味を与える役割が中心です。例えば、<p>HTML5は素晴らしいですね。</p>とした場合、<p></p>で囲まれた部分は、見出しに対する本文の意味になります。<h1></h1>は見出しでしたね。つまりこういうことです。

上記の例は、ちゃんと、見出しと本文という構成になっていますね。

一方、CSS3はデザインを担当するもので、HTMLとセットで用いられます。CSS3では、例えば文字の色や大きさを変えたり、WEBサイトの背景色を設定したりします。

最も基本的なHTML5の構成

この骨組みを元にHTNLタグを追加したりCSS3で、HTMLドキュメントを装飾していきます。

コメントを残す

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

CAPTCHA