アーカイブ

‘サイト制作’ カテゴリーのアーカイブ

使える!XHTML/CSS辞典

2010 年 2 月 15 日 コメント 1 件

iPhoneアプリのXHTML/CSS辞典です。昨年購入したんですが、今月のバージョンアップで内容が大幅に増加しています。

まず、XHTML辞典とCSS辞典の2種類が選択できるようになりました。
内容も単なるタグ辞典では無く、サンプルソースも丁寧に記載されていて、実際にSafariでも表示を確認することができるようになっています。

他にも基本的な知識や用語の解説からカラーチャートまで掲載されていますので、重たいリファレンス本を持たなくてもいいかもしれません。
サイト制作者にはお勧めです。

アプリ名:大藤幹のHTML/XHTML/CSS辞典
価格:900円

カテゴリー: iPhone, アプリ, サイト制作 タグ:

懐かしいHP200LXの画面をiPhoneで。。

2009 年 7 月 13 日 コメント 1 件

iPhone用のページの作り方が少しわかってきたので、スタイルシートの勉強がてらに、懐かしいHP200LXのトップ風の画面を作ってみました。
もちろんメニュー画面を作っただけですので、このままではトップ画像を貼り付けているのとあまり変わりませんが、これからこの画面をベースにいろいろ遊んでみたいな、と思っています。
lx
(縦横はちゃんと変わるように作ってますが、横で見てもらうと200LXのような画面になります) ⇒サンプルへ

HP200LXは、知る人ぞ知るモバイルの名機で、私も2002年くらいまでは毎日使っていました。モバイルの原点ともいえるマシンで、既に発売は終了していますが、今でも愛用者は多いようです。私も時々さわって、こんなマシンが今の技術で出てこないかなー、なんて思ってます。
hp200lx

iPhoneを当時の200LXのように使えないものかと今摸索しています。
持っていて楽しくなる、という点では私の中では共通してますし。。。
HPさんも電卓アプリのように、当時の200LXを模倣したアプリを作ってくれないかな。

カテゴリー: iPhone, サイト制作 タグ:

時刻をリアルタイムで表示する

iPhoneとは直接関係ありませんが。。。これも備忘録としてメモ。。
時刻をリアルタイムで表示させるJavaScriptです。

●Script部分

<script Language=”JavaScript”><!–
window.onload = function(){
myClock.time();
setInterval(“myClock.time()”, 1000);
}
var myClock = {
 time : function(){
 var dateObj = new Date();
 var y = dateObj.getFullYear();
 var t = dateObj.getMonth() + 1;
 var d = dateObj.getDate();
 var h = dateObj.getHours();
 var m = dateObj.getMinutes();
 var s = dateObj.getSeconds();
 document.getElementById(“currentTime”)
.innerHTML = y+”/”+t+”/”+d+” “+h+”:”+m+”:”+s;
}
}
// –>l;</script>

●body部分

<span id=”currentTime”></span>

サンプルへ

カテゴリー: iPhone, サイト制作 タグ:

画面読込時にアドレスバーを隠す

iPhoneサイト作成のTipsを備忘録としてメモしておきます。サイトを表示させる際に、自動でアドレスバーを隠します。

<使用しているTIPS>
・読込み時にアドレスバー分スクロール。
・bodyの高さを最低416pxに指定する。
・画面の縦横が変わった場合の対応
(再度アドレスバーを隠す・文字サイズ固定)

●アドレスバーをスクロールさせるScript

<script type=”text/javascript”>
function hideAdBar(){
setTimeout(“scrollTo(0,1)”, 100);
}
</script>

●高さを最低416pxにし、縦横が変化した場合文字のサイズが変わらないようにするStyle

<style type=”text/css”>
body {
min-height: 416px;
-webkit-text-size-adjust: none;
}
</style>

●読込時に上記Scriptを呼び出し、縦横が変わった際にもScriptを読み込むようにする

<body onLoad=”hideAdBar()” onOrientationChange=”hideAdBar()”>

サンプルへ

カテゴリー: iPhone, TIPS, サイト制作 タグ:

やなはるどっとこむ

「iPhoneサイト制作ハンドブック」で勉強しながら、ここのサイトのトップページを作ってみました。・・・とはいえ、画像も使わず、何の面白みもないページですが。。。

http://www.yanaharu.com/
※PC版のCSSは作ってないので、PCで見ると極めてシンプルです(汗)

ただ、ライブラリを使わずに手で書いてこういうページが作れるんだ、というのが少しわかってきました。これから勉強してもっと作りこんでいこうと思います。

iphone-131

ついでにホーム画面登録用のアイコンも作ってみました。

iphone-130

カテゴリー: iPhone, サイト制作 タグ:

iPhoneサイト制作ハンドブック

2009 年 2 月 1 日 コメント 2 件

iphone_hand

インプレスジャパンから発売されている「iPhoneサイト制作ハンドブック」を購入しました。3,200円という価格なんで迷って何度も立ち読みしていたんですけど、ちょっとお酒が入った帰り道に寄った書店で思わず買ってしまいました(汗)

iPhone向けのサイトを作るにあたっての基礎知識や注意点、CSSの書き方などが詳しく書かれています。このブログはWordpress+WPtouchで何も考えずにiPhone対応ができているのですが、一からiPhone向けサイトを作っていくにはどうしたらよいのかがこの本でとても勉強になります。iPhoneサイト製作者にはぜひおすすめです。

カテゴリー: iPhone, サイト制作 タグ: