2005.05.29
テーマ： アクセス向上(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
▲直接指定の記述方法
<p>インライン要素である<span style=" display: block; ">spanをブロックの形式</span>で表示します</p>
<p>ブロック要素である<div style=" display: inline; ">divをインラインの形式</div>で表示します</p>
<p>インライン要素である<span style=" display: list-item; margin-left: 1em; ">spanを</span><span style=" display: list-item; margin-left: 1em; ">リストで</span><span style=" display: list-item; margin-left: 1em; ">表示します</span></p>
<p>テキストのなかで<span style=" display: none; ">この指定をしますと</span>表示されません</p>
↓こんな感じですね（＾＾）
■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に参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
////////////////////////////////////////////////////////////////////
【ブロックとインライン】
もちろんホームページの作成は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
▲直接指定の記述方法
<p>インライン要素である<span style=" display: block; ">spanをブロックの形式</span>で表示します</p>
<p>ブロック要素である<div style=" display: inline; ">divをインラインの形式</div>で表示します</p>
<p>インライン要素である<span style=" display: list-item; margin-left: 1em; ">spanを</span><span style=" display: list-item; margin-left: 1em; ">リストで</span><span style=" display: list-item; margin-left: 1em; ">表示します</span></p>
<p>テキストのなかで<span style=" display: none; ">この指定をしますと</span>表示されません</p>
↓こんな感じですね（＾＾）
インライン要素である 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に参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
お気に入りの記事を「いいね！」で応援しよう
[【実験中】] カテゴリの最新記事
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
Re:スタイルシート（27）(05/29)
おはようございます(^^)♪ お世話になりますm(__)m
しばらく書き込めなくて、残念でした～(*^^*)
この時間の日記で 驚いています(^^;)
私は起きたばかりなので、元気なんですけどね(^^)♪
でめらら先生は、夜更かしさんですね･･･。（私は卒業しましたぁ～♪）
ご無理なさいませんように(^^)♪
最近は日増しに忙しくなってきています(^^;)
充実していることと思えば良いいのですが、不満はありますね･･･(^^;)
わがままなんですよね～(^^)！ いけないわ･･･。
書き込めなっかた間も勉強はさせて頂いていました(少し･･･！?）。
頭の中に入れるのは難しくなってきているので、その時が来たら、学ばせて頂きましょう･･･と、ずるくなってきました～(^^;) ごめんなさいm(__)m
･･･サイト内の充実の課題が、いつになったら終わるのかしら･･･って感じでして･･･(^^:) トホホ･･･。
終わりはない！･･･と実感しています。
ちょっと疲れ気味なので、「マイペースで♪」と言い聞かせて頑張っています。
あ～(^^;) 朝からこぼしてしまいました～(^^;)
失礼いたしましたm(__)m
お体に気を付けて、ご無理なさいませんように頑張ってくださいね(*^^*)
でめらら先生の説明は、本当に解り易いです♪
ご苦労の賜物ですね。皆さん 感謝していますよ(^^)
毎日ありがとうございますm(__)m
(2005.05.30 05:28:09)
しばらく書き込めなくて、残念でした～(*^^*)
この時間の日記で 驚いています(^^;)
私は起きたばかりなので、元気なんですけどね(^^)♪
でめらら先生は、夜更かしさんですね･･･。（私は卒業しましたぁ～♪）
ご無理なさいませんように(^^)♪
最近は日増しに忙しくなってきています(^^;)
充実していることと思えば良いいのですが、不満はありますね･･･(^^;)
わがままなんですよね～(^^)！ いけないわ･･･。
書き込めなっかた間も勉強はさせて頂いていました(少し･･･！?）。
頭の中に入れるのは難しくなってきているので、その時が来たら、学ばせて頂きましょう･･･と、ずるくなってきました～(^^;) ごめんなさいm(__)m
･･･サイト内の充実の課題が、いつになったら終わるのかしら･･･って感じでして･･･(^^:) トホホ･･･。
終わりはない！･･･と実感しています。
ちょっと疲れ気味なので、「マイペースで♪」と言い聞かせて頑張っています。
あ～(^^;) 朝からこぼしてしまいました～(^^;)
失礼いたしましたm(__)m
お体に気を付けて、ご無理なさいませんように頑張ってくださいね(*^^*)
でめらら先生の説明は、本当に解り易いです♪
ご苦労の賜物ですね。皆さん 感謝していますよ(^^)
毎日ありがとうございますm(__)m
(2005.05.30 05:28:09)
Re:スタイルシート（27）(05/29)
カモミール9828
さん
Re[1]:スタイルシート（27）(05/29)
でめらら58
さん
ko-harubiyoriさん
-----
おはようございます（＾＾）コメントありがとうございます♪
いつもお気遣いいただきましてありがとうございますｍ（＿＿）ｍ
たしかに･･･満足って無いですよね（＞＜）
このブログを始めるに当たって日記だけは書き逃ししないようにと決めたので、何事もなかなか続かないわたくしですがコレくらいは･･･などと不十分ながらも埋めていってます（;大汗）
(2005.05.30 10:47:23)
-----
おはようございます（＾＾）コメントありがとうございます♪
いつもお気遣いいただきましてありがとうございますｍ（＿＿）ｍ
たしかに･･･満足って無いですよね（＞＜）
このブログを始めるに当たって日記だけは書き逃ししないようにと決めたので、何事もなかなか続かないわたくしですがコレくらいは･･･などと不十分ながらも埋めていってます（;大汗）
(2005.05.30 10:47:23)
Re[1]:スタイルシート（27）(05/29)
でめらら58
さん
カモミール9828さん
-----
おはようございます（＾＾）コメントありがとうございます♪
そうなんですよ（＞＜）
自分では解るように書いたつもりでも、あとで読み返してコレは何を言いたいのってことがしょっちゅうですからねぇ（;大汗）
もともと自分の知識の整理のために始めたことなので自己満足になるのは仕方ないのではあるのですが（;苦笑い）
(2005.05.30 10:51:28)
-----
おはようございます（＾＾）コメントありがとうございます♪
そうなんですよ（＞＜）
自分では解るように書いたつもりでも、あとで読み返してコレは何を言いたいのってことがしょっちゅうですからねぇ（;大汗）
もともと自分の知識の整理のために始めたことなので自己満足になるのは仕方ないのではあるのですが（;苦笑い）
(2005.05.30 10:51:28)
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
© Rakuten Group, Inc.
