投稿

2月, 2024の投稿を表示しています

2月29日(木)1コマ目

今日、やったこと [確認テスト]HTMLの確認テスト 今日の確認テスト 正解例をあげておきます。 問１ cssファイルは<link>タグで読み込みます。 <link rel="stylesheet" type="text/css" href="style.css"> 問２ 画像は<img>タグで表示できます。 <img src="dog.jpg"> 問３ セレクタを div で回答している方がいましたが、これだと全<div>タグの背景色が設定されます。 #item1 {   background : #e0ffff; } 問４ すべての<h2>タグが対象なので、セレクタはh2です。 h2 {   color : #00008b; } 問5 問4と同じです。設定項目が増えただけです。 p {   color : #808080;   font-size : 15pt; } 問６ idがitem1、item2、item3の<div>タグが対象です。これらの３つのタグはitemクラスが指定されています。よって、セレクタを.itemにすると設定内容をコンパクトにできます。 .item {   font-size: 10pt; } 問７ "ここはitem2"は<p>タグです。問５で<p>タグの背景色を#808080に設定していますので、 #808080 で表示されます。 問8 "ここはitem3"が含まれる<div>タグは問６で文字サイズを10ptに設定しています。 が、その<div>タグ内にある<p>タグには問5で文字サイズを15ptに設定しています。 よって、 15pt で表示されます。 問9 問6と同じでitemクラスに設定すれば、item1、item2、item3の<div>タグに反映されます。 .item {   border : double 3px #00ffff; } 問10 ここで設定する余白は枠線の外側です。よって、項目名はmarginです。 設定する余白サイズは上下が20px、左右が...
続きを読む

2月28日(水)4コマ目

イメージ
今日、やったこと 横並び 今日のホワイトボード ほとんどのタグは縦に並んで表示される 一部のタグをのぞき、ほとんどのタグは縦に並んで表示される。 図　ほとんどのタグは縦に並ぶ 横並びで表示するには 結論からいえば、 float:leftが設定された要素は横並びで表示される clear:leftで横並びが解除される です。 ※今どきのHTMLでは別の方法を使って横並びにしています。 練習問題 正解例をあげておきます。 練習問題1 HTML CSS 練習問題2 HTML CSS 練習問題3 HTML CSS 練習問題4 HTML CSS 練習問題5 HTML CSS 次回は テストをします。 
続きを読む

2月8日(木)2コマ目

イメージ
今日、やったこと デフォルトのデザイン設定値 階層化されたデザイン設定 今日のホワイトボード デフォルトの設定値 余白(余白だけではないけど)はデフォルトの設定値があります。 なので、「左右の余白を10px」と指定された場合は、 　padding : 0 10px; と指定すると、デフォルトの上下の余白が0に上書きされてしまいます。 めんどくさいですが、以下のように左右だけを設定してください。 　padding-left : 10px; 　padding-right : 10px; 図　デフォルトの設定を上書きしない！ 階層化されたデザイン設定 以下のHTMLは<body>タグの中にid=titleの<div>タグ、id=dataの<div>タグがあります。 HTML 以下のCSSでは<body>タグにはフォントサイズを10pt、フォント色は#00ee00を設定しています。 CSS id=titleの<div>タグはフォントサイズを20ptに設定しています。 id=titleの<div>タグは<body>タグの中にあるため、<body>タグの設定を適用されます。が、id=titleの<div>タグにはフォントサイズを20ptに設定しているため、<body>タグの設定が上書きされます。 設定 <body>タグの設定 id=titleの<div>タグの設定 id=titleの<div>タグの中では フォントサイズ 10pt 20pt 20pt フォント色 #00ee00 -> #00ee00 同じように<body>タグの中にあるid=dataの<div>タグも<body>タグの設定が適用されますが、id=dataの<div>タグでフォント色を#63006...
続きを読む