Archive for the ‘Web Design’ Category

スマホ向けサイトデザインのポイント2

Web Design

スマホ向けサイトを作成した時にいろいろ調べたのでメモ。(コーディング編)

前回のメモ(デザイン編)の続き。

■全て要素を、デザインした時の半分の数値で。

なぜかは、前回のメモでさんざん書いたのでもういいですね。

以下指定方法です。
特にひっかるのは、画像だけだと思います。

■実際の大きさが600px x 400pxの画像の場合

<img src="hoge.jpg" width="300" height="200" alt="ホゲホゲ" />

■実際の大きさが60px x 60pxの背景画像の場合

div#hoge{
	background-image:url(hoge.jpg);
	background-size:30px 30px; //←ここで半分のサイズを指定
	background-repeat:repeat;
}

その他のdivやらfont-sizeはcssなどで、
レイアウトした時の半分の数値で指定するだけです。

ちなみに、この2倍の画像を半分の大きさで指定するやり方のいい所は、
用意する画像が一種類でいい所です。

他にも、retina用の画像と通常の画像2つ用意して、
CSSのメディアクエリを利用し使う画像を切り替える方法もありますが、
正直、非Retinaもモバイル端末で、画像を半分の大きさでしていする方法で
作成したページを見ても汚いとは思いませんでした。
参考でサンプルを用意しておきます。モバイルで見てみてください。
→サンプル

Tags: ,

スマホ向けサイトデザインのポイント1

Web Design

スマホ向けサイトを作成した時にいろいろ調べたのでメモ。(デザイン編)

■デザインする時は、横幅640pxで作成しましょう。

なぜならiphone5、4sのRetinaが640pxだから。
正確には320pxの画面で640pxの画像をギュッとして見てる。
だから綺麗的な。

■デザインをチェックする時は、50%表示。

上で少し触れたように、実際は幅320pxで画面表示されるので、
実際のサイズ感をチェックするときは50%縮小で確認する必要があります。

ということは、作成する時は、いつもの倍で作らなくてはいけません。
本文の級数を10ptにしたければ、FW上は20ptにするという感じです。

■デザインする時は、必ず2の倍数で。

これは実際の端末で表示される幅320pxを基準に考えると普通のことですが、
いつもの感じでFW上の640px基準で考えると、よく起こるミスです。

例えばメイン画像を300px x 100pxにしようと考える時の順番が、

○Aの場合
実際の大きさが300×100 → だから、600×200でレイアウトしよう。
これはOKな例です。

○Bの場合
レイアウト上の全体のバランス的に、600×200でレイアウト → 実際は300×100か、よしそんなもんだな。
これはNGの例です。

というのも、Retinaなど高解像度の画面は大きい画像を半分に縮小して見るため、
画像の幅が555pxとかになっていると、表示する際、少数点が発生してしまい
せっかくの綺麗な画像がぼやけてしまいます。

Bの場合の考え方をしていると、奇数の画像が発生しかねないですよね。

Tags: ,

jQueryでのwindow.onloadの書き方のメモ

htmlが全部読み終わってから、jsを実行する時に使う

window.onload = function(){
  //実行するjs
}

のjQueryでの書き方

【その1】

$(document).ready(function(){
  //実行するjs
});

【その2】

$().ready(function(){
  //実行するjs
});

【その3】

$(function(){
  //実行するjs
});

多分その3だけ覚えておけば大丈夫。
一番短くて、デキる奴っぽく書けるからw

Tags:

file_get_contentsよりcurlを使ったほうがいいメモ

PHPを使っていると、HTMLファイルやテキスト、XMLをよく読み込みたくなるんですが、
ある案件でサーバーのセキュリティの問題で「file_get_contents」が使えない時があったんです。
その時いろいろ調べてたら「curl」という物を発見。
さらに、curlの方が読み込み速度が早くてパフォーマンスが良いらしい。

ということで、使い方を忘れないようみメモしておきますよ。

【基本的な使い方 (同じ階層のhogo.txtを読み込みます。)】

<?
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, 'hoge.txt' );
curl_setopt( $ch, CURLOPT_HEADER, false ); 
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
$result = curl_exec( $ch );
curl_close( $ch );
echo $result;
?>

【複数のファイルを読み込む場合】

<?
load_file("hogo.txt");
load_file("hogo2.txt");
load_file("hogo3.txt");

//繰り返し使うので関数にしています。
function load_file($url){
	$ch = curl_init();
	curl_setopt( $ch, CURLOPT_URL, 'hoge.txt' );
	curl_setopt( $ch, CURLOPT_HEADER, false ); 
	curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
	$result = curl_exec( $ch );
	curl_close( $ch );
	echo $result;
}
?>

でも何に使ったらいいかわからない~というあなた、
とりあえずyahooトップのニュースの文字を取得してみよう。

<?
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, 'http://www.yahoo.co.jp/' );
curl_setopt( $ch, CURLOPT_HEADER, false );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );

//1行だけ追加します。
//firefoxでアクセスしているように偽装します。
curl_setopt( $ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0' );

$result = curl_exec( $ch );
curl_close( $ch );


//この時点で $result にyahooのソースコードが入っていますので、
//ソースの中からニュースのブロックだけを取り出します。

preg_match( '/<div id="topicsfb" class="current">(.*?)<\/div>/i', $result, $matches);
echo $matches[1];

?>

上記のコードを、ページの表示したい部分に書くと
ニュースが表示されると思います。
これを応用すれば、なんでも取得できますよね。
例えばトップページにブログの最新記事を表示させてたいときなど。

cURLのパラメーターは下記サイトにまとめていただいていらっしゃったのでメモ。
PHPマニュアル:curl_setopt:cURL 転送用オプションを設定する

Tags:

IE6でlocation.hrefが動かない時はreturn false;をつける。

IE6でlocation.hrefが動かない時はreturn false;をつけるというメモ。

<js>


url["0"] = "http://hogohogo.com;
function jumpURL(aa){
  location.href = url[aa];
}

<html>
X動かない


<a href="javascript:;" onClick="jumpURL(0);">

○動く


<a href="javascript:;" onClick="jumpURL(0);return false;">
�g�уA�N�Z�X��� Google Analytics Alternative