子どもの水辺サポートセンターからのお知らせ

子どもの水辺サポートセンター-HTML＆CSSサンプル

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

日時+アイコン

▼アイコンなしの場合

2021/00/00

2021/00/00

2021/00/00

2021/00/00

リストUL

• リスト1
  • リスト１-１
  • リスト１-２
  • リスト１-３
• リスト２
• リスト３
• リスト内リンク１
• リスト内リンク２
• リスト４
  1. リスト４-１
  2. リスト４-２
  3. リスト４-３

リストOL

1. リスト1
   1. リスト１-１
   2. リスト１-２
   3. リスト１-３
2. リスト２
3. リスト３
4. リスト内リンク１
5. リスト内リンク２
6. リスト４
   • リスト４-１
   • リスト４-２
   • リスト４-３

「※」マークの注釈

本文文字列の中に注釈を入れる場合は「＜span class=”annotationMark”＞※＜/span＞」と入れると、※マークが小文字の赤文字になります。
また、本文の下に注釈本文を「＜span class=”annotationText”＞ 注釈本文＜/span＞」として入れると、その部分が小文字のグレー文字になります。

このクラスは以下のように使用します。

---

本文のテキスト※1。本文のテキスト本文のテキスト本文のテキスト本文のテキスト本文のテキスト。
本文のテキスト本文のテキスト本文のテキスト本文のテキスト本文のテキスト本文のテキスト※2。
本文のテキスト本文のテキスト本文のテキスト本文のテキスト本文のテキスト。

※１注釈のテキスト。
※2 注釈のテキスト。

回り込み

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト

リンク

PDFリンク。拡張子が.pdfのファイルをリンクしたときにアイコンが自動的に表示されます。

PDFのアイコンを表示させたくない場合は、class=”noIcon”を付与してください。

• ワードアイコン。拡張子が.docのファイルをリンクしたときに表示されます。
• ワードアイコン。拡張子が.docxのファイルをリンクしたときに表示されます。
• エクセルアイコン。拡張子が.xlsのファイルをリンクしたときに表示されます。
• エクセルアイコン。拡張子が.xlsxのファイルをリンクしたときに表示されます。

一覧