Home > Archives > December 2011
December 2011
スマートフォンの初期記述
- 2011-12-31 (Sat)
- Web
今日で2011年も終わり。いろいろあった今年でしたね。
来年こそ、日本が良い年であることを祈りましょう。^^
今年最後の情報は、スマートフォンの初期記述の方法を！
まず、スマートフォンとPC、携帯の違いはディスプレイの大きさになります。
基本、スマートフォンはパソコンに似たHTMLで記述しますが、HTMLは5.0であることです。
現時点PC版のブラウザは、HTML5.0に対応しつつあります。FireFox、Safariなどのモダンブラウザは、5.0で記述してもほぼ大丈夫ですが、IEはまだまだみたいです。
IE9.0は対応していると言われていますが、CSS3.0に対応していない部分が多いようです。
スマートフォン（iPhone、Android）は、HTML5.0、CSS3の両方を使用するのが前提みたいなので、タグもそのように記述します。
一般的な記述は以下のようになります。
-----------------------------------------------------------------------
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<tilte>SmartPhone</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
-------------------------------------------------------------------------
このコードの中で重要な点が、スクリーンサイズを最適化する指定です。
viewport属性の記述によって、スマートフォン上でディスプレイにフィットしたサイズで表示させてくれます。
プロパティは以下のようなものが使用できます。
widthは、viewportの幅で固定の場合はwidth=320とし、デバイスの幅に合わすにはwidth=device-widthと指定します。
heightは、viewportの高さで、書きかたはwidthと同じ方法となります。
initial-scaleは、倍率の初期値で数字は乗数とし、initial-scale=1.0のように指定します。
maximum-scaleは、倍率の最大値、minimum-scaleは倍率の最小値を指定できます。
user-scalableは、拡大・縮小操作の可否を指定できます。指二本を使って操作するピンチ操作ができるかどうかを指定します。ピンチ操作ができないようにするのであれば、user-scalable=noとします。
スマートフォンのサイトを作った場合、PC用のサイトと振り分けたいときがあります。
アクセスしたデバイスによってサイトを振り分ける方法にはいろいろあるようですが、ここではhtaccessファイルを使った方法を紹介します。
テキストエディタを開いて、以下のように記述します。
------------------------------------------------------------------------------
# http://abc.com/からhttp://abc.com/smp/への転送
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPad|Android)
RewriteRule ^$/smp/[R]
------------------------------------------------------------------------------
#行は説明書きです。
サーバによってはRewriteが使えないようにしているものもあるようですので、
その場合はJSかPHPを使って振り分ける方法を取ります。
PC版のサイトを作る方はスマートフォン版のサイトを作る機会も増えるかと思います。
基本記述さえ押さえておけば、作り方はPCと同様だと考えてみてください。
実際は、HTML5.0とCSS3を学習すれば何とかなるのではという感想です。^^；
では、良いお年を！ o(^^)o
来年こそ、日本が良い年であることを祈りましょう。^^
今年最後の情報は、スマートフォンの初期記述の方法を！
まず、スマートフォンとPC、携帯の違いはディスプレイの大きさになります。
基本、スマートフォンはパソコンに似たHTMLで記述しますが、HTMLは5.0であることです。
現時点PC版のブラウザは、HTML5.0に対応しつつあります。FireFox、Safariなどのモダンブラウザは、5.0で記述してもほぼ大丈夫ですが、IEはまだまだみたいです。
IE9.0は対応していると言われていますが、CSS3.0に対応していない部分が多いようです。
スマートフォン（iPhone、Android）は、HTML5.0、CSS3の両方を使用するのが前提みたいなので、タグもそのように記述します。
一般的な記述は以下のようになります。
-----------------------------------------------------------------------
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<tilte>SmartPhone</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
-------------------------------------------------------------------------
このコードの中で重要な点が、スクリーンサイズを最適化する指定です。
viewport属性の記述によって、スマートフォン上でディスプレイにフィットしたサイズで表示させてくれます。
プロパティは以下のようなものが使用できます。
widthは、viewportの幅で固定の場合はwidth=320とし、デバイスの幅に合わすにはwidth=device-widthと指定します。
heightは、viewportの高さで、書きかたはwidthと同じ方法となります。
initial-scaleは、倍率の初期値で数字は乗数とし、initial-scale=1.0のように指定します。
maximum-scaleは、倍率の最大値、minimum-scaleは倍率の最小値を指定できます。
user-scalableは、拡大・縮小操作の可否を指定できます。指二本を使って操作するピンチ操作ができるかどうかを指定します。ピンチ操作ができないようにするのであれば、user-scalable=noとします。
スマートフォンのサイトを作った場合、PC用のサイトと振り分けたいときがあります。
アクセスしたデバイスによってサイトを振り分ける方法にはいろいろあるようですが、ここではhtaccessファイルを使った方法を紹介します。
テキストエディタを開いて、以下のように記述します。
------------------------------------------------------------------------------
# http://abc.com/からhttp://abc.com/smp/への転送
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPad|Android)
RewriteRule ^$/smp/[R]
------------------------------------------------------------------------------
#行は説明書きです。
サーバによってはRewriteが使えないようにしているものもあるようですので、
その場合はJSかPHPを使って振り分ける方法を取ります。
PC版のサイトを作る方はスマートフォン版のサイトを作る機会も増えるかと思います。
基本記述さえ押さえておけば、作り方はPCと同様だと考えてみてください。
実際は、HTML5.0とCSS3を学習すれば何とかなるのではという感想です。^^；
では、良いお年を！ o(^^)o
- Comments: 1388
- TrackBack (Close): -
CSS3でボタン作成
- 2011-12-29 (Thu)
- Web
今年もカウントダウンであと3日となりました。
映画が好きな僕は、いろいろなものを見てきましたが、どれが良かったと聞かれても「どれ？」ってと聞き返してしまう。
強く印象に残ったものは特になかった。まぁ～、僕がサスペンス、ホラー、SF、アクション・・等々なので、感動ドラマはあまり見ないせいかもしれません。
ただ、漠然とストーリー性の薄いものを見て、後を引きずらないものを見たいだけかもしれませんね。つまり、考えなくて面白いと思える映画が良いのかも知れません。^^；
---------------------------------------------------------------------------------
今日はCSS3でボタンの作成をご紹介します。ただし、IEではまだ対応されていません。
確認は、Firefox、Chrome、Safariのいずれかで・・。
基本となるソースコードは以下のとおりです。
<section class="btn">
<p><button>ボタン</button></p>
</section>
上のボタンをCSS3でカスタマイズしてみます。
まず、一般的な手法でボタンの輪郭にボーダーを設定します。
上と左側にグレーの線、右と下側にグレーよりも濃い色をつけて、立体感を
与え、ボタンの大きさをパディングで調整します。
ボタンの文字は太字、#666の色を付け、マウスを重ねるとポインターの形にします。
.btn button {
border-top:1px solid #ccc;
border-right:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #ccc;
padding:5px 20px;
font-weight:bold;
cursor:pointer;
color:#666;
}
次は、ボックスの角丸とボックスと文字の影付きを付けてみます。
これは、Safari、Firefox、Chromeの各プロパティで記述します。
まず、
radiusプロパティでボックスのコーナーを角丸（3px）にします。
次に
shadowプロパティを使って影付きを設定します。
見てもらうと分かるように4つの値が指定できます。
横方向のずれ、下方向のずれ、ぼかし具合、影の色の順です。
また、カンマで複数の影が指定ができます。
.btn button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;
-webkit-box-shadow: 1px 1px 2px #E7E7E7;
-moz-box-shadow: 1px 1px 2px #E7E7E7;
padding: 5px 20px;
font-weight: bold;
cursor: pointer;
color: #666;
}
最後にボタンにグラデーションを付けてみます。
以下のプロパティを追加します。Firefox、Safariに対応して記述しています。
上から下への線形のグラデーションで、上が白、下半面をグレー色となります。
background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));
もし、ボタンを押したときにボタンが押されているように見せるには、擬似クラスactiveにスタイルを用いると良いでしょうね。
.btn button:active {
background:#eee;
padding:6px 20px 4px;
}
いろいろなアレンジができるようです。お試しください。
映画が好きな僕は、いろいろなものを見てきましたが、どれが良かったと聞かれても「どれ？」ってと聞き返してしまう。
強く印象に残ったものは特になかった。まぁ～、僕がサスペンス、ホラー、SF、アクション・・等々なので、感動ドラマはあまり見ないせいかもしれません。
ただ、漠然とストーリー性の薄いものを見て、後を引きずらないものを見たいだけかもしれませんね。つまり、考えなくて面白いと思える映画が良いのかも知れません。^^；
---------------------------------------------------------------------------------
今日はCSS3でボタンの作成をご紹介します。ただし、IEではまだ対応されていません。
確認は、Firefox、Chrome、Safariのいずれかで・・。
基本となるソースコードは以下のとおりです。
<section class="btn">
<p><button>ボタン</button></p>
</section>
上のボタンをCSS3でカスタマイズしてみます。
まず、一般的な手法でボタンの輪郭にボーダーを設定します。
上と左側にグレーの線、右と下側にグレーよりも濃い色をつけて、立体感を
与え、ボタンの大きさをパディングで調整します。
ボタンの文字は太字、#666の色を付け、マウスを重ねるとポインターの形にします。
.btn button {
border-top:1px solid #ccc;
border-right:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #ccc;
padding:5px 20px;
font-weight:bold;
cursor:pointer;
color:#666;
}
次は、ボックスの角丸とボックスと文字の影付きを付けてみます。
これは、Safari、Firefox、Chromeの各プロパティで記述します。
まず、
radiusプロパティでボックスのコーナーを角丸（3px）にします。
次に
shadowプロパティを使って影付きを設定します。
見てもらうと分かるように4つの値が指定できます。
横方向のずれ、下方向のずれ、ぼかし具合、影の色の順です。
また、カンマで複数の影が指定ができます。
.btn button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;
-webkit-box-shadow: 1px 1px 2px #E7E7E7;
-moz-box-shadow: 1px 1px 2px #E7E7E7;
padding: 5px 20px;
font-weight: bold;
cursor: pointer;
color: #666;
}
最後にボタンにグラデーションを付けてみます。
以下のプロパティを追加します。Firefox、Safariに対応して記述しています。
上から下への線形のグラデーションで、上が白、下半面をグレー色となります。
background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));
もし、ボタンを押したときにボタンが押されているように見せるには、擬似クラスactiveにスタイルを用いると良いでしょうね。
.btn button:active {
background:#eee;
padding:6px 20px 4px;
}
いろいろなアレンジができるようです。お試しください。
- Comments: 0
- TrackBack (Close): -
フリックインターフェイス
- 2011-12-27 (Tue)
- Web
年末ですね。どこもかしこも忙しい気がします。
テレビ番組もスペシャルばかりで、見るものない・・。そう思いませんか？
まぁ～、通常でも見るものが少ないという人もいるでしょう。^^；
皆さんは、年末の番組は何を見るのでしょうかね。紅白？それとも裏番組。
私は、見ながら族ですから、ターゲットはその時間で決めます。
人によっては、ビデオで裏番組を録画する人もいるでしょうが、それをいつ観るのでしょうか？お正月中、テレビばかりでは味わいがないですよね。
でも、外に出ると車の渋滞、飲食店は混む・・。
結局は、いつものお正月を過ごすことになるのでは。それが自然かな。
今日は、スマートフォンで使用されるフリックの作り方を記述します。
基本はJSです。
必要なJSライブラリは、jquery.flicksimple.jsとjquery-1.7.min.jsです。
jquery-1.7.min.jsは、DLしたJQueryのバージョンで指定します。
ソースコードは以下のようになります。
-----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Flick test</title>
<link rel="stylesheet" type="text/css" href="css/import.css" media="all">
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.flicksimple.js"></script>
</head>
<body>
<div id="wrapper">
<article>
<div id="mainimg">
<ul>
<li><a href="#"><img src="images/img01.jpg" width="139" height="168" alt="Work01"></a></li>
<li><a href="#"><img src="images/img02.jpg" width="289" height="168" alt="Work02"></a></li>
<li><a href="#"><img src="images/img03.jpg" width="89" height="168" alt="Work03"></a></li>
<li><a href="#"><img src="images/img04.jpg" width="106" height="168" alt="Work04"></a></li>
</ul>
<!-- /mainimg --></div>
<script>
$('#mainimg').flickSimple();
</script>
</article>
</body>
</html>
---------------------------------------------------------------------------------------
次にCSSですが、フリックの部分は以下のように記述します。
#mainimg {
width: 100%;
position: relative; /* IE6・7の overflowバグ回避 */
overflow: auto; /* JavaScript無効時にスクロール表示させたいから */
}
#mainimg ul {
display: block;
width: 400%;
margin: 0;
padding: 0;
}
#mainimg ul li {
float: left;
list-style-type: none;
width: 25%;
}
#mainimg ul は、リストの要素数÷一度に表示させる要素数×100％
（ここでは一度に表示させる画像は1つで、画像（要素）数が4枚）
#mainimg ul liは、100％÷リストの要素数
（ここでは、リストの要素が4つなので25％）
この記述をすることでリスト要素が水平に並ぶようになる。
最後にフリック機能を追加するので、id[mainimg]にJSを追加します。
<script>
$('#mainimg').flickSimple();
</script>
以下のURLにアクセスするとサンプルが見れます。
http://www.k-fix.jp/t/flick/
スマートフォンで確認してください。PCでも見れますが、マウスで画像をフリックすると動きは見れます。
テレビ番組もスペシャルばかりで、見るものない・・。そう思いませんか？
まぁ～、通常でも見るものが少ないという人もいるでしょう。^^；
皆さんは、年末の番組は何を見るのでしょうかね。紅白？それとも裏番組。
私は、見ながら族ですから、ターゲットはその時間で決めます。
人によっては、ビデオで裏番組を録画する人もいるでしょうが、それをいつ観るのでしょうか？お正月中、テレビばかりでは味わいがないですよね。
でも、外に出ると車の渋滞、飲食店は混む・・。
結局は、いつものお正月を過ごすことになるのでは。それが自然かな。
今日は、スマートフォンで使用されるフリックの作り方を記述します。
基本はJSです。
必要なJSライブラリは、jquery.flicksimple.jsとjquery-1.7.min.jsです。
jquery-1.7.min.jsは、DLしたJQueryのバージョンで指定します。
ソースコードは以下のようになります。
-----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Flick test</title>
<link rel="stylesheet" type="text/css" href="css/import.css" media="all">
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.flicksimple.js"></script>
</head>
<body>
<div id="wrapper">
<article>
<div id="mainimg">
<ul>
<li><a href="#"><img src="images/img01.jpg" width="139" height="168" alt="Work01"></a></li>
<li><a href="#"><img src="images/img02.jpg" width="289" height="168" alt="Work02"></a></li>
<li><a href="#"><img src="images/img03.jpg" width="89" height="168" alt="Work03"></a></li>
<li><a href="#"><img src="images/img04.jpg" width="106" height="168" alt="Work04"></a></li>
</ul>
<!-- /mainimg --></div>
<script>
$('#mainimg').flickSimple();
</script>
</article>
</body>
</html>
---------------------------------------------------------------------------------------
次にCSSですが、フリックの部分は以下のように記述します。
#mainimg {
width: 100%;
position: relative; /* IE6・7の overflowバグ回避 */
overflow: auto; /* JavaScript無効時にスクロール表示させたいから */
}
#mainimg ul {
display: block;
width: 400%;
margin: 0;
padding: 0;
}
#mainimg ul li {
float: left;
list-style-type: none;
width: 25%;
}
#mainimg ul は、リストの要素数÷一度に表示させる要素数×100％
（ここでは一度に表示させる画像は1つで、画像（要素）数が4枚）
#mainimg ul liは、100％÷リストの要素数
（ここでは、リストの要素が4つなので25％）
この記述をすることでリスト要素が水平に並ぶようになる。
最後にフリック機能を追加するので、id[mainimg]にJSを追加します。
<script>
$('#mainimg').flickSimple();
</script>
以下のURLにアクセスするとサンプルが見れます。
http://www.k-fix.jp/t/flick/
スマートフォンで確認してください。PCでも見れますが、マウスで画像をフリックすると動きは見れます。
- Comments: 1
- TrackBack (Close): -
JQueryの初歩
- 2011-12-26 (Mon)
- Web
昨日、家政婦のミタを一気に見た。
久しぶりにドラマをすべて見た感想・・。けっこう、面白かったという印象。
まあ～、人によって好みがあるので感想は控えめにするが、主役のミタの演技が回を重ねることによって変化していく姿が印象的だった。
見ていない人は、是非見てください。見た方の印象が聞きたいものだ。
さて、今日はJQueryの初歩という題にしてみました。最近のWebでは広く用いられ、プログラムを初めて覚える方には意味が分からないかもしれませんが、それはそれで慣れるしかないでしょう。
First JQueryというページのソースを以下のように記述します。
--------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>First JQuery</title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function(){
$(":button").click(function(){
$("span").text("JQueryが実行されました。");
});
});
</script>
</head>
<body>
<input type="button" value="Click">
<hr>
<span>[Click]ボタンを押して！</span>
</body>
</html>
--------------------------------------------------------------------------------
適当な名前を付けて保存し、ブラウザで開きます。
Clickというボタンをクリックすると、spanで囲まれた文字が入れ替わります。
もっとも基本的なプログラムになります。
[プログラムの解説]
htmlの記述は説明はしませんので、分からない方は勉強しましょう。^^
文字コードは一般的にUTF-8コードを使った方が良いでしょう。ね。
よって、METAタグには文字コードを指定します。
JQuery-1.7.min.jsのファイルをJQueryサイトからダウンロードします。
http://jquery.com/
ダウンロードしたバージョンが異なる場合は、そのJSファイルの名前に書き換えます。
SCRIPTタグの中にJQueryのプログラムを記述します。
$(function() {
ここに実行したいプログラムを書きます。
});
Clickボタンは、$(":button")セレクタでアクセスします。クリックされた時の動作は、クリックイベントで記述できますので、ボタンがクリックされた時の処理は次のように記述します。
$(":button").click(function() {
ボタンがクリックされた時の処理をここに書きます。
});
SPANタグは、$("span")セレクタでアクセスでき、SPANタグに書かれている文字を変更したい場合はtext関数を使って、「JQueryが実行されました」という文字をSPANタグ内に記述します。
プログラムを意味を考えながら打っていくことが大事です。それとJQueryの基本記述をまず覚え、後は利用できる関数などを調べながら学習するといろんなことが可能になります。
JQueryはいろいろなライブラリがネット上で公開されていて、簡単に利用できます。基本的な記述を覚えていると自分なりの効果も可能となります。
久しぶりにドラマをすべて見た感想・・。けっこう、面白かったという印象。
まあ～、人によって好みがあるので感想は控えめにするが、主役のミタの演技が回を重ねることによって変化していく姿が印象的だった。
見ていない人は、是非見てください。見た方の印象が聞きたいものだ。
さて、今日はJQueryの初歩という題にしてみました。最近のWebでは広く用いられ、プログラムを初めて覚える方には意味が分からないかもしれませんが、それはそれで慣れるしかないでしょう。
First JQueryというページのソースを以下のように記述します。
--------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>First JQuery</title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function(){
$(":button").click(function(){
$("span").text("JQueryが実行されました。");
});
});
</script>
</head>
<body>
<input type="button" value="Click">
<hr>
<span>[Click]ボタンを押して！</span>
</body>
</html>
--------------------------------------------------------------------------------
適当な名前を付けて保存し、ブラウザで開きます。
Clickというボタンをクリックすると、spanで囲まれた文字が入れ替わります。
もっとも基本的なプログラムになります。
[プログラムの解説]
htmlの記述は説明はしませんので、分からない方は勉強しましょう。^^
文字コードは一般的にUTF-8コードを使った方が良いでしょう。ね。
よって、METAタグには文字コードを指定します。
JQuery-1.7.min.jsのファイルをJQueryサイトからダウンロードします。
http://jquery.com/
ダウンロードしたバージョンが異なる場合は、そのJSファイルの名前に書き換えます。
SCRIPTタグの中にJQueryのプログラムを記述します。
$(function() {
ここに実行したいプログラムを書きます。
});
Clickボタンは、$(":button")セレクタでアクセスします。クリックされた時の動作は、クリックイベントで記述できますので、ボタンがクリックされた時の処理は次のように記述します。
$(":button").click(function() {
ボタンがクリックされた時の処理をここに書きます。
});
SPANタグは、$("span")セレクタでアクセスでき、SPANタグに書かれている文字を変更したい場合はtext関数を使って、「JQueryが実行されました」という文字をSPANタグ内に記述します。
プログラムを意味を考えながら打っていくことが大事です。それとJQueryの基本記述をまず覚え、後は利用できる関数などを調べながら学習するといろんなことが可能になります。
JQueryはいろいろなライブラリがネット上で公開されていて、簡単に利用できます。基本的な記述を覚えていると自分なりの効果も可能となります。
- Comments: 0
- TrackBack (Close): -