Hatena::ブログ(Diary)

コード、たまにメモ。

2010-05-29

IEで崩れてしまうwebサイトレイアウトを少しまとめてみた

今ではchromeシェアを集めIEの使用率も減ってきてはいますが、webサイトのジャンルやターゲット層によっては、IEはまだまだ現役です。自分が実装しているときにIEでうまくCSS適用されなくてちょっと手間取ったので、基本的なサイト構築で困るであろうポイントを3つまとめました。

marginのautoが効かない

divタグmargin:0 auto;などでセンタリングした場合、Firefoxchromeではちゃんとセンタリングされますが、IEでは適用されません。これはIEバグらしく、一つ前の要素にtext-align:center;を入れてあげる必要があります。

paddingを使って余白を設定したらレイアウトが崩れる

paddingを使ってサイトレイアウトをすると思いますが、これもブラウザによってpadding解釈が異なるため注意が必要です。

IEでは、paddingborder及びwidthとを同一要素に適用させた場合、レイアウトが変わってきます。IEだけレイアウトがおかしいときは、まず崩れているところにpaddingがないか、あれば、同時にwidthかborderを使用していないか調べます。

この問題を解決するには、div等の囲い要素を入れ子にします。つまり、外側のdivにwidthを、内側のdivにpadding適用…という風に工夫すればうまくいきます。

inputのsize="○○"でのサイズ変更が適用されない

size="○○"はIEでは適用されないので、CSSでwidth指定してあげる必要があります。input class="xxx"等として、widthを指定します。

他にもあったら随時追記していきますヨ。

2010-05-17

PHPで偶数か奇数かを判定したい

偶数奇数かを判定する関数とかって無いんですね。ありそうなもんだと思って、本をめくってました。でも、ふと思った…、偶数は2で割り切れるんだから、そこで分岐処理すればいいだけの話ですね。

if($number%2==0) {
  偶数;}
else {
  奇数;}

補足:

%  …  割り算の余りを求める
== …  完全一致(型は問わない)

2010-05-15

HTMLソースを取得し、要素を配列に代入する

前回の記事に書いたscrape_func.phpを使った引用法だけれど、これを使うときには往々にして、余計なタグを削除して必要な要素のみを取得したいもの。参照元サイト引用されるような使い方を想定していないからこういう手間が必要になるのだし、想定していたらRSSフィードを配信してくれています…。

前置きが長くなったけれど、つまるところ取得した要素を配列に代入できるようになることが、理想的な形だろうと思います。

scrape_func.phpを元にHTMLソースの要素を配列に代入する

これは簡単なので俺が実際に使った関数を書き留めておきます。scrape_func.phpユーザー関数を使ったPHPスクリプト記述例では、普通は最初に、

include("scrape_func.php");
$url = getURL("http://sample.com");
$url = mb_convert_encoding($url,auto);
$url = cleanString($url);
$text = getBlock("abc","def",$url,false);
 :
 :

このように記述するかと思います(hack084フォルダ同封のファイルを参照のこと)。こののちに、

$text = strip_tags($text);
$item = explode(" ",$text);

strip_tags()でタグを削除し半角スペースに変換、explode()では半角スペースを区切りとして、$textを配列$itemに組み込む。以上の処理を行います。

実際に運用していくと配列にはたくさんの要素が入っているはずなので、一度

print_r($item)

これを使って配列に何が入っていてどれが何番目なのかを確認すると良いです。

タグに囲まれた文字列が半角スペースを含んでいた場合

実用段階ではここまでシンプルなケースはあまりなく、応用を効かせなければならなくなることが多々あるかと思います。例えば、タグに囲まれた文字列が半角スペースを含んでいた場合等。これには少し工夫が必要です。なぜ工夫が必要かというと、scrape_func.phpユーザー関数にclenString()という関数があるためです。

cleanString() //TAB、改行を半角スペースに変換し参照しやすくする

サンプルを元に処理フローを書いてみます。

ソース例:

<body>
<h1>△△ ○○について</h1>
<p>〜text〜</p>
</body>

ここでは、△△と○○の間に半角スペースが入っています。ここで前述のまま、

 :
 :
$url = cleanString($url);
$text = getBlock("<body>","</body>",$url.false);
$item = explode(" ",$text);

というスクリプト内容だとすると、h1タグ内の文字列が半角スペースで区切られて別々に配列に組み込まれてしまいます。つまり、上のソース例にて配列要素を

Array (
[0] => <h1>△△ ○○</h1>
[1] => <p>〜text〜</p>
 :
 :
)

と、したかったところが

Array (
[0] => <h1>△△
[1] => ○○</h1>
[2] => <p>〜text〜</p>
 :
 :
)

こんなふうになってしまうということです。

なので、この後の処理にて半角スペース以外の何か他の文字列でカットするか、配列の結合や切り出し*1を行う必要があります。あるいはもっと簡単に、cleanString()の前に半角スペースを別の文字列に置換する関数記述してもいいでしょう。

半角スペース以外の文字列でカットしたい場合は、scrape_func.phpソースを改変する必要があります。ケースバイケースですが、この程度の課題なら改変はおすすめしません。せっかく労力ゼロで便利なサンプルコードを活用できるのですから、処理コードもサンプルコード自分の癖に合わせてルーチン化させて組んでおくといいでしょう。あとあとまた再利用できたりして作業効率があがりますし。

cleanString()を実行する前に半角スペースをstr_replaceで事前に他の文字列に置き換えておくのが一番ラクだろうと思います。

str_replace()によって半角スペースを●に置き換えたあとにcleanString()関数を実行する場合のコード配列要素はこのようになります。

//htmlソース例
<body>
<h1>△△ ○○について</h1>
<p>〜text〜</p>
</body>

//スクリプト
include("scrape_func.php");
$url = getURL("http://sample.com");
$url = mb_convert_encoding($url,auto);
$url = str_replace(" ","●",$url);
$url = cleanString($url);
$text = getBlock("<body>","</body>",$url.false);
$item = explode(" ",$text);
 :
 :

//配列要素
Array (
[0] => <h1>△△●○○</h1>
[1] => <p>〜text〜</p>
 :
 :

*1:結合や切り出しをすると処理した要素以降の添え字がひとつずつずれて再振り分けされるので注意。