TOP 戻る 進む 印刷用マニュアル

STEP3 HTMLについて

HTMLについて

HTMLとは

HTMLとは Hyper Text Markup Language の略で、Webページ作成の際に使用されるプログラミング言語です。
このマニュアルページもHTMLによって作られています。

HTMLでは タグ と呼ばれるものを使い、文字に対して意味を与えます。
文字の大きさや色を変えたり、URLを埋め込んでリンクを作成することもできます。

<p> テスト </p>

上の例のように文字をタグで囲んであげます。
例では p(段落) のタグで囲んであげたことで、「テスト」という文字に段落の意味が付与されました。

※囲いを閉じる際に「 / 」を使用することに注意してください。

次セクションにてよく使われるタグをいくつかご紹介します。

利用できるHTMLタグ一覧

よく使われるタグ


段落:<p>

<p> テストの文章。 </p>

<p>タグよって文字を囲むことで段落にすることができます。
基本的に文章を書く際は<p>タグで囲むことを心がけましょう。


改行:<br>

<p> 明日は <br> 晴れです。 </p>

<br>タグを使用することで改行することができます。
上記の例では、通常「明日は」と「晴れです。」が一行で表現されますが、<br>によって強制的に改行されます。

※<br>タグは文字を囲む必要はありません。


強調:<strong>

<p> <strong> 強調したい文字 </strong> </p>

<strong>タグで囲むことで文字を強調することができます。

※強調せずにただ太字にしたいだけの場合は<b>タグを使用します。


見出し:<h1> – <h6>

<h1> 見出し1(大) </h1>
<h2> 見出し2(中) </h2>
<h3> 見出し3(小) </h3>

<h1> – <h6>タグを用いることで見出しを設定することができます。
見出しには h1 から h6 までの6段階のレベルが存在します。
h1 が最も重要度が高く、数字が大きくなるにつれて重要度は下がっていきます。

ただし、<h1>タグは基本的にページタイトルに付与するものです。
ページ内に複数存在するとSEO的にも悪影響なので、使用する場合は<h2>タグから使用することをおすすめします。


リンク:<a>

<p> <a href="https://www.~.com">リンク</a> </p>

<a>タグを用いることで文字にURLを埋め込み、リンクを作成することができます。
href属性によってリンク先を指定します。
ページ内のリンク先を指定する場合はアンカーリンクを、ページ外のリンク先を指定する場合はURLを設定しましょう。


箇条書き:<ul> , <ol>

<ul>
  <li>項目A</li>
  <li>項目B</li>
  <li>項目C</li>
</ul>

<li>タグで設定した項目を、<ul>タグによって囲むことで順序無し箇条書きリストを作成できます。
順序付き箇条書きリストを作成する際は、<ul>ではなく<ol>タグを使います。
上記の例では以下のようなリストができあがります。

・ 項目A
・ 項目B
・ 項目C


表:<table>

<table>

  <thead>  // 表のヘッダー
    <tr>  // 表の行
      <th>見出し1</th>  // 見出し用のセル
      <th>見出し2</th>
    </tr>
  </thead>

  <tbody>  // 表の本体
    <tr>
      <td>データ1</td>  // データ用のセル
      <td>データ2</td>
    </tr>
  </tbody>

</table>

<table>タグによって表を作成することができます。
表を作成する場合、<table>タグだけではなく各要素を表すタグを使用します。
各要素についての説明は上記コード内のコメントを参照してください。
上記の例では以下のような表ができあがります。

見出し1見出し2
データ1データ2

画像:<img>

<img src="example.jpg" alt="画像の例">

<img>タグによって画像を挿入することができます。
src属性に画像の絶対パス、またはURLを指定します。
alt属性には、画像が表示されなかった場合に代わりに表示されるテキストを設定します。


その他:利用できるタグ一覧

