12月22日（水）2コマ目

課題「ペンギン」のヒント

演習３

演習２で各<p>タグの背景色が別々だったので、<p>タグにidを設定し、背景色を指定しました。

演習３では、上と下が同じ色なので、

背景色を#4682b4にするクラスを作成。(style.css)

上と下の<p>タグに背景色を#4682b4にするクラスを指定する。

真ん中の<p>タグは背景色を変更するだけ。


演習４

幅の設定項目名は　width　です。

回り込みは　float : left;　を指定します。


演習５

左側にマージン指定するには設定項目名　margin-left 　です。


演習６

右側のマージン指定は設定項目名　margin-right　です。


演習７

枠線の設定項目名　border　です。

枠線の内側の余白の設定項目名　padding　です。


演習８

枠線の外側の設定項目名は　margin　です。


課題「ペンギン」解答例

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

演習１

index.html
変更なし。
style.css


演習２

index.html

3つの<p>タグにidを設定。

style.css


演習３

index.html

3つの<p>タグのうち、上と下のpタグにはクラスを設定。

style.css


演習４

index.html
変更なし。
style.css


演習５

index.html
変更なし。
style.css


演習６

index.html
変更なし。
style.css


演習７

index.html
変更なし。
style.css


演習８

index.html
変更なし。
style.css


課題「フグ」解答例

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


演習１

style.css

演習２

style.css

演習３

style.css

演習４

style.css

演習５

style.css

演習６

style.css

演習７

style.css

このブログの人気の投稿

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