HTMLとCSSの基礎を学ぶ上で初心者が意識をすべきこと

初心者の方が、Webプログラミング、Webデザインの基本を学んでいく上で、

気をつけて学習をしていくことで、後々の理解の向上などにも、

役に立つので、はじめに意識すべきポイントを把握しておきましょう。

HTMLの「構造化」を意識する

HTMLは「タグ」の集まりである

初心者の方が、HTMLを学習していく中で、
HTMLに色々なタグを追加して、表示を確認して、
タグの種類や表示を理解していきます。

そんな「タグ」をたくさん使いながら、
HTMLとして、タグの集まりとして、レイアウトを作ります。

もし、初心者の方で、「タグ」がわからなければ、
以下の記事を読んでみましょう。

「構造化」とは「階層」を意識すること

先ほど、説明した、「タグ」の集まりのHTMLですが、

このHTMLの「構造化」は、

  • どのような「タグ」を使っているか
  • どの「タグ」がどの「タグ」の中にあるのか

という事を意識しておく事が重要です。

この中でもとくに、

どの「タグ」がどの「タグ」の中にあるのか

という点は、意識する上で非常に重要なポイントなので、
より意識するようにしましょう。

この意識を持つ事で、

「タグ」の中にある「タグ」という状態 = 「階層」になっている

という事を無意識に考えれるようになるので、
まずは、意識してみる事から始めましょう。

構造化のシンプルな例

ここまで説明してきた、「構造化」に関しては、
シンプルな例を元に見ていきましょう。

例として、以下のシンプルな構造があります。

この構造で、「構造化」をどのように意識すれば良いかというと、

  • bodyタグの中に2つのdivタグがある
  • 2つのdivタグは同じ階層である

このように捉える事が大切です。

これはあくまでシンプルな例ですが、
実際にもっと複雑なHTMLになっても、

どのような構造になっているのか

という事を意識して捉える事は、
Webデザインの面でも重要なので、
学習を始める今の段階から意識して取り組んでみましょう。

HTML/CSSを書くときに「インデント」を意識する

インデントとはコードを読みやすくすること

初心者の方には、「インデント」とは、馴染みのない言葉だと思います。

この「インデント」とは、

半角スペースで、コードをみやすくする事

で、自分が書いたコードをより読みやすくする事ができます。

例えば、HTMLを例にすると、

<!DOCTYPE html> 
<html>
<head>
</head>
<body>
<div>
<div>
<img src="sample.png"/>
Sample Test 1
</div>
</div>
<div>
<div>
<img src="sample.png"/>
Sample Test 2
</div>
</div>
<div>
<div>
<img src="sample.png"/>
Sample Test 3
</div>
</div>
</body>
</html>

この読みにくいコードを「インデント」を意識して、
半角スペースを入れて読みやすくしてみます。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>
            <div>
                <img src="sample.png"/>
                Sample Test 1
            </div>
        </div>
        <div>
            <div>
                <img src="sample.png"/>
                Sample Test 2
            </div>
        </div>
        <div>
            <div>
                <img src="sample.png"/>
                Sample Test 3
            </div>
        </div>
    </body>
</html>

インデントを意識していない時よりも、
読みやすいコードに変わりました。

このように、「インデント」を意識する事で、
コードがより読みやすくなりますので、
最初の学習を始める時から、意識してコードを書くようにしましょう。

インデントでより「構造化」を意識しやすくなる

先ほど、インデントを意識する事で、コードが読みやすくなる事を説明しました。

このインデントですが、先程の内容も含めて、メリットとしては、

  • 読みやすいコードになる
  • 構造が理解しやすい

というメリットがあります。

このメリットの中でも、最初に説明した「構造化を意識する事」も踏まえて

構造が理解しやすい

という事が、初心者の理解促進にも非常に役に立ちます。

よく初心者の方が、自分の書いたコードを見ながら、

何がどうなっているかわからない

と嘆いているのをよく耳にします。

このように嘆かないためにも、「インデント」を意識して、
コードを読みやすく、構造化も理解しやすくしていきましょう。

完璧な理解を求めない

