投稿

11月, 2021の投稿を表示しています

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 : 上の余白 右の余白 左の余白 下の余...
続きを読む

11月24日（水）2コマ目

イメージ
今日、やったこと <style>タグでデザイン設定（つづき） IDが設定されたタグのデザイン設定 今日のホワイトボード 練習４ 前回からの<style></style>内で各タグのデザイン設定を行う練習問題シリーズの続きです。 正解例をあげておきます。 練習５ ここでは枠線が出てきます。 枠線の設定は 　 項目名：線種　線幅　色; です。 項目名は下表のように、全体だけでなく、下側だけ、上側だけも指定可能です。 枠線 項目名 全体 border 上側のみ border-top 下側のみ border-bottom 左側のみ border-left 右側のみ border-right 線種は下表のように設定します。 線種 設定値 1本線 solid 2本線 double 破線 dashed 点線 dotted 正解例をあげておきます。 ID属性を指定したタグのデザイン設定 タグにはID属性でIDを指定できます。 IDなので、ID値はHTMLファイル中で重複指定できません。 ID指定されたタグに対してデザイン指定する際は、 　 # ID名{ 　　項目名:設定値; 　} のように指定します。 #ID名の部分をセレクタと呼びます。 対象がタグ、ID、クラスのとき、それぞれ下表のようにセレクタを指定します。 対象 セレクタ表記法 タグ タグ名 { 項目名:設定値; } ID...
続きを読む

11月17日（水）2コマ目

イメージ
今日、やったこと <style>タグでデザイン指定 今日のホワイトボード <style>タグ内でデザイン指定 前回より、フォントの色や大きさ等を、タグ単位で<style></style>内に指定する方法を使いはじめました。 図　<style></style>内でデザイン指定 練習問題の解答例 練習２ <h2>タグと<p>タグの両方に 　maring : 0; 　padding : 1em; を指定したい場合、下図のようにカンマ区切りで複数のタグを指定することができます。 図　複数タグに共通するデザインをまとめて指定 練習３ 緑色の背景色(#8FBC8B)は全体の背景色です。 HTMLでは表示部分は<body></body>内に書くため、<body>タグの背景色として指定すると全体の背景色になります。   次回は 練習４からはじめます。
続きを読む

11月10日（水）1コマ目

イメージ
今日、やったこと <style>タグでデザイン指定 今日のホワイトボード 前回のおさらい 前回は文字の色や大きさ等を変更しました。 ①変更したい箇所を<span></span>で挟む ②<span>のstyle属性で設定 ③設定は　項目名:設定値 <span></span>内にさらに<span></span>を入れることができます。その際、図のように<span>と</span>がペアになります。 図　<span></span>の中に<span></span> また、style=""の中に複数の　項目名:設定値　を指定することができます。 その際、；が区切りになります。 <style>タグ内でデザイン指定 <style>タグ利用前 前回と同じようにフォントの色、サイズを変更したい箇所を<span></span>で囲み、style属性でフォントの色、サイズを指定しました。 <style>タグ利用後 図　<style>タグの使い方 図のように、<style></style>内で<span>タグのデザインを指定すると、同じHTMLファイル内の<span>タグはすべて同じデザインになります。 練習問題1 解答例をあげておきます。
続きを読む