リストのスタイル

リストのスタイルを紹介します。

list-style-typeプロパティ

リストマークの種類をキーワードで指定します。ULタグ用の記号とOLタグ用の番号がありますが、いずれにも使用することができます。

disc(ULのデフォルト)
黒丸
circle
白丸
square
黒四角
none
リストマークなし
decimal(OLのデフォルト)
数字
upper-alpha
アルファベット大文字
lower-alpha
アルファベット小文字
upper-roman
ローマ数字大文字
lower-roman
ローマ数字小文字

list-style-imageプロパティ

リストマークを画像にします。構文は、「url(画像のパス)」となります。

list-style-positionプロパティ

リストマークの表示位置を指定します。

outside(デフォルト)
リストマークをボックスの外側に表示します。文字列の1行目と2行目以降がそろいます。
inside
リストマークをボックスの内側に表示します。リストマークと文字列の2行目以降がそろいます。

余白のスタイル

余白のスタイルを紹介します。枠線(ボーダー)の外側にある余白がマージン、内側にある余白がパディングといいます。

marginプロパティ

他の要素との間隔、つまり外側の余白を指定します。要素が上下に並んでいる場合、大きいマージンが優先されます。
また、上下左右個別に指定する場合は、「margin-top」「margin-left」「margin-right」「margin-bottom」プロパティを使用します。

paddingプロパティ

枠線と内容との間隔、つまり内側の余白を指定します。
また、上下左右個別に指定する場合は、「padding-top」「padding-left」「padding-right」「padding-bottom」プロパティを使用します。

上下左右個別に指定する場合

設定する値の数により、以下のようになります。

値が1つ
上下左右同じ値となります。
値が2つ
上下 左右
値が3つ
上 左右 下
値が4つ
上 右 下 左

枠線のスタイル

枠線(ボーダー)のスタイルを紹介します。

border-styleプロパティ

枠線の種類を指定します。枠線の種類は以下のとおりです。

solid
実線
double
二重線
groove
溝線
ridge
稜線
inset
領域がくぼんで見える
outset
領域が浮き出て見える
none(デフォルト)
枠線なし
hidden
枠線を表示しない(太さは適用される)
dashed
破線
dotted
点線

また、上下左右個別に指定する場合は、「border-top-style」「border-left-style」「border-right-style」「border-bottom-style」プロパティを使用します。

border-widthプロパティ

枠線の太さを指定します。数値+単位、またはキーワードで指定されます。

thin
細線
medium
通常の太さの線
thick
太線

また、上下左右個別に指定する場合は、「border-top-width」「border-left-width」「border-right-width」「border-bottom-width」プロパティを使用します。

border-colorプロパティ

枠線の色を指定します。色はカラーネーム、カラーコード(16進数)、カラーコード(10進数)で指定します。
また、上下左右個別に指定する場合は、「border-top-color」「border-left-color」「border-right-color」「border-bottom-color」プロパティを使用します。

borderプロパティ

枠線のスタイル(線種、太さ、色)を半角スペースで区切り、まとめて指定します。
また、上下左右個別に指定する場合は、「border-top」「border-left」「border-right」「border-bottom」プロパティを使用します。

背景のスタイル

背景のスタイルを紹介します。

background-colorプロパティ

背景色を指定します。色はカラーネーム、カラーコード(16進数)、カラーコード(10進数)で指定します。

background-imageプロパティ

背景画像を指定します。構文は、「url(画像のパス)」となります。

background-repeatプロパティ

背景画像の繰り返し方法を指定します。

repeat(デフォルト)
上下・左右に繰り返します。
repeat-x
左右にのみ繰り返します。
repeat-y
上下にのみ繰り返します。
no-repeat
繰り返さず1つのみ表示します。

background-positionプロパティ

背景画像の位置を指定します。構文は、「横方向 縦方向」となります。
位置は、ピクセル(px)やパーセント(%)の数値、またはleft/center/right(横方向)、top/center/bottom(縦方向)で指定します。

background-attachmentプロパティ

背景画像のスクロール方法を指定します。

scroll(デフォルト)
ページのスクロールにあわせてスクロールします。
fixed
ページをスクロールしても、背景画像は固定されたままとなります。

文字色のスタイル

文字色のスタイルを紹介します。

colorプロパティ

文字色を指定します。色の指定はカラーネーム、カラーコード(16進数、10進数)があります。

色の指定

カラーネームによる指定
■ red, ■ blue など、基本的な色は英語で簡単に指定できます。
カラーコード(16進数)
■ #006633 など、「#」+「赤の値2桁」+「緑の値2桁」+「青の値2桁」で指定します。ちなみに16進数とは「0123456789ABCDEF」で0が最小、Fが最大となります。
カラーコード(10進数)
■ rgb(0,102,51) など、「rgb()」の()内に、「赤の値」+「緑の値」+「青の値」で指定します。10進数の範囲は0~255で、これは16進数の00~FFに該当します。

文字色のサンプル

Webブラウザで表示すると、以下のようになります。
sample19

スタイルシート(CSS)の構文

スタイルシート(CSS)の構文は、以下のとおりです。

【構文】 セレクタ{プロパティ:値;}

「セレクタ」はスタイルを適用する対象、「プロパティ」は設定項目、「値」は設定値を表します。「プロパティ:値;」は複数記述できますが、セミコロン(;)を忘れると定義が無視されてしまうので注意しましょう。

まずはおもなセレクタの種類から紹介します。

おもなセレクタの種類

*
全てのタグに適用(ユニバーサルセレクタ)
タグ名
同名のタグに適用(タイプセレクタ)
#id名
同名のid属性が付いた要素に適用(IDセレクタ)
.class名
同名のclass属性が付いた要素に適用(クラスセレクタ)
要素[属性]
指定された属性をもつ要素に適用
要素[属性=”値”]
指定された属性の値が同じ要素に適用
要素:link
要素が未訪問リンクの場合適用
要素:visited
要素が訪問済リンクの場合適用
要素:hover
要素にマウスポインタがロールオーバーしている場合適用
要素:active
要素がクリック中の場合適用
要素:focus
要素がフォーカス中の場合適用
要素:nth-child(n)
子要素のうちn番目に適用
要素:first-child
子要素のうち先頭に適用
要素:last-child
子要素のうち最後に適用
要素:nth-of-type(n)
要素のうちn番目に適用
要素:nth-last-of-type(n)
要素のうち後ろからn番目に適用
要素:first-of-type
要素のうち最初のもの
要素:last-of-type
要素のうち最後のもの
要素A 要素B
要素A内の要素B(子孫セレクタ)
要素A,要素B
要素Aと要素B(セレクタのグループ化)

また、スタイルシート(CSS)ファイル内に別のスタイルシートファイルを読み込むこともできます。

【構文】 @import url(CSSファイルのパス);

その他テキストのタグ

テキスト(文字列)に適用する、さまざまなタグを紹介します。

EMタグ

強調を定義します。デフォルトでは斜体で表示されます。

STRONGタグ

強い重要性を定義します。デフォルトでは太字で表示されます。

SMALLタグ

注釈や細目を定義します。デフォルトではひとまわり小さい文字サイズで表示されます。

TIMEタグ

日付や時刻を定義します。datetime属性では標準フォーマットで日付時刻を定義します。

SUPタグ

上付き文字を定義します。

SUBタグ

下付き文字を定義します。

その他テキストのタグのサンプル

Webブラウザで表示すると、以下のようになります。
sample18

フォームのタグ

入力フォームを作成するタグとその属性を紹介します。

FORMタグ

入力フォーム全体を定義します。action属性でフォームの送信先を指定します。FORMタグ内に送信したい項目すべてと、送信ボタンを定義します。すると1つのボタンでフォーム内容がすべて送信されます。

action属性

フォームの送信先、つまり送信データを処理するプログラムのパスを指定します。

method属性

フォームの送信方式を指定します。GETとPOSTがあります。どちらにするかはプログラマに確認しましょう。

INPUTタグ

テキストフィールド、ラジオボタン、チェックボックス、送信ボタンなどさまざまなフォームコントロールを定義します。種類はtype属性で設定します。

type属性

フォームコントロールの種類を指定します。

