友人にホームページの作り方を教える事になった。
-
著者
Yuhei Katayama
人になにか教えるって苦手ですが、ホームページって案外、作るの簡単です。
１日あれば、簡単なサイトくらいは作れますけど、
それを教えるのって難しい・・・だって、知らない間に作れるようになってたから。
ボクみたいな人って教えるのが苦手です。なんでわからんの？そのままやで？タイプです。
とはいえ、覚えて欲しいので、屁理屈をいう友人に覚えてもらうために自分なりに考えました。
HTML５の構文を覚えよう。
今はHTML５ですから、まずはその構文を教えました。
が！しかし、DW（ドリームウィーバー）を使っていたので、新規作成で最初から出来上がっています。
すいません。ボクが覚えてません….( ˘ω˘)
別に覚えなくても良かった。
彼もAbobeCC使ってるので、DWを入れてもらいました。
！（ビックリマーク）押してTabキー押したらHTML5の構文が展開されるで。
彼はこう言いました。
「なんで？」
これ大事なことです。
( ﾟДﾟ)＜ウェブもプログラムも一緒です。
( ﾟДﾟ)＜そうなるからそう！そういうもん！！
これマジで大事だから、そこに意味とか求めなくていいから。
そこは素直な気持ちで覚えておこう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
ちなみにDW（ドリームウィーバー）では上のコードが展開されます。
いやほんと便利な世の中になりました。
基本的な組み方
次にHTMLの基本的な組み方を教えることにしました。
ここは結構重要なので、普通に覚えましょう。
html,body,header,nav….これらタグといいます。
タグは、<html><body>ここにテキスト</body></html>
このように挟むようにして使います。/←閉じタグ
閉じタグ忘れ最初のころは多いんですよね。レイアウト崩れたりするんで、しっかりチェックしましょう。
タグには順番が切っており、タグの名前によって役割が明確に決まっています。
基本的にはこんな感じの組み方になります。
articleとsectionはちょっとややこしい。
articleはそのページ内の単体の要素。そこで完結しているもの。
sectionは、節とか、部分的って意味。
なので、articleの中にsectionがあってもおかしくないし、sectionの中にarticleがあってもおかしいわけではない。
まぁここは別にあっても間違ってても問題ないになったことないので、特になんでもいいかなーって思ったりします。いんかな？ダメ？
HTML5から使えるようになった便利なタグが、結構あるんですが、初心者はそこまで覚える必要はありません。
とりあえず画像にのってる基本的なタグだけでOKかと思います。
HTMLは高校の時触ってたこともあって、すぐ理解してくれました。よしよしその調子だ。
絶対順守のルール
注意とか書くとやらなくてもいんかな？とか思うかもしれないので絶対ルールとしました。
- H1はサイトに一つしか作ってはいけません。
- H2～H5は順番に作らなくてはならない。順番が途中で逆になったりしません。
- ID名・クラス名の頭文字は数字以外にすること
- TOPページのファイル名はindex.htmlにすること
HTMLとスタイルシート（CSS）ってなに？
次にスタイルシート、通称CSS（Cascading Style Sheets）について教える事にしました。
よくわかりませんでしたが、ここは結構つまづくポイントみたいです。
HTMLだけでは自由にデザインするのが難しい。そこでスタイルを書きます。
HTMLの中に直接かけますが、それだと複数のページに対応するのがめんどくさいので、外部スタイルシートを使って作るように教えることにしました。
<link rel=”stylesheet” href=”style.css”>
同じフォルダ内にいるならこの書き方でOKです。
<link rel=”stylesheet” href=”フォルダ名/style.css”>
一個したの階層ならこのように書きます。
これを書く場所は、htmlのheadの中です。
サンプルはこちら
スタイルシートのデザインの適用方法
（タグ名・クラス名・ID名）{（セレクタ・プロパティ・値）}
これがCSSの基本的な書き方。といってもこれじゃわかりません。僕も最初これみて意味不明でした。
思うんですよね。（）カッコをつけるなと。
.border{border:1px solid #000000;}
これをいれると
これでデザインが適用されます。
セレクトはたくさんあります。本を買ってもいいし、ネットで調べてもOKです。
この顔が気持ち悪いシリーズの本がわかりやすかったかなーと思います。
それかこのあたりでもいいかも。イラストとかあるやつは別にいいかなーって感じしますね。
とりあえず初歩ではこれでOKかと思います。
疑似クラスってのもありますが、とりあえずおいておきます。
基本的にはこれがすべて。
あとはスタイルシートのプロパティがめちゃくちゃ数があるので、それを覚えます。
DM（ドリームウィーバー）にはアシスト機能があるので、スペル間違いもかなり少ないと思います。
ようこそホームページ制作の世界へ
最初はこんなもんでいいと思うんですよね。
こういうのって自分で覚えていくしかありません。画像の入れ方どうだっけ？ってなれば
Googleで「画像 HTML」とか入れれば出てくるわけですよ。
それの繰り返しです。
作って、作って、作りまくる！
立派なコーダー（ホームページを作る大工みたいな人）には、勉強するしかありません。
近道はありません。
でも、安心してください。
結構、簡単です。
まぁ結局はこれですね。
騙されたと思って、まずは作る。
あと、これだけは保証します。
ホームページ作るって楽しいんです。
自分のサイトを持つって楽しいんです。
こんな僕で良ければ教えます。
» Twitterへメッセージ送ってくれてもいいよ
» Facebookの友達申請はこちらどうぞ
» インスタグラムはよくわからんけどやってます
なんかあれかな。こんな感じで書くと、この人わかってないんちゃう？って思って仕事へるかな？
ちゃうんやで、最初に言ってるけど教えるのが下手なだけなんやで。
とほほさんのサイト見て勉強してください。とても分かりやすいです。
Webページ作成入門