全ての設定を覚えようとしない

HTMLやCSSには、

非常にたくさんのタグや設定がある

ため、全てを把握して使いこなすことは、非常に難しいです。

そんな中で、

タグや設定を全て暗記しようとしない

ということは非常に重要です。

HTML/CSSをトライする中では、

  • 作りたいレイアウトをイメージする
  • レイアウトの中の要素を決める
  • 要素の実現方法を調べる

ということを行っていきましょう。

ここで、1つポイントとして抑えて欲しいことが、

実現したいことは、HTML/CSSに関しては、調べることができれば良い

ということ。

何も見ず、調べずに、スラスラとHTML/CSSを書ける必要はありません。

まずは、実現したいことを、

インターネットで調べ、試して動く状態にできる

というステップを繰り返していきましょう。

そうすることで、

何度も使う、同じようなタグや設定は、

少しずつ、無意識に頭に入っていきます。

これを繰り返すことで、

よく使うものは、調べるのも早く、すぐに使える

という状態にできます。

このように、まずは、完璧を求めすぎず、

調べながら、目的のレイアウトに近づけるようにトライしましょう。

Webレイアウトを確認するために必ず使う「ブラウザ」と「検証ツール」

Webのプログラミングやデザインを学んでいくときに、

「ブラウザは何を使ってますか?」

「ブラウザの検証ツールで確認してください」

のように言われることがあります。

Webの「超」初心者の方は、

このブラウザというものが何を指しているのかがわからないと思います。

今回はこの「ブラウザ」に関して見ていきましょう。

Webを動かすためのツール

HTML/CSSなどはこのブラウザで動かす

例えば、HTMLであれば、

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

このような中身を作ったファイルがあり、
sample.html
というファイルとします。

こういう感じですね。
ファイルの一覧でこのように見える状態です。

これを開くと、

このように、実際の表示を確認することができます。

この時に、表示するために、
開いているツールが「ブラウザ」と言います。

これを先程の例を色で囲んでみるとわかりやすいと思います。

この例で説明すると

  • 赤色:動かすためのツール=ブラウザ
  • 青色:動かすファイル=この例ではsample.html

このようになります。
色分けしてみると、イメージしやすいと思います。

実際、みなさんがインターネットを使おうとした時に

この「IE(インターネットエクスプローラ)」

この「chrome(クローム)」など、

無意識に使っていると思いますが、
これも

Webサイトを動かすツール

ですので、これらのことを

ブラウザ

と呼んでいます。

ブラウザの検証ツール

ブラウザには、Web用のファイルの中身などを確認するツールが隠されています。

先程、説明していた「ブラウザ」ですが、

Webを動かすためのツール

であることを理解頂いたと思います。

この「ブラウザ」ですが、

Web用のファイルをツールで表示させているので、
そのファイルの中身を解析しています。

そのため、この解析した結果を確認することができます。

具体的に説明すると、

  1. 「ブラウザ」でサイトを開く
  2. 右クリックしてメニューを表示
  3. 「検証」を押す
  4. 検証ツールが開く

この流れになります。

1:「ブラウザ」でサイトを開く

Chromeなどで開いているページのことです。

例えば、みなさんが既に開いているこのページのことですね。

2, 3:メニューを表示/「検証」を押す

右クリックすると、以下のようなものが表示されます。
「検証」をクリックしてください。

4:検証ツールが開く

先程の「検証」をクリックすると以下のように検証用のツールが開きます。
以下の赤枠の部分ですね。

これが「ブラウザ」に隠されている「検証ツール」です。

「超」初心者には、これが通常は非表示(隠されている)のため、
わかりにくいとは思いますが、実際に1度、表示してみると、
「このようなツールがブラウザには付属しているのか」
と理解頂けると思います。

CSSの色の設定方法はいくつかあり、どれでも良い

Webページで見栄えをつけるときに「色」を変えることはよくあります。
初心者の方でもWebページの見栄えの変更を試すときに、
「色」を変えることは、最初に試すかもしれません。

そんな「色」の設定方法は以下の3つのパターンがあります。

  • RGBで設定する方法
  • 6文字で設定する方法
  • 3文字で設定する方法
  • 英単語で設定する方法

この4パターンのどれを使っても問題ありません。
ただ、
・6文字で設定する方法
が比較的よく使われています。

詳しくは「16進数が…」などがありますが、
初心者の方は4パターンの方法があり、
どの方法でも大丈夫なことだけ覚えておいてください。

実際に他のサイトなどで、それぞれのパターンでの
色ごとの設定方法がまとまっているので、
そういうサイトを見ながら、好きな色を設定して見てください。

それでは、パターンの違いを見ていきましょう。

RGBで設定する方法

rgb(255, 255, 255)の形式で設定

このRGBを使用する方法は

.sample {
  color: rgb(255, 255, 255);
}

このように設定します。

このRGBの設定方法は2つのことを覚えておきましょう。

まず、1つ目は、RBGはそれぞれ、英語の略称で意味があること。

英語の略称と意味

  • R :Red :赤色の強さ
  • G :Green:緑色の強さ
  • B :Blue :青色の強さ

次に2つ目は、設定できる値は
0〜255
までの値を設定します。

そのため、以下のように設定することはありません。

.sample {
  color: rgb(777, 888, 999);
}

6文字で設定する方法

#FFFFFFの形式で設定

色を設定を6文字で設定するサンプルはこちらです。

.sample {
  color: #FFFFFF;
}

このパターンは初心者の方は、今後、他のサイトなどを見ると、
よく見かけるパターンだと思います。

3文字で設定する方法

#FFFの形式で設定

色を3文字で設定するサンプルはこちらです。

.sample {
  color: #FFF;
}

この方法は先ほどの6文字を省略した方法です。

初心者の方は
「2文字ずつに分割して、同じ文字なら1文字に省略できる。」
これだけ、覚えておきましょう。

具体的には、先ほどのサンプルと6文字のサンプルを比較すると
わかりやすいと思います。

  color: #FF FF FF;

 color: #F F F

このように同じ文字なら省略するのが3文字のパターンです。

英単語で設定する方法

redやblueなど、英単語で設定

色を英単語で設定するサンプルはこちらです。

.sample {
  color: red;
}

この方法は色の英単語を知っている方であれば、
設定しやすい方法だと思います。

色設定を確認してみよう

色設定方法は、

Webプログラミングの基礎と要点(クリックして移動)

のサイトの、

「Webプログラミングの基礎と要点」のサイト

この「CSSの基礎と要点」の「色設定」で具体的に確認できます。

是非、色を変えながら、実際の設定を確認して見ましょう。

Webプログラミングの中で、CSSを使うための3つの設定方法

WebページでCSSを使おうとする時に
以下の3つのパターンがあります。

  • HTMLの中にCSS用のタグを追加
  • HTMLのタグの中にCSSを追加
  • HTMLとは別にCSS用のファイルを追加

この3パターンがある事は頭の片隅に入れて下さい。

ただ、実際に使うのは

  • HTMLとは別にCSS用のファイルを追加

が多いです。

初心者の方は、このパターンを使うことをオススメします。

それでは、3パターンの違いを見ていきましょう

HTMLの中にCSS用のタグを追加

<style></style>タグを使う

まず、このパターンは、HTMLの中に
styleというタグを使って、その中にCSSを記載します。

<!DOCTYPE html>
<html>
  <head>
   <style>
     body {
       background-color: red;
     }
   </style>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

このようにstyleタグを使って、
HTMLの中に追加します。

   <style>
     body {
       background-color: red;
     }
   </style>

このような使い方ができますが、実際は別ファイルにまとめたりすることが多いので、あまり使われません(このような方法もあることを頭の片隅に入れておくで大丈夫です)。

HTMLのタグの中にCSSを追加

タグの中にstyle=””で追加

これは、上記のstyleタグとは違って、
HTMLのタグの中にstyle=””で追加します。

<!DOCTYPE html>
<html>
  <head>
   <style>
      <link rel="stylesheet" type="text/css" href="sample.css">
   </style>
  </head>
  <body style="background-color: red;">
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

