CodeGrid UI

Category

Tag

All Colors

customers

/src/assets2/scss/_components-shared.scss
  • app-item
  • www-item

通常(見出し、テキスト、ロゴ、ボタン)

customersについているstyle属性は外すこと。

団体購読も承っております

CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。

<section class="CG2-customers" style="background-color: #eee">
  <h2 class="CG2-customers__heading">団体購読も承っております</h2>
  <p class="CG2-customers__text">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
  <div class="CG2-customers__logos">
    <ul>
      <li><img src="__dummy__58x30" width="58" height="30"></li>
      <li><img src="__dummy__211x25" width="211" height="25"></li>
      <li><img src="__dummy__208x30" width="208" height="30"></li>
      <li><img src="__dummy__101x30" width="101" height="30"></li>
      <li><img src="__dummy__210x35" width="210" height="35"></li>
      <li><img src="__dummy__116x25" width="116" height="25"></li>
      <li><img src="__dummy__123x35" width="123" height="35"></li>
      <li><img src="__dummy__151x40" width="151" height="40"></li>
      <li><img src="__dummy__111x35" width="111" height="35"></li>
      <li><img src="__dummy__152x35" width="152" height="35"></li>
    </ul>
  </div>
  <div class="CG2-customers__button">
    <a class="CG2-button CG2-button--primary" href="">団体購読について</a>
  </div>
</section>

コンパクト(テキスト・ロゴのみ)

customersについているstyle属性は外すこと。

CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。

<section class="CG2-customers" style="background-color: #eee">
  <p class="CG2-customers__text">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
  <div class="CG2-customers__logos">
    <ul>
      <li><img src="__dummy__58x30" width="58" height="30"></li>
      <li><img src="__dummy__211x25" width="211" height="25"></li>
      <li><img src="__dummy__208x30" width="208" height="30"></li>
      <li><img src="__dummy__101x30" width="101" height="30"></li>
      <li><img src="__dummy__210x35" width="210" height="35"></li>
      <li><img src="__dummy__116x25" width="116" height="25"></li>
      <li><img src="__dummy__123x35" width="123" height="35"></li>
      <li><img src="__dummy__151x40" width="151" height="40"></li>
      <li><img src="__dummy__111x35" width="111" height="35"></li>
      <li><img src="__dummy__152x35" width="152" height="35"></li>
    </ul>
  </div>
</section>

paymentTable

/src/assets2/scss/_components-shared.scss
  • app-item
  • app-form
  • www-item
VISA, MasterCard, JCB, American Express, Diners Club
購読料
(税込金額)
  • 月額
    800
    (税込864円)
購読期間 自動継続
無料購読期間
  • 無料購読期間
    30
<div class="CG2-paymentTable">
  <table>
    <thead>
      <tr>
        <th colspan="2"><img src="https://www.codegrid.net/img/payment/img_01.svg" alt="VISA, MasterCard, JCB, American Express, Diners Club" width="275"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>購読料<br><span class="CG2-paymentTable__annotation">(税込金額)</span></th>
        <td>
          <div class="CG2-paymentTable__priceList">
            <ul>
              <li>
                <div class="CG2-paymentTable__priceLabel">月額</div>
                <div class="CG2-paymentTable__priceValue">800</div>
                <div class="CG2-paymentTable__priceUnit"></div>
                <div class="CG2-paymentTable__priceAnnotation">(税込864円)</div>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <th>購読期間</th>
        <td>自動継続</td>
      </tr>
      <tr>
        <th>無料購読期間</th>
        <td>
          <div class="CG2-paymentTable__valueList">
            <ul>
              <li>
                <div class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</div>
                <div class="CG2-paymentTable__value">30</div>
                <div class="CG2-paymentTable__valueUnit"></div>
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

paymentLine

/src/assets2/scss/_components-shared.scss
  • app-item
  • www-item
月額 800 (税込み864円)
<div class="CG2-paymentLine">
  <span class="CG2-paymentLine__label">月額</span>
  <span class="CG2-paymentLine__value">800</span>
  <span class="CG2-paymentLine__unit"></span>
  <span class="CG2-paymentLine__extra">(税込み864円)</span>
</div>

seriesList

/src/assets2/scss/_components-shared.scss
  • app-item
  • app-item-articlelist
  • www-item

通常

  • 未購読・非ログイン状態の場合、公開されてない記事にはCG2-seriesList__articleOrderの前にCG2-seriesList__articleIconが追加
  • 未読の場合、CG2-seriesList__articleCG2-seriesList__article--unreadが追加
  • お気に入りに追加した場合、js-toggle-fav-seriesCG2-seriesList__itemUtilButton--favAddedが追加
  • 著者が3人までの場合、CG2-seriesList__authorsに著者分のCG2-seriesList__authorが入る(<a>でくるまれる)
  • 著者が4人以上の場合、CG2-seriesList__authorsの中身がCG2-seriesList__authorPicListに置き換わる
  • appのトップでは、リストの最後にはCG2-seriesList__itemMoreがくる
