Chapter 6

メディア

ユーザーを考えた設計で満足な体験を

提供するサービスやペルソナによって、webサイトの設計は異なります。サービスやペルソナに合わせた設計を行うことにより、訪問者にストレスのないよりよい体験を生み出し、満足を高めることとなります。
わたしたちはお客さまのサイトに合ったユーザビリティを考えるため、分析やヒアリングをきめ細かく実施、満足を体験できるクリエイティブとテクノロジーを設計・構築し、今までにない期待を超えたユーザー体験を提供いたします。

<div class="media">
  <figure class="media__img-wrapper">
    <img class="media__img" alt="写真：手に持たれたスマホ" src="/assets/img/elements/persona.jpg">
  </figure>
  <div class="media__body">
    <h3 class="media__title">
      ユーザーを考えた設計で満足な体験を
    </h3>
    <p class="media__text">
      提供するサービスやペルソナによって、webサイトの設計は異なります。サービスやペルソナに合わせた設計を行うことにより、訪問者にストレスのないよりよい体験を生み出し、満足を高めることとなります。<br>
      わたしたちはお客さまのサイトに合ったユーザビリティを考えるため、分析やヒアリングをきめ細かく実施、満足を体験できるクリエイティブとテクノロジーを設計・構築し、今までにない期待を超えたユーザー体験を提供いたします。
    </p>
  </div>
  <!-- /.media__body -->
</div>
<!-- /.media -->

.media {
  display: flex;
  align-items: center;
}

.media__img-wrapper {
  flex: 0 1 27.58333%;
  margin-right: 3.33333%;
}

.media__img {
  width: 100%;
}

.media__body {
  flex: 1;
}

.media__body > *:last-child {
  margin-bottom: 0;
}

.media__title {
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: bold;
}

.media__text {
  /* css-wipeではスタイリングなし */
}

