リストタグでメインナビを作る際、IEのみなぞの隙間が下にできる場合がある。
IEではリストタグのデフォルトのline-heightが高くとられているために起こりうる。
margin:0;とpadding:0;は必ず書くとして
liタグline-height:0;
aタグline-height:normal;
以上を書くとなおるようです。
しかし、どうやら、、IE９は仕様が変わるようなんです。
IE９ではデフォルトのline-heightが狭くなるとのことで今までのサイトのレイアウトがずれることも
無いことはないとのこと。
対処法としては、
互換モードの使用か、
フォントの指定を明示すること。
この二点のようです。
デフォルトが他のブラウザと同じになるのはいいことですが、、
毎回IEには苦戦・・
ホームページを作成の際にトップページにFLASH動画を入れたサイトをよく見かけます。
最近ではiphoneやipadが普及しFLASHを表示できないことから、打ち合わせの時に「FLASHはiphoneで見れないからいらない！」なんて言葉をよく聞きます。
確かに見れないです。どっかのサーバーを介してFLASHを表示させるブラウザアプリなんかもありますが、実際使ってみての感想は、FLASHが表示される速度がとにかく遅いです。
フルFLASHのサイトなんかはカクカクすぎて見れたもんじゃありません。
が、自分はipadを個人的に持っていますが、ネットサーフィンをしていて、FLASHが表示されないのが思ってたよりストレスになるんですよ。
細かく言うとFLASHをどこまで使用しているのか分からないんです。
トップページのイメージ動画程度だったらいいのですが、メインナビのボタンがFLASHだったりするとページは表示されているのに、どこのページにも移動できない！なんて事もありました。
たしかにフルFLASHやボタン部分をiphoneやipadで対応させる事はできませんが、
トップページのイメージ動画程度なら、PCサイトではFLASHを表示し、iphoneやipadで見に来た人には静止画像を表示させる事が可能です。
やり方は簡単です。
リンクを入れたい場合 ↓
簡単ですよね。
最近では簡単なスライドならJqueryでもできるので需要は少ないかもしれませんが、まだまだ細かい動きはFLASHには敵いませんもんね！
※objectやparamの書き方では、Flashと静止画像が同時に表示されてしまう場合があります。
object要素にclassidとcodebaseが書かれていると、ブラウザによってはOBJECT要素を解釈できず、代替として書かれた EMBED要素と画像を表示してしうようです。
IE８やChrome上では表示がうまくいっているswfが
IE９上で何故か、1ピクセルずれる（隙間があく）現象が起こりました。
最初は、記述が間違っているのだと思い、
Flashでhtml出力し、JSを新しいものに変え、試して見ても
直らず。
とても困りました。
調べていると、こんな記事が。。まったく同じ現象とは言いがたいですが。
http://www.forest.impress.co.jp/docs/news/20110518_446591.html
ちょっと前の記事ですが
もともとIE9とflashは相性がよくないようで。
ちなみに全く同じ悩みの人もWEB上にちらほら、、
うまくいくこともあるようですが。
厳密にはずれているのではなく、1ピクセル縮小して表示されているようです。
とはいえピクセル数あげてみると、他のブラウザではオーバーしてしまいます。
overflow:hidden
で回避できますが・・どちらにしろ不完全ですね。。
結局原因はわかりませんが
この先もいろいろ試してご報告したいと思います。
JavaScriptの動作で不可思議な事象にあたり、バグ探しを・・
最初はロジック的な誤りだと思い、ソースのトレースで探していたのだが
原因がわからず、結局Alertだらけにして動作を追う事になり、
結果すごく単純な原因でした。
var ObjectStruct {
x:0,
y:0,
z:0
}
とこのオブジェクト内容のバックアップを取って後でバックアップを復元しているつもりが・・・
var BackObj = ObjectStruct;
このBackObjは単なる参照にしかなっていなかったという話です。
具体例を以下に、
var G_BackPcImageTmp = {
name: ”,
w: 0,
h: 0
};
var cp = G_BackPcImageTmp;
alert(‘name=’ + cp.name + ‘ w=’ + cp.w + ‘ h=’ + cp.h);
// この結果は、 name= w=0 h=0
// となり、
G_BackPcImageTmp.name = ‘渡辺’;
G_BackPcImageTmp.w = 100;
G_BackPcImageTmp.h = 250;
alert(‘name=’ + cp.name + ‘ w=’ + cp.w + ‘ h=’ + cp.h);
//この結果は、最初と同じ出力を期待していたが、。
// name=渡辺 w=100 h= 250となります。
ということで、オブジェクトの代入は注意が必要です。
前に「ロゴに隠されたメッセージ」のAppleのロゴには黄金比が用いられている
という話から黄金比をWEBデザインに取り入れる記事を思い出したのでご紹介します。
黄金比をサイトのデザインに取り入れる簡単な3つの方法
http://coliss.com/articles/build-websites/operation/design/206.html
コリスさんのブログは大変勉強になるので、いつも拝見させていただいてます。
そもそも黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8。
この黄金比を用いた建造物としてギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなど。
また、自然界でもオウム貝の美しい螺旋、植物の葉の付き方、ひまわりの種など多数存在します。
そして、この黄金比を用いた例として、パソコンの横長モニターやiPod、名刺やクレジットカードにもこの黄金比が使われているそうです。
そんな黄金比をWEBデザインに取り入れようというお話です。
詳しくはコリスさんの記事を見たほうが分かりやすいかと思いますが、
この比率を用いて、画像サイズやスペース（パディングやマージン）、文字のサイズからグラデーションの開始終了位置など、いろんな所に使ってみようというお話です。
見ている人は気づかないかもしれませんが、なんとなく見やすい、綺麗などの印象も持ってくれたら嬉しいですね。
WEBサイトの作成では通常あまりないと思いますが、ajaxを使いまくってWEBサイトが動的な
アプリケーションとしての位置付で、アジャイル開発が必要なサイトでは、設計をちゃんと
やりましょうという話です。
機能追加をとりあえず急ぎでやっていくと、ソースはif文の嵐になり、結局作り直しをしなければ
ならない状況が必ず発生します。
そんな時に役に立つ設計手法は、状態遷移図や状態遷移表ですね。
意外と応用範囲が広く、複雑な処理ではすごく役に立ちます。
もちろん、実際のソースは、スイッチケース文で処理できる状況に無かったとしても、かなり
構造的にプログラムを構築できるので、状態遷移表だけでも書いてそれに基いて作成すると
楽です。
ところで、jQueryのreplaceWith()である要素ブロックのドキュメントを書き換えた際に
存在していた要素ブロックが消えました。（見た目は）
何が起きたかと言うと、表示領域が画面の外側に配置されていました。
実態はあるけど、見えないという状況でかなり悩みました。
通常は、あまりこういう事は起きないのですが、動的に位置を動かした要素ブロックだと
こういう事が起きるようです。
要注意！！
変数名に、$test1、$test2、など連番でつけることはあまりおススメしませんが、
そうは言ってもつけちゃう時がありますよね。
そんでもって、この連番の変数をループで処理する場合、
そもそもが、連番変数ではなく、配列で定義すべしですが、
そうは言っても、どうしても変数の場合もあるでしょう。
そんな時は、
//$test1～10までの変数をループで処理
for($i=1;$i<=10;$i++){
print ${‘test’ . $i};
print “\n”;
}
で、出力できるんですよね。
お試しあれ。
CSSレイアウトでサイト作成をしていても意外と使わないのがこのpositionプロパティ。
いざ使うときになって、あれどうやるんだったけ？という事があります。
と言うわけで、忘れないようにもう一度おさらい。
■positionプロパティの値と種類
static（静止）
特に配置方法を指定しません。
この値のときには、top、bottom、left、rightは適用されません。
これが初期値になります。
relative（相関）
相対位置への配置となります。
positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
この値のときには、top、bottom、left、rightは適用されます。
absolute（絶対）
絶対位置への配置となります。
親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。
親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed（固定）
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
また、IE6には対応出来ていないようです。
これもあまり使ったことないですね。
一般的には下記の様な形が一番使用するかなと思います。
#oya {
position:relative; ← 親ボックスにする指定
}
#ko {
position:absolute; ←親ボックスに対しての絶対位置指定
top:100px; ← 親ボックスからのtopの距離
right:50px; ← 親ボックスからのrightの距離
}
とても簡単ですよね！
でも、これにmargin やpadding、floatなどのプロパティが加わったり、
ブラウザ毎によるバグが作用するので、なかなか思い通りにいきません。
う～ん、奥が深い。
前に会社で作成したCMSで色々なデータを入力、管理できるものを作成したのですが、
そのCMSで入力したデータ内から、前日入力した件数を表示させたいという依頼がありました。
ぶっちゃけ簡単だろうと思ってましたが・・・
まず前日のデータを取得するために、前日の日付を取得することからはじめます！
徐にブラウザを立ち上げ、Google先生に質問します「PHP 昨日の日付」・・・
色々な方法があるんですね！
正直自分にはどれが一番良い方法なのかは分からないですが、ここでは下記の様に取得しました。
$zenjitu = date(“Ymd”,strtotime(“-1 day”));
date関数とstrtotime関数を使って昨日の日付を取得しました。
とりあえずテストとして表示させてみる。
print $zenjitu; → 20120210
ちゃんと前日の日付が8桁の数字で表示されました！
あとは簡単！sqlで取得した前日の日付のデータのものを引っ張ってくるだけです。
$sql = “select * from テーブル名 where 日付フィールド名 = ‘$zenjitu’”;
ちょろいもんだぜ！
なんて余裕をかます間もなくおかしい・・・
あれ？何でだ？
調べてみたら、日付フィールドはdatetime型でした。
2012-02-10 10:32:18 ← こんな感じで保存されてました。
少し前に作成したシステムでは日付を8桁の数字で登録していたので気づきませんでした。
これに伴い下記の様に修正。
$zenjitu = date(“Y-m-d”,strtotime(“-1 day”));
$sql = “select * from テーブル名 where 日付フィールド名 like ‘$zenjitu%’”;
今度はばっちり成功でした！
普段あまりSQLを打つ事が少ないので色々忘れてしまっています。
今回の、「あいまい検索 前方一致」もその一つでした。
以前どこかで使った記憶はあるのですが、いつどこで使ったのかも、まさに「あいまい」！
でも今回のこの記事で一生忘れないはず！
多分・・・
ブログの新着情報をホームページに追加してみます。
いろいろやり方があるようですが、
magpierssというRSSパーサでのやり方です。
http://magpierss.sourceforge.net/ でダウンロード後、ファイルを解凍。
いくつかある.incファイルとextlibというフォルダを、index.phpのあるディレクトリにアップロード。
それとは別に「chache」というディレクトリを同ディレクトリに作り、パーミッションを「777」に変更。
あとはRSSフィードを読み込むためのphpを記述
require_once 'rss_fetch.inc';
$url = 'RSSのURLを記入';
$rss = fetch_rss($url);
$title = $rss->channel['title'];
$title = mb_convert_encoding($title, “SJIS”, “auto”); //文字コードの指定
foreach ($rss->items as $item ) {
$title = $item[title];//タイトルの取得
$title = mb_convert_encoding($title, “SJIS”, “auto”); //文字コードの指定
$url = $item[link];//リンク先の取得
?>
文字コードはindex.phpに合わせて指定。
本文の内容をもってくる場合は
$description = $item[description];
を挿入。
日付を挿入する場合は
if($item['dc']['date']){
$date = parse_w3cdtf($item['dc']['date']);
}else if($item[pubdate]){
$date = strtotime($item[pubdate]);
}
if($date){
$s_date = date(“Y.m.d “, $date);
}
日付はRSSのバージョンによって仕様が違うようですね、
RSS1.0の場合['dc']['date']
RSS2.0の場合[pubdate]
やってみてください～
