★タグ
●hrタグ
・・・水平線を挿入します。空要素なので終了タグはいりません。
<hr />で,
↑になりなす。
★CSS
●text-indent
・・・インデント（段落の先頭の字下げ）を指定します。
<p class="textindenttest">愛を知り、愛に得て、愛に生かされ、<br />愛を失い、より愛を知る</p>
↑の段落で
/*--.textindenttest設定----------------------------------------------*/
.textindenttest {
text-indent: 1em;
}
とCSSを設定すると↓のように先頭の文字が1em文下がります。pxと%もいけます。
愛を知り、愛に得て、愛に生かされ、
愛を失い、より愛を知る
●text-transform
・・・英字の小文字/大文字をします。特に英語圏の人達の為のCSSのようですね。とりあえずやってみます。
<p class="texttransformtestA～D">new york</p>でやってみます。
new york
上のCSSのソースは
/*--.texttransformtestA設定----------------------------------------------*/
.texttransformtestA {
text-transform: none;
}
です。
noneは書いたとおりに表示します。小文字で書いたので小文字です。
new york
上のCSSのソースは
/*--.texttransformB設定----------------------------------------------*/
.texttransformtestB {
text-transform: capitalize;
}
です。
capitalizeは単語の先頭の一文字だけを大文字にします。
new york
上のCSSのソースは
/*--.texttransformC設定----------------------------------------------*/
.texttransformtestC {
text-transform: uppercase;
}
です。
uppercaseは全て大文字で表示します。
new york
上のCSSのソースは
/*--.texttransformD設定----------------------------------------------*/
.texttransformtestD {
text-transform: lowercase;
}
です。
lowercaseは全て小文字で表示します。
●white-spase
・・・半角スペ・タブ・改行の表示方法を指定します。
<p class="whitespaseA～C">こんばんは おやすみなさい
おはよう</p>で試してみます。
こんばんは おやすみなさい
↑のCSSの記述は、
/*--.whitespaceA設定----------------------------------------------*/
.whitespaceA {
background-color: #ff0000;
width: 150px;
white-space: normal;
}
normalは半スペ一つで表示されます。ボックスに幅が指定されてるときは自動改行されます。
こんばんは おやすみなさい
↑のCSSの記述は、
/*--.whitespaceB設定----------------------------------------------*/
.whitespaceB {
background-color: #ff0000;
width: 150px;
white-space: pre;
}
preは半スペ、タブ、改行すべてそのままの形で表示されます。(※)半スペ3つ入れたので、半スペ3つ分スペースが空きました。）ボックスに幅が指定されていても自動改行しません。
こんばんは おやすみなさい
↑のCSSの記述は、
/*--.whitespaceC設定----------------------------------------------*/
.whitespaceC {
background-color: #ff0000;
width: 150px;
white-space: nowrap;
}
nowrapは半スペ、タブ、改行をすべて一つの半スペとして表示します。
ボックスに幅が指定されていても自動改行しません。
●letter-spacing
・・・文字の間隔を指定します。
例によって、数値で指定します。後はnorumalです。normalがたぶんデフォルトです。
<p class="letterspacingtest">古池や 蛙飛び込む 水の音</p>で試してみます。
古池や 蛙飛び込む 水の音
上のCSSの記述は↓です。
/*--.letterspacingtest設定----------------------------------------------*/
.letterspacingtest {
background-color: #00ff00;
letter-spacing:50px;
}
わかりやすいように、letter-spacingを50pxにしてみました。文字間隔が離れましたね。emもいけます。
↓WEBデザインについて説明してるサイトです。
Webデザインのセオリーを学ぼう
PR
