1月20日（木）2コマ目

今日、やったこと

要素の枠線、余白

今日のホワイトボード

タグはタテに積み上げられる

HTMLファイルでの順番どおりにタテに表示される。

図　HTMLファイルでの記述順にタテに表示される


枠線、余白

ほとんどのタグは周囲に枠線、余白が設定できる。

図　枠線(border)、余白(padding、margin)

余白には
  • 枠線の内側はpadding
  • 枠線の外側はmargin
の2種類がある。


練習1(マンボウ)

正解例(style.cssのみ)をあげておきます。


練習2(ペンギン) 

正解例(style.cssのみ)をあげておきます。


演習1


演習2


演習3


演習4


演習5


演習6


演習7


演習8




このブログの人気の投稿

11月11日（木）2コマ目

イメージ
今日、やったこと DNSパケット解析確認テスト２ HTTPパケット（リクエスト）解析 今日のホワイトボード HTTPパケット（リクエスト）解析（HTTPヘッダ部） HTTPヘッダはビット単位でフォーマットが決まっているわけではなく、文字列と区切りのCR+LFが連続している。文字列は順番に役割が決まっている。 今回のパケットはクライアント=>サーバーのリクエストパケット。 図　HTTPヘッダ部の構造 リクエストライン  HTTPヘッダの先頭からCR(0x0d)+LF(0x0a)までがリクエストライン 。 中身は文字列を1文字ずつASCIIコードに変換したデータ。 よって、1バイトずつASCIIコード表を見て、元の文字に戻せば内容が分かる。 図　リクエストライン ヘッダフィールド 複数のデータがCR(0x0d)+LF(0x0a)区切りで連続している 。 これも文字列を1文字ずつASCIIコードに変換したデータ。 図　ヘッダフィールド1つ目 図　ヘッダフィールド2つ目 まとめると すいませんが、ホワイトボードにはリクエストヘッダフィールドと一般ヘッダフィールドを分けて書きましたが、いずれもヘッダフィールドの一部でした。 正しくは以下です。 リクエストライン GET　/　HTTP/1.1 ヘッダフィールド Host　172.16.8.10 Connection　keep-alive 次回は HTTPパケットのまとめをします。
続きを読む

2月3日（木）2コマ目

イメージ
今日、やったこと 枠線、余白シリーズ（対テスト） 今日のホワイトボード 次回以降に実施予定の実技テストに備える練習問題（クジラ）をやりました。 全体の背景色 全体の背景色は<body>タグで指定します。 図　全体の背景色は<body>タグで設定 <div>タグ いままで結構使ってきましたが、<div>タグはエリアを作るためのタグです。 <div>タグで作ったエリアの背景色や文字色、枠線、余白等が設定できます。 図　<div>タグでエリア設定、デザイン定義 演習「クジラ」の解答例 解答例をあげておきます。 style.css 予告 次回は実技テストを実施します。
続きを読む