> > ほるめすメモ帳にCSSを反映しました

2009年10月23日金曜日

ほるめすメモ帳にCSSを反映しました 

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プログラミングする時以上に実感しましたね。
投稿者 ほるめす 時刻: 23:51
カテゴリ: , , ,

0 件のコメント:

コメントを投稿