文章の枠に関してのスタイルシート具体例
テーブルを使わずに文章を枠で囲み、枠の太さ・色・形状を変化させます。余白を設定したり、枠を部分的に消すこともできます。
損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報
TOPページに戻る 文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
文章の枠に関してのスタイルシート具体例
▲
文章を枠で囲む
border: solid; または border: outset; 等
テーブルを使わなくても、文章に枠が作れます。
solid は実線、double は二重線、groove はへこんで見える枠、ridge はとがって見える枠、inset は中味が へこんで見える枠、outset は中味が浮き出て見える枠になります。
 |
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ border: solid;} --> </STYLE> </HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN>マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN style="border: solid;">マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
 |
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
| その他の枠の表示例 |
border: solid;
border: double;
border: groove;
border: ridge; border: inset; border: outset |
枠線の太さ・色・形状
border: 8px red inset;
border: の後に、枠線の太さ・色・形状を並べて指定することができます。
間に半角スペースをいれて区切ります。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ border: 4px #eeaaaa ridge; } --> </STYLE> </HEAD> <BODY> <DIV>テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="border: 4px #eeaaaa ridge; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
枠と文章の余白・その1
padding: 5px
枠と文章の間に余白を作ります。padding: 5px; と追加すると、上下左右すべての余白が 5px となります。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ border: 4px #aaaaee outset; padding: 5px;} --> </STYLE> </HEAD> <BODY> <DIV>テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="border: 4px #aaaaee outset;padding: 5px; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
枠と文章の余白・その2
padding: 2px 30px 2px 30px;
余白を上下左右、別々に記入することもできます。
padding: の後に半角スペースで区切り、上から順に時計回りで記入していきます。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ border: 4px #aaFFFF inset; padding: 2px 30px 2px 30px;} --> </STYLE> </HEAD> <BODY> <DIV>テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="border: 4px #aaFFFF inset;padding: 2px 30px 2px 30px; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
枠の外の余白
margin: 2px 30px 2px 30px;
枠の外の余白を上下左右、別々に記入することもできます。
margin: の後に半角スペースで区切り、上から順に時計回りで記入していきます。
margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px; 等と書いて、上下左右個別に指定できますし、margin:5px; と書いて全周全て 5px の 隙間のように一括指定することもできます。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- DIV{ border: 4px #aaFFFF inset; margin: 2px 30px 2px 30px;} --> </STYLE> </HEAD> <BODY> <DIV>テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <DIV style="border: 4px #aaFFFF inset;margin: 2px 30px 2px 30px; "> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</DIV> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
枠線ごとの、太さ・色・形状指定
border-top: none; border-right: none; border-bottom: 4px blue solid;
border-left: 30px blue solid;
上下左右の枠ごとに、太さ・色・形状を指定することができます。
border-left: 30px blue solid;
border-top:、border-right: 等の後に半角スペースで区切って、枠線の太さ・色・形状を指定していきます。
見出し代わりに使う
上と右の枠線はなくし、左の枠線を太く表示することにより、見出し代わりに使うことができます
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ border-top: none; border-right: none; border-bottom: 4px blue solid; border-left: 30px blue solid;} --> </STYLE> </HEAD> <BODY> <SPAN>テレビも映画も音楽も、ワンタッチですばやく楽しめる。</SPAN> ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <SPAN style="border-top: none; border-right: none; border-bottom: 4px blue solid; border-left: 30px blue solid;"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 </SPAN> ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
カラフルなアンダーライン
アンダーラインに色がついたように見せかけることもできます。
枠線を下だけにし、好きな色をつけます。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ border-bottom: 1px red solid;} --> </STYLE> </HEAD> <BODY> <SPAN>テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</SPAN> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <SPAN style="border-bottom: 1px red solid;"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</SPAN> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
2重線のアンダーライン
枠の形状を double に指定すれば2重線のアンダーラインのようにも見せられます。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ border-bottom: 6px #33ff66 double;line-height:200%;} --> </STYLE> </HEAD> <BODY> <SPAN>テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</SPAN> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <SPAN style="border-bottom: 6px #33ff66 double; line-height:200%;"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</SPAN> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
上に戻る TOPページに戻る 前に戻る 順番に次を見ていく