学科【オンライン】2025.10.3.

授業内容

• 練習問題について
• 練習問題
• 本日の講義のまとめ

習得内容

• 練習問題について

以下の練習問題は、実際のWebページ制作を対象とした練習問題になっている。

練習問題①：マークアップの練習
練習問題②：CSSのプロパティと値を考える
練習問題③：レイアウトを定義するCSS
練習問題④：Webページ運用・作成の困った問題

• 練習問題

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

■練習問題②：CSSのプロパティと値を考える
どこに何が表示されるのか確認できたので、勉強になりました。

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

■練習問題④：Webページ運用・作成の困った問題
企画バナーの画像サイズが見本と同じにできませんでした。
バナー1～バナー3の間の隙間が作れませんでした。

• 本日の講義のまとめ

■インターネットの歴史
初めは軍事用として開発され、その後学術用としても利用されるようになり、民間利用へと広がっていった。
初めに検索エンジンのサービスを始めたのはYahoo、次にgoogleとなるが、現在Yahooは検索エンジンの開発はしなくなり、googleの検索エンジンを利用している。

■評価の高いWebサイトとは
googleの検索エンジンが現在トップとなっているため、Webサイトを制作する場合googleの検索の上位に表示された方がより多くの方に見てもらえるサイトとなる。検索の上位になる条件は以下のようにgoogleで定めている。

• HTMLのtitleと中身が違ったものになっていない
• タグが正しく使われている
• HTMLが正しく作られている
• スマートフォンでも表示が可能
• サイトの表示のスピードが速い

などが上げられている。

■表示スピードが遅くなる原因について
HTML記述のサイトよりWordpressの方が表示スピードは遅い。どちらにしても表示スピードが遅くなる原因としてあげられるのは、画像データの重さになる。例えばスマートフォンで撮影した写真は4000px～6000pxなのに対して、PCの表示は2000pxなのでそのまま配置してしまうと表示速度は遅くなる。そのため、Photoshopで2000px以下の横幅に加工してから取り込む。また拡張子の選択も重要な要素となる。各拡張子の内容は以下のサイトを確認する。

参考サイト
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　「Appendix-2 画像型式と品質・サイズ」
https://html-css.hamaya2020.com/appendix-2.html