HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

「激安ガーデン通販」では、只今期間限定セール開催中! [PR]

● 文字の配置

文字に関わる一般的なスタイルの設定です。斜体文字の後の括弧内がプロパティになっています。
当ページを参考にして プロパティ:値 でスタイルをDIV要素やSPAN要素、P要素などに設定してみてください。

○文字の配置を設定(text-align)

style="text-align:left" 左寄せ
style="text-align:center" 中央寄せ
style="text-align:right" 右寄せ
style="text-align:justify"
均等割付ですが・・・文字・・・その他を参照して下さい。

で、段落(P要素)や見出し(H1要素等)範囲設定(DIV要素)等で有効。
一ブロックに対して設定するのでSPAN要素では適用されません。

○画像と文字の配置の設定
画像はほとんど文字と同じように扱われます。左右の配置を設定するのも『text-align』です

text-align:left ロゴ
text-align:center ロゴ
text-align:right ロゴ

○文字間隔の設定(letter-spacing)
style="letter-spacing:normal"
style="letter-spacing:+15"
style="letter-spacing:+1em"
style="letter-spacing:-0.1em"
style="letter-spacing:-0.1"
style="letter-spacing:+200%"
style="letter-spacing:-50%"
style="letter-spacing:5mm"

○一行の高さを設定(line-height)
style="line-height:2em"
style="line-height:normal"
style="line-height:180%"
style="line-height:normal"
style="line-height:15mm"
style="line-height:normal"
style="line-height:80%"
行頭設定しないと意味が有りません。ここで開始し、行末で閉じています。=> style="line-height:2em"ココが次の行なら効果が現れます。
style="line-height:2em"<=行頭で開始し、ココで閉じています。

○文字の縦方向の位置を設定(vertical-align)
style="vertical-align:baseline" 通常の位置

style="vertical-align:sub" 文字の下付を設定(通常の文字) 下付文字サイズ0.8em

style="vertical-align:super" 文字の上付を設定(通常の文字) 上付文字サイズ0.8em

フォントサイズを変更するときvertical-align:text-topのスタイル指示を与えれば 上部を基準に行がそろいます (style="font-size:2em ; vertical-align:text-top")
フォントサイズを変更するときvertical-align:middleのスタイル指示を与えれば 真ん中を基準に行がそろいます。 (style="font-size:2em ; vertical-align:middle")
フォントサイズを変更するときvertical-align:text-bottomのスタイル指示を与えれば 下部を基準に行がそろいます。 (style="font-size:2em ; vertical-align:text-bottom")
※↑上の行は見やすくするために広げています。文字の大きさにあわせて行は変化しませんのでご注意を。
テーブルにおける縦方向の配置はこちら↓TD要素に設定します。(<TD style="vertical-align:≪値≫">)
vertical-align:baseline
通常位置
vertical-align:top
上詰め
vertical-align:bottom
下詰め
vertical-align:middle
中央

画像と文字の関係も同じです。
vertical-align:baseline=> ロゴ
vertical-align:text-top=> ロゴ
vertical-align:middle=> ロゴ
vertical-align:text-bottom=> ロゴ
vertical-align:sub=> ロゴ
vertical-align:super=> ロゴ

IEで位置を設定した場合、その上下の位置関係は上からsub、text-top、middle、text-bottom、superとなり、 subおよびsuperは画像を越えて上および下に位置しますが、 Opera/Netscapeではsubとtext−topが同じ位置で、Operaは更に superがmiddleとtext−bottomの中間あたりになっています。 subおよびsuperは画像と相性が悪いのでしょうか・・・。

○一行目のインデント(字下げ)の距離を設定(text-indent)

style="text-indent:2em"
style="text-indent:50%"
style="text-indent:30mm"
style="text-indent:20px"にしたときの文字下げです。(ココでBR要素で改行)
これも文字の配置設定と同じで一ブロックに対してのみ有効ですが、二行目には適用されません。

○単語間隔の設定(word-spacing)IE5.5未対応
英語等の場合、単語と単語の間を半角スペースで区切りますが、このプロパティはそのスペース幅を設定する為のものです。
ですから、日本語には使用できません。 IE6.0より対応しています。

style = " word-spacing : normal "
style = " word-spacing : +5px " ;
style = " word-spacing : +1em " ;
style = " word-spacing : -1em " ;
style = " word-spacing : 120% " ;
style = " word-spacing : 3mm " ;
5 PX を 設定 した 日本語 です。

○半角スペース・タグ・改行の表示の仕方を設定(white-space)IE5.5未対応
style="white-space:normal"(連続半角スペース <-半角スペース5つ・タグ
<-BRを記述・改行 <-改行あり)

style="white-space:pre"(連続半角スペース <-半角スペース5つ・タグ
<-BRを記述・改行 <-改行あり)

style="white-space:nowrap"(連続半角スペース <-半角スペース5つ・タグ
<-BRを記述・改行 <-改行あり)

normal:連続する半角スペース・タグ・改行を、1つの半角スペースとして表示し、幅が設定されてれば自動的に改行。
pre:連続する半角スペース・タグ・改行を、そのまま表示。
nowrap:連続する半角スペース・タグ・改行を、1つの半角スペースとして表示しますが、幅を無視して表示。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

中古スマホ・ガラケーなどのモバイル製品をお探しなら電脳プラザで!
 
常時2,000台以上の在庫を取り揃え!最短即日出荷に対応!

TOP] [HOME

更新日時:2014/08/09