情報処理実習Ⅱ 2025年度後期(2年)

今日、やったこと [練習問題]<style>タグ デザイン設定を別ファイルへ 今日のホワイトボード  [練習問題]<style>タグ 正解例をあげておきます。 練習1 練習2 練習3 練習4 デザイン設定を別ファイルへ デザインをいろいろと設定すると、<style></style>内が増えて見づらくなる。 また、複数のページでデザインを同じにするには、<style></style>内を各ページにコピーする必要がある。 今までと同様に、各HTMLファイルの<style></style>でデザイン設定をするより、デザイン設定ファイルを１つ作り、各HTMLファイルから参照すれば効率がいい。 図　HTMLファイルからデザイン設定ファイルを分離 改造前 〇アオウミガメ.html HTMLファイルの<style></style>内でデザイン設定。 改造後 〇style.css 改造前のアオウミガメ.htmlの<style></style>内のデザイン設定をコピーして作成。 〇アオウミガメ.html デザイン設定の<style></style>を削除。 代わりに<link>タグで上記のstyle.cssを読み込む。 練習問題 枠線のデザイン設定は項目名border。 図　枠線のデザイン設定 次回は デザイン設定を別ファイルへの練習問題。

今日、やったこと [前回のおさらい]styleタグを使う クラスを対象にstyleタグでデザイン設定 [練習問題]styleタグを使う 今日のホワイトボード [前回のおさらい]styleタグを使う styleタグの中では、 　 セレクタ 　 { 　　　　プロパティ名 : 設定値;     } で、セレクタで指定した対象に{ }内のデザインを設定する。 図　styleタグのセレクタ タグを対象にstyleタグでデザイン設定 タグを対象にする場合、 セレクタ は タグ名 。 IDを対象にstyleタグでデザインを設定 タグには id属性 で id を指定できる。 idは 重複NG 。 IDを対象にする場合、 セレクタ は ＃ID名 。 クラスを対象にstyleタグでデザインを設定 タグには class属性 で、 クラス を指定できる。 クラスは 重複OK 。 クラスを対象にする場合、 セレクタ は .クラス名 。 練習問題 正解例をあげておきます。 練習問題１ 次回は 練習問題のつづき。 

今日、やったこと [練習問題]文字の色や大きさを変える(style属性を使う) <style>タグを使う 今日のホワイトボード [練習問題]文字の色や大きさを変える(style属性を使う) 正解例をあげておきます。 <span>タグのデザインをまとめて指定 今までは各タグにstyle属性を追加してデザインを指定。 同じタグに、同じデザインを設定したい場合は、効率が悪い。 そこで、<style>タグを使えば、１箇所でまとめて設定ができる。 ⚪︎設定前 全ての<span>タグに フォントサイズは20pt 文字色は赤 が設定されている。 ⚪︎変更後 <style>タグにて、<span>タグのデザインを設定。 全ての<span>タグに同じデザインが適用される。 ポイントは セレクタ 。 タグ が対象なら、セレクタは　 タグ名 　。 { }内は今までのstyle属性設定値と同じ。 図　<style>タグにて<span>タグのデザイン設定 ID タグにはid属性を追加して、IDを指定できる。 なお、IDは同じHTMLファイル内で重複NG。 <style>タグでIDを対象にデザイン設定 ポイントはセレクタ。 ID が対象なら、セレクタは #ID名 。 図　<style>タグにて、IDを対象にデザイン設定 同じ<div>タグだが、それぞれ”large"、"midium"、"small"とIDが設定されている。 <style>タグにて、IDごとにデザイン設定をしているため、別々の背景色になる。 次回は <style>タグの続き。...