WEBデザイナーの作り方

１９日目

ページをとりあえず公開してみました。前回の防犯のページと同じフォルダに入れてあげていたら防犯のページに影響がでてしまったので、フォルダを整理しました。

＜疑問＞
慣れるためにfloat を使用しましたが、デザイン画のようにメニューの下の空白部分に色をつけるにはやはりテーブルでなければ不可能なのか。
→画像を挿入する等自分で工夫してみる。
テーブルとfloatの利点等をまとめたページをみつけました。
http://34567.jpn.org/study1/tag/table_01.html
やはり、テーブルレイアウトは支障がおこることが多いようです。

ページを中央にもってくるやり方はいくつかあるようですが、text-alignや<center>で囲むやり方よりも、marginを使う方が一般的によいのか
→一般的にはmargiｎ　0 auto　を使う方法がいいようです。
教えていただいたページ
http://msugai.fc2web.com/web/CSS/margin.html

１８日目

タイトルの部分を囲んだり、画像挿入位置を設けたり、デザインを直しました。
縦長のページになったのでページ内リンクを使用します。

１７日目

練習仮デザイン。もうちょっと色合いとかアクセントつけたりとかつけていきたいけど、時間がないのでこれで一度あげておきます。

floatを使って組んでいきたいと思っています。

色々な組み方を紹介しているページhttp://homepage.nkdesk.com/

１６日目

今日はフレームを使ったページと画像のページの更新作業をやらせていただきました。どこにどういうことが書いてあるっていうのは、分割で出てくるweb上のページの方をクリックすればタグが反転されたので迷うことはありませんでした。

前回先輩に直してもらったものを「ここはこうして指定してある」と確認しておいたので、CSSページを別に作って指定～とか、WEB上にアップされたファイル同士の関係とかがわかってきました。

フレーム、float、テーブルとメニューとメインを分ける方法はいろいろありますが、メニュー中のの開いているページのリンク（ボタン）を色を変える場合、全て一個一個ページを作らなければいけないのでしょうか？

１５日目

理解が曖昧になるのをふせぐためにこ図を作って、「この部分にこれが指定されてる」ってことをわかりやすくしてみました。

＜メモ＞
marginとpaddingの違い
・marginは罫線の外側の余白
・paddingはコンテンツのまわりの余白

１４日目

今日は先輩に直していただいたページを使って他のページも直してみました。

＜うまくいかなかった点＞
・画像挿入
・div idの数が合わなくてレイアウトが崩れた

先輩のと私のでは、ソースから見易さが違うなあと感じました。cssを分けるだけでわかりやすくなって、間違いも減るんでしょうね。
どういった場合にテーブルを使って、どういったときにfioatを使うんでしょうか？フレームみたいに分けるときはfloatなんでしょうか。
私のソースには無駄なタグが多い。多分それはタグ一つ一つの効果を理解しきれてなくて、とりあえず、打ってみてネット上の表示を見てみるってのを繰り返しているからかもしれない。このタグがあるからここのタグは必要ないみたいなことがわかってないんですね。例えば<br>=改行ってことでスペース作るために使いまくっちゃったり。力不足がよくわかります。

１２日＋１３日

先輩が手直しをしてくださいました。

＜比較＞
・私の明るすぎる色合いと違い、淡い色でまとめてあり見やすい
・私のは目移りしてしまって、どこが情報かわからないが、先輩のは瞬時に情報が入ってくる
・横長ではなく縦にすることによって見やすく、すっきりとした印象になっている

＜反省＞
・同じ色を使わなければいけないという概念にとらわれすぎている
・見やすいという一番大切なことが意識できていない
・伝えたい情報が入ってこない
・文字の大きさとか細かいところに気を配れていない
・画像等のサイト上での表示に気を配れていない
・デザインをもっと考えるべき
・タグの効果がわかっていない
・頭の中で形が描けていない

＜わからないものを調べる＞
左右で分ける場合はtableでなく、floatを使用すべきとアドバイスいただいたので調べてみました。画像を割り込ますということでしか覚えていませんでした。こういう使い方があるんですね。
↓参考にさせていただいたページ
http://homepage.wakabagari.com/page43.html

わからないところがあったので、divについても調べました。
↓参考ページ
http://www5.wisnet.ne.jp/~z-plus/hp/html40/div.html

linkについて
↓参考ページ
http://www.kanzaki.com/docs/html/link.html

ってページ上で見えない部分でしょうか？検索しても見つかりませんでした。

＜メモ＞
・ｈ１という指定はしない
・共通の部分は外部参照を作る

footer（フッタ）：ページ情報などを記述するための領域。ページ番号、文書作成日、作成者などを記述するために使用される。

１１日目