このようにHTMLの中に

 <body style="background-color: red;">

と記載します。

この方法は、初心者の方には、他のサイトをみると、たまに見かけると思いますが、この次に説明するパターンが主流なので、そちらで覚えてもらえると良いかと思います。

HTMLとは別にCSS用のファイルを追加

CSSだけのファイルを作ります

この方法はCSSのみのファイルを使います。

シンプルな例として、
HTML = index.html
CSS = sample.css
の2つのファイルを例とします。

index.htmlというHTMLファイルの中身です。

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <div class="class_div1">1つ目の要素</div>
    <div class="class_div2">2つ目の要素</div>
  </body>
</html>

この中で、
「sample.cssというCSS用のファイルを使いますよ」
という設定が、この部分です。

<link rel="stylesheet" type="text/css" href="sample.css">

この部分の記載があるので、sample.cssという別ファイルを使うことができます。

このように設定した場合、sample.cssでは、今までの説明で出てきたようなCSSを使います。

 body {
   background-color: red;
 }

このようにHTMLとCSSを分けて、使うことが主流ですので、Webプログラミング初心者の方には、まずは、このパターンを覚えて頂ければと思います。

ちなみに、この別ファイルで行うパターンをイメージしてもらえるように、CSSの別ファイルを複数設定した場合を例にイメージを説明します。

こちらの例は、CSSファイルとして
・sample1.css
・sample2.css
の2つのファイルを使っています。

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="sample1.css">
   <link rel="stylesheet" type="text/css" href="sample2.css">
  </head>
  <body>
    <div class="class_div1">1つ目の要素</div>
    <div class="class_div2">2つ目の要素</div>
  </body>
</html>

この内容の時に実際のフォルダ(ファイルの置き場所)はこのようになります。

これを実際のHTMLファイル内の呼び出しイメージはこちらです。

いかがでしょうか。
これで、初心者の方もCSSを別ファイルで管理するイメージを持って頂けると思います。

このパターンでCSSを別ファイルで管理してWebプログラミングを進めていくことで、HTMLとCSSの関連性もよりわかってくると思います。
あとは少しずつ、楽しみながら進めていきましょう。

CSSの設定は「AのBをCにする」をまずは理解しよう

Webプログラミングの中で、CSSで見栄えを設定していきますが、CSSの設定方法として、「プロパティ 」と「値」をそれぞれ、設定していきます。
ここでは、この2つを覚えましょう。

CSSの設定方法

「AのBをCにする」で設定

Webプログラミングの初心者の方には、
「AのBをCにする」
と言われても、なんのことかわからないと感じるかもしれませんが、とてもシンプルなので、簡単な例でみていきましょう。

body {
  background-color: red;
}

これを例にすると、

body

background-color(背景)

red(赤色)

にする。

このように見ると、非常にシンプルでわかりやすいと思います。

先ほどの、CSSを「AのBをCにする」で置き換えて見ると、

body {
  background-color: red;
}

このCSSは

A {
  B: C;
}

と考えることができます。

プロパティ と値

「BをCにする」がプロパティ と値

先ほど、説明したシンプルな例で

A {
  B: C;
}

B = プロパティ
C = 値

と読んでいます。

A {
  background-color: red;
  color: blue;
}

あとはこのように必要に応じて、B(プロパティ)とC(値)を増やしていくことになります。

上記の例は、Aに対して

「BをCにする」

background-color(背景)を red(赤色)にする
color(文字色)を blue(青色)にする

この2つを設定していることになります。

いかがでしたか。
シンプルな例でみていくと、「プロパティ 」と「値」に関しても、理解して頂けると思います。

この2つが「AのBをCにする」ことが理解できれば、あとは「B」と「C」の組み合わせを色々と試しながら覚えていくだけです。

この辺りは、楽しみながら覚えていきましょう。

HTMLのバージョンでタグが増えるので、使えるものから使おう

HTMLを使い始めていくと、色々なタグを覚えていくことになりますが、
まず、HTML自体のバージョンについて理解して頂けると、
世の中のソースでよく使われているタグや、
あまり使われていないタグ、
そして、他の人に聞いた時に
「〜というタグを使った方がよい」
と言われる意味がわかることがあります。

