労務SEARCH > 労働保険（労災保険/雇用保険） > 【ライター様用】装飾パーツまとめ

【ライター様用】装飾パーツまとめ

更新日：2024.07.18

この記事でわかること・結論

1行目1行目1行目1行目
2行目2行目2行目2行目
3行目3行目3行目3行目

見出し

<h2>H2タイトル</h2>

<h3>H3タイトル</h3>

<h4>H4タイトル</h4>

社会保険シミュレーター

育児休業給付金シミュレーター

重要ポイント

見出しタグなし

<div class="c-point">
<div class="c-point__ttl">POINT</div>
<div class="c-point__title">タイトル※必須</div>
<p class="c-point__paragraph">重要ポイントを記入</p>

<div class="c-point__section">
<div class="c-point__section-title">タイトル</div>
<p>テキストテキストテキスト</p>
</div>
<div class="c-point__section">
<div class="c-point__section-title">タイトル</div>
<p>テキストテキストテキスト</p>
</div>
</div>

見出しタグあり

<div class="c-point">
<div class="c-point__ttl">POINT</div>
<h4 class="c-point__title">契約では印紙税を払わなくていいのですか？</h4>
<p class="c-point__paragraph">外部ソフトと連携することで、人事データの活用と業務効率化を図れます。API連携では、クラウド社労士業務システムの「社労夢」や、クラウド型人事・労務オールインワン電子申請システム「DirectHR」などと連携可能です。</p>

<div class="c-point__section">
<h5>h5_運用まで徹底サポート！利用開始までの流れがスムーズ</h5>
<p>また、CSVファイルのデータ入力・出力にも対応しています。今現在利用している人事給与システムや給与計算システムなどと連携すれば、年末調整や給与計算などの業務にかかる負担を大幅に軽減できるでしょう。</p>
</div>
<div class="c-point__section">
<h5>h5_運用まで徹底サポート！利用開始までの流れがh4_運用まで徹底サポート！利用開始までの流れがスムーズ</h5>
<p>また、CSVファイルのデータ入力・出力にも対応しています。</p>
</div>
</div>

重要ポイント（箇条書き）

<div class="c-box__list">
    <div class="c-box__list-title">箇条書き：利用開始までの流れが</div>
    <ul>
         <li>36協定の電子申請のやり方・手順について</li>
         <li>36協定を電子申請するメリット・デメリット</li>
         <li>36協定を電子申請する際の注意点、テキストが長い場合のイメージです。テキストが長い場合のイメージです。</li>
    </ul>
</div>

手続きの流れ


<article class="text-center">
    <p class="title-list">○○の手続きの流れ</p>
    <ol>
        <li>テキスト
        <li>テキスト
        <li>テキスト
    </ol>
</article>

注意点

<div class="c-box__alert">
    <div class="c-box__alert-title">注意点：利用開始までの流れが</div>
    上記の登録作業を済ませると、利用開始できる流れです。管理者用だけでなく、申告者用のマニュアルも用意されているので、初めて年末調整システムを導入する方でも安心して利用できるでしょう。万が一わからないことがあれば、メールや電話で専任の担当者からサポートを受けられます。</div>

計算式/具体例

<div class="c-box__blue">
    <div class="c-box__blue-title">とは：その他の説明などにも。利用開始までの流れがテキストが長い場合のイメージです。テキストが長い場合のイメージです。</div>
    上記の登録作業を済ませると、利用開始できる流れです。管理者用だけでなく、申告者用のマニュアルも用意されているので、初めて年末調整システムを導入する方でも安心して利用できるでしょう。万が一わからないことがあれば、メールや電話で専任の担当者からサポートを受けられます。</div>

引用・抜粋

<div class="c-box__excerpt">
    <hr />
    <div class="c-box__excerpt-title">Webディレクターとしてどのような仕事をしたいか</div>
    外部ソフトと連携することで、人事データの活用と業務効率化を図れます。API連携では、クラウド社労士業務システムの「社労夢」や、クラウド型人事・労務オールインワン電子申請システム「DirectHR」などと連携可能です。外部ソフトと連携することで、人事データの活用と業務効率化を図れます。API連携では、クラウド社労士業務システムの「社労夢」や、クラウド型人事・労務オールインワン電子申請システム。
    <hr />
