ドットインストールでHTMLを学ぼう#04〜#06
こんにちは、新年を迎えてますます初めてぶりに磨きがかかるぽんきちさんです。
今日も、ドットインストールでHTMLについて学習したいと思います。
今回は前回の続き、
「初めてのHTML」の#4です。
「ドットインストール」は動画を見て学ぶことができるのですが、
HTMLの最初のほうはこのように
動画で説明されていることが文字起こしされています。
これはサンプルなのですが、
プレミアム会員になると全てのレッスンの文字起こしが見られるそうです。
便利そう…。
#04 初めてのHTMLを作ろう
初めてのHTMLを作るときの説明がなされています。
progateでゆっくり時間をかけて学んだことが
あっという間に進んでいく感じがしてちょっと焦ります💦
でも、最初の書き方や
保存の仕方などを確認するときには
なんども見返すことができるので便利。
しかも、動画は細かく分けられているし
一本3分程度なのであとから復習もしやすいです。
「最初の書き方」「保存のしかた」は#4。これだけは覚えておこうと思います＾＾；
たぶん保存の仕方とか、どんな風に見えているか確認する方法を忘れると思うんだ、私は。
#05 meta、linkタグを使ってみよう
#05の最初では、#04でさらっと流していた最初の設定が
少し詳しく説明されていました。
たとえば、<head>タグの中はこの文章自体の情報が、
<body>タグの中は本文が入っていくということなどです。
２行目は「言語は日本語ですよ」という説明。
４行目は、「utf8」という文字コードを使いますよ、ということです。
ここで面白かったのが、
たとえば「charaset」の部分をスペルミスしたり、
周囲の空白を半角ではなく全角にしてしまった場合などは
<body>で囲まれている「こんにちは！」の部分が
よく見る、文字化けしたような形になってしまうということです。
「文字化けってこんなふうに起こるんだー！」
文字化けにはいろいろな原因があるのでしょうが、
原因のひとつがわかってすごく楽しかったです。
しかし、タイトルにあるmetaタグやlinkタグの使い方はほぼわからなかったので
復習が必要そうです。
#6 styleタグを使ってみよう
styleタグって。
「初めて聞くやつだね！」
progateの初級編で「お問い合わせフォーム作り」のところで作ったものと同じかと思ったら
それは<imput>タグでした。
同じなのは「アルファベットが５文字」という点のみ。
大丈夫でしょうか。がんばります。
styleタグは、文章の見た目を規定するために
head内に書くものだそうです。
progateでも学んだ、cssをはるためのものですね！
もう学んでいたんですね！
誰だ、「初めて聞くやつだね！」とか言ってたの。
「…。」
（こいつです）
上の図では、背景をスカイブルーにしていたのですが
head内に、このようにstyleタグで見た目を全部書き込んでいたらものすごく長いことになってしまいますよね。
なので、cssを別のシートに書き込んでいくことになります。
そうか…長くなって大変だから
cssがあるんだ…（白目）
新しいフォルダにこんな風に書き込み。
stylesheetにリンクをするのですね。
これ…progateの初級編１で習ったやつですよね。
つらい！覚えていなさすぎてつらい！
でも、ここから見た目を変えていけるようになるのです。
「ドットインストール」では、cssのレッスンは別の動画になるので
今回はひたすらhtmlについて学んでいきたいと思います♪
ちなみにコメントの書き方も。
<!-- -->
で囲まれた、グレーの文字のところは
動作に関係ないメモ書きです。
ここは何なのか書いておきたいときに便利ですね。
さて、背景がスカイブルーになった画面はこんな感じになりました。
シンプル（＊＾＾＊）
これからも少しずつ学んでいきたいと思います。
