更新日 2021.10.14

#1 Webサイトを作る準備

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

Webサイトを作るための道具は2つです。ひとつは表示させる画面そのものである「ブラウザ」。もう一つは、画面に表示させるために必要なプログラムを書いていく「テキストエディタ」です。いずれも無料で使うことが可能です。

ブラウザについて

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

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

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

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

▼Visual Studio Codeの設定

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

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


あいうえお

Webサイトを作るためのファイルの名前はxxx.htmlといったように.html 拡張子かくちょうしをつけた htmlエイチティーエムエルファイルを作ります。
※拡張子はファイルの種類を識別させるための記号のようなものです。

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

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

htmlファイルは「枠」を作り、cssファイルは「装飾」を担当します。

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

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

#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>

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

開いている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;

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

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ディスプレイ		枠の特性を変更できます。
positionポジション		要素の位置を絶対的か相対的かで指定することができる。
z-indexゼットインデックス		要素が重なるときの重ね順を変更できます。
floatフロート		回り込みの指定をします。左右に回り込む。（displayプロパティで代替可能）

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

次のページ ▶

更新日 2021.10.14

#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サイト制作

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

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

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

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

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

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

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

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

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