ホームページ作成ＴＯＰ > レイアウト > インライン要素に変換する
インライン要素に変換する
要素をインライン要素に変換する方法を説明します。
今回は、リスト項目にdisplay:inline;を設定して、リストをインライン要素に変換する事を行ってみましょう。
sample
- ＜項目１行目＞
- ＜項目２行目＞
- ＜項目３行目＞
↓ 横並びのリストに変換 ↓
- ＜項目１行目＞
- ＜項目２行目＞
- ＜項目３行目＞
ＨＴＭＬ
スタイルシートを使用します。
ホームページ作成ＴＯＰ > レイアウト > マウスの形状を変更する > このページのＴＯＰ ▲
スタイルシート display:inline;
インライン要素に変換するには、display:inline;を使用する事で可能になります。
今回のサンプルに関しては、ＴＯＰ > リスト > リストを横に並べるにて説明してますので、確認して下さい。
display:設定;の他の設定として代表的なものが下記になります。
| 設定 | 意味 |
|---|---|
display:none; | 非表示にする |
display:block; | ブロック要素に変換する |
display:list-item; | リストアイテム要素に変換する |
ホームページ作成ＴＯＰ > レイアウト > マウスの形状を変更する > このページのＴＯＰ ▲