type=”text”
1行のテキストフィールドを作成します。
type=”email”
メールアドレス入力用テキストフィールドを作成します。スマートフォンではメールアドレス入力用のキーボードになります。
type=”tel”
電話番号入力用テキストフィールドを作成します。スマートフォンでは電話番号入力用のキーボードになります。
type=”password”
パスワード入力用テキストフィールドを作成します。入力された値が伏字となります。
type=”radio”
ラジオボタンを作成します。name属性が同じラジオボタンはグループとなり、グループ内では1つしか選択ができなくなります。checked属性を指定すると初期値がオンとなります。
type=”checkbox”
チェックボックスを作成します。チェックボックスでは複数の項目を選択することが許されています。checked属性を指定すると初期値がオンとなります。
type=”submit”
送信ボタンを作成します。ボタンのキャプションはvalue属性で指定します。
type=”image”
画像を使用した送信ボタンを作成します。src属性で画像のパスを指定します。
type=”reset”
リセットボタンを作成します。ボタンを押すと各コントロールがリセットされ、初期値に戻ります。
type=”hidden”
隠し項目を作成します。画面上には表示されず、送信日時などプログラムで値を設定し、送信ボタンで他の項目と一緒に送信します。

LABELタグ

フォームコントロールと項目名をグループ化します。コントロールと項目名をLABELタグでくくる方法と、コントロールのid名を、LABELタグのfor属性に設定する方法があります。

フォームのサンプル

Webブラウザで表示すると、以下のようになります。
sample16

その他のフォームコントロール

TEXTAREAタグ

複数行のテキストフィールドを作成します。終了タグが必須なので忘れないようにしましょう。タグ内に文字列を指定すると、初期値となります。

SELECTタグ

プルダウンリストを作成します。複数のリスト項目の中から1つだけ選択する形式と、複数行を同時に表示し複数項目を選択する形式があります。

OPTIONタグ

プルダウンリストのリスト項目を作成します。selected属性を指定すると、初期値となります。

OPTGROUPタグ

プルダウンリストのリスト項目をグループ化します。label属性でグループ名を指定します。

その他のフォームコントロールサンプル

Webブラウザで表示すると、以下のようになります。
sample17
sample17-1

テーブル(表)のタグ

HTMLで表を作成するためのタグを紹介します。

TABLEタグ

表全体を定義します。デフォルトでは枠線が表示されませんが、border属性を指定すると表示することができます。ただし、レイアウトの確認を済ませたらborder属性を削除し、スタイルシートで枠線を定義してください。

TRタグ

表の行を定義します。まずは1行分だけ作成してブラウザで確認し、問題なければ必要な行数分コピーをして、セル内を変更するとよいでしょう。

TDタグ

表の通常セルを定義します。TRタグ内に必要な列数分だけTDタグを定義します。通常セルでは左右左揃え、上下中央揃えがデフォルトです。

THタグ

通常セルの代わりに使用し、見出しセルを定義します。見出しセルでは左右中央揃え、太字がデフォルトとなります。

CAPTIONタグ

TABLEタグとTRタグの間に記述し、表のタイトルを定義します。表の上に表の幅に対して中央揃えで表示されます。

表のサンプル

Webブラウザで表示すると、以下のようになります。
sample14

セルの結合

複数のセルを結合して1つにする方法を説明します。

cospan属性

colspan=”横に結合するセル数” と指定し、複数列にまたがるセルを作成します。colspan属性でセルを結合すると、同じ行の右にセルがはみ出るので、不要なセルは削除します。

rowspan属性

rowspan=”縦に結合するセル数” と指定し、複数行にまたがるセルを作成します。rowspan属性でセルを結合すると、下の行の右にセルがはみ出るので、不要なセルは削除します。

セルの結合サンプル

Webブラウザで見ると、以下のようになります。
sample15

リストのタグ

HTMLのリストは3種類あります。

記号付きリスト

番号なしリストとも呼ばれます。デフォルトではリスト項目の先頭が黒丸となります。単純な箇条書きや、リストマークを非表示にしてナビゲーションなどに使用します。

番号付きリスト

デフォルトではリスト項目の先頭が数字となります。手順やランキングなどに使用します。

定義型リスト

見出し語とその説明で1組の項目となるリストです。項目の説明や、更新履歴の日付と更新内容などに使用されます。

ULタグ

記号付きリストを作成します。リスト全体をULタグでくくります。

OLタグ

番号付きリストを作成します。リスト全体をOLタグでくくります。

LIタグ

記号付き・番号付きリストのリスト項目を作成します。1つの項目をLIタグでくくります。

記号付きリスト・番号付きリストのサンプル

Webブラウザで表示すると、以下のようになります。
sample12

DLタグ

定義型リストを作成します。リスト全体をDLタグでくくります。

DTタグ

定義型リストの見出し語を作成します。

DDタグ

定義型リストの説明文を作成します。

定義型リストのサンプル

Webブラウザで表示すると、以下のようになります。
sample13