HTML入門 2024年度後期(1年)

今日、やったこと [確認テスト　解説]HTML確認テスト 今日のホワイトボード [確認テスト　解説]HTML確認テスト 問１ HTMLファイルにてstyle.cssを読み込むには<link>タグを使う。 問２ 画像ファイルを表示するには<img>タグを利用。表示ファイルはsrc属性で指定。 図　問1、問2 問３ セレクタでIDを指定するには　 #ID名 　。 問４ セレクタでタグを指定するには　 タグ名 。 問５ セレクタで　p を指定すると全<p>タグが対象になる。 ここで対象にしたいのはid=item3のなかにある<p>。 xxxのなかのxxのセレクタはスペース区切りで xxx xx 。 図　問3～問5 問６ id=item1、id=item2、id=item3の<div>タグにはitemクラスも指定。 itemクラスはid=item1、id=item2、id=item3の<div>タグのみ設定。 itemクラスを対象に設定すればOK。 問７ ダメな問題でした。すいません。ノーカウントです。 問８ 問５の設定が使われるため、15ptで表示される。 図　問6、問8 問９ 枠線はborderで設定。 問１０ 枠線の外側に余白がある。 枠線外の余白は　margin　で設定 。 図　問9～問10 問１１ id=item1の<div>タグとid=item2の<div>タグを横並びにする。 ①HTMLファイル編集 これらの<div>タグを囲む<div>タグを追加。 ②style.cssファイル編集 ①で追加した<div>タグに　display:flex; を設定。 図　問11 問１２ 枠線の内側に余白が設定されている。 枠線内の余白は　padding　で設定 。 問１３ 正解を×にしていたと思います。ので、ノーカウント。たびたびすいません。 図　問12、問13 問１４ 下側だけ枠線が追加されている。下側だけの枠線は　border-bottom　で設定。 図　問14 再試験について 掲示したスケジュールで実施します。

今日、やったこと [練習問題]横並び２ 今日のホワイトボード [練習問題]横並び２ 正解例をあげておきます。 index.html 写真(imageクラスの<div>タグ)と説明(detailクラスの<div>タグ)を横並びにするために、これらを子要素にした<div>タグ(innerクラス)を追加。 style.css 紙のとおりに各クラス、ID、タグの設定をすればOK。 写真と説明の横並びは親要素(innerクラス)に　display:flex; を指定。 余白 デフォルトの余白設定がある。 余白サイズが上下だけの場合、以下のようにすると 　margin: 10px 0; 左右の余白が0になってしまい、デフォルトの余白がなくなってしまう。 余白サイズの指定が上下だけの場合は、 　margin-top: 10px; 　margin-bottom: 10px; で指定すること。 図　余白の設定 今日が最終回 再試験のご連絡は後日掲示。 

今日、やったこと 横にならべる 今日のホワイトボード 横に並べる HTMLは各要素を縦に上から下へ表示順に並べる。 が、 親要素に display:flex; を指定すれば子要素は横に並ぶ 。 図　display:flexで横並び 親子は<div>タグに限ったわけではない。 箇条書きの<ul>タグと<li>タグも親子関係。よって、<ul>タグに display: flex; を指定すれば、箇条書きの各項目は横に並ぶ。 練習問題 正解例をあげておきます。なお、index.htmlは変更なし。 style.css ネスト構造のセレクタ xxクラスの中のxxタグのような入れ子（ネスト）構造を対象にすることもできます。 図　ネスト構造のセレクタ 次回は 紙のテストをします。何を見ても構いませんが、自力でやってください。  

今日、やったこと 箇条書き リンク 今日のホワイトボード 箇条書き 箇条書きは <ul>、</ul>で箇条書きのはじまり、おわり <li>タグで箇条書きの各項目 を作る。 図　<ul>タグ、<li>タグで箇条書きをつくる 箇条書きのマーカーは <ul>タグ　または　<li>タグに プロパティ名list-style-typeで設定 する。 [練習問題]箇条書き 正解例をあげておきます。 練習1.html 練習2.html 箇条書きがネスト構造になっているてんに注意 リンク リンクとはクリックすると別ページや同じページ内の別の個所が表示される仕組み。 <a>タグでつくる。 リンク先は<a>タグのhref属性で指定する。 図　<a>タグでリンク作成 [練習問題]リンク トップページと秋田犬のページだけ。 トップページ(indexx.html) 秋田犬(akita.html) 次回は 横にならべる。