10月22日(水)2コマ目

今日、やったこと

  • [練習問題]ぼくの名前はソラタロウ
  • 文字の色や大きさを変える 

今日のホワイトボード

[練習問題]ぼくの名前はソラタロウ

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


文字の色や大きさを変える

以下の手順で。
①タグにstyle属性を追加
②style属性にデザインを設定
　デザインの設定は　プロパティ名 : 設定値 ;
図　タグのstyle属性でデザイン設定

タグで囲まれていない場合

範囲を作る　<span>タグ　を使う。
<span>タグは範囲を作るだけで、見た目に影響を与えないタグ。
図　<span>タグで範囲をつくる

色の指定方法

redやblue、green、yellowのようなカラーネームでも指定可能だが、よく使われるのは赤、緑、青の割合を00～ffの256段階で指定する#xxxxxxのパターン。
図　#xxxxxxでの色の指定

HTMLファイルは以下のとおり。

次回は

文字の大きさ等の変更と練習問題。



このブログの人気の投稿

10月2日(水)2コマ目

イメージ
今日、やったこと タグって HTMLファイルの基本構造 今日のホワイトボード この授業用フォルダ この授業では 　Zドライブ以下に作成したホームページフォルダ以下に 　授業毎にフォルダを作成して 保存します。 図　この授業で使うフォルダ ホームページはなにでできている？ ホームページはWebブラウザ(Google Chrome、Microsoft Edge、Apple Safari等)を使って表示する。このWebブラウザはHTMLファイルの中身をHTMLのルールに従って表示する。 ということで、 　 ホームページを作る = HTMLファイルを作る です。 HTML Hyper Text Markup Languageの略。 HTMLはデータに意味を持たせるためのタグを決めている。 データにこのタグを使って意味づけをしたファイルがHTMLファイル。 結局、この授業はHTMLのタグを理解して使いこなすことが目的。 なお、HTMLファイルのファイル名は～.html。.htmlをつけることでこのファイルはHTMLファイルだと認識される。 図　WebブラウザとHTMLファイル タグの基本 HTMLにはいろいろなタグが定義されている。 タグにはそれぞれ役割が決められており、利用目的に合ったタグを利用する。 データにタグを付加することで、データに意味を持たせることができる。 下図の「きょうの料理」は単なる文字列だが、<h1>タグを付加することで、「きょうの料理」は見出しとして扱われる。 図　タグ 多くのタグは開始タグ、終了タグのペアになっている。 図　開始タグ、終了タグ HTMLファイルの構造 HTMLファイルは以下の構造になってい...
続きを読む

1月21日(水)2コマ目

イメージ
今日、やったこと [練習問題(余白・枠線)]マンボウ  [練習問題(余白・枠線)]フグ 横並び 今日のホワイトボード [練習問題(余白・枠線)]マンボウ  正解例をあげておきます。 編集したのはstyle.cssのみ。 [練習問題(余白・枠線)]フグ 正解例をあげておきます。 編集したのはstyle.cssのみ。 演習１ 演習２ 演習３ 演習４ 演習５ 演習６ 演習７ 横並び HTMLは記述順に縦に並ぶ。 図　横並び設定前 横に並べるには、 横に並べる要素の親要素に　 display: flex 　を指定する 。 index.html itemクラスの要素を横並びにするには、itemクラスの親要素(id=container)に　 display:flex 　を指定する。 図　横並びにするには style.css 図　横並び設定後 [練習問題]横並び 正解例をあげておきます。 図　ヒント 編集するのはstyle.cssのみ。 次回は 横並びのつづき。
続きを読む

12月10日(水)2コマ目

イメージ
今日、やったこと 箇条書き 今日のホワイトボード 箇条書きを作るには <ul>タグ、<li>タグを使う。 <ul>タグは箇条書きの始まり、終わり 。 <li>タグは箇条書きの項目 。 図　箇条書き HTMLファイルは以下のとおり。 箇条書きのマーカー 箇条書きの各項目の左側の●がマーカー。 デフォルトでは、●が表示される。 デザイン設定の項目名 list-style-type で変更することもできる。 下図は、list-style-typeをsquareに変更した場合。 図　箇条書きマーカー変更(●->■) HTMLファイルは以下のとおり。 練習 以下のように、箇条書きを２つ。 ただし、それぞれマーカーが異なるので注意。 図　練習問題 正解例はこちら。 次回は 箇条書きの練習。 そのあと、表。  
続きを読む