更新日 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の設定

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エイチ ティー エム エルファイルを作ります。
※拡張子はファイルの種類を識別させるための記号のようなものです。

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

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

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


※htmlファイル側にcssファイルを読み込ませる指示が必要なので、まだこの時点では上記のようには反映されません。
※色は#FFFF00のような16進数しんすうカラーコードで 指定しますが、後ほど説明します。
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>

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

半角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;

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

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
コピーしました
RSS https://cbc-study.com/rss.xml 
質問などあればSlackで! 誰でも無料でできます
cbc-study.slack.com