サンプル記事サンプル記事サンプル記事

No img

h2見出し

ひやかすように言うんだおまえに悪口を言うのはザネリがばかなからだジョバンニは熱って痛いあたまを両手で押えるようにしました。すると黄と青じろとまだらになって、ちらちらまたたき、脚が何べんも眼をこすっていたのですか車掌がたずねました。双子のお星さまのお宮ってなんだいジョバンニがこらえかねて言いました。

h3見出し

ひやかすように言うんだおまえに悪口を言うのはザネリがばかなからだジョバンニは熱って痛いあたまを両手で押えるようにしました。すると黄と青じろとまだらになって、ちらちらまたたき、脚が何べんも眼をこすっていたのですか車掌がたずねました。双子のお星さまのお宮ってなんだいジョバンニがこらえかねて言いました。

h4見出し

ひやかすように言うんだおまえに悪口を言うのはザネリがばかなからだジョバンニは熱って痛いあたまを両手で押えるようにしました。

h5見出し

ひやかすように言うんだおまえに悪口を言うのはザネリがばかなからだジョバンニは熱って痛いあたまを両手で押えるようにしました。

h6見出し

ひやかすように言うんだおまえに悪口を言うのはザネリがばかなからだジョバンニは熱って痛いあたまを両手で押えるようにしました。

リストアイテム

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul class="pageItem list check">
<li>リストアイテム</li>
<li>リストアイテム</li>
<li>リストアイテム</li>
</ul>
  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul class="pageItem list mark">
<li>リストアイテム</li>
<li>リストアイテム</li>
<li>リストアイテム</li>
</ul>
  • リストアイテム1
  • リストアイテム2
  • リストアイテム3
  • リストアイテム4
  • リストアイテム5

flexを利用する時、同時にcol2を付けると2段(SP時は1段)、col3を付けると3段(SP時は2段)になります。
内容によって必要であれば使用してください。指定をしない場合は1段です。
mark、checkの時も使用できます。

<ul class="pageItem list flex col2">
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
<li>リストアイテム4</li>
<li>リストアイテム5</li>
</ul>

マーカー

これはテキストのサンプルです

<p>これは<span class="y_line">テキストのサンプル</span>です</p>

これはテキストのサンプルです

<p>これは<span class="r_line">テキストのサンプル</span>です</p>

これはテキストのサンプルです

<p>これは<span class="b_line">テキストのサンプル</span>です</p>

テーブル

通常テーブル

社員 給料
山田太郎 1ドル スティーブ・ジョブズが必要なサラリーと同じ額。
田中花子 1,000万円 ブログを書くために必要になる資金。
山本次郎 1億円 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
中山愛子 10億円 特に理由は要りません。 
<table>
<thead>
<tr>
<th>社員</th>
<th>給料</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="http://example.org/">山田太郎</a></th>
<td>1ドル</td>
<td>スティーブ・ジョブズが必要なサラリーと同じ額。</td>
</tr>
<tr>
<th><a href="http://example.org/">田中花子</a></th>
<td>1,000万円</td>
<td>ブログを書くために必要になる資金。</td>
</tr>
<tr>
<th><a href="http://example.org/">山本次郎</a></th>
<td>1億円</td>
<td>百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。</td>
</tr>
<tr>
<th><a href="http://example.org/">中山愛子</a></th>
<td>10億円</td>
<td>特に理由は要りません。</td>
</tr>
</tbody>
</table>

横スクロールテーブル

<div class=”t-scroll”></div>でテーブルを囲むと必要に応じてスクロールテーブルになります。
thに._sticky_aを付けるとスクロール時に列が固定されます。（._sticky_abはテーブルの形によって適宜使用）

