CSSフレームワークHTML KickStartの凄さを30分間で体感してみた

この記事が良ければ、ぜひシェアお願いします

前回の記事でCSSフレームワークを紹介させてもらいましたが、CSSフレームワークが”如何に凄いのか”は実際に使ってみないとわからないと思って、自分なりのデモも兼ねてTOPページをペラ1枚でも良いので作ってみようと考えました。

CSSフレームワークはどれにしようか少し悩みつつ、使いやすそうだなと感じた『HTML KickStart』を採用して、ページを書いてみました。

HTML KickStartの概要


■特徴

  • HTML5,CSS,jQueryをベースにしたフレームワーク
  • フォームやリスト、ボタンなどの基本パーツ完備
  • スライドショーやタブといったJSパーツも
  • レイアウトはお好きなように、テーブルも4種類
  • シンプルなアイコンが沢山あります

本家サイト : HTML KickStart
紹介サイト : 人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ! | Chrome life

30分間でHTML KickStartでTOPページのデモを作ってみた


本家サイトでダウンロードして開いてみると、ライセンステキストと共に”CSS””JS”ディレクトリが目に付くが、”elements.html”なるものが気になりました。「きっと要素の説明が書かれている素晴らしいものに違いない!」と思いブラウザで表示してみると、思った通り。表示のサンプルとともにコードのサンプルもタブで見られるようになっており、リファレンスとしても申し分ない!→こんな感じ

「おぉ、これは分かりやすい!」と興奮して、英語で書かれていますがWEBデザインに関する言葉が並んでいるので分かりやすく、「ふんふんふん♪」と簡単にレイアウトを組んで、パーツを並べていきました。

特に何のサイト意図も無く組んでみましたが、ダウンロードしてから30分間程でこのようなページを組むことができました!
HTML KickStart デモページ

使ってみての雑感

とりあえず、レイアウトを”col_*”でdiv指定して、パーツを並べてみただけですが、わずかな時間でそれなりのページが出来上がってしまうことに驚きました。CSSフレームワーク恐るべし、です。ただ、やはり同じCSSフレームワークを使うサイトが増えると、『見栄えが同じようなものが増えてしまうのかなぁ~』とは思ったので、デザインに一工夫を加えるなどはあっても良いかもしれないですね。

パッと見た感じなので恐縮ですが、IDセレクタは数個しか定義されていないようなので、CSSの優先順位から考えるとIDセレクタを工夫して定義することでデザインに手を加えることはできるのではないかと感じました。それにしても、すごいです。『Bootstrap』も今度試してみようと思います。

HTMLに書いたコード

参考までに、30分間で書いたコードを載せておこうと思います。ちなみに細かいところは面倒くさいので、”elements.html”に書かれているものをそのままコピペしているものもありますのであしからず(笑)

<!-- HEADER -->
<div class="col_9">
<h1 class="left">HTML KickStartテスト</h1>
サンプルサイトの副題です。
</div>

<div class="col_3 right">
<span class="icon social x-large pink" data-icon="T"></span>
<span class="icon social x-large pink" data-icon="f"></span>
<span class="icon social x-large pink" data-icon="g"></span>
<span class="icon social x-large pink" data-icon="Y"></span>
</div>

<div class="col_12">
<!-- Menu Horizontal -->
<ul class="menu">
<li class="current"><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href=""><span class="icon" data-icon="R"></span>メニュー3</a>
	<ul>
	<li><a href=""><span class="icon" data-icon="G"></span>メニュー3-1</a></li>
	<li><a href=""><span class="icon" data-icon="A"></span>メニュー3-2</a>
		<ul>
		<li><a href=""><span class="icon" data-icon="Z"></span>メニュー3-2-1</a></li>
		<li><a href=""><span class="icon" data-icon="k"></span>メニュー3-2-2</a></li>
		<li><a href=""><span class="icon" data-icon="J"></span>メニュー3-2-3</a></li>
		<li><a href=""><span class="icon" data-icon="="></span>メニュー3-2-4</a></li>
		</ul>
	</li>
	<li class="divider"><a href=""><span class="icon" data-icon="T"></span>メニュー3-3</a></li>
	</ul>
