24ways：可視部分におけるCSSとJavascriptコードの再利用
6日目のお題：『Front-End Code Reusability with CSS and JavaScript』 ウェブ標準に基づく開発者の多くは、非常に多くのスタイルを備えたHTMLでサイトを作ります。新しいページが増えるとそのスタイルは増える傾向にあり、多くの要素・スタイルが加えられていきます。しかし、CSSはより効果の高いものとして使用することができます。
（このあたりもちょっと難しいお題ですな。。。）
とくに新しい考え方ではないですが、スタイルを使いまわすという概念はCSSファイルサイズを軽減したり、より柔軟で一貫したサイトデザインを構築します。また、この考えを元にJavascriptを備えた設計において適応することも出来ます。
（スライドショーのデモコードが並んでます。スクリプトコードは解説されてもよくわからないのでパス）
DEMO
スタイルシートはこんな感じでした
.slideshow {
position: relative;
height: 250px; width: 400px;
padding: 1px; margin: 0 0 50px;
border: 2px solid #aaa;
}
div.slideshow img {
padding: 0; margin: 0;
border: 0;
}
div.slideshow ul {
padding: 0; margin: 0;
list-style: none;
}
ul.cycle-arrows,
ul.cycle-pagination {
position: absolute; bottom: -25px;
}
ul.cycle-arrows {
right: 0;
}
ul.cycle-pagination {
left: -5px;
}
ul.cycle-arrows li,
ul.cycle-pagination a {
float: left;
margin: 0 0 0 5px;
font-size: 10px;
}
ul.cycle-arrows a,
ul.cycle-pagination a {
padding: 1px 7px;
text-decoration: none;
border: 1px solid #aaa;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
ul.cycle-arrows a:hover,
ul.cycle-arrows a:focus,
ul.cycle-arrows a:active,
ul.cycle-pagination a:hover,
ul.cycle-pagination a:focus,
ul.cycle-pagination a:active {
text-decoration: none;
background-color: #efefef;
}
ul.cycle-pagination a.activeSlide {
color: #fff;
background-color: #333;
}
ul.cycle-arrows a:active,
ul.cycle-pagination a:active {
outline: 0;
}
ul.cycle-arrows li.previous a::before {
content: "← ";
}
ul.cycle-arrows li.next a::after {
content: " →";
}
スライドショーpluginは正確にセッティングしてください。ってことです。
Javascriptコードを直接修正することによって、より汎用的な内容に変更できるということでしょうか。
解説読むより、ソースをそのまま写して実際に自分で動かしてみたほうが分かりやすいかも。。。Javascriptも配布されているソースをそのまま使用するのではなく、ちょっと手を加えてやることが必要みたいですね。
Leave a Reply