タグ説明
<abbr>略語を示す
<address>連絡先を示す
<area>イメージマップを設定する
<article>内容が単体で完結するセクションであることを示す
<aside>ウェブページ内における余談・補足情報のセクションであることを示す
<bdo>書字方向を指定する
ltr : 左から右
rtl : 右から左
<blockquote>引用されたブロックレベルのテキスト(長文)を示す
<caption>表にタイトルを付ける
<cite>出典や参照先を示す
<code>プログラムコードを示す
<col>表の列の属性をまとめて設定する
<colgroup>表の列を構造的にグループ化する
<dd><dl>タグ内で、「用語に対する説明」の部分を示す
<del>削除された部分を示す
※修正する際、どの部分が削除されたのかを示したい場合に使用する
<details>ユーザーが追加で得ることのできる備考や操作手段などの詳細情報であることを示す
<dfn>定義する用語を示す
<div>任意の範囲をブロックレベル要素としてまとめる
<dl>定義型のリストを作成する
<dt><dl>タグ内で、定義する「用語」の部分を示す
<em><strong>タグよりも弱い強調
<figcaption>図表のキャプションを示す
<figure>図表であることを示す
<font>フォントのサイズ、色、種類を指定する
<footer>直近のセクションのフッタであることを示す
<header>イントロダクションやナビゲーショングループであることを示す
※<head>とは異なります
<hgroup><h1> – <h6> の見出しセットをグループにまとめる
<hr>水平方向の罫線を引く
<i>要素内のテキストを、イタリック体で表示する
<ins>追加された部分を示す
※修正する際、どの部分が追加されたのかを示したい場合に使用する
<kbd>ユーザーが入力するテキストを示す
<map>クライアントサイド・イメージマップを定義する
<mark>テキストをハイライトして目立たせる
<nav>ナビゲーションであることを示す
<progress>タスク完了までの進行状況を示す
<q>引用されたインラインのテキスト(短文)を示す
<s>テキストに取り消し線を引いて表示する
<samp>プログラムなどの出力サンプルを示す
<section>ウェブページ内のその部分が、一つのセクションであることを示す
<small>テキストを、ひとまわり小さいサイズで表示する
<span>任意の範囲をインライン要素としてまとめる
<style><head>タグ内にスタイルシートを記述するための要素
<sub>下付き文字を示す
<summary><details>タグの内容の要約・キャプション・説明を表す
<sup>上付き文字を示す
<tfoot>表の行をグループ化する
<u>テキストを、下線付きで表示する
<var>プログラムコードの変数や引数を示す

サンプル一覧

カスタムHTMLを使用することで、オリジナリティのあるデザインを自由に作成することができます。
利用するにはHTMLの知識が必要になりますのでご注意ください。
以下にカスタムHTMLのサンプルをご紹介します。


カスタムHTMLサンプル(カテゴリ一覧)

<div id="customHtmlSample1" class="contents-assets cts-asset--component pt-5">
<h4 class="page-ttl">カスタムHTMLサンプル1</h4>
<div class="sample-cagetory-list">
<div class="sample-cagetory-list__head">
<h4 class="sample-cagetory-list__ttl">
  <span class="sample-cagetory-list__ttl--ja">人気のカテゴリ</span>
  <span class="sample-cagetory-list__ttl--en">Category</span>
</h4>
</div>
<div class="sample-cagetory-list__body">
<ul class="sample-cagetory-list__items">
<!-- 画像URLと遷移先URLは変更が必要となります。 -->
  <li class="sample-cagetory-list__item">
    <a href="#">
      <img src='../../../static/defaultShop/images/_dummy/product01.jpg' alt="カテゴリ1">
    </a>
  </li>
  <li class="sample-cagetory-list__item">
    <a href="#">
      <img src='../../../static/defaultShop/images/_dummy/product02.jpg' alt="カテゴリ2">
    </a>
  </li>
  <li class="sample-cagetory-list__item">
    <a href="#">
      <img src='../../../static/defaultShop/images/_dummy/product03.jpg' alt="カテゴリ3">
    </a>
  </li>
  <li class="sample-cagetory-list__item">
    <a href="#">
      <img src='../../../static/defaultShop/images/_dummy/product04.jpg' alt="カテゴリ4">
    </a>
  </li>
  <li class="sample-cagetory-list__item">
    <a href="#">
      <img src='../../../static/defaultShop/images/_dummy/product05.jpg' alt="カテゴリ5">
    </a>
  </li>
  <li class="sample-cagetory-list__item">
    <a href="#">
      <img src='../../../static/defaultShop/images/_dummy/product06.jpg' alt="カテゴリ6">
    </a>
  </li>
</ul>
</div>
<div class="sample-cagetory-list__foot">
<p class="sample-cagetory-list__more">
  <a href="#" class="sample-cagetory-list__more-btn">全商品一覧はこちら</a>
</p>
</div>
</div>
<!-- css // -->
<style>
/**
 * #customHtmlSample1
 */
