超シンプルなスマホサイトをテンプレート作ってみた

Pocket
[`evernote` not found]

Advent Calendar in 信州松本(だけじゃなくてもいいよ)最終日です。まずは、今日までこの企画にご賛同いただき、参加&応援頂いた皆さん、本当にありがとうございました。ほんと、ぼぞっとつぶやいたツイートがきっかけで、これだけたくさんの方を巻き込んで、ここまでできた事、本当に嬉しく思っています。運営や広報的にイマイチな部分があって、後悔している部分も多いのですが、参加された皆さんの自主的なフォローにすごく助けてもらえました。
本当にありがとうございました。来年は、こうゆうオンラインの企画だけではなく、リアルな場にもつなげていければと思っていますので、今後ともどうぞよろしくお願いします。

さて、最終日ということで、どんなネタにしようか迷っていたのですが、超簡単なモバイルサイトテンプレートを公開しようと思います。
先日、クライアントワークで、簡単なモバイルサイトを構築したのですが、既存のモバイルワークフレームは使わずに、スクラッチから作ったんです。既存のワークフレームを使わなかった理由として、動的に情報を流し込むのが少し手間だったり(DOMの操作の関係とか)、cssの構造が複雑すぎて、デザインしにくかったりと、高機能がゆえの弊害があげられます。
余計なページトランジッションとか付けずに、対応サイズもスマホに限定すれば、cssだけでもある程度の事はできます。
コンセプトとしては、モバイルアプリ開発のモックアップ用くらいの完成度で小難しいルールなしにcssだけで実現させるです。

実際のデモはこちら。

カラーバリエーションは、随時増やしていきたいと思います。

使い方は、基本のcssを読み込んで、html側で使いたい機能のクラスを呼ぶだけです。
※ボタンをタッチした時のアクティブ表現をしたい場合は、java scriptで判定しなければなりません。

スマホのサイズのみを前提に考えていますので、複雑なレイアウトは組んでありません。いわゆるレスポンシブというやつですか。
あくまで、スマホのモックアップを作るためのフレームだと思ってもらえればいいかと思います。

使い方

こちらからデータをダウンロード(zip)して、
normalize.cssとsimpleMobileTemplate.cssを読み込みます。

後は、下記のルールに従って記述してください。

コンテンツブロック

<div class="itemBlock">

</div>

divでもsectionでもarticleなんでもいいですが、角丸の背景白のブロックを生成するには、.itemBlockとしてください。

タイトル

基本的にコンテンツブロック内で利用することを前提にしています。

<h3 class="title thin">タイトル</h3>

このように、.titleと.thin or .darkと指定してください。
ちなみ、.titleでタイトル用のスタイルのベースを定義して、thin or darkで色の濃さを定義してあります。

<h4 class="subTitle"><span>ナビゲーション</span></h4>
<nav class="itemBlock">
 <h2 class="title thin">MENU</h2>
 <ul id="gnavi">
   <li><a href="#"><span class="icon allowIcn"></span>メニュー</a></li>
   <li><a href="#"><span class="icon allowIcn"></span>メニュー</a></li>
   <li><a href="#"><span class="icon allowIcn"></span>メニュー</a></li>
   <li><a href="#"><span class="icon allowIcn"></span>メニュー</a></li>
 </ul> 
</nav>

こんな感じで定義してください。

ボタンセット(くっついている版)

<article class="btnSet">
 <div class="btnSetTop contactBtn btn"><a href=""><span class="icon mailIcn_w"></span>メールでのお問い合わせ</a></div>
 <div class="btnSetMidLeft btn"><a href=""><span class="icon gearIcn_w"></span>ボタン</a></div>
 <div class="btnSetMidRight btn"><a href=""><span class="icon calenderIcn_w"></span>ボタン</a></div>
 <div class="btnSetLeft btn"><a href=""><span class="icon telIcn_w"></span>ボタン</a></div>
 <div class="btnSetRight btn"><a href=""><span class="icon checkIcn_w"></span>ボタン</a></div>
</article>

こんな感じです。

<h4 class="subTitle"><span>ボタンセット(分離版)</span></h4>
<ul class="btnSet">
 <li class="btnSepa btnSepaLeft btn"><a href="index.html"><span class="icon homeIcn"></span>トップページ</a></li>
 <li class="btnSepa btnSepaRight btn"><a href="#"><span class="icon pcIcn"></span>PCサイトを見る</a></li>
</ul>

こんな感じです。

と、かなり適当な説明ですが、基本コピペでテキストや画像だけ差し替えてもらえればいいようにしてあります。
もっとブラッシュアップしていきますが、使う機会があればご自由にお使いください。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。