埼玉県のホームページ制作会社-クローバーインターナショナル

改行しないで表示させる [white-space:nowarap]

white-space:nowarap

[CSS]

.sample{white-space:nowarap;}

[HTML]

『吾輩は猫である』（わがはいはねこである）は、夏目漱石の長編小説。
中学校の英語教師である珍野苦沙弥の家に飼われている猫である「吾輩」の視点から、
珍野一家や、そこに集う彼の友人や門下の書生たち、「太平の逸民」（第二話、第三話）の人間模様を風刺的・戯作的に描いた、漱石の処女小説である。

改行や空白をそのまま表示 [white-space]

white-space:pre

[CSS]

div{white-space:pre}

[HTML]

   var _U = "undefined";
   var g_HttpRelativeWebRoot = "/ocom/";
   var SSContributor = false;

1行目のインデント [text-indent]

text-indent:インデント

[CSS]

#sample{text-indent:1em}
.sample{text-indent:50%}

文字間隔・単語間隔を設定する [letter-spacing]

letter-spacing:文字間隔
word-spacing:単語間隔

[CSS]

.sample{letter-spacing:0.5em}
.sample{word-spacing:1.5em}

縦方向の位置を指定 [vertical-align]

vertical-align:縦方向の位置

[CSS]

#top{vertical-align:top}
#middle{vertical-align:middle}
#bottom{vertical-align:bottom}
#text-top{vertical-align:text-top}
#text-bottom{vertical-align:text-bottom}
#super{vertical-align:super}
#sub{vertical-align:sub}

行揃えを指定 [text-align]

text-align:行揃え位置

[CSS]

#sample1{text-align:left}
#sample2{text-align:center}
#sample3{text-align:right}

行間の設定 [line-height]

line-height:行の高さ

[CSS]

line-height:normal;
line-height:1.2;
line-height:150%

リンク部分に適用させる [a:hover]

a:link ※まだ見てないリンク部分のスタイル
a:visited ※すでに見たリンク部分のスタイル
a:hover ※カーソルが上にある時のスタイル
a:active ※マウスを押した時のリンク部分のスタイル

a:link{color:#ff0000;}
a:visited{color:996600;}
a:hover{color:#333333;}
a:active{color:#ffffff;}

style属性の値で直接HTMLに書き込む [style=””]

[CSS]

style要素の内容として読み込ませる

HTML文書の中にCSSを書き込む。

[CSS]