.custom-section .sample-cagetory-list__ttl {
    position: relative;
    display: block;
    text-align: center;
    margin: 0;
}
.custom-section .sample-cagetory-list__ttl--ja {
    font-family: 'hannari','Noto Serif JP','游明朝体', 'Yu Mincho', YuMincho,'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN','HG明朝E','MS P明朝','MS 明朝',serif;
    font-size: 40px;
    display: inline-block;
    margin: 0;
    text-align: center;
    font-weight: 400;
    color: #111;
    position: relative;
}
.custom-section .sample-cagetory-list__ttl--ja::before,
.custom-section .sample-cagetory-list__ttl--ja::after {
    content: "";
    display: block;
    height: 1px;
    width: 165px;
    background: #111;
    position: absolute;
    top: 50%;
}
.custom-section .sample-cagetory-list__ttl--ja::before {
    right: 110%;
}
.custom-section .sample-cagetory-list__ttl--ja::after {
    left: 110%;
}
.custom-section .sample-cagetory-list__ttl--en {
    font-family: 'Noto Serif JP','游明朝体', 'Yu Mincho', YuMincho,'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN','HG明朝E','MS P明朝','MS 明朝',serif;
    font-size: 15px;
    display: block;
    text-align: center;
    color: #111;
    margin-top: 6px;
}
.custom-section .sample-cagetory-list__head + .sample-cagetory-list__body {
    margin-top: 60px;
}
.custom-section .sample-cagetory-list__items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1.5%;
}
.custom-section .sample-cagetory-list__item {
    width: 33.3333%;
    padding: 0 1.5%;
}
.custom-section .sample-cagetory-list__item:nth-child(n + 4) {
    margin-top: 1.5%;
}
.custom-section .sample-cagetory-list__item img {
    display: block;
    width: 100%;
}
.custom-section .sample-cagetory-list__body + .sample-cagetory-list__foot {
    margin-top: 60px;
}
.custom-section .sample-cagetory-list__more {
    text-align: center;
}
.custom-section .sample-cagetory-list__more-btn {
    border: 1px solid #111;
    border-radius: 2px;
    text-decoration: none;
    position: relative;
    display: block;/*
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2251.985%22%20height%3D%2219.354%22%20viewBox%3D%220%200%2051.985%2019.354%22%3E%20%3Cpath%20id%3D%22arrow_b%22%20d%3D%22M39.988%2C19.354l12-9.6L39.988%2C0V2.559l7.358%2C6.078H0v2.239H47.346L39.988%2C16.8Z%22%20fill%3D%22%23111%22%2F%3E%3C%2Fsvg%3E');*/
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2252%22%20height%3D%2220%22%20viewBox%3D%220%200%2051.99%2019.35%22%3E%3Ctitle%3Earrow_l%3C%2Ftitle%3E%3Cpath%20d%3D%22M40%2C19.35l12-9.6L40%2C0V2.56l7.36%2C6.08H0v2.24H47.35L40%2C16.8Z%22%20style%3D%22fill%3A%23111%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 94% center;
    font-family: 'Noto Serif JP','游明朝体', 'Yu Mincho', YuMincho,'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN','HG明朝E','MS P明朝','MS 明朝',serif;
    text-align: center;
    padding: 12px 10px 12px 0;
    width: 700px;
    max-width: 100%;
    font-size: 29px;
    margin: 0 auto;
    transition: all 0.3s;
    opacity: 1;
}
.custom-section .sample-cagetory-list__more-btn:hover {
    text-decoration: none;
    opacity: .6;
}
@media only screen and (max-width: 768px) {
    .custom-section .sample-cagetory-list__ttl--ja {
        font-size: 25px;
        letter-spacing: -0.02em;
    }
    .custom-section .sample-cagetory-list__ttl--ja::before,
    .custom-section .sample-cagetory-list__ttl--ja::after {
        width: 35px;
    }
    .custom-section .sample-cagetory-list__ttl--en {
        font-size: 10px;
        margin-top: 6px;
    }
    .custom-section .sample-cagetory-list__head + .sample-cagetory-list__body {
        margin-top: 40px;
    }
    .custom-section .sample-cagetory-list__items {
        margin: 0 -1%;
    }
    .custom-section .sample-cagetory-list__item {
        padding: 0 1%;
    }
    .custom-section .sample-cagetory-list__item:nth-child(n + 4) {
        margin-top: 1%;
    }
    .custom-section .sample-cagetory-list__body + .sample-cagetory-list__foot {
        margin-top: 30px;
    }
    .custom-section .sample-cagetory-list__more-btn {
        width: 80%;
        font-size: 16px;
        background-size: 15px;
    }
    .custom-section .sample-cagetory-list__more-btn::before {
        width: 20px;
        height: 20px;
        background-size: 20px;
    }
}
</style>

