プログラミング

Webサイト作成の初心者最初の一歩【Webサイトコード解説付き】

Webサイトを作れるようになりたい!
でも何から手を付ければいいかわからない・・・。

と悩んでいませんか?

あなたの学習の最初の一歩を踏み出す方法を共有します。

読み終わったころにはあなたが作った1ページが手元に残ります。

ページを作成する中で、ひとつひとつ調べ方をもお伝えするので

結果、サイトを作るための学習を自走できるようになります。

まずは、必要な言語の説明をします。

そのあとに実際に1ページ作ってみましょう。

それでは、スタートです!

サイト作成で必要な言語

サイトを作成するには、コンピュータにこうしてほしいという命令文を書く(プログラミングする)必要があります。

サイト制作で必要な4つの言語

HTML CSS JavaScript / jQuery PHP

少しプログラミングをかじった程度の人からHTML, CSS はプログラミング言語じゃないと突っ込みが来るかもしれません。

厳密にいえば確かに違うのですが、コンピュータに命令を出していることには変わりないです。

よって、ここでは細かい話は置いといてプログラミング言語とします。

文章やサイトの骨組みで構成するHTML

HTMLとは Hyper Text Markup Language の略です。

書いておいてなんですが、この概念についてはそこまで重要ではありません。

簡単にいうと、サイトの骨組みをつくるための言語になります。

その骨組みの中に、今みなさんが読んでいる文章の情報も入っています。

サイトに表示する情報の大まかな位置はHTMLで配置します。

細かい表示に関しては、次項のCSSで説明しますね。

視覚的に情報をわかりやすく伝えるためのCSS

CSS とは、Cascading Style Sheets の略です。

HTMLを装飾するものです。

しかしぼくはサイトに視覚的メリハリをつけて、訪問したひとにより伝えるべき情報を伝えやすくするための技術・・・という認識です。

色を付けたり、大きさを整えたりと記述するとすぐに変化がわかるため、簡単なものという印象はありますが、かなり奥が深く面白い言語です。

サイトに動きを与えるJavaScript / jQuery

JavaScriptは、サイトに動きを与えます。

多くのサイトへスマホでアクセスしたときを想像してください。

右上とかにあるメニューとかありませんか?

触るとにょきっと、出てくる動作を実現しているのもJavaScriptです。

実はこの言語、極めていくとかなりコスパのいい言語なんです。

サイトには、フロントサイド・サーバーサイドと呼ばれるエリアがあります。

HTML, CSS, JavaScriptはフロントサイドの言語です。

次項で説明するPHPはサーバーサイドの言語になります。

しかし、JavaScriptはフロントサイドのみならずサーバーサイド用のJavaScriptも存在してます。

また、iOS, Androidをまたぐアプリを作成することも、Excelのようなデスクトップアプリと呼ばれるものも作れます。

学び始めの初心者にはむずかしいところもありますが、苦労して学ぶ価値のある言語ですね。

jQueryは、JavaScriptの記述をシンプルにして使いやすく拡張してくれるものです

プラグインって呼ばれたりします。

学習の優先度低めですね。

でも便利なので使えるに越したことはないですよ。

この記事では説明しませんが、次のステップに最適なPHP

前項で出てきたサーバーサイド用の言語のひとつです。

他にもサーバーサイド用の言語はかなりたくさんあります。

ちなみにこのサイト(F12.jp)は、WordPressという技術で作らており、WordPressの中身はPHPです。

Webサイト制作を学んでいくと、PHPには必ずぶち当たると思うので名前だけでも覚えていってください。

サイト作成から皆さんの目に触れるまでの工程

  • step.1

    HTML, CSS, JavaScriptでサイトに表示するためのファイルを作成

  • step.2

    インターネットに接続して作ったサイトを公開する場所(サーバー)

    個人または大手企業ではない場合、大体はサーバーはレンタルサーバーを借りると思います。

  • step.3

    サーバーに作成したファイルを乗せることで、インターネットからサイトを見れるようになる

では、さっそく次項からHTML, CSS, JavaScriptのファイルを作ってブラウザで確認してみましょう!

 

1ページ作る中でHTMLの基本を調べられるようになろう

ここからは実際に手を動かしていきましょう。

といってもこの記事内に書いてあるコードをコピペして、ブラウザで表示してサクッと動作することを体感してください

まずは、自分のパソコン内に作業場所を決めましょう。

ぼくはCドライブの直下にf12というフォルダをつくりました。

今回はHTML1ファイルのみなのでデスクトップで行ってもOKです。

それでは、「index.html」という名前のファイルを作成してください。

作業フォルダの中にindex.htmlを作成した後の画像

ファイルを編集するのにテキストエディタが必要です。
なければ、こちらからダウンロードしてインストールしてください。

もちろん、無料です

おすすめエディタ - Download URL

ぼくはこの二つのエディタを使い分けてます。

プログラミングをする時はVS Code、簡易的に使用するにはサクラエディタを使ってます。

では、次項から実際にコーディングしていきましょう!

HTMLを書こう

index.htmlを開いて次のコードをコピペしてください。

