本文へスキップします。

カテゴリタイトル

★HTML&CSSサンプル:研修所

H1

★HTML&CSSサンプル:研修所

コンテンツ

見出し:H1

見出し:H2

見出し:H3

見出し:H4

見出し:H5
見出し:H6

テキスト装飾

「※」マーク注釈

[txtAsterisk]

[txtAsterisk]クラスを付与することで、「※」マークを自動で付与することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

また、このクラスはリストタグにも付与することができます。

  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

またのようにすると、上付きテキストにすることができます。

文字色

[colorRed]

[colorRed]を付与することで、テキストを赤色にすることができます。

文字サイズ

[txtSmall]

[txtSmall]クラスを付与することで、文字サイズを小さくすることができます。

[txtLarge]

[txtLarge]クラスを付与することで、文字サイズを大きくすることができます。

テキストの右・左・中央寄せ

[alignRight]

[alignRight]クラスを付与することでテキストが右寄せになります。

[alignCenter]

[alignCenter]クラスを付与することでテキストが中央寄せになります。

[alignLeft]

[alignLeft]クラスを付与することでテキストが左寄せになります。

レイアウト装飾

各コンテンツを左右に並べて配置したり、複数コンテンツを横に並べて配置することができます。

[layoutItem col2]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 「とにかく誰にでも優しい操作感」と「お客様のご要望に対応できる圧倒的な機能性」を追求して開発したinfoCMS。 お客様にとって、理想的なWEBサイト運営を実現します

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 「とにかく誰にでも優しい操作感」と「お客様のご要望に対応できる圧倒的な機能性」を追求して開発したinfoCMS。 お客様にとって、理想的なWEBサイト運営を実現します

[layoutItem col3]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 「とにかく誰にでも優しい操作感」と「お客様のご要望に対応できる圧倒的な機能性」を追求して開発したinfoCMS。 お客様にとって、理想的なWEBサイト運営を実現します

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 「とにかく誰にでも優しい操作感」と「お客様のご要望に対応できる圧倒的な機能性」を追求して開発したinfoCMS。 お客様にとって、理想的なWEBサイト運営を実現します

[layoutItem col4]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 「とにかく誰にでも優しい操作感」と「お客様のご要望に対応できる圧倒的な機能性」を追求して開発したinfoCMS。 お客様にとって、理想的なWEBサイト運営を実現します

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 「とにかく誰にでも優しい操作感」と「お客様のご要望に対応できる圧倒的な機能性」を追求して開発したinfoCMS。 お客様にとって、理想的なWEBサイト運営を実現します

[layoutItem firstitemlefted]

画像サムネイルを左側に表示したい時などに使用します。
このクラス指定では、画像の下にテキストが回り込みません。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

[layoutItem firstitemrighted]

画像サムネイルを右側に表示したい時などに使用します。
このクラス指定では、画像の下にテキストが回り込みません。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

[layoutItem firstitemlefted wraparound]

画像サムネイルを右側に表示したい時などに使用します。
このクラス指定では、画像の下にテキストが回り込みます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

[layoutItem firstitemrighted wraparound]

画像サムネイルを右側に表示したい時などに使用します。
このクラス指定では、画像の下にテキストが回り込みます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。CMSとはコンテンツマネジメントシステム(Contents Management System)の略で、WEBサイトのコンテンツ(テキストや画像)を手軽に編集するソフトウェアです。広義ではデジタルコンテンツの管理を行なうシステムの総称です。 ブログやWiKiなどのツールもCMSと捉えることが出来ますが、そのツールの機能や性質上、商用サイトとして使うにはやや無理があります。 infoCMSは、従来のHTMLベースで作成されたサイトと同様の構成を可能にし、手軽にコンテンツを管理することができます。

リンク装飾

各ファイル形式に合わせて自動でアイコンが付与されます。
アイコンを出したくない場合には、クラスの指定でアイコンを外すことができます。

また、外部リンクの場合はクラスの指定でアイコンを付与することができます。

ボタンリンク装飾

[linkItem]

aタグに[linkItem]クラスを付与することで、以下のようなボタンデザインになります。

リンクボタン

[linkItem large]

aタグに[linkItem large]クラスを付与することで、以下のようなボタンデザインになります。

リンクボタン

[linkItem small]

aタグに[linkItem small]クラスを付与することで、以下のようなボタンデザインになります。

リンクボタン

[linkItem arrowed]

aタグに[linkItem arrowed]クラスを付与することで、以下のようなボタンデザインになります。

リンクボタン

[linkItem buttoned]

タグに[linkItem arrowed]クラスを付与することで、以下のようなボタンデザインになります。

リンクボタン

また、上記各ボタンはレイアウト装飾と合わせて使うことができます。

テーブル装飾

[basicTable]

tableタグに[basicTable]クラスを付与することで、以下のようなテーブルデザインになります。

tableタグに[basicTable]クラスが付いているものはスマホでは、th tdが上下になります。

項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容

[verticalTable]

tableタグに[verticalTable]クラスを付与することで、以下のようなテーブルデザインになります。

  th:テーブルタイトル th:テーブルタイトル th:テーブルタイトル
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容

【スマホのみ】[<div class="scrollTable">]

横長のtableの場合、tableタグの外側に<div class="scrollTable">で囲むとスクロールが発生します。但し、tableの横幅を指定してください。

  th:テーブルタイトル th:テーブルタイトル th:テーブルタイトル
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容

【スマホのみ】[noblockTable]

th tdを上下にしないでPCでの表示をそのまま表示したい場合。

項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容
項目名 td:テーブル内容 td:テーブル内容 td:テーブル内容

アンカーリンク

[anchorList]

col2,col3,col4,col5まであります。

【全:センター】アドレス

自動車安全運転センター 安全運転中央研修所

〒312-0005
茨城県ひたちなか市新光町605番地16
電話:029-265-9555(代表)

研修に関するお問い合わせは
電話:029-265-9560

附属交通公園の研修については
電話:029-265-9550

【全:研修所】フッターリンク

【全:研修所】コピーライト