1月5日（水）2コマ目

今日、やったこと

表をつくる

今日のホワイトボード

表の行と列

行、列は下図のとおりです。

図　表の行と列


表のタグ

以下のタグを使って表をつくります。

<table>タグ

表の始まり、終わりを表します。

border属性で枠線の幅を指定します。


<tr>タグ

行の始まり、終わりを表します。

<table></table>内で1行目から順に行を作成します。


<td>タグ

セルの始まり、終わりを表します。

<tr></tr>内で左から順にセルを作成します。

図　<table>タグ、<tr>タグ、<td>タグ


<td>タグ内にタグも可

セル内に画像を表示したい場合、下図のように<td></td>内に<img>タグで画像を表示します。
図　<td>タグ内に<img>タグ


<th>タグ

<td>タグと同じセルのタグですが、見出し用のセルです。
タグ 文字種 横位置
<td> 普通 左寄せ
<th> 太字 中央寄せ


セルを連結する

<td>タグや<th>タグにcolspan属性(横方向に連結)、rowspan属性(縦方向に連結)を使って連結します。
属性 やくわり
colspan

列を連結

指定セルから左側のセルを指定数連結する
rowspan

行を連結

指定セルから下側のセルを指定数連結する

図　セルの連結



 

このブログの人気の投稿

10月13日（水）2コマ目

イメージ
今日、やったこと ホームページ=HTML HTMLファイルの構造 画像を表示 今日のホワイトボード ホームページ=HTML ホームページはWebブラウザがHTMLファイルをHTMLのルールに従って表示している。 HTMLファイルとは HTMLを使ってホームページの表示データやデータ構造を定義したもの。 Webブラウザとは Google ChromeやMicrosoft Edge。 まずはタグを使う <h1>タグを使うと、「今日の料理」が見出しとして表示される。 タグでデータに意味を持たせる。 　 <H1> 今日の料理 </H1> タグは開始タグ（<H1>)と終了タグ（</H1>）がある。 <H1>と</H1>に挟まれたデータが見出しになる。 HTMLファイルの構造 <HTML>や<HEAD>、<BODY>タグでHTMLファイルの構造を定義。 <BODY>タグ内のデータをWebブラウザは表示する。 <HEAD>タグはHTMLファイルの設定等を定義する。 図　HTMLファイルの構造 画像を表示する <IMG>タグを使う。 src属性で表示する画像ファイル名を指定する。 図　画像を表示(<IMG>タグ) 今日のタグ <H1> 見出しタグ。文字が大き目＋太字で表示される。  <BR> 改行。改行したい箇所に。終了タグ()</BR>なし。 <IMG> 画像表示。<IMG src="画像ファイル名">のように使う。
続きを読む

12月1日（水）2コマ目

イメージ
今日、やったこと クラスを使う 今日のホワイトボード クラスを使う 複数のタグに同じデザインをまとめて指定したい場合、クラスを使います。 ①タグにクラス指定 たとえば、<div>タグにdogクラスを指定したい場合は以下のようにします。 　<div class="dog" > ②クラスにデザイン指定 <style></style>ないで指定します。 セレクタは　 .クラス名 　です。 たとえば、dogクラスの背景色をオレンジ色に指定するには以下のようにします。 　<style type="text/css"> 　　 .dog { background : #orange; } 　</style> 授業中に作ったサンプルです。 犬と猫それぞれの<div>タグにdogクラス、catクラスを指定しています。 練習６ タグ、ID、クラスそれぞれのデザイン指定を行うサンプルです。 余白（マージン、パディング）の設定がありますが、下図のように４パターンの余白の設定方法があります。 図　余白（マージン、パディング） 余白 マージン パディング 上下左右同じ margin : 余白 ; padding : 余白 ; 上下同じ、左右同じ margin : 上下の余白 左右の余白 ; padding : 上下の余白 左右の余白 ; 上、下、左右同じ margin : 上の余白 左右の余白 下の余白 ; padding : 上の余白 左右の余白 下の余白 ; 上、下、左、右 margin : 上の余白 右の余白 左の余白 下の余...
続きを読む

12月15日（水）2コマ目

イメージ
今日、やったこと 幅、高さの設定 枠線 余白 ペンギンの演習課題 今日のホワイトボード 各タグが表示されるとき ほとんどのタグはHTMLファイルに書かれた順に、上から下へ並んで表示されます。 そして、各タグは幅や高さ、余白や枠線の設定ができます。 図　タグは縦に順番に並ぶ 幅、高さの設定 幅の設定項目名はwidth。 高さの設定項目名はheight。 枠線 枠線の種類（線種）、幅、色をスペース区切りで指定します。 また、上だけ下だけのように上下左右それぞれ1か所だけ枠線を指定することもできます。 図　枠線の指定 余白 枠線の内側（paddinig)と外側（margin）の2種類の余白があります。 図　余白の指定 演習課題 ペンギンの演習課題のうち、演習１，演習２をやりました。 演習１ <p>タグの余白、背景色の設定です。 style.cssだけ編集します。 演習２ ３つの<p>タグそれぞれ別々の背景色を指定します。 図　演習２のヒント 別々に指定するために、<p>タグのidを指定します。 　<p id=" ID名 " > つぎに、各IDの背景色を指定します。 　 # ID名 { 　　background : 背景色;   } 次回は ペンギンの課題のつづきをやります。 
続きを読む