ここではHTMLでのホームページの作成方法を共有する。
CMSやホームページ作成ツールではなく、HTMLやCSSを実際に書いてホームページ制作をしたい人向けに、必要なツールや方法を紹介。
web制作にあたって、使っていきたいWebサービスなども紹介する。
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。
-
-
[HTML] HTMLで最初に書くべきタグ
HTMLを書き始めるために、最初に必要なタグの備忘録。 HTMLを書き始めるには、下記のタグが必要。 <!DOCTYPE html> <!DOCTYPE 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がこのように表示される。
次に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;
}すると下記のように変化する。
このようにして、ページをデザインしていく。
サイトをアップロードする
サイトが完成したら、そのサイトを世界中の人に公開するために、アップロードして他の人がURLを検索した時に見られるようにする。
アップロードの方法としては二種類ある。
- Webサーバーにアップロードする方法
- GithubのGithub pagesを使って公開する方法
今回は無料で使えるGithubを使った方法を共有する。
-
-
[Github] Github pagesの使い方：作成したウェブサイトを公開する
今回、ウェブサイトを初めてgithub pagesを使ってあげてみたので、その手順を整理する。 URL：https://shotaro-kamimura.github.io/cozy-experien ...
続きを見る
これで無事、ウェブサイトが公開され、世界中の人がウェブサイトにアクセスすることができる。
おしゃれなサイトを作るコツ
世の中には、ウェブ制作のために用意された様々な便利ツール・ウェブサイトがある。
ウェブサイトアイデア・コードを全て1から考えるのではなく、いかにアイデアとアイデアを組み合わせていくかという所が大事になってくると考える。
もちろんHTMLとCSSの基礎は覚える必要があるが、慣れてきたら、これらのツールをいかに使うか・そしてツールをいかに探すかが大事となる。
デザインを見る・探す
ギャラリーサイトと呼ばれるサイトは他社事例の一覧をみる時に最適。
ウェブデザインに困ったら、ギャラリーサイトをチェックしてると良い。
-
-
Webサイト制作の参考に便利なギャラリーサイト38選
ウェブサイト制作で欠かせないウェブデザイン、なかなかうまく思い描けない時もあるのでは？ そんな時に他社事例としてとても参考になるギャラリーサイトについて紹介。 ギャラリーサイトとは？ 様々なWebサイ ...
続きを見る
コードテスト・チェックなど
気になるCSSやHTMLのデザインパーツのコードを実際にチェックしたり、自分で修正したりできる。
ブログなどにもコードをシェアできたりする。
部品・情報生成
デザインを作ると勝手にCSSを生成してくれたり、CSSで使う色のコードを抽出してくれるサービスなどもある。
- Button Generator (ボタンのCSSを生成してくれる）
- NIPPON COLORS(日本色のCMYK・RGBの数字がすぐに分かる）
素材の取得
画像は自分で用意しても良いが、イラストやアイコンなどを自分で作るのはかなり時間がかかる。
イラストを自分で作れない人でもウェブ制作で使えるように、アイコンやイラストなどの素材をダウンロードできるウェブサイトがある。
下記にアイコン、イラスト、画像それぞれの素材サイトをまとめた。
Google Chromeの検証機能
Google Chromeの検証機能を使えば、気になるサイトのコードも見ることができる。
Google Chromeを使ってページを見ているなら、ページ上で右クリックを押して、Inspect・検証を押すと、右側でHTMLとCSSが表示される。
HTMLとCSSを学習できるサイト
以下のサイトで、HTMLとCSSを学習できる。
コンピュータの全体像
ウェブサイト作成についてより深く知るために、コンピュータの全体像を知るとより理解が深まる。
こちらにコンピューターサイエンスの全体像についてまとめた。
-
-
Screen-Shot-2021-06-11-at-11.45.16
続きを見る