ですので、ここで基本的な部分について説明します。

HTMLのバージョンって?

現在のバージョンは「5」

みなさんがHTMLを始めて、ネットで検索すると、
「HTML」や「HTML5」という記載を見かけると思います。

Webプログラミング初心者の方に
「この2つは同じものなの?」
と質問頂くことがあります。

これは、結論を先に言うと
「同じもの」「ただ、現在のバージョンをつけたもの」
ということになります。

なぜ、そういう言い方をするかというと、
Windowsであったり、iOSであったり、
みなさんがお使いのものでも、
Windows8やWindows10、
iOS10, iOS11, iOS12
など、新しいものが数字が増えていくのは
ご存知かと思います。

これと同じように、HTMLも1から始まり、
現在は5になったと考えて頂ければ、
わかって頂けるかと思います。

バージョンの違いは?

バージョン「5」で増えたタグがあります

別の記事でまとめていきますが、
バージョンが「5」になって増えたタグが存在します。

  • headerタグ
  • footerタグ
  • sectionタグ

など。
これ以外にもありますが、
Webプログラミング初心者の方には、
バージョンごとに、より便利なタグが増えていく
という認識を持って頂ければ良いかと思います。

ちなみにそんなに頻繁にHTMLのバージョンが変わることはありません。

全て最新のタグを使うべき?

使える範囲で使っていきましょう。

これまでの説明で、
「バージョンが新しくなったから、
 バージョン5のタグを使うべき」
と考えて頂ける方も多いかと思います。

この点に関しては、Webプログラミング初心者の方には、
使える範囲で、新しいタグも使う
というスタンスで良いかと考えています。

なぜかというと、Webプログラミングを進める中で、
このサイト以外にも、色々なサイトで、HTMLの書き方について調べると思います。

そんな時に、同じことをやろうとしても、
使われているタグが違う
ということがよく出てくると思います。

そういう時に、
「どっちが正解なのか?」
と悩むのも良いですが、
「どちらでも良さそうだから、新しいタグを使ってみよう」
という姿勢で、Webプログラミングを進めて頂けると良いなと考えています。

このように
「バージョン」によって、追加されたタグがある
ということを頭の片隅に入れて頂けると、
インターネットで、HTMLについて調べる時に、
困ったり、躓いたりすることが、少しでも減れば良いなと思います。

この「バージョン」の事は頭の片隅に入れて、
Webプログラミングは、
トライ&エラーをたくさんして、
楽しみながらやっていきましょう。

CSSを設定する対象は「タグ」「ID」「class」の3つであることを覚えておこう

CSSの超基本としては、

・タグ
・クラス
・ID

は、学習をしていく中で、よく使うことになります。

それぞれ、いろんな記事を読んだり、
説明が載っているドキュメントや書籍などにも、
必ず出てくるので、慣れながら覚えていきましょう。

それでは説明していきますね。

タグ

HTMLの「タグ」への見栄えを設定

HTMLのタグへの見栄えを設定するために、HTMLと同じタグを設定します。

例えば、以下のHTML。

<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

この中の以下のBODYタグの見栄えをつけたいとします。

<body>
  :
</body>

その時に、CSSでは、同じHTMLタグをそのまま使います。
具体例としては、こちらです。

body {
  background-color: #ffffff;
}

このように、HTMLタグに見栄えをつけたい時は、そのままHTMLタグと同じものをCSSに使います。

これは、シンプルでわかりやすいと思います。

クラス

独自のクラス名をつけて見栄えを設定

HTMLの中で、divタグなど、1ページの中で何回も使ったりします。
先ほど、お見せした、以下のようなHTMLを例にします。

<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

このHTMLに以下のCSSをつけると、どうなると思いますか。

div {
  color: red;
}

実際に設定して見ると、こちらのようになります。

同じdivタグを使っているから、このようになるのは、理解頂けると思います。

そういう時に、「クラス」というものを設定して、それぞれに対して、CSSで見栄えをつけることを行います。

