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


文章に関してのスタイシートの具体的な書き方です。 文章の背景色・余白・行間の指定・修飾・行揃え・横幅・分割表示に関しての具体的なスタイルシートの書き方を説明しています。


TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
文章に関してのスタイルシート具体例       

文章の背景色
background-color: lime;  または  background-color:#FF0000;  等

マーカーで線を引いたように、背景色がつきます。色名または色記号で指定します。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ background-color: pink;}  
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN style="background-color: pink;">マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



背景と文字との隙間
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>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN style="background-color: pink; padding: 2px 30px 2px 30px; ">マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



文章の行の間隔
line-height: 140%;   または  line-height: 1.3em;  等

行間隔を変えて読み易くすることができます。数字には単位をつけて使います。相対指示にしておくと文字サイズを変えたときにも、自動的に行間隔は変化します。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ line-height: 170%; }  
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="line-height: 170%; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。

上に戻る

文章の修飾方法
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>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN style="text-decoration: underline">マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



文章の行揃え
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>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="text-align: center; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



文章の横幅
width: 640px;

文章の横幅を指定できます。数値には単位が必要です。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ width: 480px; }  
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="width: 480px; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。

上に戻る

文章の余白指定 その1
margin: 20px;

文章とページ外枠の、上下左右すべての方向に、数値で記入した余白を設定します。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
DIV{ background-color: lime;margin: 20px; }  
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="background-color: lime;margin: 20px; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



文章の余白指定 その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>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<DIV style="background-color: lime;margin-left: 40px; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。

上に戻る

文章の位置指定 左右2分割表示
float:left;  と  float:right;を使う

テーブルを使わず文章を二つのブロックに分けることができます。
<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">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
<DIV class="migi">
この文章は手近にあったカタログから流用しています。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY><DIV STYLE=" width:220px; float:left;margin: 5px;background-color: pink; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
<DIV style="width: 220px; float:right;margin: 5px;background-color: pink; ">
この文章は手近にあったカタログから流用しています。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。
この文章は手近にあったカタログから流用しています。

文章の位置指定 左右2分割表示
float:left;  と  margin-left:**px;を使う

テーブルを使わず文章を二つのブロックに分けることができます。
<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">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
<DIV class="migi">
この文章は手近にあったカタログから流用しています。</DIV>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY><DIV STYLE="width: 250px; float:left; background-color: pink; ">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</DIV>
<DIV style="margin-left: 260px; background-color: pink; ">
この文章は手近にあったカタログから流用しています。</DIV>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。
この文章は手近にあったカタログから流用しています。

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