先週まで、Webページ作成のためHTMLとCSSを別個に説明してきましたが、本日は、CSSをHTMLに反映させてWebページのレイアウトを整えていきます。
資料はこちら → CSSその4
p.1 ①cssフォルダを作成し、エディタのBracketsでstyle.cssを保存します。②index.htmlファイルにstyle.cssにリンクするように書き込みます。パス名を簡単にするため、同じフォルダ内にCSSフォルダを設けます。
p.2 ヘッダーの線の色を茶色に変更するようにCSSファイルに書き込みます。Index.htmlの実行結果が右です。
p.3 タイトル「進化するガラクタ」を中央にして上下のマージンを幅広くするように、CSSファイルに書き込みます。 マージンは、「上 右 下 左」の順番に決まっていましたね。
HTMLとCSSの関係は少しイメージできましたでしょうか？ 実際に手を動かしてみてようやく理解できてきました。 何事も、頭だけで理解したと思わず、手を動かしてみることが大事だと思います。