@media screen and (max-width: 768px) {
  .media {
    display: block;
  }

  .media__img-wrapper {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

拡張パターン：逆位置

ユーザーを考えた設計で満足な体験を

提供するサービスやペルソナによって、webサイトの設計は異なります。サービスやペルソナに合わせた設計を行うことにより、訪問者にストレスのないよりよい体験を生み出し、満足を高めることとなります。
わたしたちはお客さまのサイトに合ったユーザビリティを考えるため、分析やヒアリングをきめ細かく実施、満足を体験できるクリエイティブとテクノロジーを設計・構築し、今までにない期待を超えたユーザー体験を提供いたします。

<div class="media media--reverse">
  <figure class="media__img-wrapper">
    <img class="media__img" alt="写真：手に持たれたスマホ" src="/assets/img/elements/persona.jpg">
  </figure>
  <div class="media__body">
    <h3 class="media__title">
      ユーザーを考えた設計で満足な体験を
    </h3>
    <p class="media__text">
      提供するサービスやペルソナによって、webサイトの設計は異なります。サービスやペルソナに合わせた設計を行うことにより、訪問者にストレスのないよりよい体験を生み出し、満足を高めることとなります。<br>
      わたしたちはお客さまのサイトに合ったユーザビリティを考えるため、分析やヒアリングをきめ細かく実施、満足を体験できるクリエイティブとテクノロジーを設計・構築し、今までにない期待を超えたユーザー体験を提供いたします。
    </p>
  </div>
  <!-- /.media__body -->
</div>
<!-- /.media media--reverse -->

.media--reverse {
  flex-direction: row-reverse;
}

.media--reverse .media__img-wrapper {
  margin-right: 0;
}

.media--reverse .media__body {
  margin-right: 3.33333%;
  text-align: right;
}

@media screen and (max-width: 768px) {
  .media--reverse .media__body {
    margin-right: 0;
  }
}

バリエーション：画像半分サイズ

ユーザーを考えた設計で満足な体験を

提供するサービスやペルソナによって、webサイトの設計は異なります。サービスやペルソナに合わせた設計を行うことにより、訪問者にストレスのないよりよい体験を生み出し、満足を高めることとなります。
わたしたちはお客さまのサイトに合ったユーザビリティを考えるため、分析やヒアリングをきめ細かく実施、満足を体験できるクリエイティブとテクノロジーを設計・構築し、今までにない期待を超えたユーザー体験を提供いたします。

<div class="half-media">
  <figure class="half-media__img-wrapper">
    <img class="half-media__img" alt="写真：手に持たれたスマホ" src="/assets/img/elements/persona.jpg">
  </figure>
  <div class="half-media__body">
    <h3 class="half-media__title">
      ユーザーを考えた設計で満足な体験を
    </h3>
    <p class="half-media__text">
      提供するサービスやペルソナによって、webサイトの設計は異なります。サービスやペルソナに合わせた設計を行うことにより、訪問者にストレスのないよりよい体験を生み出し、満足を高めることとなります。<br>
      わたしたちはお客さまのサイトに合ったユーザビリティを考えるため、分析やヒアリングをきめ細かく実施、満足を体験できるクリエイティブとテクノロジーを設計・構築し、今までにない期待を超えたユーザー体験を提供いたします。
    </p>
  </div>
  <!-- /.half-media__body -->
</div>
<!-- /.half-media -->

.half-media {
  display: flex;
  align-items: center;
}

.half-media__img-wrapper {
  flex: 0 1 48.33333%;
  margin-right: 3.33333%;
}

.half-media__img {
  width: 100%;
}

.half-media__body {
  flex: 1;
}

.half-media__body > *:last-child {
  margin-bottom: 0;
}

.half-media__title {
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: bold;
}

.half-media__text {
  /* css-wipeではスタイリングなし */
}

@media screen and (max-width: 768px) {
  .half-media {
    display: block;
  }

  .half-media__img-wrapper {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

カード

webサイト制作

ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。

<div class="card">
  <figure class="card__img-wrapper">
    <img class="card__img" alt="写真：HTMLコードが写っている画面" src="/assets/img/elements/code.jpg">
  </figure>
  <div class="card__body">
    <h3 class="card__title">
      webサイト制作
    </h3>
    <p class="card__text">
      ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。
    </p>
  </div>
  <!-- /.card__body -->
</div>
<!-- /.card -->

.card {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.card__img-wrapper {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
}

.card__img {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.card__body {
  padding: 15px;
}

.card__body > *:last-child {
  margin-bottom: 0;
}

.card__title {
  margin-bottom: 5px;
  font-size: 1.125rem;
  font-weight: bold;
}

.card__text {
  color: #777;
}

拡張パターン：バッジ付き

New

webサイト制作

ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。

<div class="card">
  <b class="card__badge">
    <span class="card__badge-text">New</span>
  </b>
  <figure class="card__img-wrapper">
    <img class="card__img" alt="写真：HTMLコードが写っている画面" src="/assets/img/elements/code.jpg">
  </figure>
  <div class="card__body">
    <h3 class="card__title">
      webサイト制作
    </h3>
    <p class="card__text">
      ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。
    </p>
  </div>
  <!-- /.card__body -->
</div>
<!-- /.card -->

.card__badge {
  position: relative;
}

.card__badge::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-width: 3.75rem 3.75rem 0 0;
  border-style: solid;
  border-color: #e25c00 transparent transparent transparent;
}

.card__badge-text {
  position: absolute;
  z-index: 2;
  top: .5rem;
  left: .3125rem;
  color: #fff;
  font-size: .875rem;
  font-weight: bold;
  transform: rotate(-45deg);
}

拡張パターン：リンク

webサイト制作

ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。

<a class="card card--link" href="#">
  <figure class="card__img-wrapper">
    <img class="card__img" alt="写真：HTMLコードが写っている画面" src="/assets/img/elements/code.jpg">
  </figure>
  <div class="card__body">
    <h3 class="card__title">
      webサイト制作
    </h3>
    <p class="card__text">
      ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。
    </p>
  </div>
  <!-- /.card__body -->
</a>

.card--link {
  display: block;
  color: currentColor;
  text-decoration: none;
  transition: .25s;
}

.card--link .card__title,
.card--link .card__text {
  transition: .25s;
}

.card--link:focus,
.card--link:hover {
  opacity: .75;
}

.card--link:focus .card__title,
.card--link:focus .card__text,
.card--link:hover .card__title,
.card--link:hover .card__text {
  color: #e25c00;
  text-decoration: underline;
}

拡張パターン：3カラム

※右端の要素のmargin-rightの打ち消しにnth-of-typeを使用していますが、カラム内の各カードに要素が混在する場合（divとaが混在しているなど）、打ち消しが意図どおりに適用されません。書籍及び下記サンプルコードではnth-of-typeとなっていますが、nth-childへの書き換えを推奨します（続く4カラムも同様）。

webサイト制作

ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。

デジタルマーケティング支援

自社のマーケティングを支える最適なデジタルマーケティングツールの導入をサポートします。

解析・レポーティング

ユーザー行動を分析し、より良いサイトを作り上げるためのアイデアをご提案します。

<div class="cards cards--col3">
  <div class="cards__item card">
    <figure class="card__img-wrapper">
      <img class="card__img" alt="写真：HTMLコードが写っている画面" src="/assets/img/elements/code.jpg">
    </figure>
    <div class="card__body">
      <h3 class="card__title">
        webサイト制作
      </h3>
      <p class="card__text">
        ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。
      </p>
    </div>
    <!-- /.card__body -->
  </div>
  <!-- /.cards__item card -->
  <div class="cards__item card">
    <figure class="card__img-wrapper">
      <img class="card__img" alt="写真：SNSアイコンが写っている画面" src="/assets/img/elements/marketing.jpg">
    </figure>
    <div class="card__body">
      <h3 class="card__title">
        デジタルマーケティング支援
      </h3>
      <p class="card__text">
        自社のマーケティングを支える最適なデジタルマーケティングツールの導入をサポートします。
      </p>
    </div>
    <!-- /.card__body -->
  </div>
  <!-- /.cards__item card -->
  <div class="cards__item card">
    <figure class="card__img-wrapper">
      <img class="card__img" alt="写真：解析レポート" src="/assets/img/elements/analysis.jpg">
    </figure>
    <div class="card__body">
      <h3 class="card__title">
        解析・レポーティング
      </h3>
      <p class="card__text">
        ユーザー行動を分析し、より良いサイトを作り上げるためのアイデアをご提案します。
      </p>
    </div>
    <!-- /.card__body -->
  </div>
  <!-- /.cards__item card -->
</div>
<!-- /.cards cards--col3 -->

.cards {
  display: flex;
  flex-wrap: wrap;
}

.cards--col3 {
  margin-bottom: -30px;
}

.cards--col3 > .cards__item {
  width: 31.707%;
  margin-right: 2.43902%;
  margin-bottom: 30px;
}

.cards--col3 > .cards__item:nth-of-type(3n) {
  margin-right: 0;
}

@media screen and (max-width: 768px) {
  .cards--col3 {
    margin-bottom: -20px;
  }

  .cards > .cards__item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
}

拡張パターン：4カラム

webサイト制作

ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。

デジタルマーケティング支援

自社のマーケティングを支える最適なデジタルマーケティングツールの導入をサポートします。

解析・レポーティング

ユーザー行動を分析し、より良いサイトを作り上げるためのアイデアをご提案します。

多言語webサイト構築

グローバル視点での戦略から、構築まで一貫してサポートします。

<div class="cards cards--col4">
  <div class="cards__item card">
    <figure class="card__img-wrapper">
      <img class="card__img" alt="写真：HTMLコードが写っている画面" src="/assets/img/elements/code.jpg">
    </figure>
    <div class="card__body">
      <h3 class="card__title">
        webサイト制作
      </h3>
      <p class="card__text">
        ユーザーにベストな体験を提供するクリエイティブとテクノロジーを作り上げます。
      </p>
    </div>
    <!-- /.card__body -->
  </div>
  <!-- /.cards__item card -->
  <div class="cards__item card">
    <figure class="card__img-wrapper">
      <img class="card__img" alt="写真：SNSアイコンが写っている画面" src="/assets/img/elements/marketing.jpg">
    </figure>
    <div class="card__body">
      <h3 class="card__title">
        デジタルマーケティング支援
      </h3>
      <p class="card__text">
        自社のマーケティングを支える最適なデジタルマーケティングツールの導入をサポートします。
      </p>
    </div>
    <!-- /.card__body -->
  </div>
  <!-- /.cards__item card -->
  <div class="cards__item card">
    <figure class="card__img-wrapper">
      <img class="card__img" alt="写真：解析レポート" src="/assets/img/elements/analysis.jpg">
    </figure>
    <div class="card__body">
      <h3 class="card__title">
        解析・レポーティング
      </h3>
      <p class="card__text">
        ユーザー行動を分析し、より良いサイトを作り上げるためのアイデアをご提案します。
      </p>
    </div>
    <!-- /.card__body -->
  </div>
  <!-- /.cards__item card -->
  <div class="cards__item card">
    <figure class="card__img-wrapper">
      <img class="card__img" alt="写真：都会の夜景" src="/assets/img/elements/global.jpg">
    </figure>
    <div class="card__body">
      <h3 class="card__title">
        多言語webサイト構築
      </h3>
      <p class="card__text">
        グローバル視点での戦略から、構築まで一貫してサポートします。
      </p>
    </div>
    <!-- /.card__body -->
  </div>
  <!-- /.cards__item card -->
</div>
<!-- /.cards cards--col4 -->

.cards--col4 {
  margin-bottom: -20px;
}

.cards--col4 > .cards__item {
  width:  23.78%;
  margin-right: 1.62602%;
  margin-bottom: 20px;
}

.cards--col4 > .cards__item:nth-of-type(4n) {
  margin-right: 0;
}

テーブル（水平）

名前	半田 惇志
所属	株式会社24-7／株式会社パンセ
職種	テクニカルディレクター／シニアエンジニア
得意分野	CSS設計、HubSpot CMS

<div class="horizontal-table">
  <table class="horizontal-table__inner">
    <tbody class="horizontal-table__body">
      <tr class="horizontal-table__row">
        <th class="horizontal-table__header">名前</th>
        <td class="horizontal-table__text">半田 惇志</td>
      </tr>
      <tr class="horizontal-table__row">
        <th class="horizontal-table__header">所属</th>
        <td class="horizontal-table__text">株式会社24-7／株式会社パンセ</td>
      </tr>
      <tr class="horizontal-table__row">
        <th class="horizontal-table__header">職種</th>
        <td class="horizontal-table__text">テクニカルディレクター／シニアエンジニア</td>
      </tr>
      <tr class="horizontal-table__row">
        <th class="horizontal-table__header">得意分野</th>
        <td class="horizontal-table__text">CSS設計、HubSpot CMS</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /.horizontal-table -->

.horizontal-table {
  border: 1px solid #ddd;
}

.horizontal-table__inner {
  width: 100%;
}

.horizontal-table__header {
  width: 20%;
  padding: 15px;
  background-color: #efefef;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  vertical-align: middle;
}

.horizontal-table__text {
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

.horizontal-table__row:last-child .horizontal-table__header,
.horizontal-table__row:last-child .horizontal-table__text {
  border-bottom-width: 0;
}

拡張パターン：メディアクエリ時のスクロール

名前	半田 惇志
所属	株式会社24-7／株式会社パンセ
職種	テクニカルディレクター／シニアエンジニア
得意分野	CSS設計、HubSpot CMS

<div class="horizontal-table horizontal-table--md-scroll">
  <table class="horizontal-table__inner">
    <tbody class="horizontal-table__body">
      <tr class="horizontal-table__row">
        <th class="horizontal-table__header">名前</th>
        <td class="horizontal-table__text">半田 惇志</td>
      </tr>
      <tr class="horizontal-table__row">
        <th class="horizontal-table__header">所属</th>
        <td class="horizontal-table__text">株式会社24-7／株式会社パンセ</td>
      </tr>
      <tr class="horizontal-table__row">
        <th class="horizontal-table__header">職種</th>
        <td class="horizontal-table__text">テクニカルディレクター／シニアエンジニア</td>
      </tr>
      <tr class="horizontal-table__row">
        <th class="horizontal-table__header">得意分野</th>
        <td class="horizontal-table__text">CSS設計、HubSpot CMS</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /.horizontal-table horizontal-table--md-scroll -->

@media screen and (max-width: 768px) {
  .horizontal-table--md-scroll {
    border-right-width: 0;
    overflow-x: auto;
  }

  .horizontal-table--md-scroll .horizontal-table__header,
.horizontal-table--md-scroll .horizontal-table__text {
    white-space: nowrap;
  }

  .horizontal-table--md-scroll .horizontal-table__text {
    border-right: 1px solid #ddd;
  }
}

テーブル（垂直）

名前	所属	職種	得意分野
半田 惇志	株式会社24-7／株式会社パンセ	テクニカルディレクター／シニアエンジニア	CSS設計、HubSpot CMS
長澤 賢	株式会社パンセ	エンジニア	Vue.js/Nuxt.js
海老江 優太	株式会社パンセ	エンジニア	Adobe XD

<div class="vertical-table">
  <table class="vertical-table__inner">
    <thead class="vertical-table__headers">
      <tr class="vertical-table__header-row">
        <th class="vertical-table__header">名前</th>
        <th class="vertical-table__header">所属</th>
        <th class="vertical-table__header">職種</th>
        <th class="vertical-table__header">得意分野</th>
      </tr>
    </thead>
    <tbody class="vertical-table__body">
      <tr class="vertical-table__body-row">
        <td class="vertical-table__text">半田 惇志</td>
        <td class="vertical-table__text">株式会社24-7／株式会社パンセ</td>
        <td class="vertical-table__text">テクニカルディレクター／シニアエンジニア</td>
        <td class="vertical-table__text">CSS設計、HubSpot CMS</td>
      </tr>
      <tr class="vertical-table__body-row">
        <td class="vertical-table__text">長澤 賢</td>
        <td class="vertical-table__text">株式会社パンセ</td>
        <td class="vertical-table__text">エンジニア</td>
        <td class="vertical-table__text">Vue.js/Nuxt.js</td>
      </tr>
      <tr class="vertical-table__body-row">
        <td class="vertical-table__text">海老江 優太</td>
        <td class="vertical-table__text">株式会社パンセ</td>
        <td class="vertical-table__text">エンジニア</td>
        <td class="vertical-table__text">Adobe XD</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /.vertical-table -->

.vertical-table {
  border: 1px solid #ddd;
}

.vertical-table__inner {
  width: 100%;
  text-align: center;
  table-layout: fixed;
}

.vertical-table__header-row {
  background-color: #efefef;
}

.vertical-table__header {
  padding: 15px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  vertical-align: middle;
}

.vertical-table__text {
  padding: 15px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

.vertical-table__header:last-child,
.vertical-table__text:last-child {
  border-right-width: 0;
}

.vertical-table__body-row:last-child .vertical-table__text {
  border-bottom-width: 0;
}

@media screen and (max-width: 768px) {
  .vertical-table {
    border-right-width: 0;
    overflow-x: auto;
  }

  .vertical-table__inner {
    width: auto;
    min-width: 100%;
  }

  .vertical-table__header,
.vertical-table__text {
    white-space: nowrap;
  }

  .vertical-table__header:last-child,
.vertical-table__text:last-child {
    border-right-width: 1px;
  }
}

テーブル（交差）

名前	所属	職種	得意分野
半田 惇志	株式会社24-7／株式会社パンセ	テクニカルディレクター／シニアエンジニア	CSS設計、HubSpot CMS
長澤 賢	株式会社パンセ	エンジニア	Vue.js/Nuxt.js
海老江 優太	株式会社パンセ	エンジニア	Adobe XD

<div class="cross-table">
  <table class="cross-table__inner">
    <thead class="cross-table__headers">
      <tr class="cross-table__header-row">
        <th class="cross-table__header cross-table__header--md-sticky">名前</th>
        <th class="cross-table__header">所属</th>
        <th class="cross-table__header">職種</th>
        <th class="cross-table__header">得意分野</th>
      </tr>
    </thead>
    <tbody class="cross-table__body">
      <tr class="cross-table__body-row">
        <th class="cross-table__header cross-table__header--md-sticky">半田 惇志</th>
        <td class="cross-table__text">株式会社24-7／株式会社パンセ</td>
        <td class="cross-table__text">テクニカルディレクター／シニアエンジニア</td>
        <td class="cross-table__text">CSS設計、HubSpot CMS</td>
      </tr>
      <tr class="cross-table__body-row">
        <th class="cross-table__header cross-table__header--md-sticky">長澤 賢</th>
        <td class="cross-table__text">株式会社パンセ</td>
        <td class="cross-table__text">エンジニア</td>
        <td class="cross-table__text">Vue.js/Nuxt.js</td>
      </tr>
      <tr class="cross-table__body-row">
        <th class="cross-table__header cross-table__header--md-sticky">海老江 優太</th>
        <td class="cross-table__text">株式会社パンセ</td>
        <td class="cross-table__text">エンジニア</td>
        <td class="cross-table__text">Adobe XD</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /.cross-table -->

.cross-table {
  border: 1px solid #ddd;
}

.cross-table__inner {
  width: 100%;
  text-align: center;
  table-layout: fixed;
}

.cross-table__header {
  padding: 15px;
  background-color: #efefef;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  vertical-align: middle;
}

.cross-table__text {
  padding: 15px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

.cross-table__header:last-child,
.cross-table__text:last-child {
  border-right-width: 0;
}

.cross-table__body-row:last-child .cross-table__header,
.cross-table__body-row:last-child .cross-table__text {
  border-bottom-width: 0;
}

@media screen and (max-width: 768px) {
  .cross-table {
    border-right-width: 0;
    overflow-x: auto;
  }

  .cross-table__inner {
    width: auto;
    min-width: 100%;
  }

  .cross-table__header,
.cross-table__text {
    white-space: nowrap;
  }

  .cross-table__header:last-child,
.cross-table__text:last-child {
    border-right-width: 1px;
  }

  .cross-table__header--md-sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
  }
}

ページャー

<nav class="pager">
  <ul class="pager__inner">
    <li class="pager__item">
      <a class="pager__link" href="#"><i class="fas fa-angle-double-left"></i></a>
    </li>
    <li class="pager__item">
      <a class="pager__link" href="#"><i class="fas fa-angle-left"></i></a>
    </li>
    <li class="pager__item">
      <span class="pager__link pager__link--active">1</span>
    </li>
    <li class="pager__item">
      <a class="pager__link" href="#">2</a>
    </li>
    <li class="pager__item">
      <a class="pager__link" href="#">3</a>
    </li>
    <li class="pager__item">
      <a class="pager__link" href="#"><i class="fas fa-angle-right"></i></a>
    </li>
    <li class="pager__item">
      <a class="pager__link" href="#"><i class="fas fa-angle-double-right"></i></a>
    </li>
  </ul>
</nav>

.pager {
  display: flex;
  overflow-x: auto;
}

.pager__inner {
  display: flex;
  margin-right: auto;
  margin-left: auto;
}

.pager__inner > *:last-child {
  margin-right: 0;
}

.pager__item {
  margin-right: 15px;
}

.pager__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  color: #e25c00;
  text-decoration: none;
  transition: .25s;
}

.pager__link:focus,
.pager__link:hover {
  background-color: #e25c00;
  color: #fff;
  opacity: .75;
}

.pager__link--active {
  background-color: #e25c00;
  color: #fff;
  pointer-events: none;
}

タブナビゲーション

<nav class="tab-navigation">
  <ul class="tab-navigation__inner">
    <li class="tab-navigation__item">
      <span class="tab-navigation__link tab-navigation__link--active">契約・手続きについて</span>
    </li>
    <li class="tab-navigation__item">
      <a class="tab-navigation__link" href="#">製品について</a>
    </li>
    <li class="tab-navigation__item">
      <a class="tab-navigation__link" href="#">キャンペーンについて</a>
    </li>
    <li class="tab-navigation__item">
      <a class="tab-navigation__link" href="#">会員機能について</a>
    </li>
    <li class="tab-navigation__item">
      <a class="tab-navigation__link" href="#">各種お手続きについて</a>
    </li>
  </ul>
</nav>

.tab-navigation__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: -10px;
}

.tab-navigation__link {
  display: inline-block;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  margin-bottom: 10px;
  border-bottom: 4px solid #efefef;
  color: #777;
  text-decoration: none;
  transition: .25s;
}

.tab-navigation__link:focus,
.tab-navigation__link:hover {
  border-bottom-color: currentColor;
  color: #e25c00;
  opacity: .75;
}

.tab-navigation__link--active {
  border-bottom-color: currentColor;
  color: #e25c00;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .tab-navigation {
    overflow-x: auto;
  }

  .tab-navigation__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 0;
    white-space: nowrap;
  }
}

CTAエリア

お気軽にお問い合わせください

弊社のサービスや製品のことで気になることがございましたら、お気軽にお問い合わせください
→問い合わせする

<div class="cta-area">
  <h2 class="cta-area__title">
    お気軽にお問い合わせください
  </h2>
  <p class="cta-area__text">
    弊社のサービスや製品のことで気になることがございましたら、お気軽にお問い合わせください<br>
    <a href="#">→問い合わせする</a>
  </p>
</div>
<!-- /.cta-area -->

.cta-area {
  padding: 30px;
  background-color: rgba(221, 116, 44, .05);
  border: 1px solid #e25c00;
  text-align: center;
}

.cta-area > *:last-child {
  margin-bottom: 0;
}

.cta-area__title {
  padding-bottom: 10px;
  margin-top: -6px;
  margin-bottom: 40px;
  border-bottom: 1px solid currentColor;
  color: #e25c00;
  font-size: 1.5rem;
  font-weight: bold;
}

料金表

• STARTER

  6,000 円/月

  初めてインバウンドマーケティングを行う企業向けのスタートアッププラン

  費用に含まれるコンタクト数

  1,000件

  月間サイト訪問者数

  3,000

  月間Eメール送信数上限

  最大コンタクト数の5倍

• PRO

  96,000 円/月

  マーケティング担当者の欲しい機能が網羅されたおすすめプラン

  費用に含まれるコンタクト数

  1,000件

  月間サイト訪問者数

  無制限

  月間Eメール送信数上限

  最大コンタクト数の10倍

• ENTERPRISE

  384,000 円/月

  マーケティングチームでインバウンドマーケティングを行える高機能プラン

  費用に含まれるコンタクト数

  10,000件

  月間サイト訪問者数

  無制限

  月間Eメール送信数上限

  最大コンタクト数の10倍

<ul class="price-boxes">
  <li class="price-boxes__item price-box">
    <div class="price-box__header">
      <p class="price-box__title">
        STARTER
      </p>
      <p class="price-box__price">
        6,000 
        <span class="price-box__price-unit">円/月</span>
      </p>
    </div>
    <!-- /.price-box__header -->
    <div class="price-box__body">
      <p class="price-box__lead">
        初めてインバウンドマーケティングを行う企業向けのスタートアッププラン
      </p>
      <dl class="price-box__features">
        <dt class="price-box__features-header">
          費用に含まれるコンタクト数
        </dt>
        <dd class="price-box__features-text">
          1,000件
        </dd>
        <dt class="price-box__features-header">
          月間サイト訪問者数
        </dt>
        <dd class="price-box__features-text">
          3,000
        </dd>
        <dt class="price-box__features-header">
          月間Eメール送信数上限
        </dt>
        <dd class="price-box__features-text">
          最大コンタクト数の5倍
        </dd>
      </dl>
    </div>
    <!-- /.price-box__body -->
  </li>
  <li class="price-boxes__item price-box">
    <div class="price-box__header">
      <p class="price-box__title">
        PRO
      </p>
      <p class="price-box__price">
        96,000 
        <span class="price-box__price-unit">円/月</span>
      </p>
    </div>
    <!-- /.price-box__header -->
    <div class="price-box__body">
      <p class="price-box__lead">
        マーケティング担当者の欲しい機能が網羅されたおすすめプラン
      </p>
      <dl class="price-box__features">
        <dt class="price-box__features-header">
          費用に含まれるコンタクト数
        </dt>
        <dd class="price-box__features-text">
          1,000件
        </dd>
        <dt class="price-box__features-header">
          月間サイト訪問者数
        </dt>
        <dd class="price-box__features-text">
          無制限
        </dd>
        <dt class="price-box__features-header">
          月間Eメール送信数上限
        </dt>
        <dd class="price-box__features-text">
          最大コンタクト数の10倍
        </dd>
      </dl>
    </div>
    <!-- /.price-box__body -->
  </li>
  <li class="price-boxes__item price-box">
    <div class="price-box__header">
      <p class="price-box__title">
        ENTERPRISE
      </p>
      <p class="price-box__price">
        384,000 
        <span class="price-box__price-unit">円/月</span>
      </p>
    </div>
    <!-- /.price-box__header -->
    <div class="price-box__body">
      <p class="price-box__lead">
        マーケティングチームでインバウンドマーケティングを行える高機能プラン
      </p>
      <dl class="price-box__features">
        <dt class="price-box__features-header">
          費用に含まれるコンタクト数
        </dt>
        <dd class="price-box__features-text">
          10,000件
        </dd>
        <dt class="price-box__features-header">
          月間サイト訪問者数
        </dt>
        <dd class="price-box__features-text">
          無制限
        </dd>
        <dt class="price-box__features-header">
          月間Eメール送信数上限
        </dt>
        <dd class="price-box__features-text">
          最大コンタクト数の10倍
        </dd>
      </dl>
    </div>
    <!-- /.price-box__body -->
  </li>
</ul>

.price-boxes {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.price-boxes__item {
  flex: 1;
  margin-right: 2.43902%;
}

.price-boxes__item:last-child {
  margin-right: 0;
}

@media screen and (max-width: 768px) {
  .price-boxes {
    display: block;
  }

  .price-boxes__item {
    margin-right: 0;
    margin-bottom: 30px;
  }

  .price-boxes__item:last-child {
    margin-bottom: 0;
  }
}

.price-box {
  border: 1px solid #ddd;
}

.price-box__header {
  padding: 10px;
  background-color: #e25c00;
  color: #fff;
  text-align: center;
}

.price-box__title {
  font-size: 1.125rem;
}

.price-box__price {
  font-size: 1.875rem;
}

.price-box__price-unit {
  font-size: 1rem;
}

.price-box__body {
  padding: 15px;
}

.price-box__body > *:last-child {
  margin-bottom: 0;
}

.price-box__lead {
  margin-bottom: 20px;
}

.price-box__features {
  text-align: center;
}

.price-box__features > *:last-child {
  margin-bottom: 0;
}

.price-box__features-header {
  padding: 5px;
  margin-bottom: 10px;
  background-color: #efefef;
}

.price-box__features-text {
  margin-bottom: 20px;
}

バリエーション：料金表テーブル

	STARTER 6,000 円/月	PRO 96,000 円/月	ENTERPRISE 384,000 円/月
費用に含まれる コンタクト数	1,000件	1,000件	10,000件
月間サイト 訪問者数	3,000	無制限	無制限
月間Eメール 送信数上限	最大コンタクト数の5倍	最大コンタクト数の10倍	最大コンタクト数の10倍

<div class="price-table">
  <table class="price-table__inner">
    <thead class="price-table__headers">
      <tr class="price-table__header-row">
        <th>&nbsp;</th>
        <th class="price-table__header">
          <p class="price-table__header-title">
            STARTER
          </p>
          <p class="price-table__price">
            6,000 
            <span class="price-table__price-unit">円/月</span>
          </p>
        </th>
        <th class="price-table__header">
          <p class="price-table__header-title">
            PRO
          </p>
          <p class="price-table__price">
            96,000 
            <span class="price-table__price-unit">円/月</span>
          </p>
        </th>
        <th class="price-table__header">
          <p class="price-table__header-title">
            ENTERPRISE
          </p>
          <p class="price-table__price">
            384,000 
            <span class="price-table__price-unit">円/月</span>
          </p>
        </th>
      </tr>
    </thead>
    <tbody class="price-table__body">
      <tr class="price-table__body-row">
        <th class="price-table__body-title">費用に含まれる<br class="only-md">コンタクト数</th>
        <td class="price-table__body-text">1,000件</td>
        <td class="price-table__body-text">1,000件</td>
        <td class="price-table__body-text">10,000件</td>
      </tr>
      <tr class="price-table__body-row">
        <th class="price-table__body-title">月間サイト<br class="only-md">訪問者数</th>
        <td class="price-table__body-text">3,000</td>
        <td class="price-table__body-text">無制限</td>
        <td class="price-table__body-text">無制限</td>
      </tr>
      <tr class="price-table__body-row">
        <th class="price-table__body-title">月間Eメール<br class="only-md">送信数上限</th>
        <td class="price-table__body-text">最大コンタクト数の5倍</td>
        <td class="price-table__body-text">最大コンタクト数の10倍</td>
        <td class="price-table__body-text">最大コンタクト数の10倍</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /.price-table -->

.only-md {
  display: none;
}

@media screen and (max-width: 768px) {
  .only-md {
    display: block;
  }
}

.price-table__inner {
  width: 100%;
  table-layout: fixed;
}

.price-table__header {
  padding: 10px;
  background-color: #e25c00;
  border-right: 1px solid currentColor;
  color: #fff;
  text-align: center;
}

.price-table__header:last-child {
  border-right-width: 0;
}

.price-table__header-title {
  font-size: 1.125rem;
}

.price-table__price {
  font-size: 1.875rem;
}

.price-table__price-unit {
  font-size: 1rem;
}

.price-table__body-title {
  padding: 10px;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
}

.price-table__body-text {
  padding: 10px;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
}

.price-table__body-text:last-child {
  border-right: 1px solid #ddd;
}

.price-table__body-row:last-child .price-table__body-title,
.price-table__body-row:last-child .price-table__body-text {
  border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
  .price-table {
    overflow-x: auto;
  }

  .price-table__inner {
    width: auto;
    white-space: nowrap;
  }

  .price-table__body-title {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background-color: #fff;
    box-shadow: 1px 0 #ddd;
    font-size: .875rem;
  }
}

FAQ

Q どのようなCMS開発の実績がありますか？

A

WordPress、Movable Type、HubSpot CMS、Sitecoreの開発実績がございます。

Q 普段使用しているCSSの設計手法を教えてください

A

OOCSSをはじめ、SMACSS、BEM、FLOCSS、PRECSSなど一通り対応可能です。どの手法を使用するかは、案件の特性を考慮し都度選定しています。

<dl class="faq">
  <dt class="faq__row faq__row--question">
    <span class="faq__icon faq__icon--question">Q</span>
    <span class="faq__question-text">どのようなCMS開発の実績がありますか？</span>
  </dt>
  <dd class="faq__row faq__row--answer">
    <span class="faq__icon faq__icon--answer">A</span>
    <div class="faq__answer-body">
      <p class="faq__answer-text">
        WordPress、Movable Type、HubSpot CMS、Sitecoreの開発実績がございます。
      </p>
    </div>
    <!-- /.faq__answer-body -->
  </dd>
  <dt class="faq__row faq__row--question">
    <span class="faq__icon faq__icon--question">Q</span>
    <span class="faq__question-text">普段使用しているCSSの設計手法を教えてください</span>
  </dt>
  <dd class="faq__row faq__row--answer">
    <span class="faq__icon faq__icon--answer">A</span>
    <div class="faq__answer-body">
      <p class="faq__answer-text">
        OOCSSをはじめ、SMACSS、BEM、FLOCSS、PRECSSなど一通り対応可能です。どの手法を使用するかは、案件の特性を考慮し都度選定しています。
      </p>
    </div>
    <!-- /.faq__answer-body -->
  </dd>
</dl>

.faq {
  /* css-wipeではスタイリングなし */
}

.faq > *:last-child {
  margin-bottom: 0;
}

.faq__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  box-sizing: content-box;
  min-height: 45px;
  padding-left: 60px;
}

.faq__row--question {
  margin-bottom: 15px;
  font-size: 1.125rem;
  font-weight: bold;
}

.faq__question-text {
  padding-top: 12px;
}

.faq__row--answer {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.faq__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-weight: normal;
  line-height: 45px;
  text-align: center;
}

.faq__icon--question {
  background-color: #e25c00;
  color: #fff;
}

.faq__icon--answer {
  background: #efefef;
  color: #e25c00;
}

.faq__answer-body {
  padding-top: 12px;
}

.faq__answer-body > *:last-child {
  margin-bottom: 0;
}

.faq__answer-text {
  margin-bottom: 20px;
}

アコーディオン

どのようなCMS開発の実績がありますか？

WordPress、Movable Type、HubSpot CMS、Sitecoreの開発実績がございます。

どのようなCMS開発の実績がありますか？

WordPress、Movable Type、HubSpot CMS、Sitecoreの開発実績がございます。

<dl class="accordion">
  <dt class="accordion__title">
    <button class="accordion__btn" type="button">どのようなCMS開発の実績がありますか？</button>
  </dt>
  <dd class="accordion__body">
    <p class="accordion__text">
      WordPress、Movable Type、HubSpot CMS、Sitecoreの開発実績がございます。
    </p>
  </dd>
  <dt class="accordion__title">
    <button class="accordion__btn accordion__btn--active" type="button">どのようなCMS開発の実績がありますか？</button>
  </dt>
  <dd class="accordion__body accordion__body--active">
    <p class="accordion__text">
      WordPress、Movable Type、HubSpot CMS、Sitecoreの開発実績がございます。
    </p>
  </dd>
</dl>

.accordion__body + .accordion__title {
  margin-top: 20px;
}

.accordion__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 40px 10px 15px;
  background-color: #e25c00;
  border: 2px solid #e25c00;
  color: #fff;
  font-size: 1.125rem;
  text-align: left;
  cursor: pointer;
  transition: .25s;
}

.accordion__btn::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  transform: translateY(-50%);
}

.accordion__btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  display: block;
  width: 2px;
  height: 20px;
  background-color: currentColor;
  transform: translateY(-50%);
}

