初心者向けサイトの作り方
これから複数回にわたってサイトの作り方について説明していこうと思います。
完全に初心者向けなので踏み入ったところまではあまり書かないかもしれません。
なるべくわかりやすく解説できればと思っていますが、わからない所があればコメントやTwitterで教えていただければ追記等させていただきます。
サイトは何でできているのか
基本的に下記のようなもので作られています。
・HTML
・CSS
・javaScript
・jQuery
それでは1つずつ説明していきます。
HTML
HyperText Markup Languageの略です。
サイトの基礎になるマークアップ言語です。
ここにサイトに入れる文字や画像を書き込んでいきます。
マークアップ言語とあるように、サイトのここがタイトルですよ、ここは本文ですよとコンピュータにわかるように教えてあげるものになります。
じつはHTMLさえ使えることができればサイト作成は可能です。
ですが、HTMLだとデザインする（色を付けたり配置を決める）際にかなり複雑になってきます。
なのでHTMLでは「ここは○○ですよ」という指示だけを書いて別のCSSというファイルでデザインを整えるのが現在の主流です。
タイトルに有るようにHTML5となっていますが、５と言うのはバージョンになります。
仕様などが日々更新され、バージョンが上がっていっています。
今新規で作られているサイトはほぼHTML5になっています。
CSS
Cascading Style Sheetsの略です。
HTMLで書いたものに色や線、配置などデザイン的な部分（見た目）を調整するのに使用します。
CSSにもバージョンがあり、現在はCSS3まで出ています。
新しいものだと、画像を使わずとも影をつけたり、動かしてみたりなどできることが増えてきています。
javaScript/jQuery
主にサイトの動きの部分を作るのに使用します。
例えば、メニューにカーソルを近づけると下に更に細かなメニューがアニメーションで降りてくるところやスライドショーなんかがこれらで実装されています。
内容的には上記２つのHTML、CSSより難易度は上がりますがHTML・CSSをマスターしてからチャレンジしてみてください。
サイト制作に必要なもの
テキストエディタ
テキストが打てるものなら基本的になんでも使えます。
windowsであれば、メモ帳でも可能です。
個人的にオススメなのは『サイトコーディングにオススメのテキストエディタ『Sublime Text3』』こちらの記事で紹介した「Sublime Text3」です。
もちろん既に他のテキストエディタやAdobeのDreamweaverを使っているという方は変える必要はありません。
ブラウザ
作っていくサイトがどのように表示されているか確認用に使用します。
どんなものでもOKですが、ここではGoogle Chromeを使用します。
個人的にはGoogle Chromeかファイヤーフォックスがオススメです。
準備物はこれだけ！
使いやすさ等を考えなければ何もインストールすることなく始めることができます。
初心者向けサイトの作り方【HTML基礎編】
さて『【サイトの作り方】HTML5でサイトを作ろう！【準備編】』ではサイトを作るための準備について書きましたが、皆さん準備はできましたか？
今回からは実際にコードを書いてサイトを作成していきます。
ではいってみよう！
HTMLファイルを作る
新規作成
ではまずはじめにテキストエディタで新規作成を行います。
前回の記事のテキストエディタを使用して「新規作成」を選びます。
HTMLファイルの作成と保存
HTMLのテンプレートの作成します。
ここは後で説明しますが、はじめはあまり覚えなくていいです。
こんなのがあるんだ〜程度に考えていただいて結構です。
AdobeのDreamweaverなんかで作成すると自動で入力してくれる基本中の基本の部分になります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
これが基本的なコードになります。
意外とシンプル！
では、このファイルを保存します。
ファイル名は「index.html」にしてください。
なんで「index.html」にしないといけないかというとこれがWebサイトのトップページですよ～と教えるためです。
保存が完了したら、そのファイルをダブルクリックしてみてください。
お使いのブラウザで表示されるかと思います。
真っ白なページが・・・
当たり前ですが、何も入力していないので何も表示されていない状態です。
文字を入力
先程書いたコードの『』の間に文字を入力します。
【参考】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> コード書くのたのしー！すごーい！ </body> </html>
入力する文字はなんでも結構です。
入力し終わったら上書き保存をしてブラウザで開いているところを更新してみてください。
「コード書くのたのしー！すごーい！」って表示されましたね！
わーい！やったー！
Webサイトはこうやって文字や画像を入れてCSSで位置を調整してできているわけです。
各箇所の説明
<!-- ①DOCTYPE宣言 --> <!DOCTYPE html> <!-- ②lang属性 --> <html lang="ja"> <!-- ③headタグ --> <head> <!-- ④meta要素 --> <meta charset="utf-8" /> <!-- ⑤titleタグ --> <title></title> </head> <!-- ⑥bodyタグ --> <body> </body> </html>
①DOCTYPE宣言
これからHTMLでこのバージョンだよ！とブラウザに教えるための宣言です。
今回はHTML5の仕様で書くので短いですが、HTML4.0やXHTMLといった古いバージョンになるともう少し長い宣言文になります。
覚えてもいいですが基本コピペで大丈夫なのでHTML5の宣言なんだなと軽く頭に入れておくだけでおｋです。
②lang属性
使用する言語を示しています。
『ja』という部分はJapaneseの略で、日本語を使うよとブラウザに宣言しています。
英語の場合『lang=”en”』と入力します。（Englishの略）
③headタグ
headタグ内の記載は基本的に表示されない部分になります。
まだ出てきていませんが、サイトのデザイン的な部分に使用するCSSや動きをつけるjavaScriptを呼び出したりする部分です。
１ページに１度だけ使用することができるタグです。
④meta要素
『charset』はPCにこの形式の文章を保存しているからこの形式で読み取ってねという部分です。
テキストエディタによってHTMLファイルを保存時等に選べるものが有りますが、そちらもUTF-8に設定しておきましょう。
またmeta要素は『charset』にも様々な宣言があります。
この講座の中でも後ほどいくつか出てくるかと思うので随時説明していきます。
⑤titleタグ
ブラウザでWEBサイトを見たときにタブにサイト名やページ名が表示されるのはご存じですか？
あれがこのtitleタグです。
ページのタイトルを入力して使用します。
⑥bodyタグ
いつもWEBサイトでみている部分です。
基本的にここに画像や文字を入力していくことになります。
まずはじめにHTMLでよく使用するタグについて説明します。
よく使うタグ
見出し「h1~h6」
h1~h6は見出しに使用するタグです。
見出しってなんぞや？いつ使うんや？と言うと文章書く時タイトルがあって各項目に少し大きな字などで見出しがありますよね？
あれです！
【例】
大見出し(h1)→新発売！HTMLがよく分かる本！
中見出し(h2)→本のポイント
小見出し(h3)→ポイント①
本文
基本的にh○の数字が大きいほど大きな見出しになります。
なのでh6のあとにh1など見出しの順番がおかしくならないように注意して使いましょう！
実際に書いてみるとこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>新発売！HTMLがよく分かる本！</h1> <h2>本のポイント</h2> <h3>ポイント①</h3> <p>テキストが入ります。</p> <h3>ポイント②</h3> <p>テキストが入ります。</p> </body> </html>
段落を作る「pタグ」
主に文章を入れる時のタグです。
文字を入れるときはだいたいこれを使います。
一番良く使うタグの１つです。
実際に書いてみるとこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p>サイト制作たっのしー！わーい！</p> </body> </html>
改行「br」
「p」で文字を打っていて途中で改行したいときも出てくると思います。
そんなときに使うのが「ｂｒ」です。
初心者の方でたまに見かけるのがｂｒを使って隙間を開ける方法です。
「ｂｒ」はあくまで文章の中で改行させるのに使用するものなので、コンテンツ同士の隙間を開けるためなどに使うのは絶対にやめましょう。
実際に書いてみるとこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p>最近めちゃくちゃ寒いですね。<br> こんな日は肉まんに限ります。</p> </body> </html>
リスト「ul,li」「ol,li」
箇条書きリストや手順など順番のリストを作る時「・○○○」とか「1.○○○」を書いたりしますよね。
それがこの「ul,li」と「ol,li」になります。
「ul,li」が箇条書きの「・○○○」
「ol,li」が手順など順番の「1.○○○」
になります。
実際に書いてみるとこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>ピーマン</li> <li>キャベツ</li> <li>人参</li> </ul> <ol> <li>野菜を洗う。</li> <li>野菜を炒める。</li> <li>完成</li> </ol> </body> </html>
ぱっと思いつくのはこれぐらいのタグでした。
実際に打って使ってみてください！
他にもいろいろなタグがありますがまずはこれぐらい覚えておけばあとはわからないときに調べるという形にするのがベストかと思います。
実際仕事としてやっていても覚えているのは１部で日々調べながら行っています。
次回からCSS編にはいっていきます！
このシリーズで足りなかったタグなどがあれば随時次回の講座でも紹介していくので進めながらいろいろなタグを覚えていきましょう！
次回更新までしばしお待ち下さい！
web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！
