body について：にゃんたろうは一番外側のことと考えております。つまり用紙
のことです。文字を並べて書く場合、書くものですね（紙が 必
要です、紅い紙、青い紙、等 書ければ 紙でなくとも良いが）これの様
式を決める所が ”body”の ところです。但し、用紙だけではなく文字の記入範
囲何処までなら記入出来るか、なんぞも含めて決める事になります。
後一々述べませんが、これらはあくまで試行錯誤、独断偏見の結果を記載しています。興味のあるかた、もしくは間違い探しの趣味のあるかたはどうぞ御覧下さい。本当にお勉強する場合は、他の所で（質、量とも大変優れた物が沢山あります。：以降もうお断りはしない。）お勉強下さい。
まず css ファイルを作成しましょう。 body に 関する ことですので、ピリ オドなしで まず ”body”と宣言しましょう、次は ”{”最後は ”}”であとは 指示するものの組合せを 作成して 、その間を”：”でわけて組合せの終わりの 区分は”；”で処理し、わかりやすいように、”/*”と ”*/”の間にコメント をいれておき、それを ”なんとか.css”として保存しhtml ファイルからその css ファイルを呼び込み出来るようにして宣言をする。そして html ファイル の 文字の間もしくわ”まとまり”の最初と最後に印をつける。これが基本とな ると考えでした。
唐突ですが、一番外側が決まったとします、[決め方はわからないが html ファ イルを書いて、それを ブラウザ（見るもの）：：{以降 " UA " と 省略}でみる となにはともあれ表示されます。その状態のことです。]次はその決まった内部 に余白を設定できるのか、余白と文字の間の空間を指定できるか、余白の縁取り を例えば着色して表示できるか、等考えられる事があります。他にもあるだろう けれど、またまったく無いかもしれません。まあ、とにかく試みて見ましょう、 にゃんたろうはやってなんぼの世界で暮してますので。
その前に 色について参考資料 が ここいらに あります。お戻りは UA の戻るでお願いします。
新しく css ファイルを作成しましょう以下の様にしてみて下さい。
body { /* body 部分の 設定 文字 と 背景 */
color: #000000; /* 文字色 黒 */
background-color: #ffff99; /* 背景色 #ffff99 */
/* 周りの設定 と line-height 重要 */
margin-top: 5%;
margin-bottom: 20%;
margin-left: 30%;
margin-right: 10%;
padding-top:60px;
padding-right:50px;
padding-left:20px;
padding-bottom:10px;
border-width: 40px 30px 20px 10px;
border-color: #ffaaaa;
border-style: solid;
font-size: 1.03em;
line-height: 0.6em;
}
これを名前をつけて保存してください名前は適当につけて下さい。ピリオド以下 は "css"としてくださいそして前に作成した html ファイルと同じ場所に取り 敢えず保存してください。（ nyan は no.3css にしました。）次は新しい html ファイルを作成しましょう。
修正後
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<meta http-equiv="content-type" content="text/html;
charset=EUC-JP">
<!-- 一行に記入 -->
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css"
href="no2.css">
<!-- 一行に記入 ファイルの名前 no3.css -->
<title>first.html</title>
<head>
</head>
<body>
私のなまえは にゃんたろう と申します。
父は阿波のにゃん三郎してかかさんの名
はにゃん御寮人ともうしそうろう。
ほんまかいな？嘘わかってまんがな。
<!-- 一行に記入 -->
</body>
</html>
これを 新しく名前をつけて保存（ nyan は sampl3.html にしました。）
ここをクリックして見でください。
どのようなものが見えたでしょうか？想像してたものですか？想像してたものと 同じに見えてるのであれば、残念ながらこれ以上ここに留まるべきではありませ ん。他のところで遊んで下さい。なんじゃこりゃ？という方はこれから css について一緒に試行錯誤しましょう。
まずもう一度今作成したものを良く見てみましょう、（可能であれば 作成した css ファイルも一緒に見るとよりいいのですが！）ポチポチ いきまひょ、（現在 見ていらっしゃるUAの調整にて左右上下を移動させる表示が隠れるように出来る とわかりやすいのですが、意味わからなければ無視してください）
以下のよ うに表示されてると思いますが？css ファイルを見てみましょうまず ”margin”についてこれはハイフンを伴い それぞれ”top”、”bottom”、”left”、”right”、という項目の後に数字 と”%”で 表される物があり”；”で終わっている。大小の関係は上記で示した 一番外側の部分ように異なっている。これは、一番外側の部分を ”margin”と いうものでなにか操作できることを示しています。無指示の場合”0%”の様です。 次は”padding”です。これは色が異なる枠の中と 文字の領域（文字が表示され る部分）との間を指示するように考えられます。大きさの単位は”px”です。次 は”border”です、これは 色違いの枠の部分に相当する指示と考えられます。 大きさの単位は、同じく”px”で表しました。”width”については 上、右、下、 左の順番で指定するようです。また、”border-color”については色の指定、” border-style”については他にオプションがあるようです。
少々脇道にそれますが、大きさの単位は ”%””px”だけではありません次に出 てくる”em”も 単位ですし、”吋”、”糎”等も色々あります。
最後に”font-size”は 文字の大きさらしく”line-height”は何か文字の上 下の関係を司るオプションのようです。
お断りnyan が、この様に歯切れが悪いのは、齢のせいではありません。これは多く の場合 UA に多く依存するためです。くどい位申して申し訳ありませんが同じ html であっても UA の解釈如何によって作成した方の意図しない表示がでてき ます。これが現状です。そのために にゃんたろうが作成している環境とにゃん たろうが見ている環境であれば成立する事が場合によっては同じ様にみえないの でどうしても、歯切れが悪くなります。この点、重々御理解下さい。
では css を 変更してみましょう。文字の重なりを避ける、色違いの部分の オプションを変更してみる。外側、内側の部分操作出来る事を認識したので、上 下左右すべて変える必要も無いであろう、という観点で新しく css を作って見ま しょう。（特に保存して新しく作成する必要はありません、行っていることが理 解できてるなら html も css も最初のものから次々変更していけば良いので す。にゃんたろうは資料として残すのが必要なだけです。）では新しい css を 見てみましょう。
body { /* body 部分の 設定 文字 と 背景 */
color: #000000; /* 文字色 黒 */
background-color: #ffff99; /* 背景色 #ffff99 */
/* 周りの設定 と line-height 重要 */
margin-top: 2%;
margin-bottom: 1%;
margin-left: 5%;
margin-right: 5%;
padding-top:10px;
padding-right:5px;
padding-left:5px;
padding-bottom:10px;
border-width: 15px 5px 5px 10px;
border-color: #ffaaaa;
border-style: inset;
font-size: 1.03em;
line-height: 1.2em;
}
html ファイルの css に関連する場所を変更した後 UA で見てみましょう、ど んな感じになってますか？少なくとも文字の重なりの改善がされていれば、目的 が達成された事になります、後、文字の周りの部分色違いの枠の部分、その色違 いの外側の部分も変化している事に注目してください。運が良ければ色違いの枠 の部分が変化しているのを見れるかもしれません。
どうですか？基本的に文字が上下に重ならなかったら成功です。後はおまけ です、また試行錯誤は色々やれば一杯ありますが、これで ”body”の 項目一応おわりにします。次は文字なんぞを見てみましょう。
