display プロパティは表示の仕方を指定するプロパティです。
- display:none;
- 指定した要素は表示されず領域も確保されません。
- display:inline;
- 指定した要素はインラインレベルで表示されます。
- display:block;
- 指定した要素はブロックレベルで表示されます。
- display:list-item;
- インライン要素をリスト形式で表示します。
 a:hover を使って隠れている文字列を表示します。 |
| サンプル a.showmoji span{display:none;} a.showmoji:hover span{display:inline;} |
| 表示例 表示されていない display inline 文字を表示します。 |
| よく利用する<P>タグや<H*>タグは改行が入りますが display:inline; を使うと改行せずに横一列に表示させることができます |
| サンプル |
表示例Javascript スタイルシートサンプルソースの紹介です。 |
| インライン要素をブロックレベルで表示させます。 インライン要素の<IMG>に  display:block;を設定します。 |
| サンプル a.showgazou IMG{display:none;} a.showgazou:hover IMG{display:block;} |
| 表示例 画像を表示します。  ブロックレベルで表示します。領域が確保されるのでレイアウトが下に,ずれます。 |
| インライン要素の文字列をリスト形式で表示します。 |
| サンプル. .list {display:list-item; margin-left:10px;} |
| 表示例 インライン要素の文字列をリスト形式で表示します。 |
サンプルソース
<HTML>
<HEAD>
<TITLE>displayプロパティ スタイルシート css</TITLE>
<STYLE type="text/css">
<!--
赤色のソースはここに貼り付けてください
-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
