HTMLでのホームページの作成方法

ここではHTMLでのホームページの作成方法を共有する。

CMSやホームページ作成ツールではなく、HTMLやCSSを実際に書いてホームページ制作をしたい人向けに、必要なツールや方法を紹介。

web制作にあたって、使っていきたいWebサービスなども紹介する。

1 HTMLのホームページの作成に何が必要？
2 作成手順
3 おしゃれなサイトを作るコツ
4 HTMLとCSSを学習できるサイト
5 HTML・CSSサイトの作り方の関連記事
6 コンピュータの全体像

HTMLのホームページの作成に何が必要？

二つのファイルを用意することで、ホームページを作成することができる。

HTMLファイル：文字や画像を表示させるファイル
CSSファイル：色を変えたり、文字の位置やサイズを決めたり、装飾するファイル

上記のコードが書かれている二つのファイルを読み込むと以下のように画面に表示させることができる。

順に見ていく。

作成手順

下記のように作成手順を行う

ファイルを編集する「テキストエディタ」とファイルを表示する「GoogleChrome」を用意
HTMLファイルを作成
CSSファイルを作成
コードを書いて試しに表示させる
HTMLの設定を記述
CSSファイルを読み込み
デザインができたら、アップロード

順に見ていく。

ファイルを編集する「テキストエディタ」とファイルを表示するための「ウェブブラウザ」を用意

ファイルを編集するためのツールとファイルを画面に表示させるツールを用意する。

テキストエディタの用意

まずはテキストエディタを用意する。

テキストエディタとは、HTMLを編集するツールで下記のように、HTMLを書いていくことができる。

テキストエディタの種類は、Sublime Text、Atom、Visual Studio Codeなど様々なエディタがある。

今回はAtomを使用する。

https://atom.io/からダウンロードできる。

ウェブブラウザの用意

次にホームページを表示するためのGoogle Chromeを用意する。

https://www.google.co.jp/chrome/からダウンロードできる。

HTMLファイルを作成

HTML、CSSを書くためのテキストエディタと、書いたHTML、CSSを表示するGoogle Chrome (ウェブブラウザ)を用意できたら、実際に書いて見る。

まずはAtomを開く。

なので、command+nを押すか、File > New Fileで新しいファイルを開く。

すると新しいファイルが作成される。

ここでファイルを保存してみる。一番最後に「.html」といれて保存する。

するとHTMLファイルとなって、保存される。

これでHTMLの作成は完了となる。

CSSファイルを作成する

CSSファイルも同じように作成する。

新しくファイルを開き、今度は後ろに「.css」とつけて保存する。

すると、cssファイルとして保存される。

これでCSSファイルの作成も完了となる。

コードを書いて試しに表示させる

次はコードを書いて表示させてみる。

試しに、Hello Worldを画面に表示させてみる。

まずは、HTMLファイルに以下のように記述する。

<h1> Hello World </h1>

そのままファイルをドラッグ＆ドロップする。

すると画面上に、Hello Worldの文字が表示され、タブに、ファイル名が表示される。

画像も入れることができる。

まずは画像素材を用意。

今回はこちらを使用する。

下記のように付け足す。

<h1>Hello World</h1>
<img src="webdevelopment.jpg">

するとこのように表示される。

HTMLではとにかく縦に表示されていく。

これをCSSで場所を変えたり、文字の大きさを変えたり、して、調整していく。

HTMLの設定を記述

実際にHTMLを記述していくときは、最初にある設定を書く必要がある。

ここは細かく覚えなくてよくて、ただコピペだけしてもらえればOK。

<!DOCTYPE html>
<html>
 <head>
  <title>ページのタイトル</title>
  <meta charset="UTF-8">
 </head>
 <body>
   <h1>Hello World!</h1>
 </body>
</html>

HTMLはこの記述の<body></body>の間に書くと覚えればOK。

[st-card myclass=”” id=2597 label=”” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on”]

CSSファイルを読み込み

CSSファイルを使うには、HTMLファイルで読み込む必要がある。

<head></head>内に、リンクを書く。

<!DOCTYPE html>
<html>
 <head>
  <title>ページのタイトル</title>
  <meta charset="UTF-8">
　<link rel="stylesheet" href="cssファイル名.css">
 </head>
 <body>
   <h1>Hello World!</h1>
 </body>
</html>

これで初期設定は完了となる。

トップページを作ってみる

初期設定ができたら、試しにHTMLとCSSを使ってトップページを作ってみる。

まずはHTMLで下記のように書く。

<!DOCTYPE html>
<html>
 <head>
  <title>ページのタイトル</title>
  <meta charset="UTF-8">
　<link rel="stylesheet" href="style.css">
 </head>
 <body>
   <div class = "main-wrapper">
     <div class = "container">
       <h1>Welcome</h1>
       <p>HTML/CSSの世界へようこそ。HTMLとCSSを使うことで、
       自分だけのウェブの世界を作り上げることができます。</p>
       <img src="webdevelopment.jpg">
     </div>
   </div>
 </body>
</html>

するとHTMLがこのように表示される。

次にCSSを下記のように加える。

.container{
  text-align: center;
  font-family: Futura;
}

h1 {
  font-size:80px;
}

.container p{
  margin-bottom:80px;
  width:30%;
  margin:0 auto;
  line-height: 2.0;
}

すると下記のように変化する。

このようにして、ページをデザインしていく。