【高校情報Ⅰ】Web技術・HTML・CSS(スタイルシート）問題集・教科書準拠／総集編
Web技術・HTML・CSS(スタイルシート）最終回
★以下を事前学習お願いします★
①WEB技術超入門
https://www.youtube.com/watch?v=os-ZB7C8_Kg
②HTML超入門
https://www.youtube.com/watch?v=icoRRqInJvI
③CSS（スタイルシート）超入門
https://www.youtube.com/watch?v=3EFVQPgpNtU
■資料ダウンロード■
情報教育の底上げが目的なので、資料を修正して、
学校・塾（営利目的含む）の授業等で利用して頂いて問題ありません。
私への連絡不要ですが、利用する際には、
YouTubeチャンネル・情報Ⅰ動画教科書・IT用語動画辞典を
紹介してもらえると嬉しいです。
■問題集
PDF
https://toppakou.com/info1/download/09_Webページと情報デザイン/09_【問題】Webページと情報デザイン.pdf
GoodNotes
https://toppakou.com/info1/download/09_Webページと情報デザイン/09_【問題】Webページと情報デザイン.goodnotes
■答え
Word原本
https://toppakou.com/info1/download/09_Webページと情報デザイン/09_【答え】Webページと情報デザイン.docx
■パワーポイント
https://toppakou.com/info1/download/09_Webページと情報デザイン/09_Webページと情報デザイン.pptx
■学習指導案
https://toppakou.com/info1/download/09_Webページと情報デザイン/【学習指導案】09_Webページと情報デザイン.docx
■文字おこし■
これまで３回にわたって
Webとは何か、HTMLやスタイルシートの基本について説明してきました。
今日の動画は、最終回として総まとめと演習穴埋め問題をやっていきます。
また、過去３回の動画を見ていない方は、いきなりこの動画だとレベルが高く感じると思うので、概要欄に貼ってある過去の基礎講座を先に見てください。
これまでHTMLを使ってWebページを作成してきましたが、特別な知識が無くても、ブラウザ上でテキストや画像、レイアウト情報などを入力して、サーバに送って、サーバ側でWebページを作成してくれるシステムがあります。
これをContents Management Systemを略してCMSがあります。
代表的なCMSにワードプレスがあります。
これは実際に私が使っているものの画面になります。
このように、記事のタイトルや画像の挿入が簡単にでき、文字の装飾もワード感覚でできます。
そしてこのようなページが自動的に生成されます。
インターネット上には様々なサービスが提供されていて、中には自分のWebページに埋め込む仕組みを提供してくれているものもあります。
例えば、Ｇｏｏｇｌｅマップの例ですが、埋め込みたい地図を表示させて、左上のハンバーガーアイコンをクリックします。
地図を共有または埋め込むを選択します。
地図を埋め込むタブをクリックすると、上にiframe というタグが表示されるのでそれをコピーします。
そしてこれをホームページのＨＴＭＬのbody部に直接貼り付けます。
ブラウザで表示すると先ほどgoogleの画面で表示されていたものが自分自身のページで表示されます。
WebページはGoogleなどの検索機能を使って検索される場合が多いですが、私の経験では１ページ目の１０位以内に出てこないと、ほとんど見てくれません。
この検索サイトで上位に表示される対策を、SEO対策または検索エンジン最適化と言います。
例えば、キーワードの入った内容をタイトルにいれたりする内部対策や、外部サイトからリンクを増やす外部対策があります。
WordPressはこのSEO内部対策が手軽に行える機能も備わっています。
Ｗｅｂサイト内の構造についていくつか種類があるので説明します。
まずは、直線的構造でユーザに順を追ってページを進んでほしい場合に有効です。会員登録の画面で入力、確認、決定という流れの例が挙げられます。
次に階層構造で、トップページから階層構造で目的のページをたどる構造になっています。
サイト内で現在地を把握しやすい構造になります。
最後に網状構造です。
ページ間の移動が自由なのでリンクを設置しやすいですが、全体像が捉えにくいという欠点もあります。
――
Ｗｅｂページは、見てくれる人の見やすさ、操作のしやすさつまりユーザビリティを意識して作ることが大切です。
多くのＷｅｂページはいくつかの領域で作られています。文部科学省のホームページがきれいな形で作られているので、文部科学省のページと照らし合わせながら説明していきます。
ヘッダ領域は、一番上の部分でロゴやサイト名などを載せる領域になります。
次にナビゲーション領域はサイト内を移動できるメニューボタンなどを載せる領域になります。
メイン領域は、ファーストビューと言って一番表示に表示される部分になります。訪問者を引き付けるイメージ画像やキャッチコピーなどを載せる領域になります。
次にコンテンツ領域で、ページの主となる情報を載せる領域になります。
見出しと内容をセットにして構成すると分かりやすくなります。
最後にフッタ領域は、コピーライトや問い合わせ先などを載せる領域になります。
ＨＴＭＬの構造とタグについて簡単に復習します。
ＨＴＭＬバージョン５の記述例になります。
初めの<!DOCTYPE html> はそのページがＨＴＭＬであることを示しています。
そしてhtmlを記述し その中にheadタグとbodyタグを記述するのが基本的なひな形になります。
headタグの中には、タイトルや文字コードの情報などページに関係する情報を記述して、ブラウザには直接は表示されない部分になります。
文字コードは metaタグのcharsetプロパティの中に記述します。
ＵＴＦ-8のページが多いですが、これは世界標準の文字コードでＨＴＭＬ５で推奨されています。
他には、Shift_JISやＥＵＣなどがあります。
タイトルは、タブの部分に表示される部分で、検索エンジンで検索時にリンクとして表示される部分になるので非常に重要な部分になります。先ほどいったＳＥＯ対策で最も効果がある部分になります。
つぎにbodyタグ内で使われる 代表的なタグについていくつか紹介します。
hタグは見出しになります。
h1からh6まであって、数字が小さいほども文字が大きくなります。
brタグは改行になります。
html内で改行したとしても、ブラウザに表示されるときは改行はされませんので、タグを使って明示的に改行する必要があります。
表はtableタグを使います。
その中に、表内の１行を表す、trタグをいれて、さらに行内の各セルを表示させるために 見出しの場合はthタグ その他はtdタグを使います。
aタグは ハイパーリンク等を指定するタグでhrefの中にリンク先のＵＲＬを記述します。
imgタグは画像などの表示に用いられるもので、srcの中に、画像などのファイルのパスを指定します。
スタイルシートについても簡単に復習します。
カスケーディング スタイルシート cascading Style Sheets を略してＣＳＳといって、ＨＴＭＬ文書を装飾するための技術になります。
スタイルシートの呼び出し方法や、プロパティ、セレクタ、クラス等の説明は前回の動画で詳しく行っているのでここでは割愛します。
プロパティ（属性）について代表的なものを説明します。
h1タグに対して行いたいと思います。
backgroundは 背景色になります。色はRGBの16進法で指定します。
こちらのページで色と16進法の対応表があるので便利です。
WEB色見本 原色大辞典 - HTMLカラーコード (colordic.org)
さらに、無料エディタのvisual studio codeを利用すると、対応表を見なくても、このように色が選べて１６進法に自動変換されるので便利です。
CSSのmarginとは？paddingとは？余白の指定方法まとめ (saruwakakun.com)
paddingは文字の周りの余白のことになります。
ここでは0.5とします。em エムという大きさを表す単位で1emは10pxピクセルと同じになります。つまり、0.5emは5ピクセルと同じです。
colorは 文字の色になります。
border-left は 左の線になります。 線の種類をsolid つまり実線 太さを5px 色を指定します。
要素の周りの余白がpaddingです。そのまわりにはborder（線）があり、それより外側の余白をmarginといいます。
行中の特定の部分だけスタイルを適用したい場合等は
spanタグの中からスタイル指定をします。
spanタグで囲んで その中からクラス名yellow_markerを呼び出すようにします。
スタイルシートに .yellow_maker を定義します。
すこしややこしいですが、backgroundプロパティを使います。
. yellow_maker {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
初めの60%は透明度で 次は 色 そして、 太さになります。
特定のブロックに適用したい場合は、divタグで囲んで yellow_markerを呼び出すと すべてに蛍光ペン風な下線がひかれます。
――
最近は、パソコンだけでなくスマートフォンやタブレットなど色んな端末でWebページを見ると思います。
どの端末からも見やすいデザインにすることが大切です。
たとえば、情報Ⅰ動画教科書は私が地道に１から作成したサイトになりますが、パソコンはこのような画面で、スマートフォンの場合はシンプルな形にしています。
実は両方とも同じHTMLファイルです。
スタイルシート内で、画面の横幅が800ピクセル以下なら、画像を非表示にする等と言った制御が可能になります。
このように、画面の横幅を小さくするとある時点で、画面の表示が変わることが分かります。これをレスポンシブデザインと言います。
この記事が気に入ったらサポートをしてみませんか？