.accordion__btn:focus,
.accordion__btn:hover {
  background-color: #fff;
  color: #e25c00;
}

.accordion__btn--active::after {
  content: none;
}

.accordion__body {
  display: none;
  padding: 15px;
  border: 1px solid #ddd;
}

.accordion__body > *:first-child {
  /* css-wipeではスタイリングなし */
}

.accordion__body > *:last-child {
  margin-bottom: 0;
}

.accordion__body--active {
  display: block;
}

.accordion__text {
  margin-bottom: 20px;
}

ジャンボトロン

貴社のビジネスに適切な戦略をご提案し
「成果」に貢献いたします。

<div class="jumbotron" style="background-image:url(/assets/img/elements/jumbotron-bg.jpg)">
  <div class="jumbotron__inner">
    <p class="jumbotron__title">
      貴社のビジネスに適切な戦略をご提案し
      <br class="only-lg">
      「成果」に貢献いたします。
    </p>
  </div>
  <!-- /.jumbotron__inner -->
</div>
<!-- /.jumbotron -->

@media screen and (max-width: 768px) {
  .only-lg {
    display: none;
  }
}

.jumbotron {
  height: calc(69.44444vw + -233.33333px);
  background-position: center center;
  background-size: cover;
}

.jumbotron__inner {
  position: relative;
  max-width: 1230px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}

.jumbotron__title {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 40px;
  background-color: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: calc(1.81818vw + 14.18182px);
  line-height: 1.5;
  transform: translateY(-50%);
}

@media screen and (min-width: 1200px) {
  .jumbotron {
    height: 600px;
  }

  .jumbotron__title {
    font-size: 2.25rem;
  }
}

@media screen and (max-width: 768px) {
  .jumbotron {
    height: 300px;
  }

  .jumbotron__title {
    left: 50%;
    width: 90%;
    padding: 15px;
    font-size: 1.25rem;
    text-align: center;
    transform: translate(-50%, -50%);
  }
}

ポストリスト

• 2019/03/29
  【多言語サイトを構築する】 ①対象言語・地域とURL方式の選定
• 2019/03/28
  打ち合わせアポをスムーズに！ビジネスで使える日程調整ツール4選
• 2019/03/27
  BtoB向けコンテンツマーケティング戦略におけるLinkedIn活用術

<ul class="vertical-posts">
  <li class="vertical-posts__item">
    <div class="vertical-posts__header">
      <time class="vertical-posts__date" datetime="2019-03-29">2019/03/29</time>
    </div>
    <!-- /.vertical-posts__header -->
    <a class="vertical-posts__title" href="#">【多言語サイトを構築する】 ①対象言語・地域とURL方式の選定</a>
  </li>
  <li class="vertical-posts__item">
    <div class="vertical-posts__header">
      <time class="vertical-posts__date" datetime="2019-03-28">2019/03/28</time>
    </div>
    <!-- /.vertical-posts__header -->
    <a class="vertical-posts__title" href="#">打ち合わせアポをスムーズに！ビジネスで使える日程調整ツール4選</a>
  </li>
  <li class="vertical-posts__item">
    <div class="vertical-posts__header">
      <time class="vertical-posts__date" datetime="2019-03-27">2019/03/27</time>
    </div>
    <!-- /.vertical-posts__header -->
    <a class="vertical-posts__title" href="#">BtoB向けコンテンツマーケティング戦略におけるLinkedIn活用術</a>
  </li>
</ul>

.vertical-posts {
  /* css-wipeではスタイリングなし */
}

.vertical-posts__item {
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}

.vertical-posts__item:first-child {
  padding-top: 0;
}

.vertical-posts__header {
  margin-bottom: 10px;
}

.vertical-posts__date {
  font-size: .875rem;
}

.vertical-posts__title {
  text-decoration: none;
}

.vertical-posts__title:focus,
.vertical-posts__title:hover {
  text-decoration: underline;
}

順序なしリスト

• webコンサルティング
• デジタルマーケティング支援
• CMS構築
• CSS設計

<ul class="bullet-list">
  <li class="bullet-list__item">
    webコンサルティング
  </li>
  <li class="bullet-list__item">
    デジタルマーケティング支援
  </li>
  <li class="bullet-list__item">
    CMS構築
  </li>
  <li class="bullet-list__item">
    CSS設計
  </li>
</ul>

.bullet-list {
  /* css-wipeではスタイリングなし */
}

.bullet-list > *:last-child {
  margin-bottom: 0;
}

.bullet-list__item {
  position: relative;
  padding-left: 1em;
  margin-bottom: 10px;
}

.bullet-list__item::before {
  content: '';
  position: absolute;
  top: .5em;
  left: 0;
  display: block;
  width: .4em;
  height: .4em;
  background-color: #e25c00;
  border-radius: 50%;
}

