#1 Webサイトを作る準備
webサイトを作るためにブラウザとテキストエディタを用意します。
Webサイトを作るための道具は2つです。ひとつは表示させる画面そのものである「ブラウザ」。
もう一つは、画面に表示させるために必要なプログラムを書いていく「テキストエディタ」です。いずれも無料で使うことが可能です。
ブラウザについて
Chromeダウンロードサイトへ Firefoxダウンロードサイトへ
テキストエディタについて
Atom ダウンロードサイトへ Sublime ダウンロードサイトへ Visual Studio Code ダウンロードサイトへ
ブラウザに表示させたい内容を、テキストエディタに書きます
index.htmlに以下のように記述して、ブラウザで確認してみましょう。
あいうえお
Webサイトを作るためのファイルの名前は「〇〇.html」と.htmlをつけた
htmlファイルをブラウザにドラッグ＆ドロップすることで、ファイルの内容を表示できます。
ローカル（自分のパソコン内）で制作しているときにはこの方法で確認します。
#2 Webサイトはhtmlとcssで作る
htmlファイルは「枠」を作り、cssファイルは「装飾」を担当します。
cssファイルに「文字の色は黄色にする。枠の幅を200pxにする。背景の色を青色にする。」という特性を書きました。
特性とは、身長170cmで男性で… というような捉え方でOKです。
このように「style.css」といった装飾を指示する
※色は#FFFF00のような16
#3 htmlとcssの決まりごと
htmlとcss、2つのファイルの関係と決められた名称
html書類ではデザイン要素（写真や文字）を枠で囲いその枠を積み木のように配置することで画面を構成します。
その枠（積み木）のひとつひとつに役割りを持たせるため タグ と呼ばれる記号（
< > で囲われた文字）を使い写真や文字を、開始タグと終了タグではさみます。
タグの種類はあらかじめいくつか用意されていますので選んで書いていきます。
タグの種類はあらかじめいくつか用意されていますので選んで書いていきます。
css書類ではhtmlのタグに対して操作したい内容を セレクタ を使って指示させます。
{ } で囲います。
{ }の中に、役割りの指示である プロパティ という、特性をもたせるための命令文を書きます。
プロパティには 値 を設定します。: と
; で値をはさみます。
htmlのタグと同様、cssのプロパティもあらかじめいくつか用意されています。
プロパティには 値 を設定します。
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で導入された新しいタグ |
タグは数百種類ありますが一度にすべて覚える必要はありません。
#5 htmlでの枠の使い方と特性
開いているindex.htmlを以下のように書き換えて、ブラウザでどのように表示されるか見てみましょう。ブラウザで確認するには
<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>
divやpタグのエリアは「画面の横幅いっぱいまで」で「次の要素は下に行く」。
spanタグは「中の要素の幅まで」で「横並びになる」と違いがあるのがわかります。
#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 ）の略で「関係」の意味です。どの種類のファイルを関連つけるかを指定します。
linkタグに、半角を空けて
hrefは （
#7 cssでデザインする時のプロパティ
枠または、その中の要素を装飾するときに使うプロパティのほんの一例です。配置についてのプロパティは多少難しいですが、おいおい解説していきます。ここでは「そんなプロパティがあるんだな」程度でOKです。★は比較的わかりやすいですが、★★★は少し難しいのでしっかり学習しましょう。
★枠のかたちに関するプロパティ
 |
要素の幅を指定します。単位はpxや%やvwなどを使います。 width: 100px; |
|
 |
要素の高さを指定します。単位はpxやvhなどを使います。 height: 50px; |
|
 |
要素の背景色や画像の配置を指定します。 background-color: #FF0000; |
|
 |
枠線の色や形を指定します。 border: 1px solid #000000; |
★枠の余白に関するプロパティ
 |
要素の外側の空間を指定します。 margin: 0 10px 0 0; |
|
 |
要素の内側の空間を指定します。 padding: 10px; |
★枠の中の文字要素に関するプロパティ
 |
色を指定します。 color: #FFF00; |
|
 |
文字のサイズを指定します。 font-size: 12px; |
|
 |
文字の書体を指定します。 font-family: sans-serif; |
|
 |
左右や中央など配置位置を指定します。 test-align: right; |
|
 |
行間を指定します。 line-height: 1.6em; (em = 1文字分のサイズ) |
★★★配置（レイアウト）に関するプロパティ
 |
枠の特性を変更できます。 | ||
 |
要素の位置を絶対的か相対的かで指定することができる。 | ||
 |
要素が重なるときの重ね順を変更できます。 | ||
|
回り込みの指定をします。左右に回り込む。（displayプロパティで代替可能） | ||
colorやbackground-colorプロパティに使われる値の 色に関しては#FF0000といった、#と6桁のアルファベットと数字の組み合わせによる 16
#FF0000 #000000 #00FF00 #CCCCDD #9932CC
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