作成日:2021/04/12 更新日:2021/12/02

#1 Webサイトを作る準備

まず、プログラミングについて

実はプログラムはみなさんが小さい頃から慣れ親しんでいます。
音楽会や運動会のプログラムといったふうに、あるイベントの演目などの構成を記したもののことです。
最初に50m走、次に玉入れ...最後にダンスという感じです。結婚式とかキャンプに行くとか、けっこう何でもプログラムです。

コンピューター・プログラミングの場合でも、まずは同じ考え方でOKです。
写真をアップして誰でも見れるようにする。イイねが押せる。シェアできる。そんな内容にしよう! と考えたものがプログラム。 で、そのやりたいことをPCやスマホに表示させるために作文を書くことがプログラミングです。
`表示して`とか`削除して`とか`もし削除されたらここを赤くして`など、 たくさんの命令たちを順番に組み合わせて作文するような感覚でつくっていきます。


例えばWebウェブ サイトを作るろうと思ったとして、作るための道具は2つです。
ひとつは表示させる画面そのものであるブラウザというアプリケーション電子的なツール。iPhoneで言えばSafariというアプリのことです。 もう一つは、その画面に表示させるために必要なプログラムを書いていくテキストエディタ電子的なノート、この2つです。

意外ですが入門でやるような簡単なWebサイトを作るときはプログラミング言語は使いません。マークアップ言語を使って作文していきます。 この2つの違いは計算があるかないかの違いです。
ワードとエクセルを使ったことがある人はピンとくるかもしれませんが、 プログラミング言語はエクセルで、マークアップ言語はワードで文章を作るようにWebサイトを作っていきます。

テキストエディタに作文ソースコードを書いていく作業のことを コーディングcordingとかコードライティングcord writingといいますが、 いろんな言葉があると使い分けがムズかしいので、全部まとめてプログラミングprogram + imgといわれています。

Webサイトを作るためにブラウザとテキストエディタを用意します。

いずれも無料で使うことが可能です。作った人たちに感謝🙏🏻

ブラウザについて

ChromeクロームFirefoxファイヤーフォックスや などいくつかブラウザがあります。ここではChromeを使って説明します。
Chromeダウンロードサイトへ

テキストエディタについて

Visual Studio Codeビジュアル スタジオ コードがコーディングの標準アプリとなっています。他には atomアトムsublimeサブライム、 などのテキストエディタがあります。
Visual Studio Code ダウンロードサイトへ

※紫のアイコンのVisual Studioと間違わないように気をつけましょう。青いアイコンのVisual Studio Codeをダウンロードしてください。


▼Visual Studio Codeの設定

zipファイルをダウンロードしたらダブルクリックで解凍し、アプリケーションフォルダに移動させます。

開くをクリックします。

①左の「機能拡張」のアイコンをクリックすると、すぐ右側にプラグイン名を検索入力できます。
以下のプラグインを入力して、②インストールボタンを押してインストールします。
・Japanese Language Pack for VS Code
・Auto Close Tag
・Auto Rename Tag
・Bracket Pair Colorizer
・Color Info
・Highlight Matching Tag

ブラウザに表示させたい内容を、テキストエディタに記述します

新規ファイルに以下の「あいうえお」を記述して、ブラウザで確認してみましょう。

あいうえお


※映像ではフォルダに入れていませんがindex.htmltestフォルダに入れましょう。
Webサイトを作るためのファイルの名前はxxx.htmlといったように.html 拡張子かくちょうしをつけた htmlエイチ ティー エム エルファイルを作ります。
※拡張子はファイルの種類を識別させるための記号のようなものです。.jpg.pngなど見たことあると思いますがあれと同じです。
※htmlは、Hypertext Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。

htmlファイルをブラウザにドラッグ&ドロップすることで、ファイルの内容を表示できます。
自分のパソコン内(ローカル)で制作しているときにはこの方法で確認します。

#2 Webサイトはhtmlとcssで作る

htmlファイルは「枠」を作り、cssファイルは「装飾そうしょく修飾しゅうしょく」を担当します。


※htmlファイル側にcssファイルを読み込ませる指示が必要なので、まだこの時点では上記のようには反映されません。
※色は#FFFF00のような16進数しんすうカラーコードで 指定しますが、後ほど説明します。
cssファイルに「文字の色は黄色にする。枠の幅を200pxにする。背景の色を青色にする。」という特性・装飾を書きました。
特性・装飾とは、身長170cmで男性で… というような捉え方でOKです。

