×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページの作り方 >> ホームページ作成編 >> bodyの設定2

ホームページ作成編 08.ホームページの作り方(bodyの設定2)

body部の設定を一括して行いましょう!
あなたのお好みで、基本となる字体や字の大きさ、色
画面の表示範囲等きめ細かい設定が出来ますよ!
オリジナリティあふれたホームページにしていきましょう!

CSSファイルで全体の設定をしよう!!

基本の設定を初めにきっちりやっておくと、後が大変楽になります。
個々の設定は、基本(画面全体)の設定の上で考えていくので、ホームページを作っていく上でもここは肝心なところです。
どんなスタイルにしていくのかよ〜く考えて行きましょう!

1.body部の各種設定

1-1.前ページのおさらいをしよう!

相対パスと絶対パスの話が長くなっちゃった(でもこれも大事なんですよね)ので、前ページのおさらいをしておきましょう!

body {
 background-image: url(./img/kabe03.gif);
}

これは、下の表の意味になることは、理解できましたか?
出来ましたよね!!

○○表示画面全体
body(HTMLの<body>に対応)
{「の部分の」
△△壁紙
background-image
:「は、」
××「homepage」フォルダの中の「img」フォルダの中の「kabe03.gif」
url(./img/kabe03.gif)
;「だよ」
}「以上。」(○○(この場合は、「body」)の及ぶ範囲)

もし、他の画像を手に入れて「back_img.gif」と名前を付けて「img」フォルダの中に置き、それを壁紙に使うとしたら上表の「kabe03.gif」の部分は「back_img.gif」に書き換えることになりますよね。

更におさらいですが、なんで「style.css」に書き込むとホームページの画面が変わるか分かりますよね。
あなたの「index.html」に
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel=stylesheet href="style.css" type="text/css">

が書き込んであるからですよね!
もし、「sutaitu.css」というファイルを作ったとしたら、赤字の部分は「sutairu.css」となるんですよね!

1-2.body部の各設定をしよう!

それでは、body部の各種設定をしていきましょう。
「style.css」の先ほど書き込んだ部分に次のように書き加えてみてください。
上書き保存を忘れずに!!

body {
 background-image: url(img/kabe03.gif);
 margin-top: 20px; margin-bottom: 20px; margin-left: 3%; margin-right: 3%;
 padding: 0px;
 text-align: center;
 line-height: 150%;
 font-family: MS ゴシック,sans-serif; color: #333333;
 font-size: 14px;
}

ようは、「△△:××;」が増えただけですよね。
「body部の

  • background-imageはurl(img/kabe03.gif)だよ(ここは大丈夫ですよね!)
  • margin-topは20pxだよ
  • margin-bottomは20pxだよ
  • margin-leftは3%だよ
  • margin-rightは3%だよ
  • padding:0pxだよ
  • text-alignはcenterだよ
  • line-heightは150%だよ
  • font-familyはMS ゴシック,sans-serifだよ
  • colorは#333333だよ
  • font-sizeは14pxだよ

以上。」

・・・となりますよね。
このように1つの「○○」に対して複数の「△△:××;」を設定することが出来ます。
後は、それぞれの△△と××の意味が分かれば言うことなしっ!
それでは、個々に見ていきましょうか!


1-3.「margin」と「padding」について

「margin」と「padding」はともに余白をどれだけ取るかの設定です。

話をわかりやすくするために、
「border:1px solid #333333;」とbody○○に書き加えてください。
更に、各「margin」の××の数字を「0」に書き直してください。

「border」は境界線という意味です。
「border」の××部分「5px solid #008800」は「太さ、線のタイプ、色」を表しています。
××部分については、後ほどお話します。

body {
 background-image: url(img/kabe03.gif);
 margin-top: 0px; margin-bottom: 0px; margin-left: 0%; margin-right: 0%;
 padding: 0px;
 text-align: center;
 line-height: 150%;
 font-family: MS ゴシック,sans-serif; color: #333333;
 font-size: 14px;
 border: 5px solid #008800;
}

すると、画面に緑色の線で囲まれた境界線が現れたと思います。( サンプル008-01
この境界線(含:境界線)で囲まれた領域をボックスといいます。サンプルの例では、bodyのボックスということになり、全ての内容(コンテンツ)は、この枠線の中で展開していくことになります。

bodyのボックスの中に様々な、ボックスを作って、コンテンツを振り分けていくことによって、ホームページのデザインを作っていきます。

ちなみに、今はまだ3行程度しか内容がないのでボックスも縦には小さいですが、内容が増えてくればこれが伸びていきます。

次に、各marginの××をもとの数値に戻してみてください。( サンプ008-02
境界線の外側に余白が現れましたね!
更に、「padding」の××の数字を「20」としてみましょう。( サンプル008-03
今度は、境界線の内側に余白が現れましたよね!

「margin」はborder(境界線)の外側、「padding」はborder(境界線)内側の余白を設定します。

「border」についている「-top」はその上方向、「-bottom」は下方向、「-left」は左方向、「-right」は右方向について、という意味であるということは、容易に想像できますよね!
「padding」のように「-top」の部分を省略すると四方向全部について、という意味になります。
××部分の「0px」「20px」「3%」の部分は幅を表します。
「0px」ということはつまり「無し」ということです。
数値の単位については、左側「豆知識」を読んでみてください。

1-4.「text-align」「line-height」について

「text-align」は文章を詰める位置という意味で、××の部分には「left」「center」「right」のいずれかが入ります。
それぞれ、「左詰め」「中央よせ」「右詰め」という意味ですね。

「line-height」は行間という意味で、××の数値分だけ行間をあけるということです。

1-5.「font-size」「color」「font-family」について

「font-size」は、字の大きさ、「color」は字の色、「font-family」は字体という意味です。
色の指定については、左側「豆知識」を読んでみてください。
字体について少しだけ・・・

××の部分には、字体の名前又は、グループ名を入れます。
字体の名前は、「MS ゴシック」のように大文字小文字の区別やスペース等正確に書いてください。
グループ名は、「serif」(明朝系)、「sans-serif」(ゴシック系)、「fantasy」(装飾系)、「cursive」(草書体系)、「monospace」(等幅系)に分けられます。

字体は、そのホームページを見る人のパソコンにインストールされているかどうかで決まってきますので、あまり特殊な字体を指定してもあなたのホームページを見る人のパソコンにその字体がインストールされていなければ、その字体では見てもらえません。
その場合、最も近い字体で表示されることになります。
「MS ゴシック,sans-serif」のように、「,」で区切って第二候補、第三候補と並べることも出来ます。
「MS ゴシック」なければ「ゴシック系の文字」という意味になります。

それでは、「padding: 0px;」と元に戻し、先ほど書き足した「border:1px solid #333333;」を消してこのページは終わりにしましょう!

キャンバストートバック ■HAPPY COIN■ ナチュラル/イエロー

サイズ:約
370mm×360mm×110mm
(縦×横×底マチ)
25mm×470mm(持ち手)
内容量:約10L
材 質:綿100%


<送料>
ゆうパック 一律500円
沖縄県1000円
メール便 一律160円

文字の大きさやmargin,paddingの範囲そのたもろもろの場面で数値を入れる場合があります。CSSファイルの場合は、その数値の単位を省略することは出来ません。
数値の単位には大きく分けて「絶対単位」「相対単位」と呼ばれるものがあります。
絶対単位は、
mm/ミリメートル
cm/センチメートル
in/インチ
pt/ポイント(約0.353mm)
pc/パイカ(12pt)
相対単位は
em(標準のフォントサイズを1とした時の相対値)
px(画面表示できる最小の画素を1px)
%(基準の値に対する割合値)
等があります。さてそれでは、どの単位を使うのがいいのかというと、はっきり言ってよくわかりません。この辺の話は結構面倒くさそうです。とりあえず「絶対単位」は結構使いづらい(他の人のパソコンでは、思った通りのレイアウトでホームページが表示されない)場合が多いみたいです。そんなこんなで私は、「px」と「%」を使っています。
色の指定は、例えば#ffffff(白)のように#の次に0〜f「0,1,2,3,4,5,6,7,8,9,
a,b,c,d,e,f」の文字を6個並べて表します。左の2つが赤、次の2つが緑、右の2つが青の要素の強さを指定しています。例えば、#0000ffでは、赤と緑は最弱、青は最強なので表示される色は「青」#ffff00は赤と緑が強いので「黄色」となります。このように、6個の文字を並べ替えて、約1677万色の色の指定が出来ます。スゴイですね!!
なんとなくの感覚で言えば、fに近いほど薄く、0に近いほど濃くなるような感じだと思います。例えば#336699(青っぽい色になると思います。)の色を薄くしようと思ったら、#77aaddといった具合にそれぞれの数に同じ分だけ足してやればそれだけ薄くなるんじゃないかなと思います。どうぞご自分で研究してみてください。それと「white」「black」等色名で指定できる色もあります。他には「silver」「maroon」「green」「yellow」「gray」「aqua」「blue」「navy」「lime」「olive」「fuchsia」「olive」「red」「purple」「teal」等があります。色々な色を駆使してあなたのホームページを見易くきれいにしてください!!


 
別窓で開く便利な検索窓です。どうぞご利用下さい!
カスタム検索