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

CSS3のプロパティ「radius」を使ってborderの角丸を表現する方法です。

基本設定

以下のようにCSSで設定することで、borderで指定した枠線を角丸で表現することができます。

border: 3px solid blue;
border-radius: 10px;

1ピクセルで青の枠線の角を10pxの度合いで曲線で表現します。以下に実際の組み込み例を示します。
※もちろんIE8以下など対応していないブラウザでは閲覧できません。

border: 3px solid blue;
border-radius: 10px;

みさなまお使いのブラウザでは角が丸く表示されているでしょうか。

少し前まで、「border-radius」はCSS3の草案で、表現できるブラウザは存在していませんでしたが、Firefox5.0、Google Chrome 12では問題なく表示されているようです。
それまではGoogle ChromeとSafariでは「-webkit-border-radius」、Firefoxでは「-moz-border-radius」が用意されていましたが、近い将来「border-radius」に統一されるでしょう。

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

ちなみにIE8以下は対応していないので、見比べるとその効果を確認することができます。

これまで、リストを装飾するために「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でデザインされたサイトが、きっちり収まった状態で閲覧できるわけです。

Monthly Archives

Search