おふとんの人 → ホームページ教室 → CSSコマンド簡単リファレンス

clearコマンド

clearコマンドは、簡単に言うと、floatコマンドの設定をキャンセルするためのコマンドです。ですので、floatコマンドと併用するので、35.floatコマンドとwidthコマンド（CSS） にて、詳しく説明しています。

list-style-typeコマンド

list-style-typeコマンドは、liタグで表示されるマーカーの種類を指定することができます。

● スタイルシートでの設定例

li {list-style-type: none;}

● タグに直接使った場合の例

<li style="list-style-type: none;">リスト</li>

ここで、list-style-typeコマンドの値は「none」ですが、この意味は、マーカーを表示しませんという意味です。では、このコマンドを入れなかった場合と、入れた場合の表示結果を比べたいと思います。

● list-style-type: none;を入れない場合の表示結果

  • リスト１
  • リスト２
  • リスト３

● 入れた場合の表示結果

  • リスト１
  • リスト２
  • リスト３

ここでは、よく使う「none」のみをご紹介しましたが、他にもマーカーの形を○にする「circle」、■にする「square」など多数ございますので、他の詳しいＷｅｂサイトを参照してください。

text-alignコマンド

text-alignコマンドは、文書の左揃え・中央揃え・右揃えを設定するコマンドで、それぞれ次のような値を入れます。

  • left（左揃え）
  • center（中央揃え）
  • right（右揃え）

● pタグの文書をセンターリングする例

<p style="text-align: center;">センターリングになっていますか？</p>

● 表示結果

センターリングになっていますか？

Ｗｅｂページ中のpタグ全体に対して、text-alignコマンドを設置したいときは、スタイルシートを使います。

● スタイルシートを使った設定例

p {text-align: center;}

pタグ以外にも、適用可能です。例えば、Ｗｅｂページ内のdivタグすべてに、コマンドを適用したい場合は、pの所をdivに変更します。

text-indentコマンド

text-indentコマンドは、pタグなどに設置することによって、インデントを設定できます。インデントとは、文書の最初の文字の所を、１文字分のスペースを空けることです。下の設定例では、emという単位を使っていますが、これは「M」の横幅を基準にしたサイズです。このように設定すると、pタグで文書を書いたときに、Mの大きさ１文字分のスペースが空きます。単位については、32.スタイルシートで使う単位をご覧ください。

● text-indentの使用例

p {text-indent: 1em;}

「おふとんの人」でも、これと同じ設定をしてあります。

では、text-indentを設定したものと、設定していないものの表示の差を見てみましょう。.5emでは、半文字分だけのスペースが、1emでは、１文字分だけのスペースが空いてから文書が始まっています。.5は、0.5と書いても同じです。

● text-indentの使用前・使用後

<p>使用前</p>

<p style="text-indent: .5em;">使用後0.5</p>

<p style="text-indent: 1em;">使用後1</p>

● 表示結果

使用前

使用後0.5

使用後1

なお、文書が長くなって、２行目にまたがるとき、２行目からはスペースは空きません。text-alignコマンドでも説明しましたが、すべてのpタグにtext-indentコマンドを設置したいときは、スタイルシートを使うと便利です。

A8広告

その他のコマンド

他に良く使われるコマンドは、次の通りです。これらのコマンドは、詳しく説明する必要があるので、別ページになっています。