Webの勉強をしよう - ポリウッドザコゲボク

先日、友人から「お前Webサイト作れるか」と相談があった。
エンジニアあるあるなのかもしれないが、「パソコンを使った仕事をしている」というとWebサイトが作れるというイメージを持たれやすいらしい。正直HTMLなんて小学校の時の技術の時間と、一年前にAWSの勉強をしていたころにほんの少し触れた程度なのでズブの素人だ。

でも、僕も将来は友人の誰かが新しいことを始めたときにそれをサポートできるような技術を身に着けたいとは思っているので、ちょうどいい機会だし勉強を始めてみよう。

何から手を付けるか考えてみたが、一旦下記のような道のりでいきたいと思う。
1.HTML, CSSを使って自分の作ったものを紹介するページを作ってみる
2.AWSの勉強をもう一度して、自分で1.を公開してみる
3.php, JavaScriptを使って何ができるのか調べてみる
4.その時になって考える

HTMLを知らないことにはWebなんてできない気がするので、まずはここからスタートだ。
課金ユーザーなのでドットインストールを使っていこう。
https://dotinstall.com/lessons/basic_html_tags_v2

やるぞやるぞ

とりあえず今日書いたHTMLの中身がこちら

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>ドットインストール</title>
        <meta name="description" content="プログラミング学習サービスのドットインストールです">
        <link rel="icon" href="favicon.ico">
    </head>
    <body>
        <h1>ドットインストール</h1>
        <!-- memo -->
        <img src="img/logo.png">
        <p>プログラミング学習サービスです！</p>
    </body>
</html>

<!DOCTYPE html>

「このドキュメントはHTML文書やで」という宣言。それ以上の意味はない。

<html lang="ja">

日本語使ってるで、という宣言。書くのと書かんので違うんか？と思ったけど
どうやらブラウザが「あ～日本語のページなんすね」って分かるように書いておくものらしい。
多分日本語検索への引っ掛かりやすさとかに関係するんじゃないですかね

    <head>
        <meta charset="utf-8">
        <title>ドットインストール</title>
        <meta name="description" content="プログラミング学習サービスのドットインストールです">
        <link rel="icon" href="favicon.ico">
    </head>

headタグ
文書に関する情報を書くところ。ここでいうとcharsetで文字種類をUTF-8に指定したり、ページのブラウザ上の表示タイトルを指定したりしている。

metaタグ
ページのなんていうんでしょうね、メタ情報…裏で使います的なことなのかな？を書く。

meta charset要素
文字種別を指定。多分他にASCIIとかも行けるのかな？今は大概のブラウザはutf-8だと思うのでとりあえずutf-8にしとけばいいと思う。

meta name="description" content="〇〇〇"
ページの概要を記載するところ。検索エンジンが検索に使用したりするよ！あと検索結果として表示される文書でもあるそうです。

link rel="icon" href="favicon.ico"
ファビコンっていう、ページタブの左上に表示されるアイコンを設定している。
調べてみたらhrefはこの文書にリンクさせる対象を書くためのやつで、rel="icon"は今指定されたリンクがどういう種類のものかを書くところらしい。この場合、「favicon.ico（アイコン）をリンクさせるぞ」という宣言になってるみたい。

<body>
    <h1>ドットインストール</h1>
    <!-- memo -->
    <img src="img/logo.png">
    <p>プログラミング学習サービスです！</p>
</body>

bodyタグ
ページの内容、つまり本文を書くところ。実際に表示する文章や画像はこの中で定義している。
h1が大見出し（header 1)。wordに似てるね。

でコメント。

img src=""は画像の挿入。「ここに画像貼るから！ソースはこれね！」って感じ

はパラグラフ、つまり段落なので文章のまとまりってことになる。

とまあざっくり今日やったことをまとめてみたけど…

HTML分かりやすい！！すごい！！場合分けとかないしね！なんか企画書書いてるみたい。指示出しとけばあとはブラウザがやってくれるという感じ！
この感覚はプログラミングをかじる前は全くなかったものなので新鮮だった。
まあたぶんこの後複雑な要素がわっさわっさと出てくるんだろうし、cssとかのデザイン的な話になったら死ぬんだろうけど…
とりあえず都度更新していこうと思う。

あと、「未経験からエンジニアになった」みたいなのはウケるみたいだし、なにより自分が困ったところでもあるので、いつか「自分、エンジニアです！」って言える感じになったらおいおいまとめようと思う。