12月8日（水）2コマ目

今日、やったこと

デザインをHTMLファイルとは別のファイルで定義する

今日のホワイトボード

いままでは

フォントの色やサイズなどのデザイン定義はHTMLファイルの<STYLE></STYLE>内で行ってました。

図　デザイン定義（いままでとこれから）

サンプル　アカウミガメ.html


HTMLファイルとは別のファイルでデザイン定義する

①style.cssでデザイン定義

HTMLファイル内の<STYLE></STYLE>内のデザイン定義をstyle.cssファイルで指定します。

デザイン定義ファイル　style.css



②HTMLファイルはstyle.cssを読み込む

<link>タグを使って、デザイン定義ファイルstyle.cssを読み込みます。

<link>タグのhref=""で読み込むデザイン定義ファイルを指定します。

HTMLファイルからstyle.cssを読み込む


複数のHTMLファイルから同じスタイル定義ファイルを読み込むことで、デザインの共通化をすることができます。

また、読み込むデザイン定義ファイルを変更することで、デザインを一気に変更することができます。

図　HTMLファイルとデザイン定義ファイル


練習７

4ページ名以降から

対象が「xxxブロック内の〇〇タグ」のように指定されています。

xxxブロックは<div>タグで作られたブロックで、idがxxxに設定されています。

　<div id="xxx">


　</div>

この<div></div>内の〇〇タグが対象です。

　<div id="xxx">

    　<〇〇>・・</〇〇>

　</div>


style.cssで「xxxブロック内の〇〇タグ」を指定するには

　#xxx　〇〇 {

        デザイン定義

　}

のように、スペース区切りで指定します。

図　「xxxブロック内の〇〇タグ」

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


 

このブログの人気の投稿

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