作成日：2021/04/12　更新日：2022/07/04

#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の設定

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

新規ファイルに「あいうえお」とかいて、デスクトップにファイルを保存し、ブラウザにドラッグ&ドロップして確認してみましょう。


あいうえお

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

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

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

タグを使って文章を作る

html文章では写真や文字を枠で囲いその枠を積み木のように配置することで画面を構成します。その枠（積み木）のひとつひとつに役割りを持たせるためタグと呼ばれる記号（ >やまかっこで囲われた文字）を使って、写真や文字を開始タグと終了タグではさみます。 ※終了タグがないものもあります。


あいうえお
かきくけこ

試しに、このように下の行に「かきくけこ」とかいて、保存した後、ブラウザの再読み込みをして確認してみましょう。
おそらく1行で「あいうえおかきくけこ」と表示されるはずです。
html文章ではタグを使わない改行は無視されてしまいます。


あいうえお

かきくけこ

このように書くとブラウザで見たときも改行されて表示されていますね。

<br>というタグを使ってブラウザに指示を出している（命令している）ことになります。
Webサイトのデザインは、このようにいろんなタグを使って作っていきます。

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

cssファイルに「文字の色は黄色にする。枠の幅を200pxにする。背景の色を青色にする。」という特性・装飾を書きました。特性とは、身長は170cm・性別は男性・職業は...のような捉え方でOKです。

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

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

#3 htmlとcssの決まりごと

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

css書類ではhtmlのタグに対して、セレクタを使って操作したい指示を { }なみかっこで囲ってかいていきます。
セレクタごとに{ }の中に、役割りの指示であるプロパティという、特性をもたせるための命令文を書きます。
プロパティには値を設定します。プロパティと値の間には:コロンでわけて、値の最後には ;セミコロンをいれます。
htmlのタグと同様、cssのプロパティもあらかじめいくつか用意されています。タグは100こ、cssプロパティは200こ以上ありますがすべてをおぼる必要はありません。

#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>	画像を表示させるときに使います。閉じタグはありません。

htmlでは枠のことを「タグ」と呼びそれぞれ役割をもたせています。
タグは100程度ありますが一度にすべて覚える必要はありません。CBCで出てくるタグをその都度覚えてくれて大丈夫です。
よく使うタグだけだと20〜30程度です。小学1年生で覚える漢字は80字。小学3年生で覚える漢字は200字。中学3年間で出てくる英単語が1800ぐらいなので、それに比べたら簡単ですね！

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

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


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

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

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


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

ここでは、タグの種類によって、表示される範囲が違うのだなということが理解できれば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;
}

各セレクタにあらかじめ用意されているプロパティと、それぞれに「値」を入れていきます。値は「 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

次のページ ▶

作成日：2021/04/12 更新日：2022/07/04

#1 Webサイトを作る準備

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

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

ブラウザについて

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

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

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

タグを使って文章を作る

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

#3 htmlとcssの決まりごと

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

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

枠で構造体を作る

必ず必要な枠（タグ）

要素を囲うための枠（タグ）

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

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

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

枠（要素）をデザインしてみる

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

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

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

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

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

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ 初級）

基礎2（マークアップ 中級）

基礎3（マークアップ 上級）

応用1（フロントエンドエンジニア 初級）

応用2（フロントエンドエンジニア 中級1）

応用3（フロントエンドエンジニア 中級2）

実践1（フロントエンジニア 中級3）

実践2（フロントエンドエンジニア 中級4）

実践3（フロントエンドエンジニア 上級1）

実践3（バックエンド Laravel）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

作成日：2021/04/12　更新日：2022/07/04

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア上級1）