記事に使える要素一覧
INDEX
目次

見出しの種類一覧

これはh2の見出しとして使ってください(「見出し > 通常」を選択)

これはh3の見出しとして使ってください(「見出し > 小」を選択)

これはh4の見出しとして使ってください(「Markdown」を選択 > 「#### タイトル」のように書いて使う)

基本機能の要素一覧

リッチテキスト

太文字や強調など、文字を強調させたい場合に使用してください。
リンクは挿入できません。文章中にリンクを挿入したい場合はMarkdownを使用してください。

表示イメージ

・太字を指定するとこうなります
・青文字を指定するとこうなります
・強調を指定するとこうなります

画像

画像を添付したいときに使用してください。引用元がある場合は必ず「出典URL」を記載してください。

表示イメージ

(8939)

via www.webcoach.jp

動画

動画を埋め込みたいときに使用してください。コメントは任意です。

表示イメージ

初心者でもゼロから理解！HTML/CSS基礎講座〜ホームページ制作を始めよう

via www.youtube.com

引用

文章を引用したいときに使用してください。引用元を必ず記載してください。

表示イメージ

ここに引用したい文章を記載してください

リンク

リンクを埋め込みたいときに使用してください。
URL、タイトル、説明はデフォルトでリンク先のものが入力されています。必要であれば変更してください。コメントは任意です。

表示イメージ

Search Engine Market Share Japan | Statcounter Global Stats

Search Engine Market Share Japan | Statcounter Global Stats
This graph shows the market share of search engines in Japan based on over 5 billion monthly page views.
(任意)コメントが必要な際には記入してください

テキスト

太字や強調などの装飾がないテキストを入力したい際に使用してください。(基本リッチテキストを使うと良いと思います)。
リンクは挿入できません。文章中にリンクを挿入したい場合はMarkdownを使用してください。

表示イメージ

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

Markdown

リスト、番号付きリスト、文章へのリンクの挿入に使用してください。
使用する際は以下のコードをコピーして「Markdown」要素に貼り付けてください。
-----
- リスト
        - アイテム
        - アイテム
        - アイテム
- リスト
  
1. 番号つきリスト
        1. アイテム
        1. アイテム
        1. アイテム
1. 番号つきリスト

これは[Google](https://www.google.co.jp/)へのリンクです
Markdown

表示イメージ

  • リスト
    • アイテム
    • アイテム
    • アイテム
  • リスト
  1. 番号つきリスト
    1. アイテム
    2. アイテム
    3. アイテム
  2. 番号つきリスト

これはGoogleへのリンクです

コード

コードを記載したいときに使用してください。

表示イメージ

/* 全体設定 */
html {
  font-size: 100%;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 154%;
  letter-spacing: 0.08em;
}

img {
  max-width: 100%;
  height: auto;
}
コード要素

HTMLで作れる要素一覧

チェックボックス

文章の左にチェックボックスを追加したいときに使用してください。実際にチェックを付けることは出来ません。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。
----
<ul class="checkbox-list">
    <li>文章</li>
    <li>文章文章</li>
    <li>文章文章文章</li>
</ul>
チェックボックス

表示イメージ

  • 文章
  • 文章文章
  • 文章文章文章

重要カード

重要な説明をするときに追加してください。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。
-----
<div class="callout white">
  <div class="title-area">
    <div class="icon bulb"></div>
    <div class="title">ここにタイトルを入れてください</div>
  </div>
  <div class="content-area">
    説明
  </div>
</div>
重要カード

表示イメージ

ここにタイトルを入れてください
説明

pointカード

説明の中でのポイントをまとめたり、アドバイスなどを書くときに使用してください。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。
-----
<div class="card-with-icon point">
  <span class="bold">タイトル(タイトルを付けない場合は削除してください)<br></span>
  説明
</div>
pointカード

表示イメージ

タイトル(タイトルを付けない場合は削除してください)
 説明
かつてのボトルネック
  • 単純なコードの繰り返し入力
  • エラーの原因究明のための長時間にわたる調査
  • 競合サイトの構成やデザインの広範なリサーチ
  • キャッチコピーや説明文など、テキストコンテンツの作成

これらの作業が、制作スピードとコストに大きく影響していました。

使用例

pointカード: 使い方の例1

pointカード: 使い方の例1

via learn.webcoach.jp
pointカード: 使い方の例2

pointカード: 使い方の例2

via learn.webcoach.jp

attentionカード

特に注意が必要なアクション(間違えるとエラーにつながったり、操作がやり直しになるような事項)を促したり説明をする際や、ユーザーに不利益をもたらす可能性のある事項の説明を記載するときに使用してください。
ワンポイントアドバイスには「pointカード」を使用してください。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。
-----
<div class="card-with-icon attention">
  <span class="bold">タイトル(タイトルを付けない場合は削除してください)<br></span>
  説明
</div>
attentionカード

表示イメージ

タイトル(タイトルを付けない場合は削除してください)
 説明

使用例

attentionカード: 使い方の例1

attentionカード: 使い方の例1

via learn.webcoach.jp
attentionカード: 使い方の例2

attentionカード: 使い方の例2

via learn.webcoach.jp

noteカード

文章中に出てくる単語の説明や、参考にしてほしいサイトを記載する際に使用してください。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。
-----
<div class="card-with-icon note">
  <span class="bold">タイトル(タイトルを付けない場合は削除してください)<br></span>
  説明
</div>
noteカード

表示イメージ

タイトル(タイトルを付けない場合は削除してください)
 説明

使用例

noteカード: 使い方の例1

noteカード: 使い方の例1

via learn.webcoach.jp
noteカード: 使い方の例2

noteカード: 使い方の例2

via learn.webcoach.jp

checkカード

ユーザーに注意度の低いアクションを促したいとき(チェックポイントの際)に使用してください。
注意度の高いアクションを促す際には「attentionカード」を使用してください。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。
-----
<div class="card-with-icon check">
  <span class="bold">タイトル(タイトルを付けない場合は削除してください)<br></span>
  説明
</div>
checkカード

表示イメージ

タイトル(タイトルを付けない場合は削除してください)
 説明

使用例

checkカード: 使い方の例1

checkカード: 使い方の例1

via learn.webcoach.jp

テーブル

テーブルで表示したい際に使用してください。
必要に応じて「col(タイトル)」「row(見出し+説明)」の数を増やして使用してください。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。
-----
<table class="simple">
    <tbody>
        <thead>
            <tr>
                <th scope="col">
                    <div>
                        <div>
                        </div>
                    </div>
                </th>
                <th scope="col">
                    <div>
                        <div>タイトル1</div>
                    </div>
                </th>
                <th scope="col">
                    <div>
                        <div>タイトル2</div>
                    </div>
                </th>
                <th scope="col">
                    <div>
                        <div>タイトル3</div>
                    </div>
                </th>
            </tr>
        </thead>
        <tr>
            <th scope="row">
                <div>
                    <div>見出し1</div>
                </div>
            </th>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <div>
                    <div>見出し2</div>
                </div>
            </th>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <div>
                    <div>見出し3</div>
                </div>
            </th>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
            <td>
                <div>
                    <div>説明</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
テーブル

表示イメージ
タイトル1
タイトル2
タイトル3
見出し1
説明
説明
説明
見出し2
説明
説明
説明
見出し3
説明
説明
説明

要素を横並びにする

Youtubeなどにアップロードしていない動画を貼り付けたい場合に使用します。 あらかじめこちらのフォルダに貼り付けたい画像をアップロードする必要があります。
文頭に「・」をつけた文章を使用したい場合
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。imgタグの画像のパスは任意のものに変更してください。
-----
<div class="content-flex">
  <div class="content-flex_item">
    <ul>
      <li>入れたい文章</li>
      <li>入れたい文章</li>
      <li>入れたい文章</li>
    </ul>
  </div>
  <img src="表示したい画像のパス(例→/theme/webcoach/img/web-design.png)" class="content-flex_item">
</div>
要素を横並びにする(各要素横幅50%ずつの場合。スマホの場合は縦並びになります)

表示イメージ

  • 入れたい文章
  • 入れたい文章
  • 入れたい文章
装飾のない通常の文章を使用したい場合
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。imgタグの画像のパスは任意のものに変更してください。
-----
<div class="content-flex">
  <div class="content-flex_item">
    <p>入れたい文章</p>
  </div>
  <img src="表示したい画像のパス(例→/theme/webcoach/img/web-design.png)" class="content-flex_item">
</div>
装飾のない通常の文章を使用したい場合

表示イメージ

入れたい文章

動画を表示する

Youtubeなどにアップロードしていない動画を貼り付けたい場合に使用します。 あらかじめこちらのフォルダに貼り付けたい動画をアップロードする必要があります。 ファイルの容量が大きいとアップロードが出来ないため、圧縮サイトなどを使って容量を圧縮してからアップロードしてください。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。sourceタグの動画のパスは任意のものに変更してください。
-----
<video controls width="100%">
  <source src="フォルダにアップロード済みの動画のパス(例→/theme/webcoach/movie/画面収録-2025-05-18-23.33.16.mp4)" type="video/mp4">
</video>
動画を表示する

表示イメージ

区切り線をいれる

コンテンツを区切りたいときに使用します。
大きなコンテンツの区切りは「separator(上下の余白が大きい)」、小さな区切りは「separator-mini(上下の余白が小さい)」を使用してください。
使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。
-----
<div class="separator"></div>

<div class="separator-mini"></div>
区切り線をいれる - 通常

表示イメージ

↓上下の余白が大きい区切り線
↓上下の余白が小さい区切り線

記事詳細ページに「前の章に戻る」「次の章に進む」ボタンをいれる

使用する際は以下のコードをコピーして「HTML」要素に貼り付けてください。(URLは適宜変えてください)
-----
<div class="pagenation-buttons">
  <a href="#" class="pagenation-buttons_prev"><img src="/theme/webcoach/img/icons/arrow-right.svg" class="pagenation-buttons_icon">前の章に戻る</a>
  <a href="#" class="pagenation-buttons_next">次の章に進む<img src="/theme/webcoach/img/icons/arrow-right.svg" class="pagenation-buttons_icon"></a>
</div>
記事詳細ページに「前の章に戻る」「次の章に進む」ボタンをいれる

表示イメージ

前の章に戻る 次の章に進む
次の章に進む
前の章に戻る
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH