【区分 】: ホームページ勉強会
【活動日】: 2005年12月14日
【時間 】: 自宅学習他
【場所 】: 各自の自宅&よりあい*ええげえし
【件名 】: 電話とメールと実施体験で自宅学習
【報告者】: 稲川昭子 近藤尚之 須田正子
【参加者】: 秋吉 稲川 近藤 須田
見学者 : 菅原 工藤「よりあい*ええげえし」にて
【内容】:
講師の近藤さんから提出されたHPS最後の課題に取り組む
「青い背景に派手な四角が4個ならんでいます。
これをHTMLで出来るだけシンプルに表現してください。」
参加者が少ないのと、講師の送迎が出来ないので相談の上、
自宅学習にして電話とメール、ええげえしでは実施体験学習をする。
スカイプ電話 : 近藤 稲川
ケーブルテレビ電話 : 須田
自宅電話 : 稲川
メール : 秋吉
実施体験学習 : よりあい*ええげえし 須田 稲川 見学者 : 菅原 工藤
[1] 実施体験学習
14日(水)は「よりあい*ええげえし」の会員の自主学習の日でしたので、
須田さんから、HTMLの実際の書き方を教えて頂いてスエーデンの国旗は出来ました。
それを基にアイスランドの国旗を作って行けばよいことも、教わりました。
このことを基にして最後の課題にチャレンジしてみますが、ちょっと不安です。
「ええげえし」では、パソボラの会員の菅原さんと工藤さんもご一緒に
須田さんからHTMLでホームページを作るには?の説明をしていただき、
一部出来たスエーデン国旗を見てもらいましたので、
ホームページ勉強会の中身も少し分かってもらえたのではと思っています。(稲川)
[2] HPS最後の課題に取り組む
「青い背景に派手な四角が4個ならんでいます。
これをHTMLで出来るだけシンプルに表現してください。」
須田さんは回答を提出しました。
http://suda.digimini.net/homework0511/homework0511_2.html
[3] 日の丸の旗のつくりかたに理解が進まない稲川が質問をして答えていただいた。
旗のつくりかたでは、
・どのように書き方のイメージを持てばよいのでしょうか。
・それをCSSではどのように書けばよいのでしょうか。
・旗を作るページのHTMLを、どのように書いて行けばいいのでしょうか。
1. どのように書き方のイメージを持てばよいのでしょうか。
> paddingは余白を意味し、
> width:400px というのは横幅の大きさなど
ページの中に一つのブロック要素がある場合、先に書かれている
ブロック要素とどれだけ離れているかをマージンで表現します。
画面左端からどれだけ離れているかなどもそう言います。
パディングはそのブロックの中でオブジェクトとどれだけ離れて
いるかを表現します。
勉強会では外側の余白と内側の余白と説明したはずです。
簡単に言えばそういうことですが、マージンもパディングも
オブジェクトの上下左右に設定できます。
文字の背景については、
「その文字の背景=文字の置かれた位置の色」も指定するのが約束で、
文字には高さと幅という要素がありその「広さ=面積」分が背景とみなされる。
一文字なら一文字分の背景。一行文なら一行分の背景。
ブロック要素ならブロック要素分の背景があるわけで、
背景はbackgroundであって、影shadowでは無く、見えなくても
背景は常にどこにでも必ずあることを忘れないでください。
2. それをCSSではどのように書けばよいのでしょうか。
そこで実験です。次のように書いてみます。
<span style="color: #ff0000; background: #fff;>●</span>
どう見えますか?背景が白では赤い丸しか見えませんね。
では背景の周囲に色を付けて見ましょう。
<span style="color: #ff0000; background: #fff;
border:solid 1px #000;">●</span>
小さな日の丸に見えませんか?
それでは赤い丸の周囲を広げてみましょう。
<span style="color: #ff0000; background: #fff;
border:solid 1px #000;
padding:20px;">●</span>
なんとか日の丸らしくなりますね。この例ではspanを使ってますが
この日の丸もブロック化しないと「body」内に置けません。そこで
宿題の回答では初めから「div」を使っているわけです。
CSSの例
.hata { font-size:300px;
color:#ff0000;
background:#fff;
padding:100px ;
border:solid 1px #000;
width:400px;
text-align:center;
margin:auto;}
3. 旗を作るページのHTMLを、どのように書いて行けばいいのでしょうか。
<!--
body { margin: 30px 50px ; background: #a2f2a6; color: #000; }
div.flag { font-size:300px;
color:#ff0000;
background:#fff;
padding:100px ;
border:solid 1px #000;
width:400px;
text-align:center;
margin:auto; }
-->
</style>
<title>akoのべんきょう部屋</title>
</head>
<body>
<div>
<div class="hd2">
<h1>日の丸</h1></div>
<p>2004/5/日の丸を作ろう</p>
<div class="flag">●</div>
以下省略
[4] IEでは日の丸の●が●のままで見えるのですが。(稲川)
CSSファイルに全角空白文字が書かれているとCSSファイルと認識されない。
「default.css」を「default.CSS」と書いてはいけない。
大文字小文字は区別されるので別なファイル名と見なされる。
あるCSSファイルがあって、それを適用する場合は
head内にリンクしておきます。ブラウザはHTMLを表示する前に
CSSの内容を記憶しておくことでデザインが実現します。
自分でミスを発見できないなら、検証サイトを利用しましょう。
http://jigsaw.w3.org/css-validator/
http://validator.w3.org/
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
【決定事項】:
今年の12月迄のみなさんの勉強会の成果をご覧ください。
現在勉強中の人も来年にはアップできるでしょう。
一緒にがんばって、楽しみましょう。
須田
http://suda.digimini.net/
綿貫
http://watanuki-web.net/
秋吉
http://akiyoshi.digimini.net/
杉田
http://sugita.digimini.net/)
稲川
http://inagawa.digimini.net/
【課題】:
来年度の勉強会の進めかたをどのようにしたらよいのか。
【感想】:
タグのひとつが足りなくても、多くても、正しいHTMLを書かなければブラウザで
見ることはできない事を実感した良い勉強でした。お忙しい中、近藤さん、須田さんには
丁寧に教えていただきましてありがとうございました。
実はこれからがまた難関があるわけですが、めげずにがんばりたいと思っていますので、
末永い御指導をどうぞよろしくお願い致します。(稲川)
─────────────────────────────
20051221