日記帳

jQueryでアコーディオンメニュー

2011-06-15T04:10:00.000+09:00

忘れないようにメモしておきます。
まず最初にjqueryを読み込んでから使ってください。

・個別に開く
$(document).ready(function(){
$('dt').click(function(){
$(this).next().slideToggle('fast');
}).next().hide();
});

・一つだけ開く
$(document).ready(function(){
$('dt').click(function(){
$("dd").not($(this).next()).slideUp('fast');
$(this).next().slideToggle('fast');
}).next().hide();
});

(´・д・｀)

CSSで画像を切り抜く

2011-06-10T02:47:00.002+09:00

background-image:url("http://～/hoge.jpg");
background-position:center;
width:120px;
height:68px;
overflow:hidden;

(゜д゜)ウマー

切り抜きたい画像ファイルと切抜きの開始位置
切り抜いた際のサイズを指定してはみ出た部分は隠す

今まではサムネイル作る際にphpで画像切り抜いてたんですがこっちのほうが負荷を考えると良さそう
あくまで表示だけなので実際のサイズは変わってません
本来ならclipを使うのが正しいんでしょうけど不特定なサイズの画像を扱うときはこっちのほうが適切だと思う

CSS3を活用しよう〜はじめに〜

2011-03-30T18:29:00.003+09:00

まずはじめにCSSとはなにかっていうと
文書構造を記述する言語のHTMLに対して、文書の体裁を指定する言語がCSSだと多分思います

文書構造と体裁を分離させたほうが何かと捗りますからね

で、巷で噂のCSS3
特筆すべきは今までは画像が必要だった角丸、グラーデーション、ドロップシャドウ、テキストシャドウ等がCSSだけで表現できることです

まだ仕様が正式に勧告されてないんみたいなんですが、主要なPCブラウザやAndroidやiPhoneのブラウザには実装されてるので今から使っても問題ないでしょう

では次回からいよいよCSS3の活用方法を書いていきます

(´・д・｀)

pagerankへの疑問

2011-01-30T00:31:00.001+09:00

タイトルのpagerank
サイト運営者の皆さんは日々pagerank向上のために努力したりpagerankの上下で一喜一憂することもあるかと思います
そもそもpagerankってなんだ？っていうと
『良いサイトはたくさんリンクされている』
って前提の投票方式なわけですよね
良いサイトの定義は人の数だけあると思いますが概ね間違ってもいないよねと思います
ではpagerank向上のためにサイト運営者がすることはなにか？
そんなのわかりきっていることなんですが勿論コンテンツの質・量の充実です
で、なんだか最近おかしいなと感じるのが
『たくさんリンクされているから良いサイト』
という風潮が流れているような気がします
これ同じように見えますがイコールではないですよね
ようするにたくさんリンクされているというのはあくまでもサイト運営上の結果、副産物であるべきで
pagerankを上げたいがために人為的に被リンク集めに注力してたら本末転倒だよねっていう
そうなったらpagerankなんて本来の意味をなさないし
AKB48商法やマスコミの韓流ブームの捏造のような胡散臭さを感じちゃう今日この頃でした

サイトをスマホ用に最適化

2011-01-15T15:32:00.003+09:00

スマートフォンから携帯サイトを見ると画面解像度の違いからか文字が小さすぎて見れたもんじゃなかったりします
そこでメタタグのviewportで可視領域の指定をする必要があります

>>指定の例
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.25,maximum-scale=1.6,user-scalable=yes" />

>>各パラメーター説明
・width
可視領域の幅
デフォルト値は980
device-widthを指定で個々のデバイス幅に指定される
・height
可視領域の高さ
デフォルト値はwidth値とデバイスのアスペクト比から算出されるので省略
・initial-scale
倍率の初期値
・minimum-scale
倍率の最小値
・maximum-scale
倍率の最大値
・user-scalable
拡大縮小の可否
デフォルト値はyes

(゜д゜)ウマー

※iPhoneもAndroidもデバイス幅は320の模様、なのでとりあえず画像は携帯サイトのままの240で事足りると思います。それとhtmlのサイズ指定は絶対指定より相対指定のほうがなにかと捗ると思います。

ブログはじめました

2011-01-13T09:50:00.001+09:00

メールでのテスト投稿です
主に携帯サイトに関する独り言を書いていこうと思います
三日坊主にならないようにがんばります

(　゜д゜)、ペッ