<div class="center"> <h2 class="title"><span>フォントサンプル</span></h2> </div>
フォントサンプル
Kiwi Maru … 「headline」 HEADLINE 1234567890 日本語のサンプルです！300+400<p class="kiwimaru font-l">〇〇</p>
M PLUS 1 Code … 「headline」 HEADLINE 1234567890 日本語のサンプルです！200+300<p class="mp1c font-l">〇〇</p>
M PLUS Rounded 1c … 「headline」 HEADLINE 1234567890 日本語のサンプルです！300+400<p class="mpr1 font-l">〇〇</p>
Murecho … 「headline」 HEADLINE 1234567890 日本語のサンプルです！<p class="murecho font-l">〇〇</p>
Yomogi … 「headline」 HEADLINE 1234567890 日本語のサンプルです！<p class="yomogi font-l">〇〇</p>
Yusei Magic … 「headline」 HEADLINE 1234567890 日本語のサンプルです！<p class="magic font-l">〇〇</p>
Zen Kaku Gothic New … 「headline」 HEADLINE 1234567890 日本語のサンプルです！300+400<p class="zenkaku font-l">〇〇</p>
Zen Maru Gothic … 「headline」 HEADLINE 1234567890 日本語のサンプルです！300+400+500<p class="zenmaru 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="h165">〇〇</p>
デザインの美しさには、 フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h175">〇〇</p>
デザインの美しさには、 フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h200">〇〇</p>
デザインの美しさには、 フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h300">〇〇</p>
デザインの美しさには、 フォント選びが最も重要です。
しかし、行間・文字間・段落間なども基礎に則って文字組みをおこなうこと大きくデザインに関わってきます。
気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。<p class="h400">〇〇</p>
タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。
タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml10">〇〇</p>
タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml20">〇〇</p>
タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml30">〇〇</p>
タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml40">〇〇</p>
タイポグラフィーは重要な要素であり、文章の開始位置左のマージンは読みやすさを左右します。<p class="ml50">〇〇</p>
タイポグラフィーは重要な要素であり、文字の間隔はページ全体のイメージを左右します。
タイポグラフィーは重要な要素であり、文字の間隔はページ全体のイメージを左右します。<p class="font-ls02quot;>〇〇</p>
タイポグラフィーは重要な要素であり、文字の間隔はページ全体のイメージを左右します。<p class="font-ls04">〇〇</p>
タイポグラフィーは重要な要素であり、文字の間隔はページ全体のイメージを左右します。<p class="font-ls06">〇〇</p>
「タイポグラフィー」は重要な要素です。
2行目以降を1文字下げる［text-indent］
※text-indentプロパティの便利な使い方。
文章の段落などの2行目以降を1文字下げて空白を挿入する方法です。
この文章では［text-indent］による装飾を施しています。
サンプルです。
<p class="indent-1">〇〇</p>
当日は、プール、バーデ、内湯の利用ができます。
◇担当インストラクター：浜崎
当日は、プール、バーデ、内湯の利用ができます。
◇担当インストラクター：浜崎
見出し２ タイトル
見出し１
<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>
<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="timetable">〇〇</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
- なじょもん駐車場（諸連絡・解散）
<div id="qa">〇〇</div>
定義リスト「Q&A」
- 質問テキストA
- 答えのサンプルテキストAです。答えのサンプルテキストAです。答えのサンプルテキストAです。
- 質問テキストB
- 答えのサンプルテキストBです。
答えのサンプルテキストBです。
答えのサンプルテキストBです。
リスト(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リストアイテム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リスト
リスト(li)
リストアイテム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リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1 - リストアイテム2
- リストアイテム3
- リストアイテム4
- リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
- リストアイテム2
- リストアイテム3
- リストアイテム4
- リストアイテム1
- リストアイテム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
- リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
- リストアイテム2
- リストアイテム3
- リストアイテム4
- リストアイテム1
- リストアイテム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リストアイテム1リストアイテム1 - リストアイテム3
- リストアイテム2
- リストアイテム3
- リストアイテム4
-
冬の信濃川
外丸集落 -
雲海と田んぼ
上野集落 -
初日の出
上段集落 -
大地の芸術祭
美雪町 -
発電所
鹿渡集落 
冬の早朝
-
落ち葉の紅葉
朝日と靄
非順序リスト（矢印リスト）
<div class="arrowList">〇〇</div>
非順序リスト（アイコン list-img ）
<div class="list-img">〇〇</div>
非順序リスト（※）
<div class="kome">〇〇</div>
非順序リスト（※）
<div class="kome-aka">〇〇</div>
非順序リスト（※）
<div class="daia">〇〇</div>
非順序リスト（※）
<div class="arrow">〇〇</div>
順序リスト
順序リスト(丸数字)
<div class="marusuji">〇〇</div>
サイドメニューリスト
画像の角丸
角丸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="custom_btn">
トップページはこちら
角丸ボタン10px <a href="URL" class="custom_btn btn_p">
トップページはこちら
角丸ボタン10px <a href="URL" class="custom_btn btn_y">
トップページはこちら
角丸ボタン10px <a href="URL" class="custom_btn btn_g">
トップページはこちら
角丸ボタン10px <a href="URL" class="custom_btn btn_b">
フォトギャラリー
(フォトギャラリーは、一行に複数枚入れると等倍自動縮小。何枚でも可。小さくなりすぎる場合は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-item">□左側プレビュー 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 ）
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.