usamimi.infoに借りた「ほるめすメモ帳 - 暫定」には、 作っているサンプルやメモなど、地味に少しずつまとめています。 iPhoneでも見やすいようにシンプルに書いていたものの、 そろそろ縦に長く伸びてきた事とPCからでは質素に見えてしまうので、 PCとiPhoneでCSSを切り替えて反映してみました。 作ってみたものはこれです。 ほるめすメモ帳 - 暫定 PCとiPhoneとのCSSの切り替えは、 以前調べたOS判別を利用し、<HEAD>内で行っています。<script type="text/javascript"> if( navigator.userAgent.search(/iPhone/) != -1 ){ document.write('<link href="css/iphone.css" rel="stylesheet" type="text/css"/>'); }else{ document.write('<link href="css/pc.css" rel="stylesheet" type="text/css"/>'); } </script>PC版CSSでは、以下の様にグループ分けしています。グループ分けを行い、「float」を行うことで、 左右にグループを表示することが出来ますが、 IE以外でのブラウザでは、そのままでは表示がおかしくなります。 この問題を解決するために1日も悩んでしまいました。 原因は、floatを行うことによる高さ(height)の消失です。 また、対策として「clearfix」という処理があります。 詳しくは以下の参考サイトで。
今回は、一番上のサイトのサンプルをそのまま使用させて頂きました。 ただ、仕様が厳密に違うのか、横幅(width)などが綺麗に反映されなかったので、 .clearfix:after時に、横幅と背景色を指定し直しています。 「:after」などに関しては、以下のページが参考になりました。 CSS: 宣言 Webページの世界は奥が深いんだなぁと、 Webプログラミングする時以上に実感しましたね。
2009年10月23日金曜日
ほるめすメモ帳にCSSを反映しました
2009年8月24日月曜日
iPhoneにスケールを合わせる1行
ひとまず、昨日使用出来るようになったusamimi.infoにindexページを作成。 本当にリンクのみですが、ひとまずはこのままで。 さてそのindexページですが、問題が一つ。 iPhoneで覗いて見ると、このように表示されます。ページの余白まで見てしまい、文字が小さく表示されます。 この小ささでは、ピンチイン(2本指で広げる動作)をしてズームしないと、見るのが難しいです。 そこでこの1行。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 " />こちらのサイトを参考にしました。 meta の viewport - ZeBeVogue別館 <meta>タグでname「viewport」を宣言すると、iPhone専用になります。 widthで宣言している「device-width」は、携帯端末用に用意された値らしく、iPhoneでは320pxになります。 300など、普通の数値を割り当てても良いですが、ここでは手っ取り早くしています。 「initial-scale」は初期拡大率で、これもそれ以外でもOKです。 「maximum-scale」は最大拡大率、その反対の「minimum-scale」もありますが、 拡大を許可する「user-scalable」が0なので、拡大縮小が出来ません。 この1行を<head>内に書くだけで、見やすさがグンと上がります。もうこれだけで、リンク集とかに使えるさっぱりしたページになりますね。
2009年6月28日日曜日
HTML+CSS エラーメモ
※追記：書いてから見てみると出来てますね。 え、なんで？ ※さらに追記：原因(？)がわかりました。 別のCSSファイルに書いたCSSをclass名で当てていたものが、 うまく反映されていないようです。 理由が分からないから余計に混乱します・・・。 作ってるうちにムカついてきたので、頭を冷やすついでにメモ。 HTMLとCSSを組み合わせてとあるページサンプルを作っている途中なのですが、テーブルのセル内でのレイアウトについて困っています。 それは、1行内に左右両端にそれぞれオブジェクトを配置して表示するということ。とすると、ご覧の通り物体2が1行下に表示されます。物体1物体2<div> <div style="float:left;">物体1</div> <div style="text-align:right;">物体2</div> </div>原因は、＜div＞を使用しているせいです。 ＜DIV＞－HTMLタグリファレンス ＜div＞は、自動的にその前後で改行を行う「ブロック要素」なのです。 それでは困ってしまうので、改行されない＜span＞を使います。物体1物体2すると今度は、物体2が左に並べられてしまいます。<div> <span style="float:left;">物体1</span> <span style="text-align:right;">物体2</span> </div>これも原因は＜span＞を使用しているせいで、「text-align」が適用されないのです。 text-align - CSS Dencitie こちらにある通り、「text-align」は「ブロック要素」に適用されるものであり、＜span＞のような「インライン要素」には適用されないのです。 んー、これはどうしたものか・・・。 1行に左右両端とも表示出来るような違うやり方があるのか、はたまたこれに似た方法があるのかわからないです。 もう少し考えてみることにします。
投稿
