usamimi.infoに借りた「ほるめすメモ帳 - 暫定」には、
作っているサンプルやメモなど、地味に少しずつまとめています。
iPhoneでも見やすいようにシンプルに書いていたものの、
そろそろ縦に長く伸びてきた事とPCからでは質素に見えてしまうので、
PCとiPhoneでCSSを切り替えて反映してみました。
作ってみたものはこれです。
ほるめすメモ帳 - 暫定
PCとiPhoneとのCSSの切り替えは、
以前調べたOS判別を利用し、<HEAD>内で行っています。
1.<script type="text/javascript">
2. if( navigator.userAgent.search(/iPhone/) != -1 ){
3. document.write('<link href="css/iphone.css" rel="stylesheet" type="text/css"/>');
4. }else{
5. document.write('<link href="css/pc.css" rel="stylesheet" type="text/css"/>');
6. }
7.</script>
グループ分けを行い、「float」を行うことで、
左右にグループを表示することが出来ますが、
IE以外でのブラウザでは、そのままでは表示がおかしくなります。
この問題を解決するために1日も悩んでしまいました。
原因は、floatを行うことによる高さ(height)の消失です。
また、対策として「clearfix」という処理があります。
詳しくは以下の参考サイトで。
今回は、一番上のサイトのサンプルをそのまま使用させて頂きました。
ただ、仕様が厳密に違うのか、横幅(width)などが綺麗に反映されなかったので、
.clearfix:after時に、横幅と背景色を指定し直しています。
「:after」などに関しては、以下のページが参考になりました。
CSS: 宣言
Webページの世界は奥が深いんだなぁと、
Webプログラミングする時以上に実感しましたね。
投稿
0 件のコメント:
コメントを投稿