2008年08月20日

display プロパティ css スタイルシート

スポンサード リンク

display プロパティは表示の仕方を指定するプロパティです。

display:none;
指定した要素は表示されず領域も確保されません。
display:inline;
指定した要素はインラインレベルで表示されます。
display:block;
指定した要素はブロックレベルで表示されます。
display:list-item;
インライン要素をリスト形式で表示します。
リストマーク a:hover を使って隠れている文字列を表示します。
サンプル
  a.showmoji span{display:none;}
  a.showmoji:hover span{display:inline;}

<div><A href="javascript:void(0);" class="showmoji">
表示されていない <span>display inline</span> 文字を表示します。</A></div>
表示例
   表示されていない display inline 文字を表示します。
よく利用する<P>タグや<H*>タグは改行が入りますが
display:inline; を使うと改行せずに横一列に表示させることができます
サンプル
 <DIV><h4 style="display:inline;">Javascript スタイルシート</h4>
 サンプルソースの紹介です。</DIV>
表示例

Javascript スタイルシート

 サンプルソースの紹介です。
インライン要素をブロックレベルで表示させます。
インライン要素の<IMG>に display:block;を設定します。
サンプル
  a.showgazou IMG{display:none;}
  a.showgazou:hover IMG{display:block;}

<div><A href="javascript:void(0);" class="showgazou">画像を表示します。
<IMG src="画像のURL"></A>ブロックレベルで表示します。</div>
表示例
画像を表示します。  ブロックレベルで表示します。領域が確保されるのでレイアウトが下に,ずれます。
インライン要素の文字列をリスト形式で表示します。
サンプル.
 .list {display:list-item; margin-left:10px;}

<div><span class="list">インライン要素の文字列を</span>
<span class="list">リスト形式で</span><span class="list">表示します。</span></div>
表示例
インライン要素の文字列をリスト形式で表示します。

サンプルソース

<HTML>
<HEAD>
<TITLE>displayプロパティ スタイルシート css</TITLE>
<STYLE type="text/css">
<!--
赤色のソースはここに貼り付けてください
-->
</STYLE>

</HEAD>
<BODY>
紺色のソースはここに貼り付けてください
</BODY>
</HTML>

posted by javaScript at 20:12 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。