文章に関してのスタイルシート具体例
文章に関してのスタイシートの具体的な書き方です。
文章の背景色・余白・行間の指定・修飾・行揃え・横幅・分割表示に関しての具体的なスタイルシートの書き方を説明しています。
損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報
TOPページに戻る 文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
文章に関してのスタイルシート具体例
▲
文章の背景色
background-color: lime; または background-color:#FF0000; 等
マーカーで線を引いたように、背景色がつきます。色名または色記号で指定します。
 |
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ background-color: pink;} --> </STYLE> </HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN>マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN style="background-color: pink;">マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
 |
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
背景と文字との隙間
padding: 2px 30px 2px 30px;
padding: の後に半角スペースで区切り、上から順に時計回りで隙間を記入していきます。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ background-color: pink; padding: 2px 30px 2px 30px; } --> </STYLE> </HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN>マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN style="background-color: pink; padding: 2px 30px 2px 30px; ">マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文章の行の間隔
line-height: 140%; または line-height: 1.3em; 等
行間隔を変えて読み易くすることができます。数字には単位をつけて使います。相対指示にしておくと文字サイズを変えたときにも、自動的に行間隔は変化します。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ line-height: 170%; } --> </STYLE> </HEAD> <BODY> <DIV> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="line-height: 170%; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文章の修飾方法
text-decoration: underline; または text-decoration: line-through; 等
文章にラインを付けたり、消したりします。underlineは文字の下に、overlineは文字の上方に線がつき、 line-throughは取り消し線です。noneと書けばリンク部に自動的についてくる下線を消します。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ text-decoration: underline} --> </STYLE> </HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN>マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN style="text-decoration: underline">マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文章の行揃え
text-align: center; または text-align: left; 等
文章の行揃えをします。left は左揃え、 center は中央揃え、 right 右揃え、 justify は均等配置になります。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ text-align: center; } --> </STYLE> </HEAD> <BODY> <DIV> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="text-align: center; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文章の横幅
width: 640px;
文章の横幅を指定できます。数値には単位が必要です。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ width: 480px; } --> </STYLE> </HEAD> <BODY> <DIV> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="width: 480px; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文章の余白指定 その1
margin: 20px;
文章とページ外枠の、上下左右すべての方向に、数値で記入した余白を設定します。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ background-color: lime;margin: 20px; } --> </STYLE> </HEAD> <BODY> <DIV> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="background-color: lime;margin: 20px; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文章の余白指定 その2
margin-top: 20px; または margin-left: 20px; 等
余白を上下左右別々に指定することができます。margin-top は上側のみに余白、margin-bottom は下側、margin-left は左側、margin-right は右側のみに余白を作ります。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ background-color: lime;margin-left: 40px; } --> </STYLE> </HEAD> <BODY> <DIV> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="background-color: lime;margin-left: 40px; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文章の位置指定 左右2分割表示
float:left; と float:right;を使う
テーブルを使わず文章を二つのブロックに分けることができます。
- <DIV>タグを使って文章をブロックにします。
- 幅の指定を同時に行い、ページ全体の幅の半分以下に指定します。
- それをfloat:left; の指定で左側に表示、
- 同じようにして、次の文章のブロックを float:right; で右側に表示させます。
- float 指示を使ったときは、最後に<BR clear="all">の指示を追加しておきます。 この指示以降の文章は、回り込まないようになります。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV.hidari{ width: 220px; float:left;margin: 5px; background-color: pink;} DIV.migi{ width: 220px; float:right;margin: 5px; background-color: pink;} --> </STYLE> </HEAD> <BODY> <DIV class="hidari"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> <DIV class="migi"> この文章は手近にあったカタログから流用しています。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY><DIV STYLE=" width:220px; float:left;margin: 5px;background-color: pink; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> <DIV style="width: 220px; float:right;margin: 5px;background-color: pink; "> この文章は手近にあったカタログから流用しています。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 この文章は手近にあったカタログから流用しています。
|
文章の位置指定 左右2分割表示
float:left; と margin-left:**px;を使う
テーブルを使わず文章を二つのブロックに分けることができます。
- <DIV>タグを使って文章をブロックにします。
- 左側に持ってくる文章は幅を指定します。
- それをfloat:left; の指定で左側に表示させます。
- 右に持ってくる文章はmargin-left:**px;の指示を入れ左側に空間を入れます。
- この空間の幅指示は、左側に持ってくる文章の幅より大きくします。
- float 指示を使ったときは、最後に<BR clear="all">の指示を追加しておきます。 この指示以降の文章は、回り込まないようになります。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV.hidari{ width: 250px; float:left; background-color: pink;} DIV.migi{margin-left: 260px; background-color: pink;} --> </STYLE> </HEAD> <BODY> <DIV class="hidari"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> <DIV class="migi"> この文章は手近にあったカタログから流用しています。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY><DIV STYLE="width: 250px; float:left; background-color: pink; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> <DIV style="margin-left: 260px; background-color: pink; "> この文章は手近にあったカタログから流用しています。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 この文章は手近にあったカタログから流用しています。
|
上に戻る TOPページに戻る 前に戻る 順番に次を見ていく