WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Easy List Splitter

f:id:mmmmofu:20170506010447p:plain

デモ
http://efu.sakura.ne.jp/web/list/

公式サイト
www.madeincima.it

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Easy List Splitter</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.easyListSplitter.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <h1>Easy List Splitter</h1>
  <div class="list_wrapper">
    <ol class="list list1">
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
      <li>リスト4</li>
      <li>リスト5</li>
      <li>リスト6</li>
      <li>リスト7</li>
      <li>リスト8</li>
    </ol>
  </div>
  <div class="list_wrapper">
    <ol class="list list2">
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
      <li>リスト4</li>
      <li>リスト5</li>
      <li>リスト6</li>
      <li>リスト7</li>
      <li>リスト8</li>
    </ol>
  </div>
</body>
</html>
h1 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  margin: 50px 0;
}

.list_wrapper {
  width: 300px;
  margin: 0 auto;
  letter-spacing: -0.4em;
}

.list {
  display: inline-block;
  width: 100px;
  list-style: decimal;
  letter-spacing: 0;
  vertical-align: top;
  padding-left: 1em;
  box-sizing: border-box;
}

.list li {
  font-size: 16px;
  margin-bottom: 4px;
}
$(function(){
  $('.list1').easyListSplitter({
    colNumber: 3,
    direction: 'horizontal'
  });
    $('.list2').easyListSplitter({
    colNumber: 3,
    direction: 'vertical'
  });
});