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

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● 表示の設定

スクリプト等で表示の設定を動的に変化させる事により、表現の幅を広げられます。

○要素の表示/非表示を設定

要素を配したまま非表示を設定するプロパティ visibility
IMG要素にstyle="visibility:visible" 表示です。
バーナー
IMG要素にstyle="visibility:hidden" 非表示です。が、その場所が空欄になります。
バーナー
IMG要素にstyle="visibility:collapse" その場所を詰めて、非表示ですが。非対応?
バーナー

表ではこのようになります。

visibility:visiblevisible
visibility:hiddenhidden
visibility:collapsecollapse

※collapseについて
IE6.0は共に表示されます。
O6.05は共に非表示です。
N7.0も共に非表示ですが、テーブルの方はセルを表示し内容が非表示となっています。

○オブジェクトの切り抜き

clipプロパティを利用する事で、オブジェクトの一部を切り抜いて表示する事ができます。切り抜かれた外側の部分については、overflowプロパティにて表示方法を設定します。
clipプロパティを使用するには、positionプロパティでabsoluteが設定されている必要があります。す。

値はautoを設定すると、切り抜きが行われずに全体が表示されます。
rect(上,右,下,左)にて上右下左それぞれの端から内側への距離を、数値に単位をつけて設定することになっているのですが、 実際にはボックスの左上を基準として、上右下左のそれぞれの距離を設定する仕様が多いようです。

<IMG src="../img/bannr.gif" alt="サンプル画像" style="position:absolute ; clip:rect(auto 50px 80px auto) ; overflow:hidden">

サンプル画像



○要素の表示形式を設定するdisplayプロパティ

none
style="display:none" このスタイルを設定した要、またはそれに内包された要素は表示されません。
↓↓ここのIMGを style="display:none" で設定
バナー
↑↑ここにIMGを style="display:none" で設定

block
style="display:block" このスタイルを設定した要素はブロックレベルとして扱われます。
改行<BR>を入れていません バナー 改行<BR>を入れていません

inline
style="display:inline" このスタイルを設定した要素はインラインレベルとして扱われます。

H1要素

を使用してもインラインとして扱われていますので、改行されません。

しかし、P要素で赤文字に設定して、

DIV要素を style="display:inline" 
を使用すると、 インラインとして扱われていても、スタイルは継承されないようですなので、改行の抑制だけ?

で、ためしにP要素で赤文字に設定して、
SPAN要素を style="display:block" で使用すると、改行はされしかもスタイルは継承されます。

list-item

style="display:list-item" リスト表示 このスタイルを設定した要素に挟まれた記事は、箇条書きの記事(リストマーカーを持つブロックレベル要素)としてあつかわれます。 HTML要素のLI要素と同様の働きをし、そのスタイルプロパティを使用できます。

ただしIE6.0/N7.0では字下げ処理を行わないと、リストマークが表示されません。 BR要素無しに改行するので、箇条書きの記事としては扱われているようですが・・・

marker
※対応ブラウザを所有していないため確認していません。
リストのマーカーを表示するスペースを生成します。
このプロパティは、擬似要素の:beforeと、:afterにのみ設定するものです。
その、リストのマーカーと文頭のスペースを設定するとき、marker-offsetを使用します。
marker-offset:1em 等


以下IE5.5では確認できないためOperaで確認しています。

compact

style="display:compact"
前後の状況により、設定要素とあとに配置される要素をブロックレベルかインラインレベルかを切替えます。
設定要素の次にくるブロックレベル要素が、通常の配置(回り込み(float)、絶対配置されていない配置)の時、 style="display:compact"を設定した要素の後方に、 次にくるブロックレベル要素が収まる幅が空いている場合(1行で収まる場合)に、 この要素をインラインレベルとして次に来る要素を改行せずに1行で表示します。 それ以外の場合には、通常のブロックレベルで表示されます。

つまり、説明文が『style="display:compact"』の文の真横から始まるはずなのです。
あとの文にはmargin-left:12emのスタイルで、文はともにDIV要素で記述されています。

run-in

style="display:run-in"

設定要素とあとに配置される要素をインラインレベルに切替えます。
設定要素の次にくるブロックレベル要素が、通常の配置(回り込み(float)、絶対配置されていない配置)の時、 インラインレベルとして表示されます。それ以外の場合には、ブロックレベルで表示されます。
共にP要素で記述してありますが、display:run-inが正しく表示されれば、あとの説明文が『style="display:run-in"』の真横から始まります。

displayで表を作る

display:table / display:table-cell等を設定し、 その要素を表関連要素として表示します

設定要素を表関連要素として表示する display の値です。
table,設定要素をブロックの表要素にします。(HTMLのTABLEに相当)
inline-table,設定要素をインラインの表要素にします。(HTMLのTABLEに相当)
table-caption,設定要素を表題にします。(HTMLのCAPTIONに相当)
table-row,設定要素を表の行要素にします。(HTMLのTR)
table-cell,設定要素を表のセル要素にします。(HTMLのTD)
table-column,設定要素を列要素にします。(HTMLのCOLに相当)
table-row-group,設定要素を行グループ要素にします。(HTMLのTBODYに相当)
table-column-group,設定要素を列グループ要素にします。(HTMLのCOLGROUPに相当)
table-header-group,table-row-group と同じですが、視覚整形の時には他の行より先、題名より後に表示されます。(HTMLのTHEADに相当)
table-footer-group,table-row-group と同じですが、視覚整形の時には他の行より後、下部題名より先に表示されます。(HTMLのTFOOTに相当)

これらを使用して以下に表を作成します。

SPAN.t , DIV.t {border: solid silver 2px;}

表の線を表示するためにヘッダーと『table』『inline-table』を設定した要素にborderスタイルを設定しています。

SPAN要素による表作り table-column-group table-column-group table-column-group table-header-group table-header-group table-header-group table-footer-group table-footer-group table-footer-group table-row-group table-row-group table-row-group

DIV要素にスタイル inline-table を設定する

table-column-group
table-column-group
table-column-group
table-header-group
table-header-group
table-header-group
table-footer-group
table-footer-group
table-footer-group
table-row-group
table-row-group
table-row-group
table-caption(表題)を付けるとインラインでなくなるので使用していません。使用しないとこの文字は表の横にきて、インライン要素になっている事が解ります。

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

今すぐ仕事に結びつく資格&技能完全ガイド【情報満載のガイド無料進呈】

‥…━★ 通信教育80年の実績!がくぶん総合教育センター ★━…‥

TOP] [HOME

更新日時:2014/08/09