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

今日、やったこと [練習問題]横並び２ 今日のホワイトボード [練習問題]横並び２ 正解例をあげておきます。 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) 次回は 横にならべる。  

今日、やったこと 枠線・余白 [練習問題]マンボウ [練習問題]ペンギン 今日のホワイトボード 枠線・余白 HTMLのほとんどのタグは枠線、余白の設定ができる。 枠線は項目名borderで設定。 余白は枠線内(padding)と枠線外(margin)の2種類がある。 図　枠線、余白 上だけ、下だけ、右だけ、左だけ 枠線、余白はともに上、下、右、左と個別に設定ができる。 位置 枠線 枠線内余白 枠線外余白 上 border-top padding-top margin-top 下 border-bottom padding-bottom margin-bottom 左 border-left padding-left margin-left 右 border-right padding-right margin-right 余白(padding、marginともに)はデフォルトで設定されている値がある。 よって、下図の上のように余白(padding)を上下を0、左右を10pxに設定するとデフォルトの余白(padding)はすべて上書きされる。  下図の下では余白のデフォルト値から左と右だけ上書きする。上下の余白はデフォルト値のまま。 図　デフォルトの余白 [練習問題]マンボウ style.cssだけあげておきます。 [練習問題]ペンギン 演習1 style.css 演習2 penguin.html ...

今日、やったこと デザイン設定を別ファイル(style.css)へ 今日のホワイトボード データとデザイン設定の分離 今まではHTMLファイルの<style></style>にてデザインを設定した。 が、これだとHTMLファイルが長くなってしまう。 そこで、HTMLファイルは表示データ。新たに用意するstyle.cssにデザイン設定と分離する。 図　HTMLファイルからデザイン設定を別ファイルへ分離 同じようなデザインを適用したいHTMLファイルは、同じデザイン設定ファイル(cssファイル)を読み込むことで同じようなデザインになる。 図　複数のHTMLファイルを同じデザインにする 練習問題 正解例のcssファイルだけあげておきます。 練習5 練習6 枠線の設定は下図のようにborder-xxxで行う。 図　枠線の設定 練習7 Webブラウザの便利機能 ChromeやEdgeの開発者ツール(ディベロッパーツール)がデバッグに便利。 ①Webブラウザ右上の・・・ボタンクリック ②”その他のツール”->"開発者ツール" ③”要素”タブをクリック 図　開発者ツール(ディベロッパーツール) HTMLのタグをクリックすると、そのタグのデザイン設定が表示される。 次回は 今回使った枠線と余白について。  

今日、やったこと <style>タグを使う 今日のホワイトボード <style>タグを使う 前回はタグにstyle属性を追加してそのタグのデザイン指定をした。 同じタグに同じデザインを指定したい場合はデザイン指定を重複して設定するため、めんどくさい。<style>タグを使えば同じタグ(IDやクラス)のデザインを一か所にまとめて設定できる。 〇特定の タグ のデザインを指定する場合 セレクタには　タグ名　を指定 すればOK。 図　<style>タグでタグのデザインを指定する 〇同じタグに別々のデザインを指定したい場合( ID を使う) タグにはid属性を使ってIDを指定することができる。 ※IDは同じHTMLファイル内で重複しないようにすること！！ <style>タグにて ID を対象にデザイン指定をする場合、 セレクタは　#ID名 　になる。 図　<style>タグでIDを対象にデザインを指定する 〇同じタグに別々のデザインを指定したい場合( クラス を使う) タグにはclass属性を使ってクラスを指定することができる。 IDは同じHTMLファイル内で重複指定できないが、クラスは重複OK。 <style>タグにて クラス を対象にデザイン指定をする場合、 セレクタは　.クラス名 　になる。 図　<style>タグでクラスを対象にデザインを指定する 練習問題 正解例をあげておきます。 練習１ 練習２ 練習３ 練習４ 次回は 見た目シリーズのつづき。