見出しレベル1

見出しレベル2

見出しレベル3

見出しは一般に本文よりも大きく目立つフォントで表示されるが、フォントサイズの制御のために見出し要素を用いるべきではない。本文中でフォントサイズを変えたい場合はスタイルシートを使うのが、内容と見栄えの制御を分ける考え方に沿ったやり方である。

段落

これは第 1 段落である。多くの UA (ウェブブラウザ) では段落が変わると改行される。

こちらは第 2 段落である。 段落の中の改行は無視される。

こちらは第 3 段落である。
段落の中で改行したい場合は<br>タグを用いる。

リンク

会津若松市のウェブサイトへのリンク
このコンテンツにCSSを適用した例

画像

アインシュタインの写真

箇条書き

順序なしリスト (unordered list: ul)

順序付きリスト (ordered list: ol)

  1. 牛肉
  2. たまねぎ

説明(定義)リスト (description/definition list: dl)

牛肉
高いが美味しい
たまねぎ
切ると涙が出る

チーム 引分 ゲーム差
中日 79 50 5 M7
阪神 79 56 4 3

tableによる表組みをレイアウト目的に使用することは最新の規格では認められていない。

表の枠線・罫線もCSSを使わないと描画されない。以前存在していた表の枠線の太さを定義するborder属性は廃止されている。

整形済み要素

整形済みの要素である.
  改行や空白などが,
    入力したとおりに表示される.
  

要素のグループ化・属性指定・CSSによる表示制御

コンテンツの特定の領域に属性を指定し、その領域に特定のスタイルを適用することができる。

id属性の利用例

以下は、divタグを用いて見出しと本文をまとめたブロック全体にmainとsubという名称のid属性を指定している。また、ブロックレベル要素が縦横に縦横に広がりを持つ要素であることも示されている。

id属性をmainとしたブロック

一つのhtml文書の中では、ある名前のid属性は一つの要素にしか指定できない。

id属性をsubとしたブロック

一つのhtml文書の中では、ある名前のid属性は一つの要素にしか指定できない。

class属性の利用例

一つのhtml文書の中では、同じ名前のclass属性を複数の要素に指定できる。以下は、pre要素にcodeという名称のclass属性を指定し、さらに次の段落中の文章の一部にspanタグを用いて同じくcodeという名称のclass属性を指定している。

std1dc1:~ s13xxxxx[51]$ ls
Desktop        Documents      Downloads
Library        Mail           Movies
Music          News           Pictures
Public         toSSB.pdf
std1dc1:~ s13xxxxx[52]$ 

>ターミナルで打ち込む命令をコマンドと呼びます。 ls コマンド (list) はその場にあるファイルやフォルダ(ディレクトリ)の一覧を表示するコマンドです。 ls -a のようなオプションをつけることもできます。

ブロックレベル要素とインライン要素

ここではブロックレベル要素とインライン要素の違いを示すために、長い文字列をインライン要素として定義して、CSSで文字色と背景色のスタイルを適用した上で、文字列全体をブロックレベル要素として定義し、CSSでブロック全体に枠線のスタイルを適用している。スタイルの適用結果を見ることで、ブロックレベル要素が縦横に縦横に広がりを持つ要素であり、インライン要素は横のみに広がりを持つことがわかる。なお、このhtml文書ではブロックレベル要素とid属性の指定、インライン要素とclass属性の指定を組み合わせているが、この組み合わせは固定されているわけではない。ブロックレベル要素にclass属性を指定することもできるし、インライン要素にid属性を指定することもできる。

作者の名前 2024/5/1更新; メール