このように「style.css」といった装飾を指示する cssシー エス エス ファイルというものを作り、枠の形を指示するhtmlファイルとあわせてWebサイトを作っていきます。

※cssは、Cascading Style Sheets(カスケーディング スタイル シート)の略です。

#3 htmlとcssの決まりごと

htmlとcss、2つのファイルの関係と決められた名称

html書類ではデザイン要素(写真や文字)を枠で囲いその枠を積み木のように配置することで画面を構成します。 その枠(積み木)のひとつひとつに役割りを持たせるため タグ と呼ばれる記号( < >やまかっこで囲われた文字)を使い写真や文字を、開始タグと終了タグではさみます。
タグの種類はあらかじめいくつか用意されていますので選んで書いていきます。
css書類ではhtmlのタグに対して操作したい内容を セレクタ を使って指示させます。
{ }なみかっこで囲います。 { }の中に、役割りの指示である プロパティ という、特性をもたせるための命令文を書きます。
プロパティにはを設定します。 :コロン;セミコロンで値をはさみます。
htmlのタグと同様、cssのプロパティもあらかじめいくつか用意されています。

#4 htmlは枠というブロックのパズル

枠で構造体を作る

htmlでいう「枠」とはブロックのようなものです。 ブロックを積み上げたり、横においたり、中に入れたり… 様々な形をもたせて「構造体」を作っていきます。

ホームページは 積み下げて かたちを作っていきます。


こんなイメージでもいいかも?

必ず必要な枠(タグ)

<html> 〜 </html>一番外側の枠です。
<head> 〜 </head>head(頭)。画面に表示させない、機能の部分を入れる枠です。
<body> 〜 </body>body(体)。画面に表示させる部分を入れる枠です。

絵にするとこんな感じです

要素を囲うための枠(タグ)

<div> 〜 </div>division(区分)。 汎用的はんようてきな枠で、特に役割のない枠に使います
<p> 〜 </p>paragraph(段落)。文章のかたまりを入れるための枠
<span> 〜 </span>span(長さ)。文字を囲うときによく使う。
<h1> 〜 </h1>heading(見出し)。見出しの文字を囲う。h1(強い)からh6(弱い)まであります。
<table> 〜 </table>table(表)。表を作るときに使う。
<img>画像を表示させるときに使います。閉じタグはありません。
<section>や<article>などhtml5で導入された新しいタグ
htmlでは枠のことを「タグ」と呼びそれぞれ役割をもたせています。
タグは100程度ありますが一度にすべて覚える必要はありません。CBCで出てくるタグをその都度覚えてくれて大丈夫です。
よく使うタグだけだと20〜30程度です。小学1年生で覚える漢字は80字。小学3年生で覚える漢字は200字。中学1年生で出てくる英単語が500ぐらいなので、それに比べたら簡単ですね!

#5 htmlでの枠の使い方と特性

開いているindex.htmlを以下のように書き換えて、ブラウザでどのように表示されるか見てみましょう。
ブラウザで確認するには再読み込みリロードして確認します。Macの場合は⌘+Rでできます。

<html>
  <head>
    <title>練習</title>
  </head>
  <body>
   <div>
      あいうえお
   </div>
  </body>
</html>

よく起きるミスとしては、閉じタグがなかったり、閉じタグが親要素の枠を超えて指定してしまったりなどです。

半角2文字や4文字で枠の入れ子がわかりやすいようにインデント(字下げ)します。

複数の要素をいろんなタグで囲ってみましょう。

開いているindex.htmlを以下のように書き換えて、ブラウザでどのように表示されるか見てみましょう。

<html>
  <head>
    <title>練習</title>
  </head>
  <body>
    <div>
      おはよう
    </div>
    <p>
      こんにちは
    </p>
    <span>
      さようなら
    </span>
    <span>おやすみ</span>
  </body>
</html>
解説

divpタグのエリアは「画面の横幅いっぱいまで」で「次の要素は下に行く」。
spanタグは「中の要素の幅まで」で「横並びになる」と違いがあるのがわかります。
ここでは、タグの種類によって、表示される範囲が違うのだなということが理解できればOKです。

#6 cssでデザインしてみる

