Webサイトを作成する方法～ツール無し，HTMLのコーディング作成する手順～

Webサイトを作成する方法
～ツール無し，HTMLのコーディングで作成する手順～

更新日:2019.04.15

これからホームページやブログを作成したい人のために，ツールを使わずにHTMLのコーディングのみでWebページを作成する方法・流れを解説

HTMLファイルとは～HTML言語とタグ～
HTMLファイルの作成・編集・実行方法
HTMLファイルの構成
head要素
body要素
CSSでページをデザイン

HTMLファイルとは～HTML言語とタグ～

WebサイトやブログなどのWebページを作るにはHTMLファイルを作成します.

私たちが普段ネットで見ているwebページは，chromeやsafari，operaなどのWebブラウザがURLをたどってサーバーにあるHTMLファイルを見つけだし，それを読み込んで表示しています.

Webサイト(HTMLファイル)は全て，HTMLという言語で書かれています.
HTML言語の例

HTML言語はWebページを作成するために開発された言語で，様々なタグを使って文や画像を配置したり，情報を埋め込んだりしています.

タグは<   >で表され，<meta>，<div>，<script>など様々な種類のタグがあり，それぞれに機能や役割があります.

タグには2つ種類があります.

1つは，開始タグ<   >と，終了タグ</   >の2つ一組になっているものです.
      <　> ～ </　>
この間に文字やタグを入れます．HTMLタグは入れ子構造になっているのでタグの中にさらにタグを入れることが可能です.
主に見出しや文章，リストを作成したり，各要素をまとめてグループ化するのに使います．

例：見出しタグ(h1タグ)

<h1>見出しのタイトル</h1>

もう1つは終了タグ</ >が無いタグで，主に画像や他のファイルの読み込みなどに使われます．

例：画像タグ(imgタグ)

これらいろんな種類のタグを使って，HTMLファイルを作成していきます.

HTMLファイルの作成・編集・実行方法

では実際に，HTMLファイルを作成しましょう.

拡張子がhtmlのファイル○○.htmlを作成します.

ファイル編集にはAtomやBrackets，サクラエディタなどのテキストエディタを利用します.

htmlファイルの実行方法は簡単で，ブラウザを開いてURLなどを入力するアドレスバーにfile:///○○○/○○○/○○.htmlのようにhtmlファイルまでのパスを入力すればそれが読み込まれ，表示してくれます.

パスが分らない人はエクスプローラでファイルを右クリック→プロパティなどでファイルまでのパスを知ることができます.

HTMLファイルの構成

では早速HTMLを書いていきましょう．

HTMLファイル内は基本的にこのような構成になっています.

<!DOCTYPE html>
    <html>
        <head>
            head要素内
        </head>
        <body>
            body要素内  
        </body>
    </html>

一番始めの<!DOCTYPE html>は，このファイルがHTML5(HTMLのバージョン5)で書かれたものであるということを宣言しています.

<html>～</html>はHTML文書であることを示しており，この中をいじっていくことでWebページを作り上げます.

作っていく箇所は大きく分けて2つありhead要素とbody要素です.

head要素

head要素はheadタグ<head>～</head>で囲まれてる部分です.

主に外部ファイルを読み込んだり，文字コードや表示サイズなど，ページを読み込むブラウザへ向けての情報を記述する場所です.

よく使うheadタグ内の要素です.

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title>タイトル</title>
    <meta name="description" content="サイトの説明">
    <link href="css/example.css" rel="stylesheet" type="text/css">
</head>

<meta http-equiv="Content-Type" content="text/html" charset="utf-8">

文字コードをUTF-8に指定しています．これが無いとブラウザで読み込んだ時に文字化けをお起こす可能性があります.
<title>タイトル</title>

このページのタイトルを記述します.ここで決めたタイトル名は，検索結果として表示された際のタイトル名にもなります．
<meta name="description" content="サイトの説明">

サイトの説明を記述します.ここで記述した内容が検索結果画面に表示されます．
<link href="css/example.css" rel="stylesheet" type="text/css">

