|

HTML/CSS基礎⑩ 練習問題

Byonose

講義内容

1限目
学科 HTML/CSS基礎⑩
練習問題について

2限目
学科 HTML/CSS基礎⑩
練習問題

3限目
学科 HTML/CSS基礎⑩
練習問題

4限目
学科 HTML/CSS基礎⑩
練習問題

5限目
学科 HTML/CSS基礎⑩
本日の講義のまとめ

メモ

作業方針
上から見てわかりやすいものから修正していく。
大枠から徐々にデティールを詰めていくデザインの考え方に基づいたワークフロー

練習問題①：マークアップの練習

修正時間：約30分

作業内容

・リストul,liの修正
リストの並びはわかりやすかったためここから着手

・画像
レイアウトが崩れていたのでstyle.cssでクラス名を確認しタグとクラス名を追記

・見出し
色やサイズ、下線を修正、見出しのサイズはstyle.cssで確認し割り当て

・pタグの追記
サイズが違う文字や文を修正、タグの記述がなかったため。html上での確認は容易であった。

所感

・htmlの修正は「修正箇所を確認→style.cssから該当箇所の記述を確認→修正」のワークフローであれば、cssの記述漏れやミスがあっても発見できることを理解した。
・コピーライトを見落としていたので、隅々までチェックを心がける。
・画像もタグで囲われるものである。

練習問題②：CSSのプロパティと値を考える

修正時間：約45分

作業内容
見たままの修正のため補足はほぼ無し。

・画像
表示されていない画像を表示

・背景色の追加
セクションごとの背景色が無かったので追記

・文字色の修正
文字色の異なる箇所を追記

・文字サイズと太さの修正

・行間と書体の修正

所感
・色関係の修正と画像などは、わかりやすいので優先して直しておくとよさそう。
・フォントサイズの修正は今回のような画像だけでは判別できない、実務であればモックのフォトショップデータにフォント情報を参考に作成する
※必ずフォトショップやcanvaなどのモック作成データを受け取らないとフォントが分からないから依頼を受けるときは作業データももらうこと。
・行間の修正は微々たるものだとわかりにくいので注意

練習問題③：レイアウトを定義するCSS

修正時間：約50分

作業内容
上から順番に修正した

・ヘッダー
並びが横並びでないのでfloatで左右に配置。ナビゲーションの影響を受けているので。
overflow:hiddenはfloatプロパティで指定された回り込み指定を続く要素に影響を与えないようにする。

・ナビゲーション
テキストの位置を中央ぞろえにしてfloat:leftで整列。画像の▷が重なっている(inline要素のため)のでdisplay: block;で表示範囲を親要素のliに拡張する。

※なぜdisplay:blockを追加すると画像が重ならなくなるのか
aタグはインライン要素で範囲が文字範囲のみになる。ここにdisplay:blockを追記すると、範囲が親要素のブロック範囲のliが範囲になる、よって画像と文字が並ぶ。

displayblock無し
displayblock有り

displayblockの範囲

・バナー
左に寄っているので、一番親要素のpタグをtext-alignでcenterに修正

・メイン
カレンダーの文字をtext-alignでcenterに、メイン1,2をfloat：left、メイン3をfloat:rightに修正。

・フッター

リストが縦並び(block要素)なので、横並びにするためdisplay: inline;を記述

所感
・text-alignは文字をボックスのどこに配置するか、marginはボックス全体の位置を調整する。
・インライン要素やブロック要素の概念があいまいだった。

参考　https://saruwakakun.com/html-css/basic/display

練習問題④：Webページ運用・作成の困った問題

計17問の問題を解いた。
特筆すべきところだけ記載

・問題１　ファイル「index.html」の文字コードを「UTF-8」にして文字化けを直してください。

VScodeで行った。
画面下の文字コード「UTF-8」をクリックして、検索画面に表示された Save with EncodingでUTF-８を選んで保存。
https://www.javadrive.jp/vscode/file/index9.html

・問題15　サイトの一番下の右にある「▲ページトップへ戻る」を絶対位置から固定位置に変更してください。

positionをfixedに変更。

・問題17　下記イメージ写真を参考に、ファイル「index.html」に
フォルダ「images」の中にあるバナー「home_bnr_20200907_０1.jpg」を取り付けてください。
さらにファイル「gallery.html」へのリンクを張ってください。
※代替テキストは「ギャラリーページ公開中！」です。

htmlへの追記に加えて、cssでのデザインの調整も必要。

類似投稿