ZendFrameworkでCSSフレームワークSkeletonを試してみました。

CSSが苦手な私は、何かいいCSSフレームワークがないか探していたら、Skeletonというフレームワークが良さそうなので、導入して試してみることにしました。SkeletonはMedia Queryベースのフレームワークなので、スマートフォン用のCSSを別途に作成する必要が無いのがいいですね。

1) それでは、Skeletonの公式サイトhttp://www.getskeleton.com/へ行き、下の方にあるダウンロードのボタンをクリックして、Zipファイルをダウンロードします。

2) 解凍したフォルダ内を見てみます。『images』『javascripts』『stylesheets』の各フォルダと『404.html』『index.html』『robots.txt』の各ファイルがあります。

3) それでは、今勉強中のZendFrameworkに適用させながら、実際に試してみたいと思います。ダウンロードしたフォルダ『dhgamache-Skeleton-2dfa28c』の名前をSkeletonに変更し、ルートフォルダに保存します。

4) 『Skeleton』フォルダ内のindex.htmlを前回作成した『zendapp/views/scripts/index』フォルダ内の『index.pthml』ファイルと差し替えます。つまり、前回作成した『Hello World!!』の『index.phtml』を上書き保存します。Skeletonの『index.html』を『index.phtml』名で上書き保存します。

5) 『リンクを更新しますか?』と表示されますので、『はい』をクリックします。

6) では、早速ブラウザを確認してみます。『http://zend.winroad.info/zendapp』と入力します。

7) DreamweaverのDevice Centralでスマートフォンではどのように表示するのかを見てみます。スマートフォン用に3カラムのページが1カラムで表示されています。

8) せっかくZendFrameworkで表示しているので、これだけでは芸がないので、データを渡して表示してみましょう。

9) 『zendapp/controllers/IndexController.php』ファイルを開き、indexActionに次のコードを記述します。

public function indexAction()
{
 //ヘッドタイトル情報をセットする
 $this->view->headTitle('WinRoad徒然草');
 //連想配列による情報のセット
 $this->view->assign('sitename','Winroad徒然草');
 $this->view->assign('description','日常の業務をつれづれなるままに書き綴っています。');
 $this->view->assign('author','Nakada,nakada@winroad.info');
}

10) Skeletonのindex.phtmlを書き換えます。index.phtmlの11行目から13行目を下記のように変更します。

<?php echo $this->headTitle()?>
<meta name="description" content="<?php echo $this->description;?>">
<meta name="author" content="<?php echo $this->author?>">

11) 47行目と48行目を下記のように書き換えます。

<h1 class="remove-bottom" style="margin-top: 40px"><?php echo $this->sitename?></h1>
 <h5><?php echo $this->description;?></h5>

12) それではブラウザで確認してみましょう。

ファビコンを変更する

13) Skeletonでは、ファビコンやアップルタッチアイコンを『Skeleton/images』フォルダ内に保存すれば表示されるみたいなので、早速ファビコンやアップルタッチアイコンを作成して画像を入れ替えました。尚、ファビコンの作成方法は、『ファビコンについて』のページを参照して下さい。

14) 『Skeleton/images』フォルダに、中のファイルと同じ名前と同じサイズで作成したicoファイルやpngファイルを上書き保存してみましが、何故か、favicon.icoのイメージだけが変更されません。

15) それでもブラウザで確認してみると、ファビコンはきちんと表示されています。

Skeletonのスタイルシート

16) さて、本題に入って、Skeletonのスタイルシートを調べてみます。Skeletonのスタイルシートは、『base.css』『skeleton.css』『layout.css』の3つに分かれています。

  • base.css
    Skeletonの基本となるスタイルシートです。各ブラウザごとのリセットと基本的なスタイル、ボタンやタブ、フォームのスタイルが記述されています。
  • skeleton.css
    これがSkeletonの肝になるスタイルシートです。960pxのグリッドシステムに基づくスタイルがクラス分けされています。この960pxのグリッドシステムで作成されたサイトが、メディアクエリーの各サイズ(デバイスの表示サイズ)により、最適なサイズに変更されるようになっています。
  • layout.css
    これは、ユーザー用のスタイルシートです。『base.css』や『skeleton.css』をユーザーが変更すると、スタイルが崩れる可能性がありますし、変更後、元に戻すのは大変です。そこで、各ユーザーは、変更したい箇所をここに記述することによりSkeletonで作成されたスタイルシートを自分好みのスタイルシートに変更することが出来ます。

17) それでは、少しいじってみましょう。先程変更したindex.phtmlファイルをスマートフォンで表示すると少しタイトルが大きすぎますので、サイズを少し小さくしてみます。

18) 『base.css』の70行目を見ると、font-sizeが46pxになっていますので、『layout.css』の19行目にh1要素を記述して、font-sizeを40pxにします。

h1 {font-size:40px;}

19) それでは、Device Centralで表示してみます。

20) 尚、今回は、サイト全体のh1のサイズを変更しましたが、スマートフォンだけのサイズを変更するには、メディアスクリーンの箇所にスタイルを指定します。たとえば縦型のスマートフォンのサイズを変更するには、40行目を下記のように変更します。その前に先程の19行目は削除しておいて下さい。

@media only screen and (max-width: 479px) {
 h1 {font-size:40px;}
 }

21) これで、スマートフォンの縦型のh1以外のサイズは全て46pxのまま、スマートフォンの縦型だけが40pxに変更になりました。基本的には、Skeletonの基本設定のまま特に変更しなくても問題は無いと思いますが、好みに応じて変更して下さい。

22) 次に、Skeletonのボタンとタブについて調べてみます。まず、タブについてですが、index.phtmlの小見出しにアンカーポイントを指定します。アンカーポイントを挿入したい箇所にカーソルを移動したら、一般タブのアンカーポイントアイコンをクリックし、アンカーポイント名(任意)を入力します。すると指定の箇所にアンカーポイントが挿入されます。他も同様にアンカーポイントを挿入します。

23) IndexController.phpファイルのindexActionに次のコードを追加します。つまり、アンカーポイントの情報を配列として渡します。

$this->view->assign('skeleton','http://zend.winroad.info/zendapp/index#skeleton');
 $this->view->assign('kihon','http://zend.winroad.info/zendapp/index#kihon');
 $this->view->assign('doc','http://zend.winroad.info/zendapp/index#document');

24) index.phtmlファイルのdescriptionの下のあたりに下記のコードを挿入します。

<ul class="tabs">
 <li><a class="active" href="<?=$this->skeleton?>">Skeletonとは</a></li>
 <li><a href="<?=$this->kihon?>">基本3原則</a></li>
 <li><a href="<?=$this->doc?>">ドキュメント&amp;サポート</a></li>
 </ul>

25)  layout.cssのスマートフォン縦型のCSSを下記のように変更します。

@media only screen and (max-width: 479px) {
 h1{font-size:40px;}
 h3{font-size:25px;}
 #pagetop{display:inline-block;}
 ul.tabs li a {padding:0 5px;
 font-size:12px;}
 }

26) それでは、Device Centralで表示してみます。タブが表示されています。タブをクリックすると、指定のアンカーポイントまで移動します。<ul class=”tabs”>、たったこれだけで見事にタブが表示されています。

27) それでは、ページのトップに戻る為のボタンを作成してみます。ページの一番下に下記のコードを挿入します。

<a href=”#” class=”button” id=”pagetop”>ページトップへ</a>

28) これもDevice Centralで表示してみます。

本日は、ZendFrameworkにHTML5+CSSフレームワークのSkeletonを導入する方法と、Skeletonの簡単な使い方を勉強してみました。導入後、すぐに使えるのは便利でいいですね。

尚、本日のSkeletonの情報に関しては、高橋のり様のWeb Design Recipesを参考にさせていただきました。ありがとうございました。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