2月17日(月)3コマ目

今日、やったこと

[練習問題]横並び２

今日のホワイトボード

[練習問題]横並び２

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

index.html

写真(imageクラスの<div>タグ)と説明(detailクラスの<div>タグ)を横並びにするために、これらを子要素にした<div>タグ(innerクラス)を追加。


style.css

紙のとおりに各クラス、ID、タグの設定をすればOK。

写真と説明の横並びは親要素(innerクラス)に　display:flex; を指定。


余白

デフォルトの余白設定がある。

余白サイズが上下だけの場合、以下のようにすると

　margin: 10px 0;

左右の余白が0になってしまい、デフォルトの余白がなくなってしまう。

余白サイズの指定が上下だけの場合は、

　margin-top: 10px;

　margin-bottom: 10px;

で指定すること。

図　余白の設定


今日が最終回

再試験のご連絡は後日掲示。 

このブログの人気の投稿

11月29日(金)4コマ目

イメージ
今日、やったこと タグ HTMLファイルの構造 表(テーブル)をつくる 表のセルを結合する 今日のホワイトボード タグ HTMLにはいろいろなタグが定義されている。 タグにはそれぞれ役割が決められており、利用目的に合ったタグを利用する。 データにタグを付加することで、データに意味を持たせることができる。 下図の「きょうの料理」は単なる文字列だが、<h1>タグを付加することで、「きょうの料理」は見出しとして扱われる。 図　タグ 多くのタグは開始タグ、終了タグのペアになっている。 図　開始タグ、終了タグ HTMLファイルの構造 HTMLファイルは以下の構造になっている。 <html>で始まり、</html>でおわる <html></html>内には<head></head>と<body></body>が含まれる <head></head>内はヘッダー部で設定はこちらに <body></body>内はボディー部で表示データはこちらに 図　HTMLファイルの構造 表(テーブル)をつくる 行と列は以下のとおり。結構まちがいやすいので。 図　表の行と列 表は <table>タグ 、 <tr>タグ 、 <td>タグ でつくる。 <tr>タグで列を、<td>タグで列内の各セルをつくる。 ...
続きを読む

12月24日(火)3コマ目

イメージ
今日、やったこと 文字の色、サイズ等を変える 今日のホワイトボード 文字の色、サイズ等を変える タグのstyle属性で見た目の指定ができる。 図　style属性の使い方 変更範囲がタグで挟まれていない場合は、<span></span>を使って範囲を指定する。 <span>タグは範囲を作るためのタグで見た目には影響がない。 練習問題 正解例をあげておきます。 タグのネスト <span></span>のなかにさらに<span></span>とネスト構造にすることも可。 この場合は、一番内側の<span></span>同士がペアになり、その外側がペアになり、・・とペアリングされる。 図　タグのネスト 次回は 見た目のつづき。 
続きを読む

1月7日(火)3コマ目

イメージ
今日、やったこと <style>タグを使う 今日のホワイトボード <style>タグを使う 前回はタグにstyle属性を追加してそのタグのデザイン指定をした。 同じタグに同じデザインを指定したい場合はデザイン指定を重複して設定するため、めんどくさい。<style>タグを使えば同じタグ(IDやクラス)のデザインを一か所にまとめて設定できる。 〇特定の タグ のデザインを指定する場合 セレクタには　タグ名　を指定 すればOK。 図　<style>タグでタグのデザインを指定する 〇同じタグに別々のデザインを指定したい場合( ID を使う) タグにはid属性を使ってIDを指定することができる。 ※IDは同じHTMLファイル内で重複しないようにすること！！ <style>タグにて ID を対象にデザイン指定をする場合、 セレクタは　#ID名 　になる。 図　<style>タグでIDを対象にデザインを指定する 〇同じタグに別々のデザインを指定したい場合( クラス を使う) タグにはclass属性を使ってクラスを指定することができる。 IDは同じHTMLファイル内で重複指定できないが、クラスは重複OK。 <style>タグにて クラス を対象にデザイン指定をする場合、 セレクタは　.クラス名 　になる。 図　<style>タグでクラスを対象にデザインを指定する 練習問題 正解例をあげておきます。 練習１ 練習２ 練習３ 練習４ 次回は 見た目シリーズのつづき。
続きを読む