ホームページ作成(レイアウト調整)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > レイアウト > インライン要素に変換する

インライン要素に変換する

要素をインライン要素に変換する方法を説明します。

今回は、リスト項目にdisplay:inline;を設定して、リストをインライン要素に変換する事を行ってみましょう。

sample
  • <項目1行目>
  • <項目2行目>
  • <項目3行目>

↓ 横並びのリストに変換 ↓

  • <項目1行目>
  • <項目2行目>
  • <項目3行目>
HTML 

スタイルシートを使用します。

ホームページ作成TOP > レイアウト > マウスの形状を変更する > このページのTOP ▲

スタイルシート display:inline;

インライン要素に変換するには、display:inline;を使用する事で可能になります。

今回のサンプルに関しては、TOP > リスト > リストを横に並べるにて説明してますので、確認して下さい。

display:設定;の他の設定として代表的なものが下記になります。

設定意味
display:none;非表示にする
display:block;ブロック要素に変換する
display:list-item;リストアイテム要素に変換する

ホームページ作成TOP > レイアウト > マウスの形状を変更する > このページのTOP ▲