12月24日(水)1コマ目
今日、やったこと [評価用課題]Webフォーム 今日の課題 正解例をあげておきます。 [HTMLファイル]question.html [CSSファイル]style.css 次回は 年明けです。 HTMLは卒業で、新ネタに行きます。
投稿
12月17日(水)1コマ目
今日、やったこと [練習問題]フォーム 今日の練習問題 正解例をあげておきます。 フォーム 練習0 index.html ひさしぶりの表。 フォーム 練習1 index.html デザイン設定はタグ、ID、クラスを対象にできる。 style.css 次回は テストをします。
12月10日(水)1コマ目
今日、やったこと フォーム 今日のホワイトボード フォームとは Webブラウザでサーバーに送信するデータを入力・選択する画面。 Webアプリケーションでよく見かける画面。 フォームを作る まずは、頻出タグの紹介。 <form>タグ フォームの始まり、終わりを表す。 method属性でサーバーに送信する際のHTTPのコマンドを指定。大抵、POSTコマンド。 action属性でリクエストするサーバーのURLを指定。 <input>タグ type属性の違いで、入力・選択用の部品がいろいろと作ることができる。 <button>タグ ボタンを作る。type属性をsubmitにすると、<form>タグで指定したURLにリクエスト送信。 図 フォームをつくる 下図の画面を作成した。 図 作成した画面 HTMLは以下のとおり。 送信ボタンをクリックすると type属性がsubmitのボタンをクリックすると、<form>タグのaction属性で指定したサーバーのURLに、method属性で指定したHTTPのコマンドでリクエスト 。 このとき、<form></form>内の<input>タグや<select>タグで入力・選択された内容が、name属性と一緒に送信される。 図 送信ボタンをクリックすると 実際の画面は以下のようになる。 ①クライアント側で入力、ボタンクリック 下図のように入力し、送信ボタンをクリック。 図 送信ボタンクリック...
12月3日(水)1コマ目
今日、やったこと 枠線・余白 今日のホワイトボード 枠線・余白 ほとんどのタグは枠線、余白が設定できる。 余白は枠線 内 、枠線 外 の2種類。 図 枠線・余白 ⓪枠線・余白設定前 表示すると以下のとおり。 図 枠線・余白設定前 表示すると、2つの段落間に余白がある。 ブラウザにはデフォルトで適用されるデザイン設定があり、<p>タグにはすでに上下の余白が設定されている。 ①枠線設定 枠線 はプロパティ名 border で設定できる。 border : 線種 線幅 線色； 表示すると以下のとおり。 図 枠線設定 ②枠線外の余白設定 枠線外の余白 はプロパティ名 margin で設定。 下表のように、4パターンの設定がある。 設定する余白 設定内容 上下左右同じ margin : 上下左右の余白; 上下、左右 margin : 上下の余白 左右の余白; 上、下、左右 margin : 上の余白 左右の余白 下の余白; 上、下、左、右 margin : 上の余白 下の余白 左の余白 右の余白; 表示すると以下のとおり。 ...
11月26日(水)1コマ目
今日、やったこと 表(セルを結合) 今日のホワイトボード 表のセルを結合する セルを作るための <td>タグ や <th>タグ に、 rowspan属性 、 colspan属性 を使って結合。 rowspan 属性・・ 下 のセルと結合(縦方向) colspan 属性・・ 右 のセルと結合(横方向) 1.結合前 図 結合前の表 2.colspan属性で右となりのセルと結合 下図のように、"a"のセルと右となりのセルを結合。 図 ヨコ方向にセルを結合 ①”a"のセルにcospan属性設定 指定する" 2 "は "a"のセル＋右となりのセル1個 の合計の２。 表示すると下図のようになる。 図 colspanでセルを結合 2行目は4列分のセルになるため、右側からはみ出す。 ②はみ出すセルを削除 表示すると下図のようになる。 図 はみ出すセルを削除 3.rowspan属性で下となりのセルと結合 下図のように、"c"のセルと下のセル2つを結合。 図 タテ方向にセルを結合 ①"c"のセルにrowspan属性設定 指定する" 3 "は "c"のセル＋下となりのセル2個 の合計の３。 表示すると、下図のよ...
11月19日(水)1コマ目
今日、やったこと 箇条書き テーブル 今日のホワイトボード 箇条書き 箇条書きの始まり、終わりには<ul>タグ。 箇条書きの各要素は<li>タグ。 図 箇条書き 練習問題1 練習問題2 犬種の箇条書きの中に、各犬の特徴の箇条書きがあるネスト構造。 デザイン設定のために、 犬種の<ul>タグにはid=dogtype 特徴の<ul>タグにはclass=character を設定。 表の行、列 横方向が行、縦方向が列。 図 表の行と列 表のサンプル タグがいろいろと出てくるが、 <table> タグは 表の始まり、終わり 。 <tr> タグは 行の始まり、終わり 。 <td> タグは セルの始まり、終わり 。 の役割。 図 表のHTML その1 図 表示例 上記のHTMLだと下図のように表示される。 図 表の表示例 表のヘッダー、ボディ 図 表のヘッダー部は<thead>、ボディ部は<tbody> ヘッダー部 は <thead></thead> 内に。 ボディ部 は <tbody></tbody>内 に。 <th>タグはタイトルのセル。太字で表示される。(<td>タグは普通の太さ） 図 表示例 次回は 表の続き。
10月29日(水)1コマ目
今日、やったこと デザインをHTMLファイルから別ファイルへ 今日のホワイトボード 今までのデザイン設定 <head>タグ内の<style>タグにて、デザイン指定をしていた。 これだとHTMLファイルが長くなる。 そこで、 HTMLファイルはデータのみ デザインは別ファイルにて定義 HTMLファイルはデザイン定義ファイルを読み込む ように改造する。 図 データのHTMLとデザインのstyle.cssに分ける 改造前 <head>タグ内の<style>タグにてデザイン指定。 改造後 〇style.css <style>タグ内をこのファイルにコピー。 デザイン指定はこのファイルにておこなう。 〇HTMLファイル <style></style>を削除。 かわりに<link>タグでstyle.cssを読み込んでデザイン設定。 デザイン設定を別ファイルにすると 複数のHTMLを同じイメージにしたい場合、共通するstyle.cssファイルを作成し、各HTMLファイルから読み込む。 図 同じstyle.cssを読み込むことでデザインを統一 練習問題 枠線はborder-xxxプロパティで指定。 図 枠線の指定 練習5 HTMLファイル style.cssファイル 練習6 HTMLファイル style.cssファイル おまけ ブラウザの便利ツール「開発者ツール」 HTMLファイルとデザイン設定ファイルを分離した際、HTMLファイルがデザイン設定ファイルをよみこめなかったら、 ①コンソールにエラー 図 開発者ツールの「コンソール」でエラー確認 ②ソールにファイルが表示されない 図 開発者ツールの「ソース」でファイル読み込みを確認 なお、ちゃんと読み込んでいると、下図のようになる。 図 開発者ツールの「ソース」（読み込みOKの場合） 次回は 箇条書き