投稿

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

10月27日(水)2コマ目

イメージ
今日、やったこと フォントのデザインを変える 今日のホワイトボード 前回の復習 フォントの色を変えるには、以下のようにします。 ①変更箇所を<span></span>で挟む  <span>タグは範囲を設定するためのタグで、見た目には何も影響はありません。 ②<span>タグのstyle属性で色を設定   フォントの色の設定項目は color です。  色の指定はred、blueのカラーコードや、#xxxxxxの6桁の値で指定する方法があります。 図 style属性の使い方 フォントを斜体にする style="font-style:italic;"で斜体になります。 が、 日本語は斜体フォントが用意されていないため、ほぼ斜体にはなりません 。 アルファベット、数字は斜体で表示されます。 <span></span>をさらに<span></span>で挟むと 一番内側の <span></span> がペアになり、次に内側の <span></span> がペアになり、の順でペアになります。 外側の <span> で設定したデザイン(color:red)は内側の <span> 内でも有効です。 よって、内側の <span></span> 内(”えお”)は文字色は赤、文字サイズは40pxで表示されます。 図 <span>タグをさらに<span>タグで挟むと 次回は 今日の練習問題のための時間をはじめに設けます。

10月20日(水)2コマ目

イメージ
今日、やったこと 課題1 フォントの色を変える 今日のホワイトボード 課題1 <HR>、<CENTER>タグを使いました。 図 <HR>タグ、<CENTER>タグ ソースをあげておきます。 フォントの色を変える 色や大きさの変更といった見た目の変更はstyle属性で設定します。 ⓪変更前 「ここは赤色で表示」を赤色にします。 図 変更前 ソースコード ①変更範囲指定 変更したい範囲を<span></span>で挟みます。 <span></span>を追加しても、範囲を指定しただけなので、見た目はなにも変わりません。 ソースコード ②設定  <span>タグにstyle属性で見た目の指定を行います。 図 <span>タグにstyle属性追加 style属性は見た目指定のための属性です。 今回はフォントの色を指定する項目colorに設定値redを指定しました。 ソースコード 色の指定方法 "red"や"blue"といったカラーコード以外に#xxxxxxで指定する方法もあります。 #xxxxxxのほうが一般的です。 ソースコード また、色見本サイトもあります。 「WEB原色大辞典」サイト

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="画像ファイル名">のように使う。