もう1度、先ほどのHTMLを少し変更して、「クラス」の例を示します。

まず、HTMLがこちらです。

<html>
  <head>
  </head>
  <body>
    <div class="class_div1">1つ目の要素</div>
    <div class="class_div2">2つ目の要素</div>
  </body>
</html>

先ほどと違うところは、divそれぞれにclassというものが記載されています。


class=”class_div1

class=”class_div2

この中の、class_div1class_div2

が「クラス名」と呼ばれます。

このクラス名を、CSSでは、
「.」(ドット記号)を先頭につけて利用します。
これを忘れると、最初に説明した「タグ」と同じ扱いになってしまうので、うまく見栄えが変わりません。

ちなみにクラス名を利用したCSSの例としては、こちらです。

.class_div1 {
  color: red;
}
.class_div2 {
  color: blue;
}

実際に見た目はこのように変わります。

ID

独自のID名をつけて見栄えを設定

このIDに関しては、先ほど説明した「クラス」と考え方は基本的に同じです。

以下のように、「クラス」とおなじように「ID」を設定します。

<html>
  <head>
  </head>
  <body>
    <div id="id_div1">1つ目の要素</div>
    <div id="id_div2">2つ目の要素</div>
  </body>
</html>

このID名を、CSSでは、
「#」(シャープ記号)を先頭につけて利用します。
これを忘れると、最初に説明した「タグ」と同じ扱いになってしまうので、うまく見栄えが変わりません。
この辺りも「クラス」と同じような使い方になります。

ちなみにクラス名を利用したCSSの例としては、こちらです。

#id_div1 {
  color: red;
}
#id_div2 {
  color: blue;
}

この例も、先ほどと同じように、実際に見た目はこのように変わります。

このように「クラス」と同じように「ID」を使用できるので、CSSの中で、「.」(ドット記号)なのか、「#」(シャープ記号)なのか
だけ、注意して頂けると問題なく扱えると思います。

どのような時に「クラス」、どのような時に「ID」なのかは、別の記事でまとめようと思います。

まずは、超基礎として、CSSについては、この3つを覚えて頂ければと思います。

HTMLとはタグの集まりであることを把握しておこう

HTMLに関しては、「タグ」という呼び名をまずは覚えてください。
この「タグ」というものを色んな種類覚えていき、Webページの構造を作っていくことになります。
ですので、「タグってこういうものを呼ぶんだね」くらいで覚えてもらえれば良いかと思います。

頭の片隅に入れてもらえれば、実際にWebプログラミングをしていく中で、
その用語が頭に定着していくと思います。

タグ

Webページの構造を作る1つの要素

HTMLは、以下の要素があったときに

以下のように記載します。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

このようにHTMLのなかに記載していく、
<英字></英字>
の形式で書かれているものを「タグ」と呼びます。

例えば、以下なら「HTMLタグ」

<html>
  :
</html>

また、これは、「Bodyタグ」と呼びます。

<body>
  :
</body>

このように、「タグ」と言っても、

  • HTMLタグ
  • HEADタグ
  • BODYタグ
  • DIVタグ

など、他にも様々なタグがあります。

この辺りのタグの種類などは、Webプログラミングをしながら、
少しずつ、覚えていってもらえれば良いかと思います。

Webプログラミングでは、HTML/CSS/JSの3つをまずは学ぼう

Webプログラミングを始めようとして、超初心者と思っている方にも挫折して欲しくないので、本当に基本的なところからいきましょう。
まずは、よく出てくる以下の3つを理解しましょう。

HTML

表示するページの構造をつくるもの

HTMLはページ内の構造をつくるために使います。
簡単な例で行くと、HTMLは以下のように記載します。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

これがどういう構造なのかというと、
bodyの中にdivというのが2つ配置されている状態です。
図で言うとこう言う感じですね。


色々と作って行くと、より構造が複雑になっていきますが、HTMLとして行いたいのは、これの量が多いと思って頂いて大丈夫です。

CSS

ページの見栄えをつけるもの

CSSはページの色や配置場所などを変更して、見栄えを整えるために使います。
先ほどのHTMLのときのサンプルだと、

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

