Webサイトを作ろう!〜作成編〜

html/css

はじめに

「Webサイト作ってみたいけど何もわからん!」
「Webサイトを作るための知識がほしい!」

という方に向けて無料でWebサイトを作る方法をお話します!

パソコン1台あればOKです!実際にWebサイトを作ります!
アウトプットを通して使える知識を身に着けましょう!

この記事では、Webサイトを作る方法を話します!
「GoogleChrome」と「Atom」をインストールしていない方は先にこちらをお読みください

Webサイトを作ろう!〜準備編〜

この記事のゴール

Webサイト(htmlファイルとcssファイル)の作成完了

下のようなオシャレ(?)なWebサイトを作ります
作り終わったら自分流にアレンジしてみてください

Webサイト作成

Webサイト(Webサイトを構成するファイル)を作っていきましょう!
Webサイトの正体を簡単に言うと、HTMLやCSSというプログラミング言語を使って書いたファイルです

プログラミング?なんだか難しそう、、

と思った方もいると思います!
しかし今回は、実際に作ることが重要なのでコピペすればOKです!

プログラムを書く必要はありません!

3. フォルダ作成

データの保存場所として、デスクトップに新しくフォルダを作成します!

デスクトップ画面で右クリックし、フォルダを作成しましょう!

名前は何でも良いですが、わかりやすく「homepage」にします

Atomを起動します

AtomOK

メニューバーのファイルから、先程作った「homepage」フォルダを開きます

3. HTMLファイルの作成

画面左上の homepage の上で右クリックし、「新規ファイル」をクリック

必ず「index.html」という名前をつけます
下のように「index.html」が追加されてるとOKです

下のプログラムを33行全てコピーし貼り付けます

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>おためしサイト</title>
<link rel="stylesheet" href="./master.css">
</head>
<body>
<header>
<p>Webサイトつくってみた</p>
</header>

<main>
<div id="top">
<img src="https://bit.ly/2LqpmWg" alt="">
</div>
<div id="contents">
<div class="box1">
<img src="https://bit.ly/38iFTpg" alt="">
</div>
<div class="box2">
<h1>自己紹介</h1>
<p>名前:太郎たろう</p>
<p>年齢:20歳</p>
<p>意気込み:楽しい〜!</p>
</div>
</div>
</main>

<footer>
</footer>
</body>
</html>

下のようになっていればOKです!最後に保存します
保存されていない時は下の画像の右上のように「●」がついています

メニューバーのファイルから「保存」をクリックします
先程の「●」が消えていれば保存できています!

じつはWebサイトはすでに作れています!現在の状況を確認してみましょう!
下の画像のように、Atomの「index.html」という名前のタブをクリック&ドラックしてGoogleChromeの検索場所で離します

画面左「GoogleChrome」
画面右「Atom」

すると、、作ったWebサイトが表示されます!!やったあ!
、、でもなんだか寂しいWebサイトですね、、
これから飾り付けをしていきます!

4. CSSファイルの作成

ここまでで、htmlを使って文字だけのWebサイトを作ることができました!
これからはcssを使って、色や大きさ、レイアウトなどを整えていきます!

新しいファイルを作成します!「homepage」フォルダの上で右クリックし新規ファイル追加

「master.css」という名前で保存します!
下の画像の様に、mster.cssが表示されていたらOKです

今回は以下57行全てを貼り付けます!

*{
box-sizing: border-box;
margin:0px;
text-align: center;
}
header{
height:10vh;
width:100vw;
background-color: darkred;
line-height: 10vh;
font-size:20px;
font-weight: bold;
}
main{
height:180vh;
width:100vw;
}
#top{
height:90vh;
width:100%;
}
#contents{
height:90vh;
width:100%;
}
img{
height:100%;
width:100%;
object-fit: cover;
}
@media screen and (orientation: landscape) {
.box1, .box2{
height:100%;
width:50%;
float:left;
}
.box2{
padding:5vw;
background-color: linen;
}
}
@media screen and (orientation: portrait) {
.box1, .box2{
height:50%;
width:100%;
float:left;
}
.box2{
padding:5vw;
background-color: linen;
}
}
footer{
height:10vh;
width:100vw;
background-color: black;
}

下のようになっていればOKです!最後に保存します
保存されていない時は下の画像の右上のように「●」がついています

メニューバーのファイルから「保存」をクリックします
「●」が消えていることを確認してください

これでWebサイトが完成しました!!!
GoogleChromeで「更新」してください

以下のようにWebサイトが完成しました!!!!!

まとめ

上のようなWebサイトを作ることができたでしょうか?
HTMLでWebサイトの中身を作り、CSSではレイアウトや色などの見た目を整えました!

しかし、このままでは、誰もこのWebサイトを見ることができません、、
そこで、インターネットに公開します!

Webサイト公開方法についての記事は後日書きます!