コードを書くのが楽しくなってきた

9月4日火曜日。3回目の学習日誌。今日は朝から台風の影響で雨続き。リビングのテーブルでHTML入門に突入しました。全15回のうち、7回分まで進みました。動画の視聴時間は合計で17分1秒です。

コーディングを勉強してゆくゆくはCSSをマスターしたいので、HTMLとCSSを同時進行で学習しようと目論んでいたのですが、CSS入門の方に「このレッスンはHTML入門の続きから進められています。事前にHTML入門を受講するようにしましょう。」と書いてあるのを見つけてしまいました。

そういうわけで自己流にはせず、おとなしく従うことにします。この学習日誌は動画レッスンの合間に書いています。

#01 プロフィールサイトを作ってみよう

ドットインストールの親切なところは、動画を見る以外のことに時間をかけないようにしてくれていること。

上の写真の通り、動画内で使用している素材（画像）をダウンロードできるように用意してくれていました。助かるー！

ここでは素材をダウンロードして、デスクトップに作成したフォルダに保存して終了。ひとつの回でやることが全然重くなく、むしろこれで終わり？！ってくらいに軽いのも続けやすくていいな。

#02 ブラウザに名前を表示しよう

AtomエディタでHTMLファイルを作り、ブラウザで閲覧できるようにする回です。

やっとはじめの一歩という感じ。自分の名前を表示できました！

#03 タグでマークアップしてみよう

Atomエディタは視覚的なわかりやすさを重視することで、コードを書く人が作業しやすいようにしてくれていることがわかってきました。

例えば上の写真を見てください。タブの右端に青丸印がついています。これは未保存の状態であることをお知らせしてくれているんです。上書き保存するとここが✕印に変わります。

また実際にサイトを作成する場合にはコードがズラズラっと並んでいきますが、記入している行が黄色で示されるので（写真上参照）、違う行に書いてしまうおそれもなさそうで安心しました。

この回では主にタグの使用方法を習いました。タグで囲うことをマークアップと呼ぶんですね。だんだん専門用語も出てきました。

タグ<p>なんかの意味は考えたことなんてなかったけど、パラグラフ＝paragraphという単語が省略されているって知って、へ〜的な要素もあって面白かったです。

#04 imgタグで画像を表示しよう

レッスン04もほらこの通り。ちゃちゃっとできました！

今回はwidthやheightなど、タグの属性を覚えておくということも出てきました。srcはsource（源）の略、altはalternate（代役）の略だなんてことも知らなかったな。またまたへ〜！ 

#05 全角文字に気をつけよう

タグ名や属性名には全角は使えないんだそうです。半角で書かないと指示が反映されなくなっちゃうって。ここはふむふむと見ているだけで終了。

#06 文書全体につけるタグを見ていこう

文書全体がhtml文書ですよと指定する必要があるため、それを実際にやってみました。

その過程でまたまたAtomエディタが良い子っぷりを発揮！字下げ（文頭に一文字空白を入れること）をするときに、一行一行スペースキーを押していく必要がないんです。字下げしたい箇所全体を選択してTABキーを押せば、何行でもまとめて字下げができるのです！

これ（写真上）が
こう（写真下）！

あとmacOSだと、ある箇所全体を選択してcommand＋control＋矢印キーの上下で、行をまとめて移動できちゃう！作業のサク化！すばらっしい！！

#07 文書に関する情報を設定しよう

ここでは<meta>タグでコンピュータがどの文字セットを使うかを指定することを覚えました。他にもいくつか設定しましたが、一番印象に残っているのはファビコンです。

存在は知っていたけれど、これに名前がついていたなんて。ファミコンって言っちゃいそうになるわぁ。Weblio辞書で調べたら「favorite icon」が由来の造語だそうです。

Faviconとは、Webサイトを訪れた時に、アドレスバーやタブブラウザのタブ部分などに表示されるアイコンのことである。名称の由来は、「お気に入り（favorite）のアイコン（icon）」を短縮した造語であり、Webブラウザのお気に入り（ブックマーク）に登録した時にもFaviconが表示される。

レッスン07を終え、HTML入門（全15回）の約半分まで完了しました。道のりは長そうだけど、あせらず着実に進めていきます！