これは、見栄え(色など)を何も変更していないので、このようになります。

これに見栄えとして、背景色と色をCSSでつけてみると、表示がこのように変わります。


このように、色などを見栄えを変えるために使うものがCSSであるということを覚えてもらえたら良いかと思います。

ちなみにCSSに関しては、

  • 見栄えのつけ方の方法はいくつかある。
  • 最近は動きもつけることができる。


くらいに覚えておいてください。
これも、別記事で、まとめていきますね。

javaScript

ページに動きをつけるもの

javaScriptではページ内で、動きをつけるために使います。

例えば、次のボタンを押してもらうと、アラートと呼ばれるものが開いて、「アラートのテストです。」と表示されます。

これはあくまでもシンプルなものですが、基本的にはHMTLで構造を作り、CSSで見栄えを整え、javaScriptで動きをつけていくと覚えて頂けると良いかと思います。

どうでしたか。
Webページの作成でよく使われる

  • HTML
  • CSS
  • javaScript

の3つがどういうものか、ざっくりで良いのでイメージできたでしょうか。
Webプログラミングを進めて行くと、もっと複雑になっていきますが、あくまでもこの要素の組み合わせで作られるので、この3つを少しずつでも把握していただければと思います。

Webプログラミングを始める時のオススメのエディタは「Visual Studio Code」

Webプログラミングを始めたいと思った時に、
何を準備したら良いんだろうか。
特別なものはいるのだろうか。
そんなことを色々と考えてしまいますよね。
そんな中で、基本的にWebプログラミングを始める時にはエディタを準備しましょう。

エディタって何?

ファイルを編集するために使うツール

Webプログラミングをして行く上で、
HTMLやCSSなど、必要なことをファイルに記載して行く必要があります。
例えば、HTMLなら、こういう内容をファイルに記載する必要があります。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    Simple Html
  </body>
</html>

このようなファイルを修正するためのツールが
“エディタ”と呼ばれるもので、
個人的にオススメさせて頂いているのが、
Visual Studio Code
です。

Visual Studio Code

まずはダウンロード

はじめにダウンロードするサイトを紹介します。

https://code.visualstudio.com/download

こちらから、ご自身のパソコンに合うもの
を選んでダウンロードしてください。
※ダウンロード後にダウンロードしたものを実行するとインストールすることができます。

Visual Studio Codeは何が良いの?

作っているソース(書いている内容)が見やすく、読みやすくなる。

プログラミングを始めると色々とソース(ファイルに書く内容のこと)が増えてくると思います。
そんな時に自分が書いている内容に色をつけたりして見やすくしてくれます。
自分で見やすい色などに変更することもできるので、自分なりのエディタ内の配色を決めたりすることができますよ。

フォルダ構成もわかりやすい

Webプログラミングを始めると、

  • HTML(構造を作るもの)
  • CSS(装飾をつけるもの)
  • javaScript(動きをつけるもの)

など、セットでやっていくことが増えていきます。

そんな中で、フォルダの構成などがわかりにくいと、
どうなっているのかわからず、混乱することがあります。
そういう時に、本当に助けてもらうことがあります。

例えば、以下のようなsampleフォルダでプログラミングを頑張っているとします。

それを、Visual Studio Codeで開くと

このように見やすくなります。
上記はsampleフォルダを開いて、
その中の、”index.html”ファイルを右側に開いている例です。
このように、フォルダ構成がツール上でわかりやすくみえると、プログラミングも進めやすくなりますよ。

色々なプログラミング言語に対応している

上記でも少し説明しましたが、

  • HTML(構造を作るもの)
  • CSS(装飾をつけるもの)
  • javaScript(動きをつけるもの)

など、Visual Studio Codeは対応しており、
それ以外のプログラミングの言語も対応しています。

ですので、他のプログラミング言語もやりたくなった、
やる必要が出てきた時も対応ができます。

独学向け(勉強方法)
独学向け(プログラミング)
独学向け(Webデザイン)
独学向け(javaScript)
独学向け(PHP/Laravel)
独学向け(Ruby/Rails)