カテゴリー別アーカイブ: 西尾 沙綾

内側の余白padding

内側の余白padding

内側に余白を指定するプロパティがpadding(パディング)です。
divのなかにテキストを書くとき、何も指定しないとdiv内ぴったりくっついて読みにくいです。

divの内側上、左右に30pxの余白を作りました。

[paddingをかける前]

0531_1

[paddingをかけた後]

0531_3

div.sample2{
	width:500px;
	height:400px;
	background-color:#FF9;
	padding:30px 30px 0px 30px;

}

paddingの4つの並び順は上から時計まわりです。
前回のmarginもこのように一度に指定することができます。

ホームページ横幅のサイズは?

一般的には800~1000pxの間です。
解像度の低い古いパソコンに対応したい場合に1000以下を指定します。(公的機関のHPなどは横幅が狭いです。)

全体の横幅を指定
css

#container {
     width: 800px;
   margin-left: auto;
   margin-right: auto;
}

html

<div id="container">

</div>

containerというid名(大枠)を作り、その中にclass名のdivや、またそのなかにimgが入ります。

まとまりを表すdiv

div要素は、ひとつのまとまりを定義します。ホームページはdiv要素がいくつも集まって見栄えよく配置されています。
右に寄りなさい、間を空けなさい、このdivのなかのこの位置に配置しなさい、など。

divに背景色をつけてみましょう。

width600px
height400px
左右とも同じだけ間を空けて中央に配置
背景黄色

そしてimgは左に寄せる

css

div.sample1{
	width:600px;
	height:400px;
	margin-left:auto;
	margin-right:auto;
	background-color:yellow;
}

	
img.left{
	float:left;
}

 

html

<div class="sample1">

<img src="images/img1.jpg" class="left" width="200" height="300" alt="ケーキ写真" />

<p>画像が表示され、そのあとにくるpが<span class="red">右にきます。</span></p>

</div>

 
0528_1

リセットCSSを使ってデフォルト値を無効にする

ブラウザや要素ごとにあるスタイルのデフォルト値をリセットするために、「リセットCSS」というものを使用します。
ブラウザ(IE,Chrome,Firefox…)ごとに違うデフォルト値を無効にし、崩れを防ぎます。

*{
	margin: 0;
	padding: 0;
}

*は全体に適用する という意味です。

margin = 外側の余白
padding = 内側の余白

これらを無くしますよ、とスタイルシートの最初に記述します。

全体の表示を真ん中に設定

floatで画像を右に寄せ、そのあとにテキストを並べると、おかしな隙間ができます。

CSS

img.right{float:right;}

HTML


<img src="images/img1.jpg" class="right" width="200" height="300" alt="ケーキ写真" />

<p>画像が表示され、そのあとにくるpが<span class="red">左にきます。</span></p>

 
 
0526_3

画像を右に寄せたからといって、文字がその左についてきてくれません。
文字は左から右へ流れます。その前にfloat:leftの画像があればその横に続きますが、rightで画像を右に寄せると文字は左に何もないので
左から始まります。
それも画面いっぱい左から。

ほとんどのサイトが表示させる範囲を真ん中に指定しています。
どれだけ縮小しても真ん中に表示させ、また幅を指定することでその中に来るコンテンツを見栄えよく配置します。

表示させる範囲を真ん中、幅600pxに指定します。

CSS


div.sample1{
	width:600px;
	margin-left:auto;
	margin-right:auto;
}

img.right{float:right;}

HTML

<div class="sample1">

<img src="images/img1.jpg" class="right" width="200" height="300" alt="ケーキ写真" />

<p>画像が表示され、そのあとにくるpが<span class="red">左にきます。</span></p>

</div>

 
 
 
 

0526_4

sample1というwidth600pxの大枠を作り、左右同じだけ余白をとりなさい、というスタイルを加えました。
HTMLに、その大枠の始まりと終わりを指定しています。

画像を表示させ、テキストの回り込みを指定する

多くのサイトでは本文とメニューなどが左右に並んで配置されています。
しかし、HTMLだけでは上から下に並べて表示することしか出来ません。


<p>画像が表示され、そのあとにくるpが<span class="red">上にきます。</span></p>

<img src="images/img1.jpg" width="200" height="300" alt="ケーキ写真" />


 
 

0526_1

pをイメージの後に置くか、先に置くかで並びが変わるだけです。

左右に配置するために、imgにfloatプロパティを指定します。

CSS

img.left{
	float:left;
}

HTML

<img src="images/img1.jpg" class="left" width="200" height="300" alt="ケーキ写真" />

<p>画像が表示され、そのあとにくるpが<span class="red">右にきます。</span></p>

 
 

0526_2

floatは「浮遊させる」という意味があります。そのままの意味で考えると分かりにくいのですが、役割としてはfloatプロパティを指定した要素の次の要素を横に回りこませることができます。

floatで左に寄せたら、次のpが右に回り込みます。

画像を表示させる

画像を表示させるためには、htmlとcssファイルが入った同じフォルダーに画像専用のフォルダーを用意します。

[images]というフォルダーを新規に作り、画像を保存します。

画像のタイトル:img1
幅:200px
高さ:500px

<img src="images/img1.jpg" width="200" height="300" alt="ケーキ写真" />

<p>画像が表示され、そのあとにくるpが下にきます。</p>

 
 
0524_1

画像のファイルとタイトル、幅、高さを指定します。
またイメージ読み込みに失敗した時のために、altでイメージの代わりの表示テキストを記載しておきます。

DreamWeaverでホームページ制作 スタイルシートを指定する

前回の設定ではデフォルトのままで名前をつけていないので,分かりやすくするために変えておきます。
DreamWeaverのタイトルUntitled-1.htmlの上で右クリック→別名で保存→ 「sample.html」 として、保存先ファイルを選択し保存。
同じようにUntitled-2.css も別名で保存→「style.css」 とし保存。
保存先ファイル、DreamWeaverの元のファイルは削除します。
 

0518_1

2つだけ残ります。

そしてスタイルシート「style.css」を参照するために、htmlの[head][/head]の間に記述するのが
 

<link href="style.css"rel="stylesheet"type="text/css" />

 

「link href=”style.css”」は適用するスタイルシートファイル
「rel=”stylesheet”」は外部スタイルシートの参照
「type=”text/css”」はスタイルシートファイルの形式

スタイルシートの名前が「style.css」であることを確認し記述すればOK。

これで、別ファイルのスタイルシートが参照されます。
 

スタイルシートを別に作るメリット
・ファイルのサイズを軽くすることができる
・ファイルが軽くシンプルんびなることで、SEO対策になる
・複数に共通するスタイル(ヘッダー、フッター、グローバルナビナビ…)を一度に指定できる
・HTMLだけではできない複雑なデザインが可能

 
 
さっそくスタイルを指定してみます。
[フォントの色を赤く]

[style.css]

p.sample1{
	color:red;
}

[sample.html]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="style.css"rel="stylesheet"type="text/css" />

<title>無題ドキュメント</title>
</head>

<body>

<p class="sample1">最初の検証です。ここから始まります。今のワクワク感を忘れずに!</p>

</body>

 
 

0518_2