投稿

11月, 2023の投稿を表示しています

11月29日(水)2コマ目

 今日、やったこと [練習問題]ペンギン [練習問題]ふぐ [練習問題]クジラ 今日の練習問題 正解例を挙げておきます。 [練習問題]ペンギン 練習１ HTML 変更なし。 style.css 練習2 HTML ３つの<p>タグにIDを設定。 style.css 練習3 HTML ３つの<p>タグのうち上と下の<p>タグには同じクラスを設定。 style.css 練習4 HTML 変更なし。 style.css 練習5 HTML 変更なし。 style.css 練習6 HTML 変更なし。 style.css 練習7 HTML 変更なし。 style.css 練習8 HTML 変更なし。 style.css [練習問題]ふぐ 演習１ style.css 演習2 style.css 演習3 style.css 演習4 style.css 演習5 style.css 演習6 style.css 演習7 style.css [練習問題]クジラ style.css 次回は 評価用課題を作ってもらいます。 身近な出来事や自分の趣味や好きなことなど自分でテーマを決めてホームページを作ってもらいます。
続きを読む

11月27日(月)3コマ目

イメージ
今日、やったこと 枠線、余白の練習 今日のホワイトボード 枠線 枠線の設定項目名はborder。borderは線種、線幅、線色の3つの項目をスペース区切りで指定。 図　枠線の設定 また、上下左右の枠線だけを設定する項目もあります。 設定したい枠線 項目名 上の枠線だけ border-top 下の枠線だけ border-bottom 左の枠線だけ border-left 右の枠線だけ border-right 余白 余白は 枠線の内側（項目名はpadding) 枠線の外側（項目名はmargin) の2種類があります。 また、上下左右の余白の指定方法が4種類あります。 図　余白 上の余白だけ、下の余白だけを指定する下表の項目もあります。 設定したい余白 枠線内側の余白 枠線外側の余白 上の余白だけ padding-top margin-top ...
続きを読む

11月15日(水)2コマ目

イメージ
今日、やったこと [練習問題]styleタグを使う_練習6 枠線・余白 今日のホワイトボード [練習問題]styleタグを使う_練習6 デザインの対象がタグだけでなく、クラス、IDにも行います。 図　タグ、クラス、ID 正解例をあげておきます。 HTML style.css 枠線・余白 ほぼすべてのタグに枠線と余白の設定ができる。 余白は 枠線の内側:padding 枠線の外側:margin の2種類がある。 図　枠線・余白 次回は 枠線・余白の続きをやります。  
続きを読む

11月8日(水)2コマ目

イメージ
今日、やったこと <style>タグ練習問題4 見た目設定を別ファイルへ 今日のホワイトボード <style>タグ練習問題4 前回は練習問題1から3までをやってもらいました。<style></style>内に見た目の設定をします。 図　<style></style>内で見た目設定 練習問題4の正解例をあげておきます。 見た目設定を別ファイルへ 今まではHTMLファイルの<head></head>内に<style></style>を追加し、この<style></style>内で見た目の設定をしました。 このやり方では複数のHTMLファイルのデザインを同じにしたい場合、HTMLファイルごとに<style></style>を追加する必要があるためめんどくさいです。 さらに、デザインを変更する場合、すべてのHTMLファイルを変更する必要があるため、かなりめんどくさいです。 実はHTMLファイル中にデザイン設定をするケースはあまりなく、デザイン設定はHTMLファイルとは別のファイルで行います。 図　見た目設定は別ファイルへ HTMLファイル デザイン設定ファイル(ファイル名：style.css) 練習問題 ”styleタグ_練習5"をやってもらいました。 枠線の設定が新たに出てきました。 図　枠線の設定 正解例をあげておきます。 HTMLファイル デザイン設定ファイル(ファイル名：style.css) 次回は 練習問題を1つやってもらいます。
続きを読む

11月1日(水)2コマ目

イメージ
今日、やったこと <style>タグをつかう 今日のホワイトボード 前回は フォントの色やサイズを変更しました。 各タグにstyle属性を追加して、デザイン設定をしました。 <style>タグを使う 前回、各タグにstyle属性を追加してデザイン設定をしましたが、同じデザインを各タグに設定するのは効率が悪いです。 <style>タグを使えばまとめて一か所で設定ができます。 <style>タグの中は以下のフォーマットになっています。 　 対象 { 　　　項目名 : 設定値; 　}   図　<style>タグを使う サンプル 練習問題 練習１ 練習２ 練習３ 次回は 練習４とデザインのつづきをやります。
続きを読む