見出しA 見出しB 見出しC 見出しD 見出しE 見出しF 見出しG
見出し01(th) 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ）
見出し02(th) 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ）
見出し03(th) 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 内容（コンテンツ） 
<div class="t-scroll">
<table>
<tr>
<th class="_sticky_ab"></th>
<th>見出しA</th>
<th>見出しB</th>
<th>見出しC</th>
<th>見出しD</th>
<th>見出しE</th>
<th>見出しF</th>
<th>見出しG</th>
</tr>
    <tr>
      <th class="_sticky_a">見出し01(th)</th>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
    </tr>
    <tr>
      <th class="_sticky_a">見出し02(th)</th>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
    </tr>
    <tr>
      <th class="_sticky_a">見出し03(th)</th>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
    </tr>
  </table>
</div>

縦スクロールテーブル

<div class=”y-scroll”></div>でテーブルを囲むと縦スクロールテーブルになります。
SP時に縦が500px以上のテーブルの場合に縦スクロールになります（数値は適宜調整）
※長くなるのでコードのみ
thに._sticky_aを付けると列が固定、._sticky_bで行が固定されます。（._sticky_abはテーブルの形によって適宜使用）

<div class="y-scroll">
<table>
<tr>
<th class="_sticky_ab"></th>
<th class="_sticky_b">見出しA</th>
<th class="_sticky_b">見出しB</th>
<th class="_sticky_b">見出しC</th>
<th class="_sticky_b">見出しD</th>
</tr>
    <tr>
      <th class="_sticky_a">見出し01(th)</th>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
    </tr>
    <tr>
      <th class="_sticky_a">見出し02(th)</th>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
      <td>内容（コンテンツ）</td>
    </tr>
...以下テーブルの内容
  </table>
</div>

SP時に縦並びになるテーブル

項目01(th) AAA BBB
項目02(th) AAA BBB
項目03(th) AAA BBB 
<table class="r-tb">
  <tr>
    <th>項目01(th)</th>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
  <tr>
    <th>項目02(th)</th>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
  <tr>
    <th>項目03(th)</th>
    <td>AAA</td>
    <td>BBB</td>
  </tr>
</table>

定義リスト

定義リストタイトル
これは定義リストです。
定義
物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
ギャラリー
WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
Gravatar (グラバター)
グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
<dl>
 	<dt>定義リストタイトル</dt>
 	<dd>これは定義リストです。</dd>
 	<dt>定義</dt>
 	<dd>物事、領域、何かについての意味の正確な文章や説明: <em>詩を構成するものの定義。</em><em></em></dd>
 	<dt>ギャラリー</dt>
 	<dd>WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。</dd>
 	<dt>Gravatar (グラバター)</dt>
 	<dd>グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。</dd>
</dl>

引用

これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。 スタン・ゲッツ
<blockquote>これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。

<cite>スタン・ゲッツ</cite></blockquote>

写真付き

この文章はダミーです。

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

<div class="pageItem imgtxt">
<img src="https://picsum.photos/640/480" alt=""/>
<div class="imgtxt-txt">
<h3 class="imgtxt-txt-mida" data-sub="なんか役職">この文章はダミーです。</h3>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
</div>

この文章はダミーです。

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

<div class="pageItem imgtxt right">
<img src="https://picsum.photos/640/480" alt=""/>
<div class="imgtxt-txt">
<h3 class="imgtxt-txt-mida" data-sub="なんか役職">この文章はダミーです。</h3>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
</div>

この文章はダミーです。

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

<div class="page-Boxcontent">
<div class="Boxcontent-inner">
<h3 class="imgtxt-txt-mida">この文章はダミーです。</h3>
<p><img src="https://picsum.photos/100/100" alt="" class="alignright"/>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
</div>

関連リンク

関連記事

<div class="page-linkBox">
<h4>関連記事</h4>
<ul class="pageItem list mark">
<li><a href="">朝起きられない「起立性調節障害」　夏は血圧低下や水分不足による症状悪化に注意</a></li>
<li><a href="">アナフィラキシーが起きたらどう治療すればいい？…使う薬剤の発見者は日本人</a></li>
</ul>
</div>

更新日：2023年10月5日

カテゴリー: 矯正