投稿

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...
続きを読む

1月30日(火)3コマ目

イメージ
今日、やったこと 枠線、余白 今日のホワイトボード 枠線・余白 HTMLのほとんどのタグは上から下へ縦に配置される。 さらにそれぞれ 枠線（ border ) 枠線内の余白（ padding ） 枠線外の余白（ margin ） が設定できる。 図　枠線、余白の設定 上だけ、下だけ、右だけ、左だけの枠線・余白 枠線、余白は 上だけ（ xxx-top ） 下だけ（ xxx-bottom ） 左だけ（ xxx-left ） 右だけ（ xxx-right ） の設定もできる。 図　上、下、右、左だけの枠線・余白の設定 見出しを目立たせるために左だけや下だけに太めの枠線をつけることがある。 練習１ 正解例をあげておきます。 style.css 練習2 正解例をあげておきます。 演習1 style1.css style1.css 演習2 HTML style2.css 演習3 HTML style3.css 演習4 style4.css 演習5 style5.css 演習6 style6.css 演習7 style7.css 演習8 style8.css 次回は 横並びをやります。 そのうちテストもします。  
続きを読む

1月16日(火)3コマ目

イメージ
今日、やったこと スタイルシートファイル 今日のホワイトボード スタイルシートファイル 前回からデザインはHTMLとは別のファイルに設定しています。このデザイン設定ファイルのことをスタイルシートまたはスタイルシートファイルと呼びます。 ファイルの中はHTMLの<style>タグ内でのデザイン設定と同じです。 練習5 スタイルシートを使ったデザイン設定の練習問題。 あらたに枠線の指定、文字の高さの指定が出てきました。 図　枠線、文字の高さの設定 正解例をあげておきます。 HTMLファイル style.cssファイル 練習６ スタイルシートを使ったデザイン設定の練習問題。こちらはセレクタをタグ、クラス、IDと使い分ける必要があります。 あらたに余白の指定が出てきました。余白はマージン、パディングの2種類があります。詳しくは次回以降で。 図　余白の設定 正解例をあげておきます。 HTMLファイル style.cssファイル HTML、cssファイルのデバッグ ブラウザの開発者ツール(Edge)、ディベロッパーツール(Chrome)が使えます。 要素またはelementsタブをクリックすると各要素(タグ)のデザイン指定が確認できます。 図　開発者ツール(ディベロッパーツール) 次回は マージン、パディングをやります。 
続きを読む

1月12日(金)3コマ目

イメージ
今日、やったこと おさらい デザインを別ファイルで設定 今日のホワイトボード おさらい 後期スタート後11月くらいまでHTMLをやりましたが、忘れていると思いますので、おさらいをしました。 おもに見た目の変更(フォントの色や背景色の変更など）をやりました。 今回使った設定項目名は下表のとおり。 項目名 役割 color フォント色 background background-color 背景色 <style>タグでデザイン設定 <style>タグ内で対象が タグ ID クラス のデザイン設定ができる。 対象の指定は下図のセレクタで行う。タグならタグ名、IDなら#ID名、クラスなら.クラス名。 図　<style>タグの中 IDとクラス タグにはID(id="id名")やクラス(class="クラス名")が設定できる。 IDとクラスの違いは重複して設定できるか否か。 IDは重複NG。クラスは重複OK。 練習問題 正解例をあげておきます。 練習１ <h2>タグ、<h4>タグ、<p>タグのデザインを指定すればOK。 練習２ 同じ<h2>タグでもデザインが異なる。<h2>タグを対象にデザイン設定をしてもダメ。 よって、<h2>タグにidを設定し、各idのデザイン設定を行う。 <h4>タグは４つあるが、前半2個と後半2個が同じデザイン。よって前半2個には同じクラスを設定。後半2個にも同じクラスを設定。 デザインを別ファイルへ もともとは以下のように<style>タグ内でデザイン定義。 デザイン定義だけ別ファイル(style.css)にした。 HTMLは<link>でデザイン定義ファイルを読み込む。 複数ページで同じデザイ...
続きを読む

11月9日(木)3コマ目

イメージ
今日、やったこと フォーム（前回のつづき) 今日のホワイトボード 前回のおさらい フォームは<form></form>内の<input>タグや<select>タグで入力、選択された内容が<button>タグをクリックするとサーバーへ送信される仕組み。 図　<form>タグ、<input>タグ、<button>タグ チェックボックス、ラジオボタン いずれも１つのグループ内に複数の選択肢がある。 チェックボックスは同一グループ内の選択肢のうち、複数選択可能。 ラジオボタンは同一グループ内の選択肢のうち、１つだけ選択可能。 name属性値が同じなら同一グループになる。 図　チェックボックス、ラジオボタン フォーム確認 p.61のページを作ってもらいました。正解例をあげておきます。 フォーム練習 正解例をあげておきます。 じかいは 「C#実習」でのHTML入門シリーズは今日で終了です。 「C#実習」はC#の内容にもどります。 HTMLは「ネットワークシステム」でひきつづきやります。 
続きを読む