拡張パターン：横並び

• webコンサルティング
• デジタルマーケティング支援
• CMS構築
• CSS設計

<ul class="bullet-list bullet-list--horizontal">
  <li class="bullet-list__item">
    webコンサルティング
  </li>
  <li class="bullet-list__item">
    デジタルマーケティング支援
  </li>
  <li class="bullet-list__item">
    CMS構築
  </li>
  <li class="bullet-list__item">
    CSS設計
  </li>
</ul>

.bullet-list--horizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -10px;
}

.bullet-list--horizontal .bullet-list__item {
  flex: calc(50% - 5px);
  margin-right: 10px;
}

.bullet-list--horizontal .bullet-list__item:nth-of-type(even) {
  margin-right: 0;
}

バリエーション：ネスト

• webコンサルティング
• デジタルマーケティング支援
• CMS構築
• CSS設計
  • BEM
  • FLOCSS
  • PRECSS

<ul class="bullet-list">
  <li class="bullet-list__item">
    webコンサルティング
  </li>
  <li class="bullet-list__item">
    デジタルマーケティング支援
  </li>
  <li class="bullet-list__item">
    CMS構築
  </li>
  <li class="bullet-list__item">
    CSS設計    
    <ul class="child-bullet-list">
      <li class="child-bullet-list__item">
        BEM
      </li>
      <li class="child-bullet-list__item">
        FLOCSS
      </li>
      <li class="child-bullet-list__item">
        PRECSS
      </li>
    </ul>
  </li>
