便利なHTML KickStartの使い方をまとめました。
HTML KickStart
HTML Kick Start準備
HTML KickStartをダウンロード
blank.htmlを好きなように編集する
blank.htmlにhttp://www.99lime.com/elements/のリンクを加える
blank.htmlを保存して閲覧
HTML Kick Start使い方
HTML KickStart HTML Elements & Documentation - 99Lime.com
もしくはダウンロードした中のelements.htmlを開きます。
各項目にある「Example」の並びにあるタブを開きhtmlをコピーして
blank.htmlに貼り付けます。
基本はコピペで使用するだけなので、簡単なhtml構造を理解していれば
ポンポンポンとWEBデザインが作れることになります。これはすごい。
クラスは半角スペースでつなげることで、適応させたい要素に対して複数のクラスを使用できます。
smallクラスが適応されている例
[html]
<button class="small">.pink</button>
[/html]
smallクラスとpinkクラスが適応されている例
[html]
<button class="small pink">.pink</button>
[/html]
HTML Kick Start以外にも自作したCSSクラスを合わせて使う方法も考えられます。
サンプルがなかったExtras部分について
Extras/Helpers
|.left| 左寄せ|
|.center| 真ん中寄せ|
|.right |右寄せ|
|a.lightbox| lightboxでリンクを開く|
|.clear |float解除 .clearはoverflow:hiddenにしてある|
|.clearfix | おなじみclearfix|
|a href="#anchor" | ページ内リンクはするするスクロール|
|li.first li.last|liタグを書くと自動で１つ目と最後のliにfirst,lastのクラスが付く|
|.column| div class="col_*"で囲んだ内側にはdiv .columnが自動で入る|
|.hide| display:none|
|.show|display:block|
|.visible| 灰色がつく|
|tr.first tr.last|trタグの最初と最後に自動で付くクラス|
|tr.alt|1つおきに自動でつくクラス。交互に背景色を変えたりする場合に便利|
利用されているjsライブラリ
prettify.js
プログラムのコードに色を付けるJavaScriptライブラリ
プログラムのコードを配色する「google-code-prettify」[to-R]
fancybox.js
lightbox風のリンクエフェクトを付けるjQueryライブラリ
Fancybox - Fancy jQuery lightbox alternative
tiptip.js
マウスホバー自の吹き出しエフェクトをつけるjQueryライブラリ
[JS]実装が簡単で、表示オプションが豊富なツールチップのスクリプト -Tiptip | コリス
jquery.calendar-widget.js
カレンダーウィジェット作成ライブラリ
jQuery Calendar Widget Plugin
jQuery.LocalScroll.js
スクロールライブラリ
スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」
jQuery.Scrollto.js
スクロールライブラリ
jQuery.ScrollTo
この書き方でZenCodingと合わせたらサクッと作れますね。