カスタムHTMLサンプル(ニュース)

<div class="custom-section">
<div class="sample-news-list">
<h4 class="sample-news-list__head">NEWS</h4>
<div class="sample-news-list__entry">
<!-- 画像URLと遷移先URLは変更が必要となります。 -->
<a href="#">
  <p class="sample-news-list__entry--img" style="background:url('https://placehold.jp/cccccc/ffffff/1280x700.png?text=img') center center; background-size:cover;"></p>
  <h5 class="sample-news-list__entry--ttl">記事タイトル記事タイトル記事タイトル記事タイトル</h5>
  <ul class="sample-news-list__entry--info">
    <li class="sample-news-list__entry--cate">NEWS</li>
    <li class="sample-news-list__entry--date">
      <span>2020.01.31</span>
    </li>
  </ul>
</a>
</div>
<div class="sample-news-list__entry">
<a href="#">
  <p class="sample-news-list__entry--img" style="background:url('https://placehold.jp/dddddd/ffffff/1280x700.png?text=img') center center; background-size:cover;"></p>
  <h5 class="sample-news-list__entry--ttl">記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル</h5>
  <ul class="sample-news-list__entry--info">
    <li class="sample-news-list__entry--cate">RELEASE</li>
    <li class="sample-news-list__entry--date">
      <span>2020.01.27</span>
    </li>
  </ul>
</a>
</div>
<div class="sample-news-list__entry">
<a href="#">
  <p class="sample-news-list__entry--img" style="background:url('https://placehold.jp/cccccc/ffffff/1280x700.png?text=img') center center; background-size:cover;"></p>
  <h5 class="sample-news-list__entry--ttl">記事タイトル記事タイトル</h5>
  <ul class="sample-news-list__entry--info">
    <li class="sample-news-list__entry--cate">RELEASE</li>
    <li class="sample-news-list__entry--date">
      <span>2020.01.23</span>
    </li>
  </ul>
</a>
</div>
<div class="sample-news-list__entry">
<a href="#">
  <p class="sample-news-list__entry--img" style="background:url('https://placehold.jp/dddddd/ffffff/1280x700.png?text=img') center center; background-size:cover;"></p>
  <h5 class="sample-news-list__entry--ttl">記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル</h5>
  <ul class="sample-news-list__entry--info">
    <li class="sample-news-list__entry--cate">RELEASE</li>
    <li class="sample-news-list__entry--date">
      <span>2020.01.17</span>
    </li>
  </ul>
</a>
</div>
<p class="sample-news-list__more">
  <a href="#">
    <span class="sample-news-list__more--txt">NEWS LIST</span>
    <span class="sample-news-list__more--arrow">
      <i></i>
    </span>
  </a>