</ul>

.child-bullet-list {
  padding-left: 1.5em;
  margin-top: 10px;
  list-style-type: circle;
}

.child-bullet-list > *:last-child {
  margin-bottom: 0;
}

.child-bullet-list__item {
  margin-bottom: 10px;
}

順序ありリスト

1. webコンサルティング
2. デジタルマーケティング支援
3. CMS構築
4. CSS設計

<ol class="order-list">
  <li class="order-list__item">
    webコンサルティング
  </li>
  <li class="order-list__item">
    デジタルマーケティング支援
  </li>
  <li class="order-list__item">
    CMS構築
  </li>
  <li class="order-list__item">
    CSS設計
  </li>
</ol>

.order-list {
  counter-reset: order-list;
}

.order-list > *:last-child {
  margin-bottom: 0;
}

.order-list__item {
  position: relative;
  padding-left: 1em;
  margin-bottom: 10px;
}

.order-list__item::before {
  content: counter(order-list) '. ';
  position: absolute;
  top: 0;
  left: 0;
  color: #e25c00;
  font-weight: bold;
  counter-increment: order-list;
}

バリエーション：ネスト

1. webコンサルティング
2. デジタルマーケティング支援
3. CMS構築
4. CSS設計
   1. BEM
   2. FLOCSS
   3. PRECSS

<ol class="order-list">
  <li class="order-list__item">
    webコンサルティング
  </li>
  <li class="order-list__item">
    デジタルマーケティング支援
  </li>
  <li class="order-list__item">
    CMS構築
  </li>
  <li class="order-list__item">
    CSS設計    
    <ol class="child-order-list">
      <li class="child-order-list__item">
        BEM
      </li>
      <li class="child-order-list__item">
        FLOCSS
      </li>
      <li class="child-order-list__item">
        PRECSS
      </li>
    </ol>
  </li>
</ol>

.child-order-list {
  margin-top: 10px;
  counter-reset: child-order-list;
}

.child-order-list > *:last-child {
  margin-bottom: 0;
}

.child-order-list__item {
  position: relative;
  padding-left: 1em;
  margin-top: 10px;
}

.child-order-list__item::before {
  content: counter(child-order-list) '. ';
  position: absolute;
  top: 0;
  left: 0;
  color: #e25c00;
  counter-increment: child-order-list;
}