CSSガイド EX

▼基本的なCSS、要素等について紹介しています。


【障害者の就職!】

 

コンテンツメニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Template

 ◆Tip!

 

★サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | ツールEX | PHPを学ぼう!

 

◆Chapter 1 - ボックスについて

各要素にはボックスという領域が育成されます。
ボックスは4つの部分(marginborderpaddingcontent)から構成されいて、次の図のようなイメージとなります。

 

ボックスの領域

 

マージン(margin)

マージンは、ボックスの一番外の領域を示します。
背景は常に透明です。

 

枠線(border)

要素の周りに表示させる枠線の領域です。
特にしてしなければ、非表示となります。

 

内容の周りの空間(padding)

内容が表示される領域と枠線の間の空間部分の領域です。
要素の周りに表示させる枠線の領域です。
特にしてしなければ、非表示となります。

 

コンテンツ(content)

テキストや画像など、要素の内容を表示します。

 

margintとpaddingでは、上下左右のマージンを細かく設定することができます。
では実際に表示テストしてみましょう。
次の例をみてください。

 

【index1_4_1.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ボックスの表示テスト1 - CSSガイドEX</title>
<style type="text/css">
<!--
body{
  margin:0;
  color:#000000;
  background-color:#DDDDDD;
}
p{
  margin:0;
  border: solid 1px blue;
  margin-top:20px;
  margin-left:40px;
  margin-right:40px;
  background-color:#FFFFFF;
  font-size:12pt;
}
-->

</style>
</head>
<body>
<hr>
<p>表示テスト1</p>
<p>表示テスト2</p>
<p>表示テスト3</p>
</body>
</html>

 

このHTML文章では、bodyタグには、マージン:0、文字色:#000000、背景色:#DDDDDDを設定。
pタグには、マージン:0、枠線:1pxで青色、上マージン:20px、左マージン:40px、右マージン:40px、背景色:#FFFFFF、文字サイズ:12ptを設定しています。

表示は、こちらのサンプルから確認できます。

 

次にpタグにpaddingの1行を追加し、上下左右のマージンを簡単に設定してみます。

 

【index1_4_2.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ボックスの表示テスト2 - CSSガイドEX</title>
<style type="text/css">
<!--
body{
  margin:0;
  color:#000000;
  background-color:#DDDDDD;
}
p{
  margin:0;
  border: solid 1px blue;
  margin-top:20px;
  margin-left:40px;
  margin-right:40px;
  padding:20px;
  background-color:#FFFFFF;
  font-size:12pt;
}
-->
</style>
</head>
<body>
<hr>
<p>表示テスト1</p>
<p>表示テスト2</p>
<p>表示テスト3</p>
</body>
</html>

表示は、こちらのサンプルから確認できます。

どうでしょうか?
marginとpaddingの違いが理解できたでしょうか?
スタイルを設定する上で、この違いを理解することはデザインをするうえでは必要不可欠となります。

ちなみ、

margin:10px;

と、

padding:10px;

はそれぞれ、上下左右のマージンに10pxを設定することになります。

 

 

 


 

忍者AdMax

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | PHPを学ぼう! | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.