株式会社妻有新聞社が新潟県十日町市、中魚沼郡津南町、長野県栄村で発行する地域紙。毎週土曜日発行。

サンプルページ

contents section

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

フォントサンプル

◇ デザインの美しさには、 フォント選びが最も重要です。font-family: '游明朝'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: '游ゴシック'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Noto Sans JP'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Potta One'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Yusei Magic'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Hachi Maru Pop'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Noto Serif JP'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'M PLUS Rounded 1c'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'M PLUS 1p'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Sawarabi Mincho'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Sawarabi Gothic'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Kosugi Maru'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Kosugi'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Reggae One'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'RocknRoll One'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Shippori Mincho'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Shippori Mincho B1'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'DotGothic16'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Stick'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Dela Gothic One'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Kiwi Maru'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'Train One'
◇ デザインの美しさには、 フォント選びが最も重要です。font-family: 'New Tegomin'

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="indent-1">〇〇</p>

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

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

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

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

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

見出し２ タイトル

見出し１

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

見出し２

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

見出し３

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

見出し４

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

見出し５

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

見出し６

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

見出し1s

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

見出し2s

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

見出し３s

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

見出し４s

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

見出し５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>

<div id="sentences0">〇〇</div>

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

<div id="sentences1">〇〇</div>

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

<div id="sentences2">〇〇</div>

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

<div id="table_t">〇〇</div>

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

<div id="sentences">〇〇</div>

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

<div id="syohin">〇〇</div>

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

<div id="setsumei">〇〇</div>

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

<div id="office">〇〇</div>

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

<div id="hd_co">〇〇</div>

日時
これは定義リスト(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
詳細日程
<div class="time-t">〇〇</div>

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

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

    非順序リスト（※）

    <div class="kome">〇〇</div>

    • リストアイテム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

    非順序リスト（※）

    <div class="kome-aka">〇〇</div>

    • リストアイテム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

    非順序リスト（※）

    <div class="daia">〇〇</div>

    • リストアイテム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

    非順序リスト（※）

    <div class="arrow">〇〇</div>

    • リストアイテム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
        2. リストアイテム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. リストアイテム3
      2. リストアイテム2
      3. リストアイテム3
      4. リストアイテム4

    順序リスト(丸数字)

    <div class="marusuji">〇〇</div>

    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. リストアイテム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. リストアイテム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行へ。）

    <div class="gallery">
    <li>1枚目写真</li>
    <li>2枚目写真</li>
    <li>3枚目写真</li>
    </div>

  • 冬の信濃川
    外丸集落

  • 雲海と田んぼ
    上野集落

  • 初日の出
    上段集落

  • 大地の芸術祭
    美雪町

  • 発電所
    鹿渡集落

  • 冬の早朝

  • 落ち葉の紅葉

  • 朝日と靄

    • ボタン

    一覧へジャンプ


    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 ）