新着情報のリストを表示するスニペットです。
使用するclass名
.dateInline：日付の位置が記事の横
.dateBlock：日付の位置が記事の上
.topBorder：ブロックの上端に罫線を追加
.borderSolid：実線
.borderDashed：破線
.borderDotted：点線
View
- 2015-12-31
- 新着情報が入ります新着情報が入ります。
- 2015-07-31
- 日付が記事の左側に入ります。
- 2015-12-31
- 新着情報が入ります新着情報が入ります。
- 2015-07-31
- 日付が記事の上に入ります。
- 2015-12-31
- 新着情報が入ります新着情報が入ります
- 2015-12-31
- 新着情報が入ります新着情報が入ります
- 2015-07-31
- 線種は実線（.borderSolid）
- 2015-12-31
- 新着情報が入ります新着情報が入ります
- 2015-07-31
- 線種は破線（.borderDashed）
- 2015-12-31
- 新着情報が入ります新着情報が入ります
- 2015-07-31
- 線種は点線（.borderDotted）
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <div class="informationTopics dateInline borderSolid"> <dl> <dt>2015-12-31</dt> <dd><a href="#">新着情報が入ります新着情報が入ります。</a></dd> </dl> <dl> <dt>2015-07-31</dt> <dd><a href="#">日付が記事の左側に入ります。</a></dd> </dl> </div> <div class="informationTopics dateBlock borderSolid"> <dl> <dt>2015-12-31</dt> <dd><a href="#">新着情報が入ります新着情報が入ります。</a></dd> </dl> <dl> <dt>2015-07-31</dt> <dd><a href="#">日付が記事の上に入ります。</a></dd> </dl> </div> <div class="informationTopics dateInline topBorder borderSolid"> <dl> <dt>2015-12-31</dt> <dd><a href="#">新着情報が入ります新着情報が入ります</a></dd> </dl> <dl> <dt>2015-07-31</dt> <dd><a href="#">ブロックの上端に罫線を追加します。（.topBorder）線種は実線（.borderSolid）</a></dd> </dl> </div> <div class="informationTopics dateInline borderSolid"> <dl> <dt>2015-12-31</dt> <dd><a href="#">新着情報が入ります新着情報が入ります</a></dd> </dl> <dl> <dt>2015-07-31</dt> <dd><a href="#">線種は実線（.borderSolid）</a></dd> </dl> </div> <div class="informationTopics dateInline borderDashed"> <dl> <dt>2015-12-31</dt> <dd><a href="#">新着情報が入ります新着情報が入ります</a></dd> </dl> <dl> <dt>2015-07-31</dt> <dd><a href="#">線種は破線（.borderDashed）</a></dd> </dl> </div> <div class="informationTopics dateInline borderDotted"> <dl> <dt>2015-12-31</dt> <dd><a href="#">新着情報が入ります新着情報が入ります</a></dd> </dl> <dl> <dt>2015-07-31</dt> <dd><a href="#">線種は点線（.borderDotted）</a></dd> </dl> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /* ======================================================= お知らせ一覧 ========================================================== */ .informationTopics.topBorder dl:first-child { border-top: 1px solid #dddddd; } .informationTopics dl { border-bottom: 1px solid #dddddd; position: relative; line-height: 1.5; } .informationTopics dl a { color: #666; text-decoration: none; } .informationTopics dl a:hover { text-decoration: underline; } @media print, screen and (min-width: 768px) { .informationTopics dl { font-size: 14px; } .informationTopics.dateBlock dl dt { padding: 0.7em 0.7em 0; } .informationTopics.dateBlock dl dd { padding: 0.5em 0.7em 0.7em; } .informationTopics.dateInline dl dt { display: table-cell; white-space: nowrap; padding: 10px; } .informationTopics.dateInline dl dd { display: table-cell; padding: 10px; } } @media screen and (max-width: 767px) { .informationTopics dl { padding: 10px 0; font-size: 14px; } .informationTopics dl dt { margin-bottom: 0.5em; padding: 0 5px; } .informationTopics dl dd { padding: 0 5px; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | /* ======================================================= お知らせ一覧 ========================================================== */ //線種 $borderStyle: solid ; //線色 $borderColor: #dddddd ; //リンク色 $linkColor : $text_color; .informationTopics { &.borderSolid { dl {border-style:solid;} } &.borderDashed { dl {border-style:dashed;} } &.borderDotted { dl {border-style:dotted;} } &.topBorder { dl:first-child {border-top-width:1px;} } dl { border-color:$borderColor; border-bottom-width:1px; position:relative; line-height:1.5; a { color:$linkColor; text-decoration:none; &:hover { text-decoration:underline; } } } @media print, screen and (min-width: 768px) { dl {font-size:$base_text_size;} &.dateBlock { dt { padding:0.7em 0.7em 0; } dd { padding:0.5em 0.7em 0.7em; } } &.dateInline { dt { display:table-cell; white-space:nowrap; padding:10px; } dd { display:table-cell; padding:10px; } } } @media screen and (max-width: 767px){ dl { padding:10px 0; font-size:$base_text_size; } dt { margin-bottom:0.5em; padding:0 5px; } dd { padding:0 5px; } } } |