ウェブページの外観を整える css: 基本文法など

UB3/informatics/html/css_class

このページの最終更新日: 2022/07/26

  1. 概要:CSS とは
  2. クラスの設定

広告

概要: css とは

ウェブサイトの内容は html で記述されているが、背景色、フォントなどのレイアウトに関わる情報は通常 1 つのファイルにまとめられており、必要に応じて各 html ページからそれを参照するという形がとられる。この情報を記述する方式を CSS という。

このページでは、CSS を用いたクラスの設定についてまとめる。CSS の他の内容については、CSS のメインページ を参照のこと。

クラスの設定

たとえば箇条書きは ul タグや ol タグ を使って設定するが、シンボルの種類、アイテム間の間隔など、いくつかのパターンが欲しい場合がある。

このような場合には、ul や ol などのタグに対して クラス を設定する。

箇条書きの基本的な書き方は以下の通り。

<ul>
    <li>ここに 1 個目の内容</li>
    <li>ここに 2 個目の内容</li>
    <li>ここに 3 個目の内容</li>
</ul>


たとえば bottom-margin を広くした bigmargin というパターンを作りたい場合には、まず css を以下のように設定する。

ul.bigmargin
padding-bottom: 20px;

ul.bigmargin の行では、ulに対するクラスであることを指定している。

  • 親になるタグを作らずに、ドットから始めて .aaa のように記述すると、複数のタグで参照できるクラスを作れる。つまり <p class="aaa"> でも <ul class="aaa"> でも使えるようになる。
  • これに対して、たとえば p だけでクラスを設定したいときは、css で p に続ける形で p.aaa と指定する。やはり <p class="aaa"> で参照できる。

さらに html ファイルでの記述を次のようにする。

<ul class="bigmargin">
    <li>ここに 1 個目の内容</li>
    <li>ここに 2 個目の内容</li>
    <li>ここに 3 個目の内容</li>
</ul>

これで、bigmargin という ul タグのクラスを指定できたことになる。


広告

References

コメント欄

各ページのコメント欄を復活させました。スパム対策のため、以下の禁止ワードが含まれるコメントは表示されないように設定しています。レイアウトなどは引き続き改善していきます。「管理人への質問」「フォーラム」へのバナーも引き続きご利用下さい。

禁止ワード: http, the, м (ロシア語のフォントです)


このページにコメント

Name:


Comment:



これまでに投稿されたコメント

Date Name Comment