枠(要素)をデザインしてみる

開いているindex.htmlとstyle.cssを以下のように書き換えて、ブラウザでどのように表示されるか見てみましょう。

<html>
 <head>
  <title>練習</title>
  <link href="css/style.css" rel="stylesheet">
 </head>
 <body>
  <div>
   おはよう
  </div>
  <p>
   こんにちは
  </p>
  <span>
   さようなら
  </span>
  <span>おやすみ</span>
 </body>
</html>

div{
  height:100px;
  background-color:#d9e021;
}
p{
  width:70%;
  height:50px;
  background-color:#f9b9d5;
  text-align:center;
}
span{
  border: 1px dotted #f9b9d5;
  font-family:serif;
}
結果

cssファイルの指定が反映されました。
解説

cssフォルダ内にあるstyle.cssをhtmlに読み込むように指示してます。


testフォルダ内の中身はこの様になっているはずです。 href属性タグのcss/style.cssとは「cssフォルダ内のstyle.cssを読み込みますよ」という意味になります。
各セレクタにあらかじめ用意されているプロパティと、それぞれに「値」を入れていきます。値は「 pxピクセル%パーセント remレム vwビュー ウィ(ド)ス などそれぞれ決められた単位があります。色指定は#で始まる6桁の数字で表現します。
linkタグに、半角を空けて hrefエイチレフというものがあります。これは「属性タグ」と呼ばれるもので、主となるタグを補足するものです。
hrefは (hypertext referenceハイパーテキスト リファレンス)の略で、「ハイパーテキストを参照(リファレンス)する」という役割をもたせます。 つまり、他のファイルを読み込むという意味です。
relレルは (relationリレーション)の略で「関係」の意味です。どの種類のファイルを関連つけるかを指定します。

#7 cssでデザインする時のプロパティ

枠または、その中の要素を装飾するときに使うプロパティのほんの一例です。配置についてのプロパティは多少難しいですが、おいおい解説していきます。
ここでは「そんなプロパティがあるんだな」程度でOKです。★は比較的わかりやすいですが、★★★は少し難しいのでしっかり学習しましょう。

★枠のかたちに関するプロパティ

widthウィズ 要素の幅を指定します。単位はpxや%やvwなどを使います。
width: 100px;
heightハイト 要素の高さを指定します。単位はpxやvhなどを使います。
height: 50px;
backgroundバックグラウンド 要素の背景色や画像の配置を指定します。
background-color: #FF0000;
borderボーダー 枠線の色や形を指定します。
border: 1px solid #000000;

★枠の余白に関するプロパティ

marginマージン 要素の外側の余白の空間を指定します。
margin: 0 10px 0 0;
paddingパディング 要素の内側の余白の空間を指定します。
padding: 10px;
pad + ingです。padは肩パッドのpadで詰め物のことです。つまり内側のこと。

★枠の中の文字要素に関するプロパティ

colorカラー 色を指定します。
color: #FFF00;
font-sizeフォント サイズ 文字のサイズを指定します。
font-size: 12px;
font-familyフォント ファミリー 文字の書体を指定します。
font-family: sans-serif;
text-alignテキスト アライン 左右や中央など配置位置を指定します。
test-align: right;
line-heightライン ハイト 行間を指定します。
line-height: 1.6em;
(em = 1文字分のサイズ)

★★★配置(レイアウト)に関するプロパティ

displayディスプレイ 枠の特性を変更できます
。値の例)block、inline、flex
positionポジション 要素の位置を、相対的な位置か絶対的な位置かで指定することができる。
値の例)relative、absolute
※相対的と絶対的、まずは言葉だけ覚えておいてください。
z-indexゼット インデックス 要素が重なるときの重ね順を変更できます。値は数字になります。
floatフロート 回り込みの指定をします。左右に回り込む。
※displayプロパティで代替だいたい可能なので今はあまり使われません。

colorやbackground-colorプロパティに使われる値の 色に関しては#FF0000といった、#と6桁のアルファベットと数字の組み合わせによる 16進数しんすうカラーコード(色の番号)というもので指定します。 このアルファベットと数字の組み合わせだけでフルカラー(16,777,216色!)を表現できます。何色がどんな英数字になるかはgoogleで「Webカラーコード」などで検索してみましょう。
#FF0000 #000000 #00FF00 #CCCCDD #9932CC