業界最大級 1,500 件以上の請求実績！ 精神疾患専門の障害年金申請代行センター

障害年金とは

TOPページ 障害年金とは 書式一覧
このエントリーをはてなブックマークに追加
LINEで送る

メールで共有する
このページを印刷する
公開日：2022/06/02
　 最終更新日：2022/08/01

書式一覧


見出し１

h2

見出し１が記事内でもっとも大きな見出し、大見出しとなります。

見出し１の書式のみ

class=”common-title”

見出し２

h3

こちらは中見出しです。
見出し１の内容について、更に細分化する場合に使います。
構造として、見出し１より上に来ることはできません。
構造の違反をすると、SEOで不利になることもあるのでご注意ください。

見出し２の書式のみ

class=”common-subTitle”

２見出し３　●数字タイプ

h3 class=”Number”
span class=”Number”

見出し２の頭に数字をつけるタイプ

ひとつ少ない数字の子の状態であれば、いくつでも並べて構いません。
この見出しは見出し２の子です。

見出し３　イメージ

h3　class=”h3_img”
img src=””

前に画像を置くタイプの見出しです。

見出し３　●文字列

h3 class=”Reazon Meritx”

見出し２の頭に５文字以内の文字をつけるタイプ

ひとつ少ない数字の子の状態であれば、いくつでも並べて構いません。
この見出しは見出し２の子です。

見出し３

h4

これが小見出しです。設定してある中で一番小さな見出しです。
直前の見出し２の内容について、さらに細分化するために使います。

見出し ４

h5

本ページ（書式一覧）のための見出しで、サイトでは使用していません。

見出し２　３個め

この見出し２は上の見出し１を細分化するものです。

見出しは１～３を順に使います。
見出し１の次は見出し２、見出し２の次は見出し３です。
見出しは親子関係で、見出し１の子が見出し２になります。見出し２は兄弟として複数設定ができます。見出し２に対する見出し３も同じです。

OKの例

見出し１（親）
└見出し２（子）
　├見出し３（孫）
　└見出し３（孫）
└見出し２（子）

NGの例

見出し１（親）
└見出し３（孫）　※見出し１（親）を細分化するのは見出し２（子）のみ

common

class=”top-commonTitle”

特殊な見出し
基本的に２行？

class=”top-commonTitle”

特殊な見出し
白カッコバージョン

画像装飾

回り込み

注意
画像の回り込みはＰＣ版のみで行われます。
「左図の通り」としても、スマホ版では上に表示されているので注意してください。

左寄せ・右寄せ

左寄せ：img class=”img_left”
右寄せ：img class=”img_right”

◀[左寄せ]
画像を左に回り込ませます。
基本的に最大画像幅は300pxです。

▲▼回り込みどうしの間には、回り込みを解除するため、いったんテキストを挟みます。
空の要素でクリアすることもできますので、そこまで気にしなくて大丈夫です。

▶[右寄せ]
画像を右に回り込ませます。
こちらも同じく最大幅300pxです。

中央寄せ

img class=”img_center”

▲[中央寄せ]（大きめ）
画像を中央に寄せます。
普通の文字は中央には寄りません。

▲［中央寄せ］（小さめ）
小さい画像であっても、ででんと中央に寄せることができます。
文字は同じく、基本は通常通り左寄せで配置されます。

2in1

div class=”img_2in1″


[2in1]画像を左右に２つ並べて表示することも可能です。
ビフォーアフターなどに利用できると思います。
なお、文字は中央寄せと・・・（次の行につづく）

左寄せ両方デフォルトとしてできます。
画像のブロック（中央寄せ）に入れるか、その外（左寄せ）に入れるかだけなので、お好みでご指示ください。

画像解説

figure class=”img_figure”
figure class=”img_clear”でclear:both

画像のサイズに合わせて可変サイズの解説文を設定することができます。

注意
画像の回り込みはＰＣ版のみで行われます。
「左図の通り」としても、スマホ版では上に表示されているので注意してください。
▲[フィギュア中央]
図●のように画像にピッタリくっついた解説文も用意しました。
複数行、改行可です。
▲[フィギュア左]
画像の回り込みとはまた別に設定が必要なため、解説文つきの画像を左に寄せたい場合は［フィギュア左］としてください。

