【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【続・1日目】
引き続き。
今回は環境設定〜Webページ制作・共通レイアウト作成まで。
Chapter 2 ~ 4
2月1日(金) 1.0h
Chapter 2 サイト制作の前に準備しておくこと
テキストエディタ
本ではBracketsでの開発が前提。
Brackets - A modern, open source code editor that understands web design.
使って2週間ほどのVSCodeがあるので、自分はそのままVSCodeを使用。
Visual Studio CodeでMacにフロントエンド開発環境をつくる - Miki's Blog
ショートカットキー
Bracketsでの場合の記述が多かったので、
Mac環境・VSCodeのショートカットキーを調査。
Google検索上位のものが見やすかった...
【Mac版】 VisualStudioCode キーボードショートカット - Qiita
Chapter 3 知っておきたいHTMLのきほんと書き方
※前の本に記載がない・新しい概念・要復習内容についてのみ記載
・head要素は「バーコード」と同じようなものと考える...人の目に触れないが、ブラウザや検索エンジンにとって重要な情報
・section要素とarticle要素の選び方...『複数のsection要素を1つのarticle要素が囲っている』のケースは多いが、文章構造によっては『複数のarticle要素をsection要素が囲う』ケースもあり、両者の間に上下関係があるわけではない
・div要素はレイアウト目的の「箱」
Chapter 4 知っておきたいCSSのきほんと書き方
※前の本に記載がない・新しい概念・要復習内容についてのみ記載
CSSプロパティ
・line-height...行間
・vertical-align...テキストや画像の垂直方向の位置揃え
・margin: 0 auto;...中央揃え、必ずwidthを指定してから記述する
デザインのポイント
・Webサイトの横幅サイズ「960px」...もっともよく使われるPCディスプレイサイズが1024×768pxであり、横幅が1024pxのディスプレイで問題なく表示される数字であるため、960pxが基準となる
成果物
共通レイアウトが作成できました。
まとめと感想
まずは、制作環境について。今回VSCodeをそのまま使うことにしましたが、
Bracketsの「クイック編集」がとっても気になっています。
(ショートカットキーで編集したいHTML部分関連CSSにアクセスできるらしい...)
テキストエディタどうしよってなった時に、ぜひ最初に試したいと思います。
HTML/CSSについては、前の本で学習した内容でほぼ理解でき、サクサクと制作が進められました。
既に学習したHTML要素やCSSプロパティについて、前書とはまた別の表現で記述されていて、わかりやすい表現が多かった印象です。
margin指定での中央揃えは何度も使っておきながら、横幅の指定が先に必要であることが
あまり印象に残ってなかった(...)ので助かりました...これで覚えた！
そして、今回はじめて共通レイアウトを作るということを実践。
Webサイトの統一されたデザインってこうやって作るのね。
以前はindex.htmlの1ページ作ったら終わりだったので、
作る規模を少し大きくできた一歩目として、何だかうれしくなりました。
次回、Chapter 5、トップページ制作です＼\٩( 'ω' )و //／
