webサイトを作ってみたい
webサイト作ってみたいな～って思ったことがある人は
結構いるかと思います。
そんな人向けの超！入門編の記事です。
（当アザラシホールでは※プロのご遊戯はお断りしております）
記事としてはかなり長いので覚悟の準備をしておいてください。
※ 詳細なことは書かずにさらっと書いて、作ることへの興味を持つ人を増やしたい記事なので、
web制作とかもうバリバリやってる人はQiitaへどうぞ。
0.そもそもどういうの作りたい？
■ 見た目とか自分で考えてこだわっていきたい！
参考になるかわかりませんが、記事を見ていってくださいね！
■ 見た目自分で作るの難しいけどなんか作りたい！
参考になるかわかりませんが、記事を見ていってくださいね！
■ ブログで良いからきれいな見た目のサイトを作りたい！
ﾊｧ～～～（クソデカため息
・ WIX
・ ライブドアブログ
・ fc2ブログ
・エキサイトブログ
Get out here.
■ このブログみたいなの(wordpress)で作りたい！
これは今回の記事だと説明すると長くなるので、いつか書きます
1.そもそもウェブサイトって何で出来てるの
みんなが見てるこのサイトやあんなサイトはそもそも
何で出来てるんだろう・・・というところから始まります。
webサイトを構成している基本のファイルはこれらです。
.css、.html、.jsのファイルで大体のサイトはできています。
サイトによっては .htmlだけで作っている場合もありますね。
最近は.htmlだけのサイトは余り見かけませんが古いサイトとかだと
そういう作りでやっている場合もあります。
例えば 阿部寛のホームページ
他には .html ではなく .php というファイルでサイトを作っている場合もあります。（このサイトもそう）
今回は無料の範疇で実際に公開できるところまで持っていける記事なので
.phpで作る方法は書きません。というか超入門なのに .php 出すのは
ハードル上がっちゃう。
1-2.ファイルの説明
■ index.html
これはwebサイトの中身が書いてあります。
例えば 文字を書いたり、画像を読み込む記述を書いたり
動画や音楽を読み込む記述を書いたり・・・
と、これがなければ始まらないファイルです。
■ index.css
cssとは カスケーディング・スタイル・シート の略です。
詳細な解説サイト | CSSとは？
これはウェブサイトの見た目を構成するファイルです。
これを .html 側で読み込んであげることで
画像を横並びにしたり、文字を大きくしたり、文字の色を変えたりします。
阿部寛のホームページのように .css を使ってない場合は
.html 側に直接cssに書く見た目の記述を書くことで見た目を変えています。
■ index.js
webサイトによってはきれいなアニメーション
ローディング画面、ボタンを押すと開閉する要素、
画像を押すと全画面で表示してくれる物、
スライドショーなどなど、アニメーションをさせたり
するものがよく見られると思います。
基本これらは JavaScript というもので動いています。
（cssだけで実装できるものもあるので一応基本としておきます）
■ 余談
特に説明しないで index.html というように index というファイル名で
説明してきていますが index.html というファイル名である理由はあります。
仕組みを理解しよう
先程の index.css, index.html, index.js はサーバーにファイルをあげることで、ブラウザから見れるようになっています。
サーバー側に index という名前のついた .html ファイルを用意することで、
サーバー側が自動で検索してくれるようになっているのです。
ちなみに css, js にindexとつけているのは特に理由はないですが、
実際に作るときはわかりやすいファイル名にするのがいいですね。
実務で見たことのあるファイル名の付け方は
cssだと main.css, style.css, index.css が多かった印象です。
jsは script.js, index.js, 機能の名前(animeとかsliderとか).js
ですかね。そこら辺は最初は深く考えず、わかりやすいファイル名をつける
とだけ憶えておけばいいかと思います。
やっていくうちにこうしたら良いんじゃないか？等出てくると思いますので。
2.とりあえず作ってみようよ！
あーだこーだ説明するよりは実際に作ってみるのが一番いいです。
百聞は一見にしかず です。
けど作るって言ってもどうやって作ればいいのさ・・・（ｺﾛｺﾛaa略
となると思います。
2.1どうやってので作ってるの？
作るにあたって、大体はコーディング用のIDE(統合開発環境)か
sublimeText,Atom.VSCode等のテキストエディター等を使ってますね。
windows付属のメモ帳だけでも作ることはできますが、
実際メモ帳で書いてる人なんて・・・いないでしょ？
（見たこと無いよ実務で）
ですので、面倒でなければVSCodeというソフトをDL&インストールしてください。(無料です)
無料だけどかなり優秀っていうか最強まであるので実務でも使ってました。
インストールすると日本語ではなく英語だとおもいますので、
日本語化の仕方の記事を貼っておきます。
Visual Studio Code [vsCode] 日本語化
そんなに難しい手順は無いのでやってみてくださいね。
2.2作るための準備
vscodeの準備が終わった人はここから一緒にhtmlを作っていきましょう
もしインストールができなかった場合は仕方ないですが、
windows付属のメモ帳などでやってみてください。
今回はVSCodeでの説明になりますのでメモ帳のひとは頑張ってください。
デスクトップでもなんでも良いので、作業用フォルダを用意しましょう。
フォルダ名は
websiteやウェブサイトやウェブサイト！等のようにわかりやすい
名前であれば何でも良いです。
こんな感じで作れましたか？
次はVSCodeの方に移ります
2.3VSCodeでの操作
VScodeを開いたらこんな感じの画面が出てきたかと思います。
これが起動画面です。先程作ったフォルダをVScodeで開きますので
ドラッグアンドドロップでVScodeに乗っけるか、左上の ファイル
という部分からフォルダを開くを選択して開きましょう
フォルダを開いたらこのような画面になり、左側に開いてるフォルダ名が
出ているタブがありますね？
マウスをホバーするとこのようなボタンが出ます。
左から
・新しいファイルの作成
・新しいフォルダの作成
・最新の表示に更新
・すべて折りたたんで表示（フォルダなどを閉じた状態になる）
今回は index.html と index.css と index.jsをファイルで作成します。
なので、新しいファイルの作成を押してみます。
押すと、このように新規ファイルを作成にあたって、
名前を打ち込むものが出てきます。
ここに、先程の
index.html
を打ち込み、作って見ましょう。
作成したら、こんな感じになりましたか？
作成した index.html がタブで開かれているのが分かるかと思います。
ここに html を作成する記述を書いていくわけです。
index.htmlを作成したのと同様に index.css index.js も作成しておいてください。
2.4htmlの基本的な書き方
では html の基本的な記述を書きます。
html の基本は
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
です。
上から順番に説明します。
■ <!DOCTYPE html>
htmlにも実はバージョンがありまして、最初に
これはこのバージョンで作ってますよ。と、宣言することで
ブラウザ（chromeとかfirefoxとか）が理解し、それにあわせて
読み込んでくれます。
参考サイト : <!DOCTYPE html> …… ドキュメントタイプを宣言する
今回の場合は html5 で作成しているので
html5で作ってますよ。と認識して貰う場合は
先頭に、 <!DOCTYPE html> と記述します。
■ <html> … </html>
<html> タグを記述することで ここから html の内容を書くよ！と
宣言しているのです。
</html>は ここまでが html だよ！という意味です。
htmlでは基本的に<h1></h1> だったり <p></p>
のように始めと終わりを記述します。
参考サイト :
<HTML> …… HTML文書であることを宣言する
ちなみに先程も貼った参考サイトのリンクですが、
実務でもかなりお世話になってるサイトで、htmlで使用する
タグを調べるときは 先程のサイト で調べるのをオススメします。
■ <head>…</head>
<head> は ウェブサイトのタイトル
（このブログだったら アザラシ備忘録）
や、サイトの簡単な説明。
スタイルシートの読み込みの記述。
など、サイトの情報に関わる記述をします。
参考サイト : <HEAD> …… 文書のヘッダ情報を表す
■ <body>…</body>
<body> の中には、webサイトの文章だったり、
画像だったり、動画だったり・・・
つまりここがウェブサイトを構成している
中身を記述する部分ですね。
サイトを作る上ではここにいろいろと
記述していくのです。
上記のタグたちがhtmlを作る上で
必要不可欠なものになります。
というか、コレをかけば、ブラウザで表示することは
すでに可能なのです。
とりあえず、先程のテンプレートを
作成した index.html に記述してみましょう。
こんな感じ。ちなみに何かファイルに変更を加えたら
ctrl + s (macなら ⌘ + s だっけ)で保存するのを忘れずに。
保存したら index.html の見た目がちょっと変わっちゃった！という人。多分インデント(スペースやタブによる階層というか段差というか)が変更されると思います。
設定の変更などは
参考サイト : Visual Studio Codeのhtmlフォーマッターのメモ
に詳しく乗っていますので、参考サイト様を参考に
していただいた方がいいかと思いますので、そちらでお願いいたします。
3.実際に記述していこう！
基本的に記述するものは理解してもらえたかと思います。
しかし、このままではなにもないサイトが表示されるだけです。
ここから必要なものを記述していきましょう！
とりあえずまずは文字を表示させて実際に記述したものが
反映されて、なにか出来た感を味わって行きましょう。
このように記述します。
<body>…</body>
の間に
<p>こんにちは！</p>
と記述しました。
<p>はparagraphの意味で 段落 を表します。
参考サイト : <P> …… ひとつの段落（パラグラフ）であることを表す
基本的に文字を入れる時は p タグを使って入れることが多いです。
（一応他のタグで入れることもありますが、基本としては p タグです。）
では、この状態でブラウザで表示してみましょう。
ブラウザで表示するにはChromeやFireFoxに今回作成している
index.htmlを開きます。開くにはChromeやFireFoxに
index.hmtlをドラックアンドドロップすることで開きます。
では早速やってみましょう。
こんな感じで表示されました！
先程、pタグで入れた こんにちは！がしっかりと表示されていますね。
何かしらできた感覚は味わえたかと思います。
しかし、これだけではwebサイトができた！とはいいづらいですよね。
文字のサイズや色を変えたり、画像を表示させたり・・・
色々したいと思います。
ここで、cssが出てきます。
cssで文字のサイズなどを指定してあげることでサイズが変わったり
文字色を変更することができます。
3.1 cssを使ってみよう
htmlでcssを使えるようにするには、html側でcssを読み込む記述を
書かなければいけません。
なので、その記述をhtml記載していきます。
記載する記述は
<link rel="stylesheet" type="text/css" href="./index.css">
となります。
3.1.1 link要素について
参考サイト : 外部スタイルシートを読み込む
<link>というタグがそもそもありまして、その属性に
色々付け加えることでスタイルシートを読み込んでいます。
linkという要素について見てみましょう。
参考サイト : link 要素
上記サイトの中に属性一覧という項目があるかと思います。
今回スタイルシートを読み込むにあたって使っているものは
rel , type , href
ですね。これらについて少々説明します。
3.1.2 rel属性について
rel : この文書から見た（index.html）リンク先(index.css)の関係
index.htmlで読み込むにあたってこれはなんのファイルなの？
というのを書いて上げることで、cssとして読み込みます。
なので
rel="stylesheet"
と記述することで css なんだね。と認識してくれています。
3.1.3 type属性について
type : リンク先のMIMEタイプ
MIMEタイプと言われても正直よくわからないですよね。
これはそのファイルがどういうファイルであるか？という事を記述します。
参考サイト : MIMEタイプ
MIMEタイプはブラウザとサーバーでファイルをやり取りする際に
ブラウザ側はMIMEタイプをみて処理しています。
なので、拡張子で .jpg や .css と書くだけで画像やスタイルシートであると
認識しているわけではなく、MIMEタイプを参考にしているわけです。
例えばただのテキストファイルの場合は上記のリンクを参考にすると
拡張子は .txt ですが、MIMEタイプは
text/plain
となっています。
text/plain は左がタイプ名、右がサブタイプ名という規則になっていますが、
左が大グループで右が小グループとしておぼえておけば大丈夫です。
なので、text/plain で説明しますと、
テキスト（人間が理解できる文章）の大グループに所属している
プレーン（平文）ですよ。ということです。
この理屈でスタイルシートの text/css を読み解くと
テキスト（人間が理解できる文章）の大グループに所属している
カスケーディングスタイルシート（css）ですよ。
ということです。
このような記載をすることで、ブラウザ側はwebサイトのデータを
サーバーから取得する際に、MIMEタイプを確認して
正しく利用しているということです。
3.1.4 href属性について
hrefには、ファイルの場所やリンク先を記述します。
記述するものは URI と呼ばれるものです。
え、URLじゃないの？と思われるかも知れないので違いを書いて置きます。
3.1.4-1 URIについて
URIは URL , URNをまとめた物の言い方です。
URLというのは web上での住所（アドレス）で
URNは名前（サイト名）です。
ただウェブサイトを作りたい！というだけなら必要では無いかも知れませんが
知っておけば、URI・・・？URLじゃないのか？
と疑問に思って躓いてしまうことがなくなります。
なので、そんなこともあったな。
ぐらいに頭の片隅でおぼえておいて貰えれば、
何かあった時に役立つかも知れません。
3.1.5 早速CSSを書こう
大分長くなってしまいましたが、スタイルシートを
読み込む記述を書きましょう。
<head>…</head>の間に、先程のスタイルシートの記述を書きました。
スタイルシートの読み込みなどはhead内に記述します。
これでindex.cssは読み込まれるようになりました。
しかし、index.cssの方にはまだ何も記述していないので、
何も起こらないかと思います。ですので、
ここからは index.css にスタイルの記述をしていきます。
index.cssを開き、このように記述しました。
記述した内容は
p {
font-size : 20px;
}
これは、 p タグのフォントサイズ（文字サイズ）を20pxのサイズに変更します。
という記述です。この状態で、先程のindex.htmlを開いているブラウザを
再読み込みすれば、変化があるかと思います。
文字のサイズが大きくなりましたね！
これでスタイルシートが反映されているのが
確認できたかと思います。
今回はフォントサイズの変更でしたが、
他にも文字の色を変えたり、フォントを変えたり
cssで要素のレイアウトを整えたりします。
他の用途については様々な記事を書いてる人が星の数ほどいますので
css 使い方
などで調べてみてください。
というのも、一般的によく使うCSSの記述を全て説明していると
とんでもなく長くなってしまうからです。
ですので、詳しく書いてあるリファレンスサイトなどで
使いたい機能を調べる癖をつけるのがオススメです。
3.2 JavaScriptを書いてみよう
次はJavaScriptの書き方、というかこうしたらJavaScriptが動くよ！
という説明を記述していきます。
JavaScriptに関してもWebサイトを作る上で、あれがやりたい、これが
やりたい等の考えが出て、これはCSSやhtmlじゃできないないな。
じゃあJavaScript使おう！という流れになるはずです。
なので、今回はボタン要素を用意して、クリックしたら
何か反応があるようなJSを記述してみたいと思います。
作成しておいたJavaScriptファイルをhtml側で読み込む必要がありますので、
html側に読み込む記述を記載します。
</html>の一行前に書きの記述を記載しました。
<script type="text/javascript" src="index.js"></script>
<head></head>の間に入れるんじゃないの？と思った方も居るかもしれません。
確かに、先に読み込んだほうがいい場合もありますが、
今回はhtmlの要素に対してjsを使うので、htmlがしっかり生成されてからじゃないと、js側で要素を取得できません。ですので、</html>の１行前に記載しました。
これで、index.jsを読み込む設定ができました。
今回はボタンをクリックさせるので、ボタン要素を用意しましょう。
index.htmlの<body></body>の間にこのような行を追加します。
<button id="button">押してね！</button>
<p>こんにちは!</p>の下の行に自分は追加しました。
VSCodeでの見た目だとこのような感じになっているかと思います。
button の後に記述している id="button"ですが、
要素につけることで固有の要素として使うことができます。
名前に関してはわかりやすければ基本は何でもいいですが、
IDにつけられる名前は被ってはいけません。
なので、buttonというIDをつけたら、その要素以外ではそのID名は
使ってはいけません。
このようになりましたか？
この状態で一旦htmlをブラウザで開いて見ましょう。
こんにちは！の下に押してね！のボタンが追加されているのが
確認できたでしょうか？
今この状態でボタンを押しても特に何も起こりません。
何かアクションを起こすためにJSで記述を書いていこうと思います。
index.jsでボタンをクリックしたときに何かする。という記述は
以下のような記述になります。
var target = document.getElementById("button");
target.addEventListener("click", function (e) {
console.log("hoge");
});
document これはhtml要素を取得するために記述しています。
. でつなぐ事でそれに関連する関数を呼び出しています。
関数については今回は説明しませんが、機能を呼び出していると
思ってください。
getElementByIDはhtml内で button というID名を使用しているものを取得する
ということです。なので今回、<button id="button"> を取得しているということになります。
addEventListener は要素に対してなにかが起きたらというイベントを検知させる
為の記述です。今回は “click" を検知させたかったので、
target.addEventListener(“click",function(e){
});
と記述しました。
function(e)は関数を作成して、"click"されたときに
この関数が作動しますよということです。関数って普通は
function hoge (){
}
みたいに名前がついていることが多いですが、JSでは無名関数というものがあり、
関数に名前をつけなくて使用することができます。初めてだとちょっと困惑するかも。
(e)というのはイベント発生時にイベント情報を関数に渡しています。
どういうデータが入っているかというと、どんなボタンが押されたか～
等というイベントにまつわるデータです。
気になる方は
target.addEventListener("click",function(e){
console.log(e);
});
で、先程の記述だとクリックしたときに何かするまでの準備はしましたが、
何をするかまでの記述は書いていません。
何をするかの記述は
function () { ここに書く！ }に書きます。
なので、今回はクリックしたらテキストが変わるようにしてみましょう。
一旦この状態でブラウザで確認してみましょう。
押してね！というボタンが出ているかと思いますので、そちらを押してみます。
押すと、コンソール画面に hoge と出ているかと思います。
ちゃんと js が動作していることが確認できたかと思います。
今回はテキストを変更したいので、<p>要素をJavaScriptで制御しやすいように
クラス名を書いてみます。
<p class="text">こんにちは！</p>
<p>要素を以上のようにしました。みなさんの方でも変更してくださいね。
IDと違って、classは何度でも同じ名前を使うことができます。
ちなみに、classやIDをつけることでcssでもその名前を指定することで
スタイルを当てることができます。
JS側でClass名から要素を指定する時は、
getElementsByClassName()
を使います。一旦これでテキスト要素が取得できているか確認してみましょう。
var target = document.getElementById("button");
var text = document.getElementsByClassName("text");
target.addEventListener("click", function (e) {
console.log(text);
});
このように成りました。 var text ~~ で textという変数に <p class="text">の要素を格納しました。これで<p class="text">に対して操作ができるようになりましたが、ちゃんと格納されているか確認するために、console.log(text)を記述し、
コンソール画面に正しく要素が格納されているか確認します。
ボタンを押したときに console.log(text); が動作するので、ボタンをクリックしてみると、Consoleにちゃんとtextの要素がでていますね！
ちゃんと取得できているのが確認できました。
では、このテキスト要素にJS側で操作を加えてみましょう。
今回はテキストを操作するので innerHTMLに変更を加えます。
下記のような記述になりました。
var target = document.getElementById("button");
var text = document.getElementsByClassName("text");
target.addEventListener("click", function (e) {
text[0].innerHTML = "お前をみているぞ";
});
text[0]となっている理由は、getElementsByClassNameで取得する時は
複数あるものとして要素を取得しています。なので、一個しかなくても
配列要素で帰ってきているのです。
コンソール画面を確認すると、0: p.text
と記載されていますね。配列の場合このように入ってきています。
配列ってなに？って言う人も居るかと思いますので軽く解説します。
普通の変数は var hoge = “こんにちは";
のように変数に入れるのは1つの要素のみです。
ですが、配列方式を取ることで、複数の要素を入れられます。
var hoge = [“おはよう","こんにちは","こんばんは"];
上記のようにすることで配列で複数の要素を入れられます。
これらは番号が振られていて、 左から 0,1,2…とどんどん増えていきます。
なので、先程のtext[0]としていたのは、一番最初の要素に対して
なにかするよ。という記述でした。
では、先程のjsを記述して、ブラウザで確認してみましょう。
クリックしたところ、ちゃんとテキストが変わったのが
確認できたでしょうか？
これがテキストに対する操作でした。
4.終わりに
滅茶苦茶長くなってしまいました。
実際に作ったものをwebサイトとして公開したい場合は、
一番最初に上げた FC2ホームページ等で、ファイルをアップロードすることで
各々作成したwebサイトが閲覧できるようになります。
今回かなり簡単なことしかやっていませんが、
基本的なことはお伝えいたしましたので、これを拡張して
簡単なwebサイトを作ってみてはいかがでしょうか？