文章の枠に関してのスタイルシート具体例


テーブルを使わずに文章を枠で囲み、枠の太さ・色・形状を変化させます。余白を設定したり、枠を部分的に消すこともできます。


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>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN style="border: solid;">マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。
その他の枠の表示例   
 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>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="border: 4px #eeaaaa ridge; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。


上に戻る
枠と文章の余白・その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>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="border: 4px #aaaaee outset;padding: 5px; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。




枠と文章の余白・その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>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="border: 4px #aaFFFF inset;padding: 2px 30px 2px 30px; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。




枠の外の余白
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>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="border: 4px #aaFFFF inset;margin: 2px 30px 2px 30px; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。


上に戻る
枠線ごとの、太さ・色・形状指定
border-top: none; border-right: none; border-bottom: 4px 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>
AV感覚で気軽に使えるマルチAVノート誕生。
</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>
AV感覚で気軽に使えるマルチAVノート誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。


カラフルなアンダーライン
アンダーラインに色がついたように見せかけることもできます。
枠線を下だけにし、好きな色をつけます。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ border-bottom: 1px red solid;}  
-->
</STYLE>
</HEAD>
<BODY>
<SPAN>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</SPAN>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<SPAN style="border-bottom: 1px red solid;">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</SPAN>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。


2重線のアンダーライン
枠の形状を double に指定すれば2重線のアンダーラインのようにも見せられます。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ border-bottom: 6px #33ff66 double;line-height:200%;}  
-->
</STYLE>
</HEAD>
<BODY>
<SPAN>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</SPAN>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<SPAN style="border-bottom: 6px #33ff66 double;
line-height:200%;">

テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</SPAN>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。

上に戻る TOPページに戻る 前に戻る 順番に次を見ていく