</div>

Q&A

<div class="c-qnda">
    <dl>
         <dt>電⼦契約にも証拠⼒が認められますか？</dt>
         <dd>作成者本人による電子署名がなされた電子契約については、押印した契約文書と同様に証拠力が認められます。</dd>
         <dt>電⼦契約では印紙税を払わなくていいのですか？</dt>
         <dd>作成者本人による電子署名がなされた電子契約については、押印した契約文書と同様に証拠力が認められます。</dd>
         <dt>Webディレクターとしてどのような仕事をしたいかを明確にする電⼦契約では印紙税を払わなくていいのですか？</dt>
         <dd>外部ソフトと連携することで、人事データの活用と業務効率化を図れます。API連携では、クラウド社労士業務システムの「社労夢」や、クラウド型人事・労務オールインワン電子申請システム「DirectHR」などと連携可能です。</dd>
    </dl>
</div>

変更点

<div class="c-box__before-after">
    <div class="c-box__before">
        <p class="ttl">改定前</p>
        <div class="c-box__before-title">その他の説明などにも</div>
        上記の登録作業を済ませると、利用開始できる流れです。担当者からサポートを受けられます。
    </div>
    <div class="c-box__after">
        <p class="ttl">改定後</p>
        <div class="c-box__after-title">その他の説明などにも</div>
        上記の登録作業を済ませると、利用開始できる流れです。ここにダミーのテキストがはいります、担当者からサポートを受けられます。
    </div>
</div>

チェックリスト

<div class="c-checklist">
    <h4>タイトルが入りますタイトルが</h4>
    <dl>
         <dt>Q1. サブタイトルが入ります</dt>
         <dd>
            <ul>
                <li><label for="answer1_1"><input id="answer1_1" name="" type="checkbox" />上記の登録作業を済ませると、利用開始できる流れです。管理者用だけでなく、申告者用のマニュアルも用意されているので、初めて年末調整システムを導入安心</label></li>
                <li><label for="answer1_2"><input id="answer1_2" name="" type="checkbox" />AIデザイン加工したい写真を選択する</label></li>
                <li><label for="answer1_3"><input id="answer1_3" name="" type="checkbox" />アプリの中で「翻訳」を検索して選択</label></li>
                <li><label for="answer1_4"><input id="answer1_4" name="" type="checkbox" />デザイン加工したい対象をブラシでなぞって、テキストを入力する</label></li>
            </ul>
        </dd>
        <dt>Q2. サブタイトルが入ります</dt>
        <dd>
            <ul>
                <li><label for="answer2_1"><input id="answer2_1" name="" type="checkbox" />Canvaで編集画面を開く</label></li>
                <li><label for="answer2_2"><input id="answer2_2" name="" type="checkbox" />左にあるツールバーの一番下「アプリ」を選択</label></li>
            </ul>
        </dd>
    </dl>
</div>

表

<div class="sp_view --full u-bs--sp_none">
    <table class="c-compare-table --simple">
        <tr>
            <th>サービス名</th>
            <th>テキスト</th>        
        <tr>
            <th>初期費用</th>
 　　　　　 <td>テキスト</td>           
        </tr>
        <tr>
            <th>月額固定費</th>
            <td>テキスト</td>  
        </tr>
        <tr>
            <th>日本語テキスト</th>
            <td>テキスト</td> 
        </tr>
    </table>
</div>
<div class="icon-scroll"></div>

表（複数サービス）


<div class="sp_view --full u-bs--sp_none">
    <table class="c-compare-table --simple">
        <tr>
            <th>サービス名</th>
            <th>テキスト</th>
            <th>テキスト</th>
        </tr>
        <tr>
            <th>初期費用</th>
            <td>220,000</td>
            <td>220,000</td>

        </tr>
        <tr>
            <th>月額固定費</th>
            <td>50,000</td>
            <td>50,000</td>
        </tr>
        <tr>
            <th>日本語テキスト</th>
            <td><span class="triangle">△</span></td>
            <td>無料</td>
        </tr>
        <tr>
            <th>無料トライアル</th>
            <td><span class="circle">〇</span></td>
            <td><span class="minus">ー</span></td>
        </tr>
        <tr>
            <th>詳細</th>
            <td><a href="#" target="_blank" class="btn" rel="noopener">公式サイト</a></td>
            <td><a href="#" target="_blank" class="btn" rel="noopener">公式サイト</a></td>
        </tr>
    </table>
