学科 CSS基礎④【オンライン】

2023年9月20日

練習問題

レイアウトデザイン練習問題④
Webページ運用・作成のあるある問題です。
【問題１】
ファイル「index.html」の文字コードを「UTF-8」にして文字化けを直してください。
【問題2】
ファイル「index.html」と「style.css」を紐づけれるように、ファイル「index.html」の7行目を正しく記載してください。
【問題3】
ファイル「index.html」の5行目のtitle「無題ドキュメント」を「コーディング訓練問題④」に変更してください。
【問題4】
ファイル「index.html」の15行目h2の箇所に、「コーディング練習問題④」を記入してください。
【問題5】
ファイル「index.html」に閉じタグが無く、文法的に誤りの箇所2か所あります。見つけて正しく書き足して下さい。
【問題6】
ファイル「index.html」に属性の記述ミスが2か所あります。見つけて正しく記載してください。
【問題7】
ファイル「index.html」に文法的に誤りと判断される見出しタグがあります。見つけて正しく記載してください。
ワンポイントアドバイス！
問題5、問題6、問題7は、タグチェッカーで調べてみましょう。
参考サイトURL
http://www.htmllint.net/html-lint/htmllint.html
【問題8】
下記のリンク切れ画像（アイスコーヒー）の箇所を変更して、正しく画像を表示させてください。

【問題9】
新着情報の箇所に「本日の日付」で「学科レイアウトデザイン基礎の訓練問題です。」と情報を追加してください。

【問題10】
営業日カレンダーを「今月と来月」のカレンダーに変更してください。

【問題11】
ファイル「style.css」の326行目のセレクタ「footer ul li」が効いていません。
原因を見つけて正しくCSSのプロパティが適用されるように変更してください。
【問題12】
ファイル「style.css」の342行目のセレクタ「footer p small」が効いていません。
原因を見つけて正しくCSSのプロパティが適用されるように変更してください。
【問題13】
ファイル「style.css」の346行目のセレクタ「footer p small a」が効いていません。
原因を見つけて正しくCSSのプロパティが適用されるように変更してください。
ワンポイントアドバイス！

問題11、問題12、問題13は、デベロッパーツールで調べてみましょう。
【問題14】
全体の背景画像を「ストライプ」から「チェック」の柄に変更してください。
※素材は、フォルダ「images」の中にあります。

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

【問題16】
ファイル「style.css」の153行目のセレクタ「main」の
プロパティ「margin」「border」「padding」をショートハンドに変えて下さい。
main{
overflow:hidden;
width: 960px;
background: #fff;
box-shadow: 5px 5px 5px #ccc;
border-radius: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #ccc;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

【問題17】
下記イメージ写真を参考に、ファイル「index.html」に
フォルダ「images」の中にあるバナー「home_bnr_0０1.jpg」を取り付けてください。
さらにファイル「gallery.html」へのリンクを張ってください。

※代替テキストは「ギャラリーページ公開中！」です。
この練習のポイント！
この全17問題は、実務でよく聞く「あるある問題」です。
問題の1～4は、Webページ作成の基本的な話のよくある話です。
特に文字コードについては、実務で「訳わからなくなる話」の代表例です。しっかりと理解しておきましょう。
問題の5～7は、マークアップの「あるある問題」です。
タグチェッカーなどを有効に使うことが、攻略のポイントです。
問題の8～10は、実際のお仕事の運用作業で良くある内容です。練習しておきましょう。
問題の11～13は、CSSです。デベロッパーツールを上手く使って問題解決をしてみましょう。
問題の14は、Webページが出来た後から変更することが多い内容です。慣れておきましょう。
問題の15は、「position」タグの使い方についてです。最も使い方が解りにくいと言われていますので、
まずは使用例から覚えておきましょう。
問題の16は、ショートハンドの記述の問題です。実際に見た目は変わらないですが、時短と見やすいコードにする工夫になります。
CSSのコードは短い方が読み込み（サーバの認識）が早くなりますので、しっかりと覚えておきましょう。
問題の17は、「バナーを付けてリンクを張る」という最も基本的ないっぱいあるお仕事の問題です。
やり方をしっかりと確認して覚えて実務に備えておきましょう。