テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.29

スタイルシート（27）

(4)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

スタイルシート>>基本>>ボックス>>display: ***; 表示のタイプ（ブロック・インライン・リスト・非表示）を指定する
////////////////////////////////////////////////////////////////////

【ブロックとインライン】
もちろんホームページの作成はHTMLタグとスタイル(CSS)の組み合わせで作り上げるわけですが(簡易な装飾だけならHTMLタグだけでも出来上がるのですが･･･)
HTMLタグをボックスの考え方でわけると大きく分けてふたつブロックフォーマットとインラインフォーマットに分けることができると思います。

ブロックフォーマットのボックスは前後のコンテンツ、ボックスとは別のひとかたまりとして存在します。
一般的には改行され、前のボックスとも後ろのボックスともマージンの値の分だけ離れて並ぶこととなります。
■デフォルト(標準の状態)でブロックレベルであるHTMLタグとは
address、blockquote、center、dir、div、dl、fieldset、form、h1～h5、hr、menu、noframes、ol、p、pre、table、ul など

行ボックスの高さはテキスト用のスタイル、margin、top、bottom、line-heightで決まります。
また高さを　vertical-align　で、水平方向(右寄せ左寄せ均等割付など)を　text-align　で揃えることができます。
(テキストの一部ですからテキストに使えるスタイルが使えるということですね)
■デフォルト(標準の状態)でインラインレベルであるHTMLタグとは
a、abbr、acronym、applet、b、basefont、big、br、button、cite、code、em、font、i、iframe、img、input、label、map 、object、q、select、small、span、strong、sub、sup、textarea、u、ruby など

■display: ***;
displayはボックスの種類を指定するプロパティです。
デフォルトとは無関係にブロック要素をインライン形式で表示したり、インライン要素をブロック形式で表示することができます。

【display: ***;に使用できる値】
□block･･･要素をブロックレベル要素として表示します

□list-item･･･インライン要素をリストで表示します
□marker･･･ブロックレベル要素に対する擬似要素 :before, :after と共に使うとリスト形式で表示されます。その他ではインラインと同じです。
□none･･･要素が全くボックスを生成せず、表示されません
□run-in･･･前後の状況により、ブロックレベルになったりインラインレベルになったりします。
□compact･･･前後の状況により、ブロックレベルになったりインラインレベルになったりします。

□table，
□inline-table，
□table-row-group，
□table-column，
□table-column-group，
□table-header-group，
□table-footer-group，
□table-row，
□table-cell,
□table-caption

▲直接指定の記述方法
インライン要素であるspanをブロックの形式で表示します
ブロック要素である<div style=" display: inline; ">divをインラインの形式</div>で表示します
インライン要素であるspanをリストで表示します
テキストのなかでこの指定をしますと表示されません
↓こんな感じですね（＾＾）

インライン要素である spanをブロックの形式で表示します

↑ブロック化されて改行されました

ブロック要素である

divをインラインの形式

で表示します ↑インライン化されて改行がなくなりました

インライン要素である spanをリストで表示します

↑リスト化されて一種のブロック要素になります

テキストのなかでこの指定をしますと表示されません

↑消されてしまいました

■visibility: ***;
visibility　は表示・非表示を指定するプロパティです。
ただし非表示化されても、ボックスは生成されるので、後続のボックスなどコンテンツに影響します

【visibility: ***;に使用できる値】
□visible･･･ボックスが表示されます。
□hidden･･･ボックスが表示化されます。非可視状態(透明)にはなりますが、ボックスは生成されていますので、後続のコンテンツに影響します。
□collapse･･･テーブル（表）の行や列に指定すると、その部分を詰めて表示します。
列の'visibility'の値を'collapse'に指定する場合、列のセルは非表示化されて、他の列にまたがるセルはトリミング(切り取る)されます。表の幅は切り取られた列の幅だけ狭くなる。その他の要素に指定した場合は、hidden と同じです。

※非表示ではなく、ボックス自体をなくしてしまいたい場合には、displayプロパティでnoneを指定します。

<a href="http://pt.afl.rakuten.co.jp/c/00109923.9f323d8e/?url=http%3a%2f%2fitem.rakuten.co.jp%2fajewelry%2fsecl-208%2f" target="_blank">
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/ajewelry/cabinet/hagyo/secl-208.jpg?_ex=64x64" border=0 alt="浜田省吾　CD【My First Love】送料無料（7/6発売）" style="visibility: hidden; ">
</a>
<a href="http://pt.afl.rakuten.co.jp/c/00109923.9f323d8e/?url=http%3a%2f%2fitem.rakuten.co.jp%2fajewelry%2fsecl-208%2f" target="_blank">
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/ajewelry/cabinet/hagyo/secl-208.jpg?_ex=64x64" border=0 alt="浜田省吾　CD【My First Love】送料無料（7/6発売）" style="visibility: visible; ">
</a>
↓こんな感じですね（＾＾）

↑非表示ですが領域は確保されています見えないけれどリンクはしますよ（＾＾）

↑普通に表示されています

*****************************************************

【庶事所感】
昨日は時間がなく日記が日をまたいでしまいました（＞＜）

見た目に派手な変化のあるカラフルなスタイル(背景色や指定画像など)や動きのあるスタイル(スクロールなど)の指定は、地味ながらこのような表示形式や配置を指定するスタイルによって設定できるものなのですが、
見た目のはでなスタイルは説明し易いのですが、重要で基本的なものほど概念的な要素が多く説明がなかなか難しいので文章が捗らないです（＞＜）

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