11月17日（水）2コマ目

今日、やったこと

<style>タグでデザイン指定

今日のホワイトボード

<style>タグ内でデザイン指定

前回より、フォントの色や大きさ等を、タグ単位で<style></style>内に指定する方法を使いはじめました。

図　<style></style>内でデザイン指定

練習問題の解答例

練習２

<h2>タグと<p>タグの両方に

　maring : 0;

　padding : 1em;

を指定したい場合、下図のようにカンマ区切りで複数のタグを指定することができます。

図　複数タグに共通するデザインをまとめて指定


練習３

緑色の背景色(#8FBC8B)は全体の背景色です。

HTMLでは表示部分は<body></body>内に書くため、<body>タグの背景色として指定すると全体の背景色になります。

 

次回は

練習４からはじめます。

このブログの人気の投稿

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 : 背景色;   } 次回は ペンギンの課題のつづきをやります。 
続きを読む