CSS

2013.10.10

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

white-space:nowarap

[CSS]

.sample{white-space:nowarap;}

[HTML]

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

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

white-space:pre

[CSS]

div{white-space:pre}

[HTML]

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

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

text-indent:インデント

[CSS]

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

世の中は、君の理解する以上に栄光に満ちている。

世の中は、君の理解する以上に栄光に満ちている。

2013.10.10

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

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

[CSS]

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

世の中は、君の理解する以上に栄光に満ちている。

世の中は、君の理解する以上に栄光に満ちている。

2013.10.07

縦方向の位置を指定 [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}
2013.10.07

行揃えを指定 [text-align]

text-align:行揃え位置

[CSS]

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

行間の設定 [line-height]

line-height:行の高さ

[CSS]

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

リンク部分に適用させる [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;}
2013.10.07

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

[CSS]


HTMLに書き込む


2013.10.07

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

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

[CSS]


4 / 512345

トップ