<div class="CG2-seriesList">
  <div class="CG2-seriesList__inner">

    <!-- 未購読状態、ログイン前 -->

    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-talk"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">Webの文字の読みやすさ</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2014-readable-text-design/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleIcon">
              <div class="CG2-icon-lock"></div>
            </div>
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">読みやすさのために</div>
            <div class="CG2-seriesList__articleDate">2014年07月17日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleIcon">
              <div class="CG2-icon-lock"></div>
            </div>
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">日本語の「読みやすさ」</div>
            <div class="CG2-seriesList__articleDate">2014年07月10日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">あらためて、Webって?</div>
            <div class="CG2-seriesList__articleDate">2014年07月03日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">安田 麻由 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">長坂 菫 | UIデザイナー</div>
          </div>
        </a>
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">中野 富子 | エディター</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 購読済、ログイン後、お気に入り、未読あり -->

    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-mastering"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">z-index再入門</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="true" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2014-mastering-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">z-indexの困った使用例</div>
            <div class="CG2-seriesList__articleDate">2014年05月29日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">意図した順序に要素を重ねる</div>
            <div class="CG2-seriesList__articleDate">2014年05月22日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">z-indexの仕組み</div>
            <div class="CG2-seriesList__articleDate">2014年05月15日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">佐川 沙織 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 著者4人、お気に入り -->

    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-standards"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">今日から使えるCSS</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="true" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第4回</div>
            <div class="CG2-seriesList__articleTitle">CSS Custom Properties</div>
            <div class="CG2-seriesList__articleDate">2017年05月04日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">position: sticky</div>
            <div class="CG2-seriesList__articleDate">2017年04月27日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">@supportsルール</div>
            <div class="CG2-seriesList__articleDate">2017年02月16日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <div class="CG2-seriesList__authorPicList">
          <ul>
            <li><a href=""><img src="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
            <li><a href=""><img src="__dummy__80x80" alt="影山 和子" width="40" height="40"></a></li>
            <li><a href=""><img src="__dummy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
            <li><a href=""><img src="__dummy__80x80" alt="杉原 幸次郎" width="40" height="40"></a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 著者たくさん、未読あり -->

    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-interview"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">エンジニアに聞く、仕事の行方</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="false" class="js-toggle-fav-series">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/future-works/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第13回</div>
            <div class="CG2-seriesList__articleTitle">ピクセル グリオ 編</div>
            <div class="CG2-seriesList__articleDate">2017年08月24日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第12回</div>
            <div class="CG2-seriesList__articleTitle">影山 和子 編</div>
            <div class="CG2-seriesList__articleDate">2017年05月04日</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第11回</div>
            <div class="CG2-seriesList__articleTitle">橋本 孝治 編</div>
            <div class="CG2-seriesList__articleDate">2016年07月28日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <div class="CG2-seriesList__authorPicList">
          <ul>
          <li><a href=""><img src="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="河田 理香" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="尾上 友美" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="新田 道雄" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="安田 麻由" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="野間 夏子" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="神戸 克巳" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="杉原 幸次郎" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="田代 隆男" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="新田 春子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="中野 富子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="柳川 健治" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="長坂 菫" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="坪田 健之" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="仲村 孝二" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="橋本 孝治" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="大澤 直子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="山口 弘一" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="影山 和子" width="40" height="40"></a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- more -->

    <div class="CG2-seriesList__itemMore">
      <a href="">more</a>
    </div>

  </div>
</div>

全幅

appトップの今週号や、各号のページで利用。

CG2-seriesList__itemCG2-seriesList__item--fullWidthが追加されただけで、その他は特に変わらない。

<div class="CG2-seriesList">
  <div class="CG2-seriesList__inner">

    <!-- 未購読 -->

    <div class="CG2-seriesList__item CG2-seriesList__item--fullWidth">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-mastering"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">Chrome DevToolsをモバイル開発で使いこなす</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2017-chrome-devtools/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleIcon">
              <div class="CG2-icon-lock"></div>
            </div>
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">モバイルWebアプリ開発に活用</div>
            <div class="CG2-seriesList__articleDate">2017年06月01日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">影山 和子 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 購読済、お気に入り -->

    <div class="CG2-seriesList__item CG2-seriesList__item--fullWidth">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-standards"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">今日から使えるCSS</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="false" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">@supportsルール</div>
            <div class="CG2-seriesList__articleDate">2017年02月16日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">佐川 沙織 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="__dummy__80x80" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">影山 和子 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- 著者たくさん、未読あり -->

    <div class="CG2-seriesList__item CG2-seriesList__item--fullWidth">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href=""><span class="CG2-icon-cat-survey"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <div class="CG2-seriesList__itemTitleInner">
            <a href="">
              <span class="CG2-seriesList__itemTitleText">ピクセルグリッドの開発環境サーベイ 2017</span>
            </a>
          </div>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href=""><span class="CG2-icon-list"></span></a></li>
            <li>
              <button type="button" aria-pressed="false" class="js-toggle-fav-series">
                <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url('//cdn.codegrid.net/2017-tool-survey/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="">
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">エディタとおすすめツール編</div>
            <div class="CG2-seriesList__articleDate">2017年03月02日</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <div class="CG2-seriesList__authorPicList">
          <ul>
          <li><a href=""><img src="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="河田 理香" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="尾上 友美" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="新田 道雄" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="安田 麻由" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="野間 夏子" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="神戸 克巳" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="杉原 幸次郎" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="田代 隆男" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="新田 春子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="中野 富子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="柳川 健治" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="長坂 菫" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="坪田 健之" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="仲村 孝二" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="橋本 孝治" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="大澤 直子" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="山口 弘一" width="40" height="40"></a></li>
          <li><a href=""><img src="__summy__80x80" alt="影山 和子" width="40" height="40"></a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>