</p>
</div>
</div>
<style>/** * #customHtmlSample2 */ .custom-section .sample-news-list { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; color: #000; } .custom-section .sample-news-list__head { width: 100%; font-family: Roboto,sans-serif; font-weight: 500; letter-spacing: .02em; font-weight: 100; letter-spacing: -.04em; line-height: .9; display: block; margin-bottom: 2.5vw; font-size: 50px; } .custom-section .sample-news-list__entry { width: 25%; position: relative; line-height: 1.8; letter-spacing: .01em; font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; } .custom-section .sample-news-list__entry a { height: 100%; display: block; background-color: #fff; transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-decoration: none; color: #000; } .custom-section .sample-news-list__entry a:hover { text-decoration: none; } .custom-section .sample-news-list__entry--img { width: 100%; height: 0; position: relative; overflow: hidden; padding-top: 56.25%; margin: 0; } .custom-section .sample-news-list__entry--ttl { display: block; padding: 22px 25px 12px; font-size: 13px; line-height: 1.8; } .custom-section .sample-news-list__entry--info { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; margin: 0 25px 25px; } .custom-section .sample-news-list__entry--info li { line-height: 1; margin-right: 2px; color: #999; font-family: Roboto, sans-serif; font-weight: 500; letter-spacing: .02em; } .custom-section .sample-news-list__entry--cate { border: 1px solid #ccc; border-radius: 3px; font-size: 10px; vertical-align: top; padding: 2px 2px 1px; } .custom-section .sample-news-list__entry--date { font-size: 12px; padding: 0 2px 2px; } .custom-section .sample-news-list__entry--date >* { display: inline-block; line-height: 1; vertical-align: top; } .custom-section .sample-news-list__more { width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; z-index: 20; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; } .custom-section .sample-news-list__more a { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; color: #000; text-decoration: none; } .custom-section .sample-news-list__more a:hover { text-decoration: underline; } .custom-section .sample-news-list__more--txt { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; font-family: Roboto, sans-serif; font-weight: 500; letter-spacing: .02em; font-size: 18px; margin-right: 20px; } .custom-section .sample-news-list__more--arrow { width: 48px; height: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; overflow: hidden; } .custom-section .sample-news-list__more--arrow i { width: 100%; top: 0; bottom: 0; right: 0; height: 1px; display: block; position: absolute; margin: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: matrix(1, 0, 0, 1, 0, 0); width: 48px; } .custom-section .sample-news-list__more--arrow i::before, .custom-section .sample-news-list__more--arrow i::after { content: ""; height: 1px; display: block; position: absolute; background-color: #000; box-sizing: content-box; } .custom-section .sample-news-list__more--arrow i::before { width: 100%; bottom: 0; left: 0; } .custom-section .sample-news-list__more--arrow i:after { width: 10px; bottom: 3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); right: -.5px; border-top: 1px solid #fff; } @media (max-width: 768px) { .custom-section .sample-news-list { margin: 0 -20px; width: unset; } .custom-section .sample-news-list__head { margin-bottom: 6.8vw; padding: 0 6.66667vw; font-size: 12vw; text-indent: -.09em; } .custom-section .sample-news-list__entry { width: 50%; margin-bottom: 56px; } .custom-section .sample-news-list__entry--img { margin-bottom: 20px; } .custom-section .sample-news-list__entry--ttl { overflow: hidden; padding: 0 6.66667vw; line-height: 1.6; font-size: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .custom-section .sample-news-list__entry--info { margin: 15px 6.66667vw 0; } .custom-section .sample-news-list__entry--cate { font-size: 8px; } .custom-section .sample-news-list__entry--date { font-size: 10px; } .custom-section .sample-news-list__more a { padding: 0 6.66667vw; } .custom-section .sample-news-list__more--txt { font-size: 14px; margin-right: 10px; } .custom-section .sample-news-list__more--arrow { width: 39px; } } @media screen and (min-width: 769px) { .custom-section .sample-news-list__entry:hover { z-index: 15; } .custom-section .sample-news-list__entry:hover a { box-shadow: 12px 21px 36px 0 rgba(0,0,0,0.15); -webkit-transform: translate3d(0, -15px, 1px); transform: translate3d(0, -15px, 1px); } .custom-section .sample-news-list__more a { height: 72px; padding: 0 48.8px; } }

カスタムHTMLサンプル(新着情報)

<div class="news">
  <h2 class="title-primary title-primary--mb-md">新着情報</h2>
  <ol class="news__list">
  <!-- 遷移先URLは変更が必要となります。 -->
    <li class="news__item">
      <a href="#" class="news__link">
        <h5 class="news__ttl">新着情報のタイトルや見出しがこちらに入ります。新着情報のタイトルや見出しがこちらに入ります。</h5>
        <p class="news__txt">テキストが入ります。それも将来とにかくその尊重らというもののテキストが入ります。それも将来とにかくその尊重らというもののそれも将来とにかくその尊重らというもののテキストが入ります。それも将来とにかくその尊重らというものの…</p>
      </a>
    </li>
    <li class="news__item">
      <a href="#" class="news__link">
        <h5 class="news__ttl">新着情報のタイトルや見出しがこちらに入ります。新着情報のタイトルや見出しがこちらに入ります。</h5>
        <p class="news__txt">テキストが入ります。それも将来とにかくその尊重らというもののテキストが入ります。それも将来とにかくその尊重らというもののそれも将来とにかくその尊重らというもののテキストが入ります。それも将来とにかくその尊重らというものの…</p>
      </a>
    </li>
    <li class="news__item">
      <a href="#" class="news__link">
        <h5 class="news__ttl">新着情報のタイトルや見出しがこちらに入ります。新着情報のタイトルや見出しがこちらに入ります。</h5>
        <p class="news__txt">テキストが入ります。それも将来とにかくその尊重らというもののテキストが入ります。それも将来とにかくその尊重らというもののそれも将来とにかくその尊重らというもののテキストが入ります。それも将来とにかくその尊重らというものの…</p>
      </a>
    </li>
  </ol>
</div>
<style>
.title-primary {
    font-size: 20px;
    letter-spacing: .2em;
    margin-bottom: 1em;
}
.title-primary--mb-md {
    margin-bottom: 1.5em;
}
</style>