ホームページに関する基礎知識
日 時：2022年11月6日 9:30から12:00
参加者：小野 大関 大野 青木 池田 藤本
内 容：テキストサイトに従い「スタイルシート(CSS)とは」を学習した。
スタイルシート(CSS)とは
HTML 文書と組み合わせて使用されるスタイルシートはCSS(Cascading Style Sheets)同じ意味で使われることが多い。スタイルシートでは HTML 文書の中で使用されているタグに対して色や形などのスタイルを指定します。
実習
- 「report.html」をメモ帳で開き、<head>と </head> の間に<link rel="stylesheet" href="style.css"head>を挿入します。
- メモ帳で次の3行を書き、ファイル名「style.css」として保存します。
h1{
font-size:20px;
} - 「report.html」をブラウザで開きテキストが見出しの文字がかなり小さくなったのを確認します。
- 「style.css」に下記赤字部分を追記します。
h1{
font-size:20px;
color:#ff0000;
} - 「report.html」をブラウザで開き見出しの文字の色が赤色になったのを確認します。
- さらに「style.css」に下記赤字部分を追記します。
p{
width:300px;
} - 「report.html」をブラウザで開き段落ごとの横幅が指定したサイズ300pxに設定されて表示されたことを確認します。
- 下記をメモ帳で作成し、同じフォルダーに「report2.html」として保存します。
- 完成した「report2.html」をブラウザで開き確認します。