今日は組む作業をしていました。タイトルの部分を画像にしようとしてましたが、テーブルに変更いたしました。
winのキャプチャ機能ってPrintとAｌｔではないのでしょうか？できなかったのでタグを載せておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>SANPLE</title>
<style>
h1 {font-size:36px;font-family:"MS Pゴシック",Osaka;color:#FF3333}
h2 {font-size:24px;font-family:"MS Pゴシック",Osaka;color:#666666}
h3 {font-size:14px;font-family:"MS Pゴシック",Osaka;color:#666666;background-color:#FFCC00;padding-top:7px;padding-bottom:7px}
h4 {font-size:14px;font-family:"MS Pゴシック",Osaka;color:##666666;background-color:#FFCC00;padding-top:7px;padding-bottom:7px}
p {font-size:12px}
table {width:100%;height:100%}
body{margin:0px}
td titlebar{background-color:#FF9900;text-align:center}
td.manubar {width:140px;background-color:#FFFF66;vertical-align:top}
a:link {color:#FF3333}
a:visited {color:#FF3333}
a:active {color:#FF0000}
a:hover {color:#990099}
a {text-decoration:none;font-size:14px;font-weight:bold}
div.manu {background-color:#FFCC00;margin-bottom:10px;padding-top:10px;padding-bottom:10px}
div.manu2 {background-color:#FFFF33;margin-bottom:10px;padding-top:10px;padding-bottom:10px}
div.copy {font-size:14px;font-family:"MS Pゴシック",Osaka;color:#666666;background-color:#FFCC00;padding-top:7px;padding-bottom:7px}
</style>
</head>
<body>
<tr>
<td class="titlebar">
<table cellspacing="0">
<h1 >ひったくり対策完全マニュアル</h1><tr>
<td class="manubar">
<div class="manutitle" >メニュー</div>
<div class="manu">
<a href="index.html">トップ</a></div>
<div class="manu2">
<a href="nerawareru.html">狙われる人</a></div>
<div class="manu">
<a href="taisaku.html">対策</a></div>
<div class="manu2">
<a href="link.html">リンク</a></div>
<td class="main">
<div align="left">
<h2>ひったくりとは</h2>
<p>窃盗の一種であり、相手のバックを狙って近づいていき、（バイクや自転車等で近づくケースもあり）近づいた瞬間に相手のバックを勢いをつけて奪って逃走する行為である。wiki参照
</p>
<h3>ひったくり事件の推移</h3>
<p>警視庁の資料によると、2003年からのひったくりの認知件数は減少に転じている。
また同じく2003年から検挙件数や検挙人員も減少に転じており、検挙率は上がっている。</p>
<img src="../../My Documents/My Pictures/0000000051-img-20080724-1.jpg"width="360"height="222" />
<div align="left">
<h4>ひったくりの背景</h4>
<p>高齢者や女性から力ずくで金品を奪って逃げるのは、ある意味とてもたやすいことだろう。普通の人間は、当然理性があるのでそんなことはしない。ひったくりを行う者はおそらく以下の２種類に分類されるだろう。<br /><br />
１.幼少期から愛情に恵まれず、善悪の教育も受けることができずに成長してしまった自己中心的なタイプ<br />
２.善悪の判断はつくが、安定した仕事につけず経済的に追い詰められて生活のために行うタイプ<br />
</td>
</table>
<div class="copy"div align="center">
Copyright(C)ひったくり対策完全マニュアル</div>
</body>
</html>

＜疑問＞
１.縦で分かれるテーブルと横で分かれるテーブルのタグ上での違いは？
両方やったのですが、よくわかりませんでした。ちょっと他の部分をいじっただけで縦になったり横になったりしてしまいます。
２.リンクの色をテーブルごとに変える方法は？
全体的な設定しかうまくいきません。

リンクだけでなく、部分ごとに設定してみると後に書いたタグの方が反映されるからか、なかなかうまくいかないです。名前をひとつひとつつけてクラスをつければいいのかというと、そうでないものもあるように感じられます。

１０日目

昨日の続きで組む作業と、文章をまとめてました。

メニューリンクのボタンが交互に色が違うデザインに挑戦しています。画像でリンクさせる方法とタグでやる方法２通りあると思いますが、私は画像の方が簡単ということでそっちの方法をとらせていただこうとしたんですが、タグの方も「これはdivでもうひとつまとまりを作って色を分ければいいのかな」ってやってみたらできましたー（パチパチ）。これってどっちの方法がいいとされてるんだろう？

リンクの一回クリックしたらこの色になって～とかの細かい設定が似たような色ならまとまるかなって感覚で決めていってしまってますが大丈夫なんでしょうか？全く対称の色とかにしたらわかりやすいんだろうなーとか思いながら、でもまとまり崩すかなーと思ってしまいます。

画像を挿入するとき、ネットから画像をお借りしてきたときは画像ってやっぱり荒くなっちゃうんでしょうか？もともとネットの画像だから変わらないのかな？解像度上げたりするんでしょうか？

９日目

デザインをまとめて組む工程に入りました。

テーブルを使ったページに挑戦しています。今は本を見ながらぽちぽち打っていますが、こうやって自分の希望するHPを作り初めてみると、今までの勉強がどれだけ自分に入っているかわかりますね。私にもわかる単語のタグだと覚えてるけど、あんまり聞いたことないのはちょっと危ないです；単語勉強必要だなあ、と毎回感じます。

当たり前だけど、デザイン力必要だなあとデザインしてるとき感じました。紙面と似た感じだ～とは思っても、やっぱりちょっと悩んでしまいます。頭の中でまとめきれてないのと、HPの形はこう！みたいな思いがあるのかもしれません。デザインする上でそれはまずい；
後は技術力かな。まだ始めたばかりだからか、「私にできるのはまあ、これくらいだろう」って気持ちがあるんですよね。今はいいかもしれないけど、この先これじゃ困る！＞＜もっと自由に組めるようになって、もっと色々なデザインに挑戦してみたいと思います。