<div class="center"> <h2 class="title"><span>フォントサンプル</span></h2> </div>

フォントサンプル

noto-sans … HeadLine 1234567890 日本語のサンプル300+日本語のサンプル500+日本語のサンプル900<p class="noto-sans font-l">〇〇</p>

mp1 … HeadLine 1234567890 日本語のサンプル300<p class="shippori-m font-l">〇〇</p>

zen-kaku … HeadLine 1234567890 日本語のサンプル400<p class="zen-kaku font-l">〇〇</p>

zen-maru … HeadLine 1234567890 日本語のサンプル400<p class="zen-maru font-l">〇〇</p>

zen-o-m … HeadLine 1234567890 日本語のサンプル400+日本語のサンプル700+日本語のサンプル900<p class="zen-o-m font-l">〇〇</p>

テキスト大きさ・色・太さ

「タイポグラフィー」は重要な要素です。<p class="font-ssss">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-sss">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-ss">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-s">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-l">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-ll">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-lll">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-llll">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-r">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-b">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-g">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-y">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-p">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-o">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-gl">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-bk">〇〇</p>

Thin「タイポグラフィー」は重要な要素です。<p class="w200">〇〇</p>

Light「タイポグラフィー」は重要な要素です。<p class="w300">〇〇</p>

Regular「タイポグラフィー」は重要な要素です。<p class="w400">〇〇</p>

Medium「タイポグラフィー」は重要な要素です。<p class="w500">〇〇</p>

Bold「タイポグラフィー」は重要な要素です。<p class="w600">〇〇</p>

Extra Bold「タイポグラフィー」は重要な要素です。<p class="w700">〇〇</p>

Black「タイポグラフィー」は重要な要素です。<p class="w900">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-dott1">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-dott2">〇〇</p>

「タイポグラフィー」は重要な要素です。<p class="font-ll font-g">〇〇</p>

テキスト行間・マージン

デザインの美しさには、フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h150">〇〇</p>

デザインの美しさには、フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h160">〇〇</p>

デザインの美しさには、フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h170">〇〇</p>

デザインの美しさには、フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h180">〇〇</p>

デザインの美しさには、フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h190">〇〇</p>

デザインの美しさには、フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h200">〇〇</p>

タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。

タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml10">〇〇</p>

タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml20">〇〇</p>

タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml30">〇〇</p>

タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml40">〇〇</p>

タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml50">〇〇</p>

文字の間隔はページ全体のイメージを左右します。

文字の間隔はページ全体のイメージを左右します。<p class="font-ls05quot;>〇〇</p>

文字の間隔はページ全体のイメージを左右します。<p class="font-ls10">〇〇</p>

文字の間隔はページ全体のイメージを左右します。<p class="font-ls15">〇〇</p>

「タイポグラフィー」は重要な要素です。

文字上下のマージン。上（0・5・10・15）、下（0・5・10・15・20・30）

文字の間隔はページ全体のイメージを左右します。<p class="font-mt0 font-mb0">〇〇</p>

文字の間隔はページ全体のイメージを左右します。<p class="font-mt15 font-mb0">〇〇</p>

文字の間隔はページ全体のイメージを左右します。<p class="font-mb15">〇〇</p>

2行目以降を1文字下げる［text-indent］

※text-indentプロパティの便利な使い方。
文章の段落などの2行目以降を1文字下げて空白を挿入する方法です。
この文章では［text-indent］による装飾を施しています。
サンプルです。

当日は、プール、バーデ、内湯の利用ができます。

◇担当インストラクター：浜崎

当日は、プール、バーデ、内湯の利用ができます。

◇担当インストラクター：浜崎

各ページ内ヘッドライン参考

見出し２タイトル

見出し１

<p class="just">〇〇</p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。

見出し２

見出し３

見出し４

見出し５

見出し６

見出し３s

見出し４s

見出し５s

見出し６s

↓横幅ぴったりの文章 img_maru18

ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。
ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす。革新的な技術で世の中を動かす。

img_maru18_w

img_maru10

ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。