</li>
<li><a href="">メニュー4</a></li>
</ul></pre>
<!-- //Menu Horizontal -->
<!-- //HEADER -->

<!-- WRAPPER -->
<div class="col_12">

<!-- LEFT MENU -->
<div class="col_3">

<!-- Menu Vertical Left -->
<ul class="menu vertical">
<li class="current"><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a>
	<ul>
	<li><a href="">Sub Item</a></li>
	<li><a href="">Sub Item</a>
		<ul>
		<li><a href="">Sub Item</a></li>
		<li><a href="">Sub Item</a></li>
		<li><a href="">Sub Item</a></li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Sub Item</a></li>
	</ul>
</li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
<li><a href="">Item 7</a></li>
<li><a href="">Item 8</a></li>
</ul>
<!-- //Menu Vertical Left -->

<hr class="alt2" />

<!-- Video Placeholder -->
<a class="video-placeholder" href="http://youtu.be/lfnAb11wKQc"><img src="http://placehold.it/250x200/222222/999999.png" width="100%" height="200" /></a>

<hr class="alt2" />

<!-- Map Placeholder -->
<iframe class="map-placeholder" width="100%" height="200" src="http://maps.google.com/maps?f=q&t=m&z=5&output=embed"  frameborder="0"></iframe>

</div>
<!-- //LEFT MENU -->

<!-- CONTENS -->
<div class="col_6">

<!-- Slideshow -->
<ul class="slideshow" width="400" height="250">
<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="400" height="250" /></li>
<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="400" height="250" /></li>
<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="400" height="250" /></li>
<li><h3>Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li>
</ul>

<!-- Paragraph -->
<p>このサイトは、HTML KickStartを使ってテストページになっています。既にパーツはたくさん揃っているので、HTMLとCSSの知識があれば、テキストエディタでさくさくとサイトデザインをすることができます。</p>
<p>Dreamweaver CS4を使ってデザインビューを見てましたが、適切に表示されなかったので、ブラウザで表示して確認しないといけませんでした(笑)</p>

<!-- Table -->
<table class="striped tight sortable" cellspacing="0" cellpadding="0">
<thead><tr>
	<th>Item1</th>
	<th>Item2</th>
	<th>Item3</th>
</tr></thead>
<tbody><tr>
	<td>Item1</td>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<td>Item1</td>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<td>Item1</td>
	<td>Item2</td>
	<td>Item3</td>
</tr><tr>
	<td>Item1</td>
	<td>Item2</td>
	<td>Item3</td>
</tr></tbody>
</table>

<!-- List Checks -->
<ul class="checks">
<li>tation ullamcorper suscipit lobortis</li>
<li>Nam liber tempor cum soluta nobis</li>
<li>imperdiet doming id quod mazim</li>
<li>suscipit lobortis nisl ut aliquip ex</li>
</ul>

</div>
<!-- //CONTENTS -->


<!-- RIGHT MENU -->
<div class="col_3">

<!-- Tabs Right -->
<ul class="tabs right">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
</ul>

<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>

<!-- Style3 -->
<img class="style3" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />

<!-- Style3 -->
<img class="style3" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />


<!-- Calendar -->
<div class="calendar" data-month="2" data-year="2012"></div>

<address><p>
1234 South Creek Lane<br />
Calgary, Alberta, Canada<br />
T4B窶骭€1S6
</p>
</address>

</div>
<!-- //RIGHT MENU -->

前回の記事の修正点

前回の記事では、サイトスナップショットを表示するのに”functions.php”に書いておいたコードを呼び出して都度スナップショットを取得→表示するようにしておいたのですが、一部上手くスナップが撮れない&相手サイトの負荷になると考えて、純粋の画像に差し替えました。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク