<div>とはなんぞや
HTMLに触れたことのないひとのための解説を超ゆるくするよ。
HTMLは基本的に< >でできたタグというもので包まれてできてる。
様々なタグには意味があって、それを正しく書くことで、コンピューターは何が書かれているかを判断してる。
今日は<div>（ディブ）を紹介するよ。
<div>はとにかくめちゃめちゃ使う。
それ自体に特別な意味はないけど、いろんなものをしまっておく容器みたいなもの。
例えばごましおくんが、「秘伝のぬか漬け」と「秘伝の浅漬け」の二種類を作っていろいろつけたいとする。
そしたらまずぬか漬けの容器<div>を用意する。
その中に、具材を入れる。そして容器に中身をいれたら、必ずフタで閉じる。
これが閉じタグ</div>だ。
閉じタグがないとフタは開きっぱなしだから、浅漬けにしたかったものも全部入っちゃう。
閉じたら、浅漬けの容器<div>を同じように作って中身をいれたら閉じる。
閉じタグは<div>に限ったことじゃなくて、ほぼ全てのタグに必要だよ。
例えが下手くそすぎてわかりにくい
実際にこれを使ってみると、
<div class="nukaduke">
<ul>
<li>きゅうり</li>
<li>ナス</li>
</ul>
</div>
<div class="asaduke">
<ul>
<li>白菜</li>
<li>人参</li>
</ul>
</div>
となる。ul.liは今回は気にしないで！！
横にあるクラス、、ってのはなに？？
クラスはタグにつけるラベルだよ。
今回はnukaduke(ぬか漬け)と
asaduke(浅漬け)ってラベルを付けたよ。
名前は自分が好きなものをつけられるけど、あまり長い名前や、分かりにくいものは使わない。1とか2とか、数字だけのもあまり使わない。
何で名前を変える必要があるの？？
変えなくてもいいんだよ。
ただ、cssで見た目を変えたい時に、divだけだと全てのdivにその効果がかかっちゃうから、他と変えたい時はクラスをつけるんだ。
逆に、同じ効果をかけたい時は、同じクラスを付けるよ。
同じクラス名でもいいの？。
ラベルにはidとclassの二種類があるんだけど、クラスは何回でも使えるよ。
idはhtmlで一回しか使えないから、idを付ける時は他で使わないか気をつけて。
わかった。
だから、さっき作ったnukadukeと、asadukeに同じ効果をかけたかったら、tsukemonoとか同じクラス名をつけて、それに効果をかければ、１つのcssで済むんだ。
cssはなるべく綺麗で簡潔に書いた方がいいからね。
話が逸れちゃったけど、HTMLを書いていると、よく閉じタグを失敗をしてサイトが崩れるよ。
だから、なんかおかしいって思ったら、タグを怪しんでみる。
一個多かったり、一個少なかったり。
< >このカッコが書かれてないこともある。
なるほど！！でもそもそもcssってのもよく分からない！
それはまた次回ね！！！！！！！！！！！！！！！！
HTMLの最初に書くアレ
DWとかコーディングソフトを使うと、勝手に数行文章が書かれた状態で始まるけど、あれって何が書いてあるんだろう。
DOCTYPE宣言とかのことかな
<!doctype html>みたいな感じだった気がする
それはこれからこの種類のHTMLで書きますよ〜っていうのを宣言してるんだよ。
宣言しないとどうなるの？？
きちんと中身が認識されなくて、作ったレイアウトが崩れてしまう可能性があるよ。ただでさえコーディングは細かいのに、そんなところで心配したくないじゃん？
だから宣言はするようにした方がいいよ。
実際の見ながら説明してほしいな
適当に撮ったスクリーンショットで説明するね。はじめの<!doctype html>は”この文章はHTML5で記述しますよ〜”ってこと。
あと<!body>とかはわかるとして、<meta charset="UTF-8">は文字コードってやつ。
webにはUTF-8とかShift-JISとか色々な文字コードがある。
webで文字を打つ時や読む時、コンピューターは「あ」をそのままの「あ」と読み込んでいるわけじゃない。
０と１の2進数「０１１０１０（適当）」や16進数「A０１F０１(超適当)」みたいな感じで表しているんだ。それは文字コードによってそれぞれ違う。
だからUTF-8 で書いたとしたら、きちんとこれは「UTF-8」だよって言わないと、コンピューターが「あらこれshift-JISかしら！」なんて文字コードを間違って認識してしまうんだ。
その結果変換して文字が変わっちゃって文字化けする。
なるほど。。コンピューターのための案内なんだね。
SEOとはなんぞや
よくSEOがどうとかって言うけど、何をどうすれば何がよくなるのか分からない、
今日はSEOかいごましおくん。
SEOはサーチエンジン・・なんとかって言葉の略で、すごく噛み砕いて言えば、”検索した時に自分のサイトを上位にもってくる”ための努力ってこと。
ちなみにこのブログは<h1>の見出しすら使っていない、SEO的には最低のブログだよ。
会話形式のブログだと見出しもなにもないよね。
そうなんだけどね。<h1>とかちゃんとあった方が形も綺麗だよ。ページでどれが重要な情報なのか、表示する側も閲覧する側も明確に知ることができるからね。
商品の説明書だって、長かったら目次とかあった方が見やすいでしょ？
確かに。
画像１つにしてもただイメージを貼り付けるんじゃなくて、alt属性を作ることで、それが一体なんの画像なのかgoogleが把握することができる。
このブログは何もしてないけど、「〇〇とはなんぞや」って検索すると一位にきてるよ。偶然の産物。
ちょっと待ってalt属性ってなに？あとgoogleだけなの？SEO対策は
alt属性はこの画像はこういう画像ですよーっていう一言説明みたいなもの。画像がうまく表示されなかった時に代わりに表示されたりするよ。
なんでgoogleかって、今やみんなが使う検索はほぼyahooとgoogleなんだけど、yahooの検索って実はgoogle の技術を使ってるから、結局大事なのはgoogleのSEO対策なんだ。
企業はもちろんSEO対策は必須だけど、個人ともなると、閲覧数を増やして広告収入を得たいなんて人はすごく重要になるよね。
このブログは目指してないの？
今の状態で口が裂けても言えないよね。
FTPとはなんぞや
HPを作りたいな・・。
レンタルサーバーなら手軽に出来るよ。
この間話したサーバーをレンタル出来るところがいくつかある。
どこがいいかは適当に比較サイトを検索して。 作成はポチポチ押してたら比較的簡単に出来るよ。
・・ふむふむ
ちなみに、サーバーに何かをアップロードする上でぶち当たるのがFTPだ。
・・FTP?
FTPって調べると大体「通信に使う約束事・プロトコル」って出てくる。
・・・
「サーバーに作ったHTMLとか画像を上げたり、閲覧したり、ダウンロードしたりできる仕組みがFTP」って感じに覚えるといいよ。
逆に言うとサーバーと自分のパソコンの間に挟まなきゃねって感じ！
仕組み？約束事はなんとなくいいけど、
じゃあ画像とかでどこにあげたらいいの？誰が対応してくれるの？
FTPのソフトをダウンロードして、自分のサーバーを認証するとソフトでやり取りできるよ。
ちなみにFTPでやり取りしたがってるごましおくんのPC側をFTPクライアント、やり取りされる側がFTPサーバーなんて呼ばれたりするけどここではスルーしよ。
・・・認証ってなんだ
サーバーをレンタルすると、FTPソフトそこにFTPサーバー名やら、FTPアカウント名なんてのが記載されてるから、そのソフトに打ち込んで認証してあげるのさ。
例外とかはちょっと調べてないから分かんないや。
・・・
ソフトは「FTPソフト」とかで検索して調べてみて。
MacとかWindowsで対応してるしてないがあるからね。私もダウンロードして初めて画面見た時はよく分からなかったよ。
設定したら、自分のPCのファイルが簡単にサーバーに移動できるんだよびっくりだね。
ちなみにレンタルサーバーの中にはソフトをダウンロードしなくても、ファイル転送の機能がついているものもあるから（大体そうなのかは分かんないけど）、とりあえずダウンロードしてから悩むといいよ。
無責任な・・・
IPアドレスとかドメインとはなんぞや
IPアドレスとかドメインとかなんとなく見たことはあるけど、何が何のためのものか分からない・・。
IPアドレスは数字の羅列(例：196.00.00.111)で、通信に必要な住所みたいなもの。
ドメインはそれを簡単に英数字表記にしたもの(例：○○.ne.jp)で、DNSはその間でIPアドレスとドメイン名を紐付けてくれるものさ。
・・・
例えばごましおくんが、住所IP(196.00.00.111)ってとこにいて、友達に来てよ！って言う。
でも友達にはそんな数字の羅列覚えにくい。
そのために、もっと簡単で覚えやすい名称(ドメイン名)を教えてあげる。
DNSは簡単な名称と、本当の住所を繋いでくれる役所みたいな感じだよ。
ついでにいうと住所IPアドレスっていうのはときたま勝手に名前が変わっちゃうから、そんな時にもDNSが、このドメイン名は確かこのIPアドレスだったぞ！って正しい住所を教えてくれる。
へえー
サーバーとはなんぞや
よく聞くサーバーってってそもそも何だ・・・・
サーバーって言うのは、webページを見たい、メールを見たいなんてことを要求した時に答えてくれるもの。
URLをブラウザに入力して検索すると、webサーバーがそれに必要な情報を返してくれるのさ。
・・・
例えばごましおくんが、HPを作って友達に見せたいとする。
そしたらまず作ったHTMLやらCSSをサーバーに置くんだ。ページを見たい友達はURLを検索してサーバーにごましおくんのHPのデータ送って！と要求する。
すると優しいサーバーは友達にHPの情報を送ってくれるってわけ。
あくまで組み立てるのに必要な材料を送ってくれるんだけどね。それをブラウザがピピッと整えてくれて、無事友達はHPを見ることができる。
