2009年07月03日

Yahoo UI Library Fonts CSS

今まで何回か記載していたYUIのfonts.cssを使ってみました。
どうしてもパーセント指定をするのが面倒と思っていましたが、何とか重い腰を上げて、チャレンジしました。

ひとことで言うと、「何でもっと早く使わなかったんだろう。」です。

ピクセル指定の場合よりも細かい指定が少なく、実に効率がいいと思います。
またパーセンテージ指定なので、IEのバグで、font-familyを指定している場合に、ピクセル指定で11px以上小さく表示することが出来ないことについても考えないでいいので非常に楽です。

今後これを自分のデフォルトにしよう。
タグ:YUI fonts.css
posted by memo4me at 01:00 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2009年06月24日

テスト用アーカイブ版Flash Player

テスト用アーカイブ版Flash Player
http://www.adobe.com/jp/support/kb/ts/228/ts_228683_ja-jp.html

いつも探すのにURL不明になるのでメモ
タグ:test Flash player
posted by memo4me at 19:09 | Comment(0) | TrackBack(0) | flash | このブログの読者になる | 更新情報をチェックする

2009年06月23日

CSSで上下中央にする方法

CSSでtableのように上下中央にすることは出来ないと思ったが、
下記のようにすれば可能のようです。
http://www.yomotsu.net/wp/?p=387

サンプルをみて試してみたが、なかなかうまくいかず、よく考えてみるとそりゃ出来ないということが分かった。
あくまであってればだけど・・・。

HTMLのtableを考えると、tdタグで高さを指定できますが、
CSSで上下中央にする場合、この理論は出来ないようです。(自分理論)
じゃあどうやって、上下中央にするというと、
tableは、一言でいうと表を形成するタグなので、複数の要素が入ります。
なので、1つしかない場合は、どこの中央にも合わないってことになります。

今まで自分がやってたのは、
HTMLソース
<div class="test">
  <p>てすと</p>
</div>

CSSソース
div.test p {
  background:url(bg.gif);
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}
/*for IE6 */
* html .test p {
  display: inline;
  zoom: 1;
}
/*for IE7 */
*:first-child+html .test p {
  display: inline;
  zoom: 1;
}

こんな感じのもので、divに背景画像を設定し、中央に合わせたいと思ってました。
しかしこれは出来ませんでした。
なぜならば、要素が1つしか無いため、既に中央にいることになっている。(合ってるかな・・・w)

tableで書くと、↓「てすと」しかないので、中央も何もないことになる。
<table>
  <tr>
    <td>てすと</td>
  </tr>
</table>


同じような状況で中央にするには、
HTMLソース
<div class="test">
  <p><img src="spacer.gif" width="1" height="50" /></p>
  <p>てすと</p>
</div>

CSSソース
div.test{
  background:url(bg.gif)
  height:50px;
}

div.test p {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}
/*for IE6 */
* html .test p {
  display: inline;
  zoom: 1;
}
/*for IE7 */
*:first-child+html .test p {
  display: inline;
  zoom: 1;
}
のようにする必要があります。

自分的には、謎が解けてよかった。
posted by memo4me at 13:54 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする

2009年06月18日

Webmaster Center

Live SearchがBingに変わり、Webmaster CenterのURLも変更されていました。

http://www.bing.com/webmaster

忘れる前にメモ
posted by memo4me at 11:31 | Comment(0) | TrackBack(0) | seo | このブログの読者になる | 更新情報をチェックする

2009年06月17日

Bingサイト登録

Live SearchからBingへになり、今までLive Searchにあったサイト登録のURLが使えなくなりました。

Bingサイト登録URLは、下記です。
http://www.bing.com/docs/submit.aspx?FORM=SURE

メモメモ
タグ:Bing
posted by memo4me at 12:49 | Comment(5) | TrackBack(2) | seo | このブログの読者になる | 更新情報をチェックする

2009年06月02日

Microsoftが新しい検索エンジン「Bing」を公開

Microsoftが新しい検索エンジン「Bing」のプレビュー版を公開したようです。
http://www.bing.com/
調べてみたところ本来の公開予定は、明日(6/3)だったようですが、
本日アクセスできるようです。

特別なSEO対策方法とか出てくるのだろうか。
posted by memo4me at 14:42 | Comment(0) | TrackBack(0) | seo | このブログの読者になる | 更新情報をチェックする

2009年06月01日

Yahoo!アクセス解析

以前お伝えした、Yahoo Web Analyticsの日本版が一般公開されたようです。今後もコンバージョン機能など追加されていくとのこと。
Google Analyticsのようになっていくのかな。

Yahoo!アクセス解析

僕の管理しているサイトにも導入してみよう。
posted by memo4me at 09:36 | Comment(0) | TrackBack(0) | seo | このブログの読者になる | 更新情報をチェックする

2009年05月28日

半角英数による横幅崩れ

今さら感はありますが、半角英数を連続で入力した際、自動的に改行できない為、デザインが崩れてしまいます。
もしIEだけの対応であれば、
word-break: break-all

を使って改行することが出来ますが、他のブラウザでは出来ません。

ただいろいろなWebサイトを見ていると、大半のサイトが規定幅を超える半角英数の文字の羅列(URL)がある場合、表示上はみ出る箇所を表示しないようにしています。
対応方法は、簡単で、
.hoge{
  width: 300px;
  overflow: hidden;
}

これだけ。
今後これを標準として考えよう。

どうしても他のブラウザで改行したい場合は、jQueryを使えば、IE以外のブラウザでも対応が可能になります。
http://webtech-walker.com/archive/2008/11/02151611.html

これ使ったけどうまくいかなったけど、たぶん俺のやり方が悪いのかな・・・。
もう少し試してみよ
タグ:CSS Overflow hidden
posted by memo4me at 14:11 | Comment(0) | TrackBack(1) | css | このブログの読者になる | 更新情報をチェックする

2009年05月21日

iPhoneおよびiPod Touch用apple-touch-icon.png

iPhoneやiPod Touchのデスクトップに表示されるアイコンを作成する機会があったので調べてみました。
「apple-touch-icon.png」というもので、簡単に作成が可能です。

1. 57x57pxの画像を用意
2. 表示したいHTMLのheadタグ内に下記を記載
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

3. サーバのルートにUP

正方形で作成しても表示側で角丸になるので、自分で角丸にする必要はない。
まあfaviconと変わらないな。
posted by memo4me at 19:43 | Comment(0) | TrackBack(0) | other | このブログの読者になる | 更新情報をチェックする

2009年02月17日

line-height設定時の行間バグ(IE)

すごい久しぶりの更新・・・。
気づいたらこまめに更新しよう。

普通にHTML(XHTML)を作成し、CSSにて行間設定をしていたのですが、
更新内容によりフォントサイズがまちまちな状況になることが分かりました。
firefoxでは、何も問題ないのですが、IEで見た場合、フォントサイズを大きく設定した場合、正常な行間を空けることが出来ない現象がありました。

回避方法は、「line-height設定時に、単位を記載しない」です。
○line-height: 1.4;
×line-height: 1.4em;

単位をつけると継承方法に違いが出る為で、単位をつけないと文字に対して1.4倍の行間で表示されるようになります。
※1.4と設定した場合

今まで動的ページのテンプレートを作成しても上記の問題にブチ当たることはありませんでしたが、今後はline-heightに単位をつけないで設定するのがBESTってことですね。
posted by memo4me at 18:07 | Comment(0) | TrackBack(0) | css | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。