本文は回り込みに沿って表示されます。
【キセメモ】:afterでclear入れてるので注意

▲[フィギュア右]
解説文つきの画像を右に寄せたい場合も同じで［フィギュア右］としてください。

本文は回り込みに沿って表示されます。
【キセメモ】:afterでclear入れてるので注意

テキスト装飾

文字

ライン

span class=”underline”
u.ULineは廃止する。

文章中に強調したいことがあるときに使用。
uタグが廃止予定に入っているとのことなので、spanに随時変更予定。

まる字

span class=”maruji”
フォントサイズの設定unsetなため注意

[まる字]という指定で丸囲み文字を作ります。
一応文字数に制限はありませんが、１行で使う前提で組んであるので、２文字×２行の大きな丸にするといったことはできません。ご注意ください。
ア 使用例
イ こんなかんじで
ウ ①②でない文字を囲うことができます

重要ここが重要なポイントです。
みたいな演出にも使えます。

注釈

span class=”kome”
span class=”tips”

文章中の用語を説明する※（こめじるし）をつけることができます。
指示するときは

文章◯◯◯◯◯◯◯単語※◯◯◯◯◯◯◯
◯◯◯◯◯◯◯◯◯◯◯◯◯◯
※置きたい場所に単語の解説
◯◯◯◯◯◯◯

といった感じにお願いします。

例としてはこのように表示されます。
文章の流れ的に解説を割り込ませたくないようなときに、※だけ表示しておいてあとから解説するということが可能になります。
薄いグレー文字サイズを小さくしてあるので、目立たせる必要のない用語解説などでの利用を想定しています。

フォントサイズ設定

class=”med”

PC版においてフォントサイズを中サイズに設定します。marujiなどと組み合わせ使います。

med未設定
med設定

フォントウェイト指定

class=”bold”

boldとあるものの、実際はフォントの変更です。
丸フォーク M, sans-serifに変更されます。

背景色指定

class=”extend”

背景色を薄い茶色に文字色も茶色に設定します。
目立たせたくない注釈に使用したり、テーブルの背景色にしたり？

文字寄せ

右寄せ
class=”align-right”

左寄せ
class=”align-left”

中央寄せ
class=”align-center”

上寄せ
class=”align-top”

右寄せ

左寄せ

左寄せ

上寄せ

段落装飾

文字単位ではなく、段落単位で行う装飾です。

チェックポイント

dl class=”Check”
dtに「チェック」「ポイント」などの文字

ol class=”Check”
ul class=”Check”

CHECK!
なにか注意を引くような文章を書きたいときに使用します。
複数行対応しています。
幅は文字の量に応じて縮みます。
タイトルの文字数も自由ですが、１６字までにしてください。
この行はスマホでは見えていません。
スマホで見るとわかりますが、タイトルが改行されるほど長いものはレイアウトが崩れてしまうので、その場合は見出しをつけて、ひとつの項とすることをおすすめします。あくまでこの装飾のタイトル部分は目を引くためのアイコン程度です。
伝えたいことは本文に書いてください。

引用

div class=”Quote”
内部のpが自動で入らないため注意
p class=”Source”

参考文献からの引用を表示します。

引用した文章。◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯

引用元を示すもの。URL・論文名・公示名など

緊急のお知らせ

div class=”Temp”
内部のpが自動で入らないため注意

現在は新型コロナウィルス拡大防止のため、訪問相談の中止、病院同行の中止をしている旨を掲示しています。
リンクも別の書式を用意しています。

白抜き強調

div class=”Color_White”
内部のpが自動で入らないため注意

何かを強調する場合の段落です。
すごく目立つので長文には使えません。

白地強調

div class=”Base_White”
内部のpが自動で入らないため注意

本文でも引用でもない文を書くための段落です。
お客様の証言、過去のやりとりなどで使います。

オーバーフロー

class=”contents”

overflow:hiddenを適用。

フレキシブルボックス

class=”flex”

要素をフレキシブルにする。
記述順が序盤なので上書きされがちな点に注意。

※この段落にはclass=flex-centerを適用。
class=flex-center
class=flex-sb-c
class=flex-reverseも存在する。

  1. 未
  2. 適
  3. 用
  1. 適
  2. 用
  3. 済