</div>
<div class="icon-scroll"></div>

表（吹き出しタイプ）

<div class="sp_view --full u-bs--sp_none">
    <table class="c-compare-table --balloon">
        <thead>
            <tr>
                <th>多目的タイプ</th>
                <th>評価業務<br>効率化タイプ</th>
                <th>評価業務<br>効率化タイプ</th>
                <th>評価業務<br>効率化タイプ</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131412/jobkan.png" alt="企業ロゴ"></div>
                        <figcaption>ジョブカン</figcaption>
                    </figure>
                </td>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131412/jobkan.png" alt="企業ロゴ"></div>
                        <figcaption>ジョブカン</figcaption>
                    </figure>
                </td>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131412/jobkan.png" alt="企業ロゴ"></div>
                        <figcaption>ジョブカン</figcaption>
                    </figure>
                </td>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131412/jobkan.png" alt="企業ロゴ"></div>
                        <figcaption>ジョブカン</figcaption>
                    </figure>
                </td>
            </tr>
            <tr>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131415/clouza.png" alt="企業ロゴ"></div>
                        <figcaption>CLOUZA</figcaption>
                    </figure>
                </td>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131415/clouza.png" alt="企業ロゴ"></div>
                        <figcaption>CLOUZA</figcaption>
                    </figure>
                </td>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131415/clouza.png" alt="企業ロゴ"></div>
                        <figcaption>CLOUZA</figcaption>
                    </figure>
                </td>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131415/clouza.png" alt="企業ロゴ"></div>
                        <figcaption>CLOUZA</figcaption>
                    </figure>
                </td>
            </tr>
            <tr>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131414/touch.png" alt="企業ロゴ"></div>
                        <figcaption>タッチオンタイム</figcaption>
                    </figure>
                </td>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131414/touch.png" alt="企業ロゴ"></div>
                        <figcaption>タッチオンタイム</figcaption>
                    </figure>
                </td>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131414/touch.png" alt="企業ロゴ"></div>
                        <figcaption>タッチオンタイム</figcaption>
                    </figure>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <figure>
                        <div><img src="https://romsearch-prod-site-content.s3.ap-northeast-1.amazonaws.com/romsearch-officestation-jp/wp-content/uploads/2021/04/21131416/garuhu.png" alt="企業ロゴ"></div>
                        <figcaption>ガルフ</figcaption>
                    </figure>
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="icon-scroll"></div>

上記は4カラムですが、カラム数に応じて幅は可変します

注釈文

記号はなしで文章

<span class="notice">記号はなしで文章</span>

出典

参考・引用

【参考】参考ページタイトル｜参考サイト名

<div class="reference"><span class="noteList">【参考】</span><span class="noteText"><a href="参考元URL" rel="noopener" target="_blank">参考ページタイトル｜参考サイト名</a></span></div>

画像の出典

出典：○○公式サイト

<div class="reference"><span class="noteList">出典<a href="参考元URL" rel="noopener" target="_blank">○○公式サイト</a></span></div>

お約束

本コンテンツは労務SEARCHが独自に制作しており、公正・正確・有益な情報発信の提供に努めています。詳しくはコンテンツ制作ポリシーをご覧ください。もし誤った情報が掲載されている場合は報告フォームよりご連絡ください。

労務SEARCH > 労働保険（労災保険/雇用保険） > 【ライター様用】装飾パーツまとめ

【ライター様用】装飾パーツまとめ

見出し

社会保険シミュレーター

育児休業給付金シミュレーター

重要ポイント

重要ポイント

重要ポイント（箇条書き）

手続きの流れ

注意点

計算式/具体例

引用・抜粋

Q&A

変更点

チェックリスト

表

表

表（複数サービス）

表（吹き出しタイプ）

注釈文

出典

参考・引用

画像の出典

関連記事