ダブルクリックするとブラウザで開いてしまうので、右クリックから使っているテキストエディタを選択して開いてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML | F12.jp</title>
</head>
<body>
<header>
<div class="header-inner">F12.jp</div>
</header>
<div class="main-container">
<h1>F12.jpについて</h1>
<p>
今開いているブラウザは何ですか?
</p>
<p>
Chrome?Edge?<br />
とりあえずは、F12キーを押してみましょう。
</p>
<p class="open">
画面が開かれましたね?
</p>
<p>
開発ツールと呼ばれたりします。
</p>
<p>
当ブログ<span class="site-name">F12.jp</span>と名前が同じですね。
</p>
<p>
コンセプトはこの画面のように、開発の手助けとなるような情報を発信したいという思いからつけています。
</p>
<p>
URLもサイト名も<span class="site-name">F12.jp</span><br />
読み方は「えふじゅうに どっと じぇいぴー」です。
</p>
<form>
<div class="input-area">
URLもサイト名も覚えてくれたら名前を教えてください。<br />
<input type="text" placeholder="ここに名前をいれてね" />
</div>
<div class="btn-area">
名前を入れたら下のボタンを押してください。<br />
<input type="button" value="クリックする" />
</div>
</form>
</div>
<footer>
<div class="footer-inner">© 2021 F12.jp All rights reserved.</div>
</footer>
</body>
</html>

HTMLタグというもので構成されています。

2行目と最終行でhtmlの記述が対になっています。

開始タグ、終了タグといいます。

終了タグには先頭に/(スラッシュ)が必要です。

<html> // 2行目
</html> // 最終行

多くのタグは、開始・終了タグが対になっていますが、一部タグでは必要ありません。

ひとつひとつタグを説明していってもいいのですが、この記事の目的は暗記してもらうわけではないのであなたご自身で調べていっていただきます。

こちらのサイトで調べると必要な情報がすぐ見つかります。

HTML5調査用 おすすめページ

HTML5クイックリファレンス
http://www.htmq.com/html5/

ぼくもタグを調べたくなったら、訪問させていただいてます。

いつもありがとうございます。

 

まずは下の5つのタグについて、調べてみてください。

調べるタグ

<!DOCTYPE hmtl>

<html>

<head>

<title>

<body>

これがHTMLファイルの基本構造になります。

 

次にbodyタグ内で使用されているタグを調べてみましょう。

調べるタグ

<header>

<footer>

<div>

<h1>-<h6>

<p>

<span>

<form>

<input>

<input type="text">

<input type="button">

ひとつづつ調べましたか?

今回指定したタグの説明を探す過程でたくさんのタグが存在して、このページでは簡単に説明されていることがわかりましたね。

 

丸暗記はしなくていいです。

こんなことができたよなぁ・・・と、あいまいな記憶をもとにGoogle検索して組み合わせて作っていきます。

そのために少しでも目に触れておいて、記憶の片隅にでも残っていれば自作するときに探せる可能性が増えますね。

 

では、index.htmlをダブルクリックしてブラウザで表示してみましょう。

このような画面になっていると思います。成功です!

index.htmlをブラウザ表示(htmlのみ記述)の画像

 

CSSで装飾しよう

`</head>`タグの直前に次のコードをコピペしてください。

<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
header {
background: #444;
color: #fff;
}
body {
background: #f4f4f4;
}
.header-inner {
padding: 20px;
font-size: 2.4rem;
}
.main-container {
max-width: 800px;
margin: 30px auto;
padding: 10px 40px;
color: #444;
font-size: 1.6rem;
line-height: 3.2rem;
background: #fff;
}
h1 {
margin: 20px 0;
text-decoration: underline;
}
p {
margin-bottom: 10px;
}
.open {
font-weight: bold;
color: #000;
font-size: 2rem;
}
.site-name {
background: #444;
color: #fff;
padding: 5px 10px;
border-radius: 100px;
margin: 5px 10px;
}
form {
margin-top: 40px;
}
input[type="text"] {
font-size: 1.6rem;
border-radius: 100px;
padding: 10px 20px;
margin: 0 0 30px;
}
input[type="button"] {
padding: 20px;
background: #f0f0f0;
cursor: pointer;
margin: 0 0 30px;
}
footer {
background: #444;
text-align: center;
padding: 20px;
color: #fff;
font-size: 1.4rem;
}
</style>

とても長いですが、保存してブラウザを更新(F5キーをクリック)してください。

 

それっぽい表示になりましたね。

index.htmlにCSSを適用した画像

 

CSSはHTMLタグに対して指定できます。

.open {
}
.site-name {
}

この記述ですが、「.」はclassを表します。

他にも書き方はあるのですが、この記事ではclassのみの紹介にとどめておきます。

 

前項HTMLと同様に、装飾の内容を調べてみましょう。

調べるスタイル

color
font-size
font-weight
background
margin
padding
max-width
line-height
text-decoration
border-radius
cursor
text-align

CSS調査用のURLはこちらです。

CSS調査用 おすすめページ

スタイルシートリファレンス(目的別)
http://www.htmq.com/style/

