HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

これまで、リストを装飾するために「li」タグにクラスを指定していました。
リストのマークを画像にする、下線をつける、一つ置きに背景を変えるなど、リストはデザインバリエーションの高い要素です。
これら細かい要望を実現するために、これまではクラスを指定して実装していました。

しかし、繰り返し要素に条件に応じてクラスを指定するという事は、CMSなど動的に組み込むために一手間必要という点で、めんどくささがありました。
そこで、今回はクラスを指定せずにCSS3のみで実装してみます。
ちなみにIEなどCSS3に対応していないブラウザでは利用できません。

以下はベースとなるサンプルリストのソースです。装飾のために、特別なクラスは指定しません。

<ul>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
<li>サンプル4</li>
<li>サンプル5</li>
</ul>
  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4
  • サンプル5

CSS3のプロパティ「gradient」を使ってグラデーションを表現する方法です。

基本設定

以下のようにCSSで設定することで、背景をグラデーションで表現することができます。

.sample{
	background: -moz-linear-gradient(top, #555555, #000000);
	background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#000000));
	background-color: #000000;
}

これは、実際にこのブログのフッタ部分、コピーライトが乗っている背景を指定してあるコードです。
Firefox用に「-moz-linear-gradient」、SafariとGoogle Chrome用に「-webkit-gradient」を指定します。また、IEなどCSS3に対応していないブラウザのため、とりあえずはCSS2での指定「background-color」も置いておきます。

「-moz-linear-gradient」では「top」を指定することで上から下へ、#555555から#000000にグラデーションを表示することを表しています。

「-webkit-gradient」では「点」で指定するのですが、「left top」から「left bottom」、つまりは上から下へ、#555555から#000000にグラデーションを表示することを表しています。

JavaScriptでクッキー情報を書き換えることがあったので、お手軽な方法を探していたら、「jquery.cookie.js」を見つけました。
Cookie | jQuery Plugins

※ダウンロードサイトがgithubに移動したようです(2012/11/30)
carhartl/jquery-cookie · GitHub

導入方法

導入方法はとても簡単です。
上記サイトから「jquery.cookie.js」をダウンロードして読み込みます。「jquery.cookie.js」はjQueryベースのプラグインなので、jQueryを先に組み込むだけです。

<script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>

ちなみに今回、jQuery1.5.2、Cookie1.0の組み合わせでしたが、問題なく動作しました。

reset.cssは各ブラウザでデフォルトで指定されているCSSをリセットするために読み込むスタイルシートです。

Firefox、Internet ExplorerやGoogle Chromeなど各ブラウザは、コーダーがスタイルシートを適用していない状態では、CSSの初期状態に差異があります。その差異を埋めるべく容易するスタイルシートが「reset.css」です。

少しずつ自身で調整を重ねて作り上げる「reset.css」もありますが、オープンソースとして公開されているものもあります。私はHTML4でPCページを構築する際、YUI(Yahoo! User Interface Library)のCSS Resetは重宝していました。
YUI 3: CSS Reset

今回、スマートフォンサイトを構築するために、スマートフォン用のreset.cssを探していました。そこで気がついたのですが、スマートフォンサイトは結局のところHTML5で構築するので、スマートフォン用というよりはHTML5用ですね。

調べたところ、HTML5 doctorのサイトで発見しました。
HTML5 Doctor, helping you implement HTML5 today

いつもどおりコーディングしているつもりが、どういうわけか、今回だけFirefoxでフッタの下に10pxほどの空白が空いてしまいます。
原因を解明するために、いろいろとCSSを調整してみたのですが、改善しません。
そうしているうちに、たまたま以下のような記事にたどり着きました。
Firefoxでフッター(footer)の下に隙間ができる – @blog.justoneplanet.info

結果から言うと「これで完璧」と信じ、使い続けてきたfloatによる回り込み解除のCSSに欠陥があったわけです。
問題の箇所は下記のブロックです。

.clearfix:after{
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}

参考サイトによると「font-size: 0.1em;」が必要との事です。
つまり、構造上、回り込み解除した後に、Firefoxだけfont-sizeが1px分の余白が開いてしまったということなんですね。実際のところは不明ですが、スペースを消すために0pxとするとSEO的に問題があるようなので、0.1emとするようです。

今回、初めてのスマートフォンサイト作成で、画面サイズ、フォントサイズの設定を行ったので覚書です。

スマートフォンの画面サイズ

まず、画面サイズはiPhoneが320×480pxなので、これを基準にデザインするといいと思います。
ただ、他のAndroidなどの機種はこれと若干異なります。そこでviewpointを指定して、表示領域を指定します。

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
...
</head>

「width=device-width」は、iPhoneの場合に横幅が320pxに指定され、その比率で縦幅が決定するわけです。他のデバイスについても同様です。つまり、表示するデバイスの解像度に依存することなく、横幅が320pxでデザインされたサイトが、きっちり収まった状態で閲覧できるわけです。

プログラミングをしているときに、その変数自体が存在しているかどうかを知りたい場合があります。
例えばPHPの場合では

if(isset($a)){
	echo "変数$aは存在する";
}else{
	echo "変数$aは存在しない";
}

if($a){
	echo "変数$aは存在する";
}else{
	echo "変数$aは存在しない";
}

といった判定が可能です。
また、配列かどうかを確認したい場合は、

if(is_array($a)){
	echo "変数$aは配列です";
}else{
	echo "変数$aは配列ではありません";
}

このように判断が可能です。

これまで携帯電話用のWebサイトについては、その規格が収束に向かいそうにないので、捨てていました。Docomoとauで見栄えが異なる、同じSoftbankでも機種により見栄えが異なるなど、それぞれWebサイトについての規格はばらばらで、技術者泣かせのところがありました。そんな不安定な分野なんて、そのうち消えてなくなると考えていました。

最近、iPhoneを初めAndroidなどのモバイル端末の爆発的な広がりをみると、目を見張るものがあります。これまでの携帯電話専用サイトとは異なる、スマートフォン専用サイトの需要が高まるのは確実でしょう。

特にAndroidについてはPCサイトと変らない技術でホームページ構築が可能です。HTML、XHTMLのタグは普通に使用できますし、CSS、JavaScriptも動作します。最新のAndroidではフルFlashの表示も可能です。
繰り返しになりますが、これまで携帯電話専用サイトの規格が定まらなかったのは、キャリア間、メーカー間の仕様の問題でした。しかし、Androidについて、最近ではdocomo、au、softbankから多くの端末がリリースされています。メーカーでいうと、SHARPやTOSHIBAなどは独自のOSからAndroid OS採用への切り替えが積極的のようです。時代の流れの速さについてゆくために、独自技術で精度を求めるより、オープンですぐれたプラットフォームを活用するほうがコストが少ないんでしょうね。

今回はHTML5の新要素である「nav」を組み込んでみます。

nav要素は、サイトの主要なナビゲーションを表します。「主要」という表現もあいまいで、線引きが難しいところですが。
外部サイトのリンクなど、当サイトに関係のないリンクには使用しません。例えば、グローバルナビゲーションやサイドナビゲーション、パンくずリストがnavで表現するのに適しています。また、いろいろな記事を参考にしていると、一般的にはフッターのメニューにnav要素は用いないようです。
これという決まりはありませんが、どこで線引きするか各々のサイトの構成を考慮して判断したほうがよいかと思います。

ひとまずHTML5の開発環境はあきらめて、このブログのHTML5化を進めようかと思います。
まずは、初めにHTML5の新要素である「header」と「footer」を組み込みます。

ちなみに、以下の確認環境を前提にしています。

Firefox 3.6.10
Google Chrome 6.0
Internet Explorer 8.0

さて、ごく一般的なサイトで見かけるレイアウトのコーディングで以下のようなものがあります。

<div id="header">
</div>
<div id="footer">
</div>

これをHTML5では以下のように表現することができます。

<header>
</header>
<footer>
</footer>

Monthly Archives

Search