このブログをはてなブックマークに追加

2011年11月01日

もしもドロップシッピング ホームページ編(17.CSSで行揃えを指定する方法)

もしもドロップシッピング ホームページ編(17.CSSで行揃えを指定する方法)

テキストの行揃えと幅を指定する。


テキストの行揃えを指定するには、text-alignプロパテイを使用します。

テキストの幅を指定するには、widthプロパテイを使用します。


■行揃えを指定する

text-align: 値;


text-alignプロパテイは、h1要素やp要素などのブロック要素内のテキストの行揃えを
キーワードで指定します。

ブロック内のテキストに行揃えを指定しますが、ブロック要素そのものの配置を指定すものではありません。

「auto」  自動的に配置

「left」  左揃え

「center」 中央揃え

「right」  右揃え

「justify」 両端揃え


CSS(stylesheet.css)
------------------------------
@charset "utf-8";


h1 {
color: #ff0000;
  }
h2 {
color: #0000ff;
}


p {
font-size: 12pt}

.text1 {
text-align: auto;
}
.text2 {
text-align: left;
}
.text3 {
text-align: center;
}
.text4 {
text-align: right;
}
.text5 {
text-align: justify;
}

------------------------------

HTML
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSで行揃えを指定する方法</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>行揃えを指定する</h1>
<h2>text-align: 値;</h2>

<p class="text1">テキストの行揃えを指定するには、text-alignプロパテイを使用します。ブロック内のテキストに行揃えを指定しますが、ブロック要素そのものの配置を指定すものではありません。【自動的に配置】</p>

<p class="text2">テキストの行揃えを指定するには、text-alignプロパテイを使用します。ブロック内のテキストに行揃えを指定しますが、ブロック要素そのものの配置を指定すものではありません。【左揃え】</p>

<p class="text3">テキストの行揃えを指定するには、text-alignプロパテイを使用します。ブロック内のテキストに行揃えを指定しますが、ブロック要素そのものの配置を指定すものではありません。【中央揃え】</p>

<p class="text4">テキストの行揃えを指定するには、text-alignプロパテイを使用します。ブロック内のテキストに行揃えを指定しますが、ブロック要素そのものの配置を指定すものではありません。【右揃え】
</p>

<p class="text5">テキストの行揃えを指定するには、text-alignプロパテイを使用します。ブロック内のテキストに行揃えを指定しますが、ブロック要素そのものの配置を指定すものではありません。【両端揃え】</p>

</body>
</html>

------------------------------
text-align.jpg


■表示領域の幅を指定する

width: 値;


「絶対値の単位」 pxなどの絶対値の単位で指定

「割合」 ウィンドウ幅に対しての割合を%で指定

「auto」 ブラウザに依存して設定

widthプロパテイは、見出しや段落などのブロック要素の表示領域の幅を数値や割合で指定することができる。

CSS(stylesheet.css)
------------------------------
@charset "utf-8";


h1 {
color: #ff0000;
  }
h2 {
color: #0000ff;
}

p {
font-size: 16pt}

.text1 {
width: 100px;
}
.text2 {
width: 300px;
}
.text3 {
width: 100%;
}
.text4 {
width: 50%;
}


------------------------------

HTML
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSで文字を装飾する方法</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>表示領域の幅を指定する</h1>
<h2>width: 値;</h2>


<p class="text1">widthプロパテイは、見出しや段落などのブロック要素の表示領域の幅を数値や割合で指定することができる。</p>

<p class="text2">widthプロパテイは、見出しや段落などのブロック要素の表示領域の幅を数値や割合で指定することができる。</p>

<p class="text1">widthプロパテイは、見出しや段落などのブロック要素の表示領域の幅を数値や割合で指定することができる。</p>

<p class="text2">widthプロパテイは、見出しや段落などのブロック要素の表示領域の幅を数値や割合で指定することができる。</p>

</body>
</html>

------------------------------
width.jpg
ホームページSEO集客コンサルタント会社|CANコンサルティング株式会社