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

ホームページ作成

#

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

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

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


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

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

  • HTMLファイル:文字や画像を表示させるファイル
  • CSSファイル:色を変えたり、文字の位置やサイズを決めたり、装飾するファイル
HTMLでのホームページの作成方法


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


HTMLでのホームページの作成方法
people vector created by pch.vector


順に見ていく。


作成手順

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

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

順に見ていく。


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

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


テキストエディタの用意

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

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

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


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

今回はAtomを使用する。

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

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


ウェブブラウザの用意

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

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

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


HTMLファイルを作成

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

まずはAtomを開く。

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


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

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


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

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


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

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


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

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


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


CSSファイルを作成する

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

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

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


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

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

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


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

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

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

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

<h1> Hello World </h1>


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


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

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


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

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


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

まずは画像素材を用意。

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


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

HTMLでのホームページの作成方法
people vector created by pch.vector


下記のように付け足す。

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


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

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

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。

no image
[HTML] HTMLで最初に書くべきタグ

続きを見る


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がこのように表示される。

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;
}


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

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


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


サイトをアップロードする

サイトが完成したら、そのサイトを世界中の人に公開するために、アップロードして他の人がURLを検索した時に見られるようにする。

アップロードの方法としては二種類ある。

  1. Webサーバーにアップロードする方法
  2. GithubのGithub pagesを使って公開する方法

今回は無料で使えるGithubを使った方法を共有する。

[Github] Github pagesの使い方:作成したウェブサイトを公開する

続きを見る


これで無事、ウェブサイトが公開され、世界中の人がウェブサイトにアクセスすることができる。


おしゃれなサイトを作るコツ

世の中には、ウェブ制作のために用意された様々な便利ツール・ウェブサイトがある。

ウェブサイトアイデア・コードを全て1から考えるのではなく、いかにアイデアとアイデアを組み合わせていくかという所が大事になってくると考える。

もちろんHTMLとCSSの基礎は覚える必要があるが、慣れてきたら、これらのツールをいかに使うか・そしてツールをいかに探すかが大事となる。


デザインを見る・探す

ギャラリーサイトと呼ばれるサイトは他社事例の一覧をみる時に最適。

ウェブデザインに困ったら、ギャラリーサイトをチェックしてると良い。

Webサイト制作の参考に便利なギャラリーサイト38選

続きを見る


コードテスト・チェックなど

気になるCSSやHTMLのデザインパーツのコードを実際にチェックしたり、自分で修正したりできる。

ブログなどにもコードをシェアできたりする。

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


部品・情報生成

デザインを作ると勝手にCSSを生成してくれたり、CSSで使う色のコードを抽出してくれるサービスなどもある。

HTMLでのホームページの作成方法
https://www.bestcssbuttongenerator.com/


素材の取得

画像は自分で用意しても良いが、イラストやアイコンなどを自分で作るのはかなり時間がかかる。

イラストを自分で作れない人でもウェブ制作で使えるように、アイコンやイラストなどの素材をダウンロードできるウェブサイトがある。

下記にアイコン、イラスト、画像それぞれの素材サイトをまとめた。


Google Chromeの検証機能

Google Chromeの検証機能を使えば、気になるサイトのコードも見ることができる。

Google Chromeを使ってページを見ているなら、ページ上で右クリックを押して、Inspect・検証を押すと、右側でHTMLとCSSが表示される。

HTMLでのホームページの作成方法
https://www.armadaskis.com/at/bc-safety-homepage


HTMLとCSSを学習できるサイト

以下のサイトで、HTMLとCSSを学習できる。


コンピュータの全体像

ウェブサイト作成についてより深く知るために、コンピュータの全体像を知るとより理解が深まる。

こちらにコンピューターサイエンスの全体像についてまとめた。


コンピューターサイエンスとITの全体像

続きを見る


Related posts