装飾の設定のことをスタイルと呼びます。

 

よく使うスタイルはある程度、決まっています。

スタイルの種類はたくさんありますが、使っているうちに覚えていけるので安心してください。

 

CSSに限らずですが、できあがったものを少し自分なりに手を加えてみるというのも学習の理解を深めます

数字部分の値を変更をすると、どのような変化が起こるか見てみましょう。

プログラミングの学習のポイント

  • 正解とされるコードを模写する
  • 模写したコード内にある数値や条件などに手を加える
  • 全く別のプログラミングを書いている中でなじむように入れ込む


これの繰り返しで、少しづつ知識がストックされていきます。

ストック増えるほど、作るスピードはあがります。

なので最初はゆっくりでもいいので、いちいち調べて手を動かすことがおすすめですよ!

 

そしてなにより、書いたらすぐ変更を確認できるのって楽しくないですか?

ぼくは初心者のころ、おお!画面に出た!うわっ!色変わったと楽しかったです。

では、仕上げに入りましょう!

 

JavaScriptで動かしてみよう

`</body>`タグの直後に次のコードをコピペしてください。

<script>
document.querySelector('input[type="button"]').addEventListener("click", function() {
var text = document.querySelector('input[type="text"]').value;
var msg = "";
if (!!text) {
msg = text + " さん、お疲れ様でした。\n最後にもう一度、声を出して読んでみましょう。\n\nせーのっ!\nF12.jp(えふじゅうに どっと じぇいぴー)!";
} else {
msg = "あれ?未入力ですよ!\nまだサイト名覚えてないから未入力なんですかね。\nF12.jp(えふじゅうに どっと じぇいぴー)ですよ!";
}
alert(msg);
});
</script>

 

入力欄を未入力のまま、クリックするボタンを押してみましょう。

名前を未入力でクリックするボタンを押した画像

 

次に名前を入力してから押してみましょう。

 

簡単にコードの流れだけ解説します。


  • step.1

    「クリックする」と表示されているボタンを取得


  • step.2

    ボタンにクリックの機能を追加


  • step.3

    クリックされたら、「ここに名前をいれてね」と書かれた入力欄の値を取得


  • step.4

    メッセージをいれておくための変数(保管しておく箱みたいなもの)を用意


  • step.5

    条件分岐:値が入っている = 入力欄の値+「お疲れ様でした~」のメッセージを保管


  • step.6

    条件分岐:値が入っていない = 未入力のメッセージを保管


  • step.7

    5か6で保管されたメッセージを表示する

 

この順番通り上から読んでいくとなんとなく、わかりますか?

 

1行だけわかりにくいかな?と思うので、補足です。

少しプログラム構文的なお話を書くので、おなか一杯になった方は読み飛ばしてください。

 

if (!!text) {
}

JavaScriptの変数には、変数名の前に「!」をつけることで強制的に肯定:true / 否定:false に変化させるという特性を持ちます。

肯定・否定を使って条件分岐の書き方であるif文を判断します。

肯定の場合は上、否定の場合は下を通ります。

「!」一つで否定、「!!」二つで肯定

変数の中身が、0, null, undefined, ""(空文字) の場合、否定のfalseを返します。

それ以外の場合、肯定のtrueを返します。

今回は、入力欄の値が空文字かどうかを判定しています。

入っていたら、肯定なので「お疲れ様」の方を通ります。

入っていなければ、否定になるので「未入力」の方を通ります。

 

まとめ

こんなに長めな記事をここまで読んでくれてありがとうございました。

そしてお疲れ様でした!

 

Webサイト制作に最低限必要な技術は、HTML, CSS, JavaScriptです

中でもHTML, CSSは書けば表示が変わるという見た目にわかりやすいのでとっつきやすいですね。

ちなみにこの二つができるようになるだけで、お仕事を受けられたりします。

例えば、デザイナーが作ったデザインを元にブラウザ上に表示していくコーダーというお仕事ですね。

 

HTML, CSSにデザイン技術をかけ合わせるか、JavaScriptをかけ合わせるかであなたの表現の幅が増えます。

もちろん、お仕事の幅も増えます。

 

お仕事を取れるようになるにはもっと知らなければいけないことがたくさんありますけどね。

しかし、この記事でHTML, CSSでどのように調べていけばいいかはわかったのではないでしょうか?

 

他サイトだと最初はProgateだ!と書いてあるページが多いですね。

もちろん、Progateは最初のとっかかりにはとても素晴らしいサイトだとは思います。

ぼくも体験してみたのですが、楽しみながら進められますね。

ただ、あまりストレスなく次々進めます。

 

ぼくが思うに学ぶ最短の方法は、自力でつまづきながらも進めることで記憶に定着させていくことだと思います。

結局、Progateを卒業した後に進むのはこのページのようなやり方になるんですよね。

これを通っていかないと先には進めません。

だからこそぼくは最初こそ自力で少し進んでみる、今回のやり方をおすすめしています。

 

最後まで読んでいただきありがとうございました。

-プログラミング

© 2021 はにわブログ