2月28日(水)4コマ目

今日、やったこと

横並び

今日のホワイトボード

ほとんどのタグは縦に並んで表示される

一部のタグをのぞき、ほとんどのタグは縦に並んで表示される。

図　ほとんどのタグは縦に並ぶ


横並びで表示するには

結論からいえば、

  • float:leftが設定された要素は横並びで表示される
  • clear:leftで横並びが解除される

です。

※今どきのHTMLでは別の方法を使って横並びにしています。


練習問題

正解例をあげておきます。

練習問題1

HTML


CSS


練習問題2

HTML


CSS


練習問題3

HTML


CSS


練習問題4

HTML


CSS


練習問題5

HTML


CSS


次回は

テストをします。 

このブログの人気の投稿

11月9日(木)3コマ目

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

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 次回は 横並びをやります。 そのうちテストもします。  
続きを読む

10月26日(木)3コマ目

イメージ
今日、やったこと テーブル(行、列の結合) 今日のホワイトボード テーブル(行、列の結合） セルを作る<td>タグにcolspan、rowspanを使って横方向、縦方向のセルを結合。 練習1 練習2 練習3 練習4 練習5 練習6 練習7 練習8   <th>タグ、<thead>タグ、<tbody>タグ 〇<th>タグ 見出しのセルを作る。<td>タグはデータのセルを作る。 <th>タグ 文字の太さ 太字 文字寄せ 中央寄せ <td>タグ 文字の太さ 普通 文字寄せ 左寄せ 〇<thead>タグ テーブルのヘッダ部(タイトル行)の指定。 〇<tbody>タグ テーブルのボディ部(データの行)の指定。 図　<th>タグ、<thead>タグ、<tbody>タグ フォーム 今後C#でも頻繁に使うことになる。入力・選択内容をサーバーに送信する仕組み。 <form></form>内にテキストボックスやラジオボタン、チェックボックス、選択リスト等とボタンを配備。 ボタン(type="submit")をクリックすると、<form></form>内で入力、選択した内容がサーバーに送信される。 サーバーには 　　 name属性値:value属性値 で送信される。 〇作成したサンプル ...
続きを読む