img_maru10_w

ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。

写真の配置とクラス指定

龍ヶ窪の池

写真の挿入時、キャプション（説明）に文字を入れるとこのような体裁になります。
「タイポグラフィー」は、優れたデザイン、ブランディング、読みやすさ、優れたユーザー体験にとって重要な要素です。
Webフォントを使うことで、これらすべての品質をさらに高めることができます。
Webフォントの最適化は、サイトのパフォーマンス対策では重要な要素です。
一部のフォントによってテキストの表示が妨げられることがありますが、Webフォントを使用しているからと言って必ずしも表示が遅れるというわけではなく、むしろ、最適化されたフォントを使用して、それらのフォントの読み込み方を適切に決めることで、逆に全体のページサイズが減少してページの表示時間が向上します。

写真のクラスに「border」を追加

<h2 class="pullquote-left font-g">◯◯◯</h2>
写真の右寄せ/左寄せなどのclass指定部分に半角で仕切り「border」を追加すると写真の周りに縁ができます。
「タイポグラフィー」は、優れたデザイン、ブランディング、読みやすさ、優れたユーザー体験にとって重要な要素です。
Webフォントを使うことで、これらすべての品質をさらに高めることができます。
Webフォントの最適化は、サイトのパフォーマンス対策では重要な要素です。
一部のフォントによってテキストの表示が妨げられることがありますが、Webフォントを使用しているからと言って必ずしも表示が遅れるというわけではなく、むしろ、最適化されたフォントを使用して、それらのフォントの読み込み方を適切に決めることで、逆に全体のページサイズが減少してページの表示時間が向上します。「タイポグラフィー」は、優れたデザイン、ブランディング、読みやすさ、優れたユーザー体験にとって重要な要素です。Webフォントを使うことで、これらすべての品質をさらに高めることができます。むしろ、最適化されたフォントを使用して、それらのフォントの読み込み方を適切に決めることで、逆に全体のページサイズが減少してページの表示時間が向上します。「タイポグラフィー」は、優れたデザイン、ブランディング、読みやすさ、優れたユーザー体験にとって重要な要素です。Webフォントを使うことで、これらすべての品質をさらに高めることができます。

サムネイル写真を使った標準

写真挿入時、サムネイルを選ぶとこのような体裁になります。クラスに「border」を追加すれば縁も入ります。

「タイポグラフィー」は、優れたデザイン、ブランディング、読みやすさ、優れたユーザー体験にとって重要な要素です。
Webフォントを使うことで、これらすべての品質をさらに高めることができます。Webフォントの最適化は、サイトのパフォーマンス対策では重要な要素です。一部のフォントによってテキストの表示が妨げられることがありますが、Webフォントを使用しているからと言って必ずしも表示が遅れるというわけではなく、むしろ、最適化されたフォントを使用して、それらのフォントの読み込み方を適切に決めることで、逆に全体のページサイズが減少してページの表示時間が向上します。「タイポグラフィー」は、優れたデザイン、ブランディング、読みやすさ、優れたユーザー体験にとって重要な要素です。Webフォントを使うことで、これらすべての品質をさらに高めることができます。むしろ、最適化されたフォントを使用して、それらのフォントの読み込み方を適切に決めることで、逆に全体のページサイズが減少してページの表示時間が向上します。「タイポグラフィー」は、優れたデザイン、ブランディング、読みやすさ、優れたユーザー体験にとって重要な要素です。Webフォントを使うことで、これらすべての品質をさらに高めることができます。

パディング・マージンの調整

写真を最上段に右・左配置にした場合、クラスに「mt0」を追加することでmargin-topを0にできます。

（.mt0 {margin-top: 0;}）同じように.mb0 {margin-bottom: 0;}.ml0 {margin-left: 0;}.mr0 {margin-right: 0;}も設定されています。またパディングも同じく.pt0 {padding-top: 0;}.pb0 {padding-bottom: 0;}.pl0 {padding-left: 0;}.pr0 {padding-right: 0;}。

Blockquote テスト

ホームページサンプル株式会社

ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。

ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。

革新的な技術で世の中を動かす。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす。ホームページサンプル株式会社

ホームページサンプル株式会社では最新技術と自然との調和を目指します。

テーブル

<table id="t-head">	t-head
About Test User	1	More
260	1	More
Archives	1	More
235	1	More

スタイル解除テーブル	<table id="normal">
About Test User	1	More
260	1	More
Archives	1	More
235	1	More

左揃えテーブル-	<table id="p4">
About Test User	1	More
260	1	More
Archives	1	More
235	1	More

	背景罫線なし		<table id="noline">
1942年	(昭和17年)	5月	南魚沼郡塩沢町塩沢1083-5にて初代　辨太郎が創業屋号を井口表具店とする掛軸・襖・障子・屏風などの表装を手掛ける経師を生業とする
1971年	(昭和46年)	9月	襖・障子などを扱う作業所新築
1973年	(昭和48年)	8月	有限会社　井口表具店へ法人改組井口隆一　代表取締役就任

レスポンシブtable体験カレンダー等

体験名	主な内容	定員	会場	時間	予約	料金	備考
MYジャム	ベリーを使ってオリジナルのジャムを作ります。	5名	10:00	1,000円	講師宅	要
天然酵母パン作り	天然の酵母菌を使った酵母パンを作ります。	5名	10:00	大800円小500円	講師宅	要
クリアキャンドル	グラスの中に色砂やガラス細工、小物を入れ、火もつきます。	随時	10:00〜16:00	1,200円	2Fロビー	なし	先着順
フラワーポット&ミラー	選べるベースにデコレーション	随時	10:00〜16:00	500円+材料費	2Fロビー	なし	先着順

thの見出し	thの見出し2
About Test User	1	More
260	1	More
Archives	1	More
235	1	More

定義リスト

Definition List

Definition List Title: This is a definition list division.
Definition: An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.
Gallery: A feature introduced with WordPress 2.5, that is specifically an exposition of images attached to a post. In that same vein, an upload is “attached to a post" when you upload it while editing a post.
Gravatar: A globally recognized avatar (a graphic image or picture that represents a user). A gravatar is associated with an email address, and is maintained by the Gravatar.com service. Using this service, a blog owner can configure their blog so that a user’s gravatar is displayed along with their comments.

定義リストタイトル(dt): これは定義リスト(dd)です。その1
定義リストその1の２行目になり改行するとこのようになります。
こちらは３行目になります。; これは定義リスト(dd)です。その2; これは定義リスト(dd)です。その3
ライブでやろう(dt): ビル・オライリーが説明してもらいましょう。(dd)

<dl>
<dt>タイトル</dt>
<dd>定義リストの本文</dd>
<dt>タイトル</dt>
<dd>定義リストの本文</dd>
</dl>

定義リストタイトル(dt): これは定義リスト(dd)です。その1
定義リストその1の２行目になり改行するとこのようになります。
こちらは３行目になります。; これは定義リスト(dd)です。その2; これは定義リスト(dd)です。その3
ライブでやろう(dt): ビル・オライリーが説明してもらいましょう。(dd)

定義リストタイトル(dt): これは定義リスト(dd)です。その1
定義リストその1の２行目になり改行するとこのようになります。
こちらは３行目になります。; これは定義リスト(dd)です。その2; これは定義リスト(dd)です。その3
ライブでやろう(dt): ビル・オライリーが説明してもらいましょう。(dd)

定義リストタイトル(dt): これは定義リスト(dd)です。その1
定義リストその1の２行目になり改行するとこのようになります。
こちらは３行目になります。; これは定義リスト(dd)です。その2; これは定義リスト(dd)です。その3
ライブでやろう(dt): ビル・オライリーが説明してもらいましょう。(dd)

定義リストタイトル(dt): これは定義リスト(dd)です。その1
定義リストその1の２行目になり改行するとこのようになります。
こちらは３行目になります。; これは定義リスト(dd)です。その2; これは定義リスト(dd)です。その3
ライブでやろう(dt): ビル・オライリーが説明してもらいましょう。(dd)

定義リストタイトル(dt): これは定義リスト(dd)です。その1
定義リストその1の２行目になり改行するとこのようになります。
こちらは３行目になります。; これは定義リスト(dd)です。その2; これは定義リスト(dd)です。その3
ライブでやろう: ビル・オライリーが説明してもらいましょう。

定義リストタイトル(dt): これは定義リスト(dd)です。その1
定義リストその1の２行目になり改行するとこのようになります。
こちらは３行目になります。; これは定義リスト(dd)です。その2; これは定義リスト(dd)です。その3
ライブでやろう: ビル・オライリーが説明してもらいましょう。

定義リストタイトル(dt): これは定義リスト(dd)です。その1
定義リストその1の２行目になり改行するとこのようになります。
こちらは３行目になります。; これは定義リスト(dd)です。その2; これは定義リスト(dd)です。その3
ライブでやろう: ビル・オライリーが説明してもらいましょう。

社名: これは定義リスト(dd)です。その1
2文字は<dt class="l2">、3文字は<dt class="l3">、4文字は<dt class="l4">、5文字は<dt class="l5">
こちらは2行目になります。
本社所在地: ◯◯◯◯◯◯◯◯
代表者: ◯◯◯◯◯◯◯◯
創業: ◯◯◯◯◯◯◯◯
法人設立: ◯◯◯◯◯◯◯◯; ◯◯◯◯◯◯◯◯; ◯◯◯◯◯◯◯◯
資本金: ◯◯◯◯◯◯◯◯
営業許可番号: ◯◯◯◯◯◯◯◯

日時

これは定義リスト(dd)です。その1
2文字は<dt class="l2">、3文字は<dt class="l3">、4文字は<dt class="l4">、5文字は<dt class="l5">
こちらは2行目になります。

ご注意

岩場や急な坂、かなり長い距離を歩きますので履きなれた靴、汚れても良い格好でお越しください。飲み物は各自ご用意ください。途中自動販売機などはありません。

これは定義リスト(dd)です。その3

応募締切

2020年10月25日

子ども料金

これは定義リスト(dd)です。その2

詳細日程

〜08：55: 集合
9：00〜09：05: あいさつ、講師紹介
9：05〜10：00: 再審査において、再認定となったことを受けて、最初に講評いただく。
演題「ＳＤＧs （持続可能な開発(発展)の目標）17項目の何をどのように具現化していくか？」
10：00〜11：00: 質疑・意見交換

日程

9：00: なじょもん
9：30: ニュー・グリーンピア津南
〜リフトで移動〜
10：00: 第二リフト終点
〜かんじき・スノーシューで移動〜
10：20: 谷の展望台
〜かんじき・スノーシューで移動〜
11：30: 昼食・入浴・休憩（ニュー・グリーンピア津南）
13：00: 萌木の里
〜かんじき・スノーシューで移動〜
13：20: シシ穴
〜かんじき・スノーシューで移動〜
14：10: 萌木の里（休憩・館内見学）
15：00: なじょもん駐車場（諸連絡・解散）

リスト(ul li)

リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1

リスト(dl dd li)

リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1

非順序リスト（矢印リスト）

リストアイテム1
- リストアイテム1
  - リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
    リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
  - リストアイテム2
  - リストアイテム3
  - リストアイテム4
- リストアイテム2
- リストアイテム3
- リストアイテム4
リストアイテム4

非順序リスト（※）

リストアイテム1

リストアイテム1

リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム2
リストアイテム3
リストアイテム4

リストアイテム2
リストアイテム3
リストアイテム4

リストアイテム4

非順序リスト（※）

リストアイテム1

リストアイテム1

リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム2
リストアイテム3
リストアイテム4

リストアイテム2
リストアイテム3
リストアイテム4

リストアイテム4

非順序リスト（※）

リストアイテム1

リストアイテム1

リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム2
リストアイテム3
リストアイテム4

リストアイテム2
リストアイテム3
リストアイテム4

リストアイテム4

非順序リスト（※）

リストアイテム1

リストアイテム1

リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム2
リストアイテム3
リストアイテム4

リストアイテム2
リストアイテム3
リストアイテム4

リストアイテム4

順序リスト

リストアイテム1

リストアイテム1

リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム3

リストアイテム2
リストアイテム3
リストアイテム4

順序リスト(丸数字)

リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
リストアイテム3

サイドメニューリスト

画像の角丸

角丸5px　<img src="○○" alt="○○" width="○○" height="○○" class="img_maru" itemprop="image"/>

角丸10px　<img src="○○" alt="○○" width="○○" height="○○" class="img_maru10" itemprop="image"/>

角丸18px　<img src="○○" alt="○○" width="○○" height="○○" class="img_maru18" itemprop="image"/>

角丸18px　9px枠あり　<img src="○○" alt="○○" width="○○" height="○○" class="img_maru18_w" itemprop="image"/>

テキストの囲み

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

テキストの囲み　点線角丸10px　　<div class="box_maru10">テキスト</div>

テキストボタン

トップページはこちら
角丸ボタン10px　　<a href="URL" class="square_btn">

フォトギャラリー

(フォトギャラリーは、一行に複数枚入れると等倍自動縮小。何枚でも可。小さくなりすぎる場合は2行へ。）

冬の信濃川
外丸集落

雲海と田んぼ
上野集落

初日の出
上段集落

大地の芸術祭
美雪町

発電所
鹿渡集落

冬の早朝

落ち葉の紅葉

朝日と靄

ボタン

PUSH！

PUSH！ここをクリック！

フレックスボックス　その1

(フォトギャラリーは、一行に複数枚入れると等倍自動縮小。何枚でも可。小さくなりすぎる場合は2行へ。）

<div class="gallery">
<flbox>1つ目のBOX</li>
<flbox>2つ目のBOX</li>
<flbox>3つ目のBOX</li>
</div>

フレックスボックス　その2

<div class="flexbox2">
<div class="fb-item">□左側プレビュー 1/2□</div>　<div class="fb-item">□右側ソース 1/2□</div>
</div>

<div class="flexbox">
<div class="fb-item">□左側プレビュー 1/3□</div>　<div class="fb-item">□左側のソースを右に表示 → 1/3□</div>　<div class="fb-item">□右側ソース 1/3□</div>
</div>

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

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

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

<div class="flexbox">
<div class="fb-item1">□左側プレビュー 2/3□</div>　<div class="fb-item">□右側ソース1/3□</div>
</div>

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

（親要素）<div class="flexbox"> →  3 column（ 30% + 30% + 30% ）
（親要素）<div class="flexbox1"> →  2 column（ 60% + 30% ）
（親要素）<div class="flexbox2"> →  2 column（ 45% + 45% ）
（子要素）<div class="fb-item">（ 横幅AUTO ）

スタイルサンプル

フォントサンプル

テキスト大きさ・色・太さ

テキスト行間・マージン

文字上下のマージン。上（0・5・10・15）、下（0・5・10・15・20・30）

2行目以降を1文字下げる［text-indent］

見出し２ タイトル

見出し１

見出し２

見出し３

見出し４

見出し５

見出し６

見出し３s

見出し４s

見出し５s

見出し６s

↓横幅ぴったりの文章 img_maru18

img_maru18_w

img_maru10

img_maru10_w

写真の配置とクラス指定

写真のクラスに「border」を追加

サムネイル写真を使った標準

パディング・マージンの調整

Blockquote テスト

テーブル

レスポンシブtable体験カレンダー等

定義リスト

Definition List

リスト(ul li)

リスト(dl dd li)

非順序リスト（矢印リスト）

非順序リスト（※）

非順序リスト（※）

非順序リスト（※）

非順序リスト（※）

順序リスト

順序リスト(丸数字)

サイドメニューリスト

画像の角丸

テキストの囲み

テキストボタン

フォトギャラリー

ボタン

フレックスボックス その1

フレックスボックス その2

見出し２タイトル

フレックスボックス　その1

フレックスボックス　その2