スペース

class=”Spaces”

要素の上下に2emずつスペースを開けます。

class=Spaces_all

要素の４方向に2emずつスペースを開けます。

アイコン

class=”download”
class=”exit”
タグはなんでもＯＫ。aに直指定できる。

ダウンロード
外部リンク

用語集へのリンク

用語集に登録されている単語については、リンクを貼ることになっていますが、多すぎると読みづらいので、控えめにしつつアイコンで用語集だと分からせたいという考えのもと作られた書式です。

問い合わせリンク

ul class=”common-contact__list”
🔻
li class=”common-contact__item”
🔻
a class=”contactBtn contactBtn-orange”またはa class=”contactBtn contactBtn-green”
🔻
p
🔻
span

floatを使うとレイアウトが崩れるため、横並びができない点注意。

　

固定ページ内リンク

table class=”contractor__nav”

本ページのデザインが記事ページのため、正しく反映されていないが、固定ページに使用した場合は、リンク２、リンク２－２が横に並ぶ。

見出し１ リンク１
見出し２ リンク２リンク２－２

ボタン（地味）

複数　ul class=”Inline-Button”
単体　span class=”Inline-Button”

リンク

ボタン（派手）

class=”btn”
class=”btn-arrow”
top-policy__btn

paddingやheightの指定が個別に必要。
overflowがhiddenのため、初期はbrが効かない。
全幅になるため、flex指定が必要？
top-policy__btnを設定する場合は、padding-bottom:100pxを設定しないと、overする。

  • li class=”btn”
  • li class=”btn
    top-policy__btn btn-arrow

ボーダーなしリンク

class=”NoLine”

親と子のaにも適用されます

Pに適用リンク１リンク２

リンク１のみに適用リンク１リンク２

前に丸のあるリンク

class=”Link_C”

リンクの前にオレンジ色の丸がつきます

見本

リストと表

リストと表は明確に別れていませんが、最初に使用したときの利用方法で分類しました。
ビジュアル重視で選んでいただいてかまいません。

リスト型

シンプルリスト（単数）

先頭に「・」をつけるだけのシンプルなリスト

順番があるシンプルリスト

ol class=”SList”

  1. 項目１
  2. 項目２
  3. なが～～～～～～～～～～～～～～～～い項目
  4. 改行を含む
    項目
  5. 改行されるくらいのなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目
順番のないシンプルリスト

ul class=”SList”

  • 項目１
  • 項目２
  • なが～～～～～～～～～～～～～～～～い項目
  • 改行を含む
    項目
  • 改行されるくらいのなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目

シンプルリスト（複数）

シンプルリスト

dl class=”SList”

項目１
項目１の解説１
項目１の解説２
項目２
項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
なが～～～～～～～～～～～～～～～～い項目３
項目３の解説
シンプルリスト／ドットなし

dl class=”SList NoDot”

項目１
項目１の解説１
項目１の解説２
項目２
項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
なが～～～～～～～～～～～～～～～～い項目３
項目３の解説

チェックボックス型　リスト

ol class=”SList CheckboxList”

  1. 項目１
  2. 項目２
    改行して項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
  3. なが～～～～～～～～～～～～～～～～い項目３
    改行して項目３の解説

チェックボックスつきDL

dl class=”CheckboxList”

項目１
項目１の解説１
項目１の解説２
項目２
項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
なが～～～～～～～～～～～～～～～～い項目３
項目３の解説

上下分割リスト

dl class=”UDList”

項目名が長いとき用に作成したリストです。
基本的に項目１つに対し、解説１つという使用方法を想定して作っています。

使用例）障害年金とは？　そのしくみと申請方法について

項目１
項目１の解説１
項目１の解説２
項目２
項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
なが～～～～～～～～～～～～～～～～い項目３
項目３の解説
スマホ版

左右分割リスト

dl class=”LRList”

項目の文字数が全角１０字程度での使用を想定してたリストです。
１０字を超えると「……」の位置がずれますので、長い項目名の場合は上下分割リストを使います。
スマホ版では上下に分割されます。

使用例）令和2年度　年金額改定のお知らせ

項目１
項目１の解説１
項目１の解説２
項目２
項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
なが～～～～～～～～～～～～～～～～い項目３
項目３の解説
スマホ版

数字付きリスト

ol class=”SquareNoList”
dl class=”SquareNoListは、各項目の最初の行が太字に

要素の最初の行だけ太字にする。
これは二行目

項目の前に数字をつけたリストです。白い囲いの中に入れると更に目立ちます。

  1. 項目１
  2. 項目２
  3. 項目３のなが～～～～～～～～～～～～～～～～～～～～～～～～～～い項目
項目１
本文
項目２
項目３のなが～～～～～～～～～～～～～～～～～～～～～～～～～～い項目
なが～～～～～～～～～～～～～～～～い項目続き
なが～～～～～～～～～～～～～～～～い項目続き２
本文～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

表型

おしゃれタイプ

table class=”common-table”

横並び
見出し 見出し２ 見出し３
本文 本文２
なが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い本文 本文２ 本文３
本文 なが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～本文２ 本文３
縦並び
見出し１ 本文１ 本文２
見出し２ 本文１ 本文２

普通のテーブル

table class=”NTable”

幅とかの設定は一切していないので可変。
必要なときは直指定で。
スマホ版でも表として表示する。

見出し 見出し２
本文～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ 本文～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
見出し１ 本文～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ こっちも長い本文～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
見出し２ 長い本文～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ 見出しにwidth:6em;を設定している。
スマホ版の設定も特にしていない。

上だけ茶色のテーブル

table class=”TTable”

上部（thead)に色指定が入っています。スマホ版だとthead非表示になります。

見出し１ 見出し２
項目１ 項目１の解説
項目２ 項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
項目３のなが～～～～～～～～～～～～～～～～～～～～～～～～～～い項目 項目３の解説
スマホ版
見出し１ 見出し２ 見出し３
項目１ 項目１の解説 項目１の解説２
項目２ 項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説 項目２の解説２
項目３のなが～～～～～～～～～～～～～～～～～～～～～～～～～～い項目 項目３の解説 項目３の解説
なが～～～～～～～～～～～～～～～～～～～～～～～～～～い項目４ 項目４のなが～～～～～～～～～～～～～～～～～～～～～～～～～～い解説 項目４のなが～～～～～～～～～～～～～～～～～～～～～～～～～～い解説２
スマホ版

テーブル型リスト

dl class=”TList”

左の項目を右で解説するという、テーブル型リストです。（実はテーブルではありません）
スマートフォンでも左右に分割されます。
項目・解説ともに短い料金表などのために作成しました。

使用例）不支給や軽い等級になった時、不服申し立てはできますか？

項目１
項目１の解説１
項目１の解説２
項目２
項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
なが～～～～～～～～～～～～～～～～い項目３
項目は６文字を目安にしています。
項目の幅を固定し、文字を中央寄せにしてしまっているので、項目の文字数が多くなると不格好です。
スマホ版

左茶色のテーブル

table class=”BTable”

パソコンから見ると、上のテーブル型リストによく似ていますが、スマホで見た場合、項目と解説が上下に別れます。
項目または要素が長くなる場合は、基本的にこちらを使用します。
使用例）障害年金を受給するための３つの要件

項目１ 項目１の解説
項目２ 項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
なが～～～～～～～～～～～～～～～～い項目３ 項目３の解説
スマホ版

左茶色のテーブル型DLリスト

dl class=”Btable”

これまたよく似たリストですが、スマホ版での表示が違います。
高さが項目＞解説となるとレイアウトが崩れるので、項目の文字数を増やしすぎないように気をつけてください。

使用例）障害年金の更新手続きが１年延長されました

項目１
項目１の解説１
項目２
項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
なが～～～～～～～～～～～～～～～～い項目３
項目３の解説
スマホ版

その他

デバイス切り替え

このタグを使うと、displayがblockになるため、flexなどには使えない点に注意。

ＰＣのみで表示

class=”pc”

スマートフォンのみで表示

class=”sp”

初回のお電話で、ギモン解決！

専門家の対応で、具体的に障害年金手続きがイメージできる！

着手金0円 / 完全成功報酬制

全国対応無料相談専用ダイヤル

0120-918-878

平日9:00～18:00　
土日祝9:00～17:00

無料オンライン相談予約