ご質問と回答

ユーザーの端末の横幅に合わせると、さまざまな大きさの端末がありすぎて対応しきれない。自分のサイトが見えるようにすることが目的なので、自分のサイトの部品の寸法に合わせてブレイクポイントを定めて作る「コンテンツファースト」が定番化している。

各ブラウザに備わっている「開発者ツール」を利用する。調べたい要素の上で右クリックし、Chromeは「検証」、Edgeは「開発者ツールで調査する」、Firefoxは「要素を調査」をクリック。いずれのブラウザも、F12キーを押すことによっても動く。

フォルダーごとにindex.htmlを設置できる。なお、index.htmlは特別なファイルで、URLにindex.htmlを含めても省いても、アクセスできる。一般に、ファイル名は半角英数字と一部の記号を使って自由につけられる。

「position」は表示位置を指定するプロパティで、通常は親要素に「relative」、子要素に「absolute」を設定し、位置を「top」「bottom」「left」「right」の各プロパティと組み合わせて指定する。「absolute」の代わりに「fixed」を指定するとブラウザに張り付くので、画面をスクロールしても、横幅や縦幅を変えても、固定される。

body要素にmargin:0、padding:0 を指定すると、画面の縁の白い領域が消える。これは、body要素にあらかじめmarginやpaddingが指定されているため。headerやfooterやh1にも、あらかじめ余白が設定されているので、それらの要素にmargin:0、padding:0を当てて消すと、隙間のないレイアウトができる。

以前Microsoftにフォントの著作権について問い合わせたが、直接的な答えは得られなかった。個人的には、「ステッカー」はZoomミーティングで使ったことがある。また、「アイコン」は加工したものを今回の実習で使っている。

ページ内リンクは、idを付けた要素が画面最上に来る仕組みで、例えば「<a href="#top">」と書くと、id="top"と設定した要素が一番上側に来る位置にジャンプする。ひとつのid名は1ページにつき1度までしか機能しないが、これを利用した仕組み。

子供セレクタは、5月13日の講習を参照下さい。classを設定しても良いが、classが多くなると覚えきれないもので、class名を管理しにくくなる。できるだけHTML要素名とセレクタでCSSを書くことに慣れると、classをたくさん発行しなくて済む。

hoverしたとき、borderは外に付くので画面がずれるが、outlineは内に付くのでずれない。マウスホバーで要素に枠線を付けたい時はoutlineを使い、borderは使わない。