つい最近、iPhoneのAppStoreに、「Opera Mini」が登場しました。 開こうとするサイトを、一旦Operaのサーバを経由し、圧縮したデータを取得することで、 Safariよりも高速なブラウジングが出来るようです。 そもそも「Opera Mini」というのは、携帯端末でのOperaを指すようで、 今回リリースされたのは、そのiPhone版ということのようですね。 ただ、Safariではブラウザ判別の基準として、 ユーザエージェント内の「iPhone」という文字列をチェックしていましたが、 「Opera Mini」のそれには「iPhone」が含まれず、PC表示となるサイトがあるようです。 うちのほるめすメモ帳 - 暫定も例外でなく、 Safariと同様に見せるためには、「Opera Mini」の判別をする必要があります。「Opera Mini」のユーザエージェントの内容。 その通り「Opera Mini」という文字列が含まれるので、それを利用します。
<script type="text/javascript"> //モバイル端末の判定 var agent = navigator.userAgent; document.write( "ユーザエージェント：" + agent + "<br>" ); if( agent.search(/Opera Mini/) != -1 ){ // iPhone }else{ // PC } </script>この判定では、結局他の「Opera Mini」もiPhone側に属してしまうので、生ぬるい感じです。 僕は別に他のそれらがiPhoneとしてヒットしようが良いのですが、 もしそこまでこだわって制御するのであれば、結局IPチェックするしか無いのかなと思います。 うーん、まだSafariからOperaに乗り換える理由が生まれないかなぁ。 軽くなっている気はするけれど、ブックマーク移行できないし、 デフォルトでiPhone仕様のサイトをそのまま表示出来たら嬉しいね。
2010年4月15日木曜日
JavaScript 「Opera Mini」を判別して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プログラミングする時以上に実感しましたね。
2009年7月22日水曜日
CSS スタイルボックス作成
※追記：さらに見やすく内部変更しました。(091008) 「スタイルボックス」という名の、ただの枠付の箱です。 どちらのサイトからインスパイアしたのかはさておき、「この文章は強調したい」という為に作成しました。このようなモノになります。 両端にマージンを、ライン内にはパディングをそれぞれ5px与えています。 さらに、パッと見で分かりやすいように、行間を200%にしています。 「impact」というclass値で与えています。ソースは以下の通り。/* スタイルボックス作成 */ .impact{ border-color:#BBB #BBB #BBB #c94093; border-style:solid; border-width:1px 1px 1px 3px; padding:5px; margin:0px 5px; line-height: 200%; background-color:#DDD; }ブログのソースを開いて見てみれば分かりますが、「http://holmes21.up.seesaa.net/css/inblo.css」が参照先ですので、外部からすぐ参照出来ます。 さらに、すぐに作成出来るようにブックマークレット化しました。 完全に自分用ですが。javascript:window.clipboardData.setData('Text','<pre class="impact"></pre>');window.status='◆スタイルボックスをクリップボードへコピーしました。';void(0);
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行に左右両端とも表示出来るような違うやり方があるのか、はたまたこれに似た方法があるのかわからないです。 もう少し考えてみることにします。
2009年5月18日月曜日
平行線がありました
フツーにCSS内で見えないようにされているだけでした。 なので、そのCSSをそのままコメントアウト、その後＜hr＞挿入。
ね、簡単でしょ？ 昨日の平行線作る前に気付けば良かったのになぁ、もう必要無いよあれは。 でも、なんで消されてたんだろうか。 ページ表示に関わるならわかるけど、表示したからってそんなに崩れはしないんだけど。
2009年5月17日日曜日
簡易平行線作成
※この投稿はもう存在する意義を無くしました。 このテンプレートに変えてから＜hr＞がなぜか使えなかったので、簡易的な平行線を作成しました。 と言っても、＜hr＞を入れても全く反応が無いので、＜div＞を使って作ります。 先日の平行線と同じような感じですね。 この1つ前の記事でもテストで差し込みました。 以下のようなものになります。
以下が投稿作成時に差し込むタグです。<div id="horizon" ></div>そして、以下がテンプレートに書き加えたCSSです。/* 水平線 */ #horizon { width: 200px; height: 2px; margin-left: 1em; background-color:#204063; }本当は記事内中央に置きたかったのですが、それをするには大枠までいじらないといけないので、仕方なく「margin-left: 1em;」で置いています。 「1em」は1文字分という意味です。 水平線挿入用のJavaScriptも作らねば・・・。
2009年5月9日土曜日
投稿日付サイズ変更
この間には平行線を綺麗にしましたが、日付が相変わらず小さいままだったのでテンプレート内を検索してサイズ変更しました。h2.date-header { margin: 0; padding-top: 0; padding-$endSide: 0; padding-bottom: 0; padding-$startSide: 29px; text-transform: uppercase; color: $dateHeaderColor; background: url(http://www.blogblog.com/thisaway_blue/icon_date.gif) no-repeat 13px 0; font-size: 80%; font-weight: normal; }以下のように書き換えました。h2.date-header { margin: 0; padding-top: 0; padding-$endSide: 0; padding-bottom: 0; padding-$startSide: 29px; text-transform: uppercase; color: $dateHeaderColor; background: url(http://www.blogblog.com/thisaway_blue/icon_date.gif) no-repeat 13px 0; font-size: 100%; font-weight: bold; }
2009年5月7日木曜日
テンプレート変更
とりあえずテンプレートを変更してみました。 見てみた感じ一番記事の幅が大きそうに感じたものですね。 依然SyntaxHighlighterの中のソースは折りたたまれていますが、他の部分の長めの文章に関しては、フォントを小さくする事でまだ見やすくなったかと思います。 そもそもリンクが2行に渡って表示されるっていうのが個人的には嫌いな部分があるので、それを解消したかった部分もあります。 記事と記事の境目をもっとわかりやすくしたかったのですが、いかんせん日付が小さくなってしまって・・・ フォントと色は一括で変更できるのですが、日付の大きさまでは個別に変更できないのです。 この点も、テンプレート内書き換えでいけるのかな？ 同日に書かれた記事はその日付で括られてしまうので、やはり見にくいです。 間に挿入される平行線が狙い目かと。 というわけで、平行線変更終了。 この線の正体は＜hr＞でなく＜div＞のスタイル変更でした。 なので・・・.post { margin-top: 0; margin-$endSide: 8px; margin-bottom: 14px; margin-$startSide: 21px; padding: 0; border-bottom: 3px solid #d8e7f7; }上のように書いてあるソースを以下のように書き換えました。.post { margin-top: 0; margin-$endSide: 8px; margin-bottom: 14px; margin-$startSide: 21px; padding-bottom: 10px; border-bottom: 3px solid #204063; }これで平行線の色を濃く、かつ「カテゴリ」との隙間を空けることで見やすくなりました。 ホントは色ももっと良いのに変えたいけど、生憎センスが無いもので。 あー 明日は記事ずつの日付でも探してみます。
投稿