CSSファイルを読み込んでいます．hrefにCSSファイルまでのパスを記述します．

body要素

body要素はbodyタグ<body>～</body>で囲まれてる部分です.

body要素は，webページを開いた際に，実際に閲覧者が目にする文章や，画像，見出しなどが書かれており，ブラウザによって表示されるのはこの部分です.

ここでは様々なタグが使われており，見出しに使う<h1></h1>や，リスト項目の作成する<li></li>，ページ内や他のサイトへのリンクに使う<a></a>などがあります.

例として簡単な自己紹介ページを作成してみます.

<body>
    <h1>山田太郎の自己紹介サイト</h1>
    <p>こんにちわ、山田太郎です。福岡県在住です。</p>
    <div>
        <div>
            <p>好きな物</p>
                <ul>
                    <li>お好み焼き</li>
                    <li>野球</li>
                    <li>映画鑑賞</li>
                </ul>
        </div>
        
        <div>
            <p>嫌いな物</p>
            <ul>
                <li>ピーマン</li>
                <li>虫</li>
                <li>勉強</li>
            </ul>
        </div>
    </div>
    
    <a href="">詳細ページはこちら</a>
</body>

コードを書いたらブラウザで確認してみましょう．コードの実行結果

使用したタグを簡単に説明します．

<h1>～</h1>

見出しを記述するタグです．
<p>～</p>

1つの段落であること示す要素で，ひとまとまりの文章やちょっとした説明を書くときに使われます．
<div>～</div>

複数のタグを1つのグループとしてまとめるのに使います．そうすることによってレイアウトやスタイルを指定するのが楽になります．
<ul>～</ul>

リストの作成に使います．リストの各項目は<li>タグで表します．
似たタグに<ol>タグというのがあり，これもリスト作成に使いますが，olタグ内では各リスト項目の先頭に番号が付くのに対してulタグ内ではそれが付きません．(ul:unordered list，ol:ordered list)
<li>～</li>

リスト内の各項目として使います．
<a>～</a>

サイト内・外へのリンクを張ります．リンク先はhref=""の中に記述し，<a>タグに囲まれた文字をクリックすることでそのページに飛びます．

このようにあらゆるタグを使ってWebページを作成していきます．

body要素に様々なタグを書き込みましたが，ブラウザで確認してみると各項目が上から順番に並んでいるだけでレイアウトや色，フォントなどが何も指定されていません．

なので，次にスタイルを指定して，ページをデザインしていきます．

CSSでページをデザイン

body要素内にダグを書いたらそれに対してデザイン，レイアウト，余白などのスタイルを指定していきます．

方法は，CSSファイルというスタイルを指定するためだけの外部ファイルを用意し，そのファイルにスタイリングの内容を記述していきます．

cssはCascading Style Sheetsの略で，拡張子.cssのファイルです．

cssファイルをheadタグ内で読み込むことでbody要素の各タグに対してスタイルが適用されます.

<head>
    <link href="css/example.css" rel="stylesheet" type="text/css">
</head>

hrefの値にcssファイルまでのパスを記述します.

パスの書き方について

例えば次のように，htmlファイルと同フォルダ内にcssという名前のフォルダがありその中にcssファイルがあるようなディレクトリ構成では，href="css/example.css"です．ディレクトリ構成図

次のような，ディレクトリ構成では，
href="../css/example.css"です．ディレクトリ構成図

../は1階層上のフォルダを指します．

cssファイル内では，セレクタで装飾したい要素(タグ)を指定して{ }の中にデザインの内容をプロパティ: 値;の形で記述していきます.

セレクタ {

プロパティとその値を記述

}

例：

div {
    width: 100px;
    height: 50px;
    background-color: #111111;
    font-size: 15px;
    color: #777777;
    font-weight: bold;
    margin: 7px;
    padding: 10px;
}

上の例では，ページ内のdiv要素全てにスタイルが適用されます．

セレクタの書き方は他にもいろいろあります．

div p span{ } のようにセレクタを半角スペースで区切って書けば，div要素の中にあるp要素の中にあるspan要素という風に適用範囲を絞っていけます．

他にもクラスやidを使って，スタイルをつけるタグを指定したり，:beforeや:afterでタグの直前・直後にスタイルが適用されるよう指定するなど，セレクタの書き方には便利なものがたくさんあります．

【CSS】いろいろなセレクタの書き方

セレクタで，どの要素にスタイルをつけるか指定したら，プロパティと値を設定します．

{ }の中にプロパティ名:値;の形式で記述することでスタイリングしていきます．

スタイルを指定していくことでページのテーマや世界観を自由にデザインすることができます.

先ほどの自己紹介サイトをスタイリングしていきます．

CSS
body{
    border: 10px groove #00bfff;
    width: 700px;
    margin: 20px auto;
    padding: 10px;
}

h1{
    text-align: center;
    font-weight: lighter;
    font-family: serif;
    text-shadow: 5px 2px 3px #aaaaaa;
}

body > p{
    border-left: 3px solid #1e90ff;
    margin: 10px 250px 10px 15px;
    background: linear-
    gradient(white,white,white,white,yellow,white);
}

body > div{
    margin: 20px auto;
    width: 500px;
}

body > div > div{
    display: inline-block;
    width: 200px;
    border-radius: 5px;
    border: 5px solid #ffa500;
    margin: 15px;
}

body > div > div + div{
    border: 5px solid #800080;
}

body > div > div p{
    margin: 5px 0 0 8px;
    color: #777777;
    font-weight: bold;
    font-size: 22px;
}

ul li{
    list-style: none;
}

a{
    margin: 30px 0 50px 520px;
}

スタイリングしたことによってレイアウトや色が設定されました．

ここで使ったプロパティの一部を簡単に説明します．

width

要素の幅を設定します．width: 300px;では，要素の幅が300pxになります．width: 50%;では要素の幅が親要素の50%の大きさになります．
margin

要素の余白を設定します．margin: 0px 10px 20px 30px;では，要素の上に0px，右に10px，下に20px，左に30px余白をとります．
color

文字色を指定します．
font-weight

文字の太さを指定します．標準はnomal，太字はbold，細字はlighterです．
font-size

文字の大きさを指定します．font-size: 10px;とすると文字の大きさが10pxになります．

スタイリングはWebページの雰囲気や見やすさ決める重要な作業です．スタイルの付け方によっていろいろなデザインのサイトを作成することができます．

turutani.com

Webサイトを作成する方法
～ツール無し，HTMLのコーディングで作成する手順～

HTMLファイルとは～HTML言語とタグ～

HTMLファイルの作成・編集・実行方法

HTMLファイルの構成

head要素

<meta http-equiv="Content-Type" content="text/html" charset="utf-8">

<title>タイトル</title>

<meta name="description" content="サイトの説明">

<link href="css/example.css" rel="stylesheet" type="text/css">

body要素

<h1>～</h1>

<p>～</p>

<div>～</div>

<ul>～</ul>

<li>～</li>

<a>～</a>

CSSでページをデザイン

width

margin

color

font-weight

font-size

プロフィール

コメントフォーム

Webサイトを作成する方法～ツール無し，HTMLのコーディングで作成する手順～

HTMLファイルとは～HTML言語とタグ～

HTMLファイルの作成・編集・実行方法

HTMLファイルの構成

head要素

<meta http-equiv="Content-Type" content="text/html" charset="utf-8">

<title>タイトル</title>

<meta name="description" content="サイトの説明">

<link href="css/example.css" rel="stylesheet" type="text/css">

body要素

<h1>～</h1>

<p>～</p>

<div>～</div>

<ul>～</ul>

<li>～</li>

<a>～</a>

CSSでページをデザイン

width

margin

color

font-weight

font-size

プロフィール

コメントフォーム

Webサイトを作成する方法
～ツール無し，HTMLのコーディングで作成する手順～