久々の更新です
パソコンが壊れてしまい更新ができない状態でした
なのでパソコンを新調しました
というより必要なパーツを買ってきて組み立てました
今回からしばらくはパソコンの組み立て日記を書きます
ブログのタイトルも
「ホームページを作る」から
「おさるの制作日記」に変更しました
おさる（僕）が何かを作るブログになりました
とりあえず今回組み立てたパソコンです
電源を入れると
青いあやしい光を発します
今のところ快適に動いています。
次回は購入したパーツと組み立てを書いていきます
のでしばらく更新はお休みします
次回の更新をお楽しみに～
前回段落のある程度の配置をしました
今回はそれの大きさを設定します
とりあえずソースを見てみましょう
また一段とソースが長くなりましたので
スタイルシートの部分のみを表示しています
<body>内の変更はありません
大きさは、width（横幅）の指定と
height（高さ）の指定で決めます
daikakomi段落を例にしますと
width：600px；height：auto；
これは横幅が600pxで高さが自動ということです
HTMLの単位はpx（ピクセル）が一般的ですが
cmやmmやin（インチ）他にも
ブラウザの大きさを基に％でも表示が可能です
あと、命令の後の「；（セミコロン）」は
1つの命令の終わりを意味します
したがって「width：600px；height：auto；」は
1行に、横幅と高さの2つの命令をしていることになります
「；」でしっかり区切ってやれば
その1行に続けて３つあるいは４つ、５つ、６つ
命令を記述してもかまいません
しかし、見やすいように整理することは必要です
では上のソースをブラウザで見てみましょう
このようになりました
最初のレイアウトの画像に近くなりました
後はこれをセンスのよい色にしたり
文字の配置などをうまくレイアウトしていきます
次回からはセンス良くしていきます
僕にセンスがあるかどうかはわかりませんけど
今回は、前回やった色付けた段落を
レイアウト通りに「回り込ませる」をやります
回り込みの指定も<head>内に
「float」という命令を使って回り込ませます
headerはそのまま上に置いとけばいいので
headerは何もしません
回り込ませるのは横並びになってる
leftside、mid、rightsideの３つです
とにかくソースを見てみましょう
leftsideの「float：left；」は
leftsideの段落を「左側に回り込ませる」という意味です
midも同じ指定があります
rightsideだけ右側に回り込ませています。
fooderは何も指定しないと勝手に
回り込みの影響を受けて
左側に回り込んだmidの右側
右に回り込んだrightsideの左側
つまりmidとrightsideの間に配置されます
なのでfooderには回り込みを解除する
「clear」を指定して上げます
「both」とは、右・左両方という意味です
これをブラウザで確認すると
という風に、レイアウトの配置ができています
これにmenuという段落を
headerの下に追加したいと思います
ソースはこちら
これは<head>ないの
<style type="text/css">（以後スタイルシート）
こちらは<body>ないの記述
新たに追加されている部分が分かりますか？
というわけで今回はレイアウト通りに
段落の回り込みをやりました
後はこれらのサイズを指定してやれば
予定のレイアウトになるはずです
次回は各段落のサイズ指定をやります
今回は、段落に背景色をつけます。
しかし、今回のこの色は後で変更します
今は、「段落を分けている」ことを
ハッキリさせるために色分けしています
以前2011-07-10 16:37:42に更新の
「ホームページを作る(基本編)」で
<head>～</head>内に
設定や指定などを記述すると書きました
各色の指定や大きさなども
<head>内に記述します
<head>内に<style type="text/css">として
記述していきます
各段落に「id」で付けた名前に
設定を記述していきます
書き方は
#名前｛指定；｝という感じになります
たとえば、headerの背景色を指定する場合
#header{background-color:#ff0000;}
という具合になります。
「background」は背景、「color」は色
「#ff0000」は色の種類を意味します。
「#ff0000」は、
光の3原色（赤・緑・青）を
16進数（0123456789abcdef）で表わし
赤の部分が「ｆｆ」（最高値）で、
緑と青は「00」（最低値）で表わされています
したがって赤を意味します
とりあえず
HTMLをみてみます
上から説明
body{ ボディ全体の指定をします
color：#ff000；で全体の文字を赤に指定
背景色は（：）白；｝
以下は、背景色のみの指定で
#fooderのみ、文字の色が見にくかったので
文字の色は、白にしています。
<style type="text/css">の記述が長くなったので
<head>内だけを画像にしています
<body>内は
「daikakomi」部分と「syoukakomi」部分の文字は
表示しないので削除しています
ではブラウザで確認
とこんな感じで表示されます
とりあえず今回は段落ごとに背景色をつけてみました
ちょっとわかりづらいですね
次回はレイアウトを整えたいと思います
