タグ

ブックマーク / blog.webcreativepark.net (7)

  • Googleキーワード ツールが月間検索数を表示

    Googleキーワード ツールが月間検索数を表示 オーバーチュアのキーワードアドバイスツールがサービスを終了して以来、大手検索サイトでどのキーワードがどれだけ検索されているのか調べるのは不可能でしたが、日よりGoogleキーワード ツールで月間の検索数及び過去1年を通しての平均の月間検索数が表示されるようになりました。 検索数が少ないキーワードは不十分なデータと表示されるようです。 キーワードアドバイスツールサービス終了後のキーワードマーケティングは、アクセスログや過去のキーワードアドバイスツールのデータ、中小検索エンジンのデータなど、決定力に欠けるデータを参考にしないといけなかっただけに便利になりますね。 関連エントリー WEB製作者の為のSEOチートシート 関連キーワードを探すキーワードアドバイスツールα キーワード出現頻度解析リリースのお知らせ サイトのPageRankを一括でチェ

    Googleキーワード ツールが月間検索数を表示
  • marginの相殺

    marginの相殺 CSSにおけるmarginプロパティはボックスに対して余白部分を生成するというシンプルなものなのですが、『marginの相殺』という特徴があります。 marginの相殺について解説をしてみます。 垂直方向のmargin相殺 垂直方向に隣接するボックスのmarginは相殺され、margin値が大きいブロックレベル要素のmargin値が採用されます。 図では、上のボックスの下マージン(100px)が下のボックスの上マージンより大きい為、相殺されmargin値が大きい100pxのマージンが両ボックスの間に設けられます。 ただし、どちらかのmarginがネガティブマージンつまり、-の値をもつマージン値の場合は相殺されません。 図では、上のボックスのマージンがマイナス、下のボックスのマージンがプラスと符号が異なる為、相殺されず-50px+80pxの30pxがそれぞれのボックスの間

    marginの相殺
  • Firefox3でメイリオを指定するとinputのsizeが倍増する

    Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。 検索窓は <input id="search" name="search" size="20" /> といたってシンプルなコード。 フォントの指定も font-family:sans-serif; と非常にシンプル。 font-family:"MS Pゴシック"; などに変更すると元の長さに戻ります。 font-family:"メイリオ"; などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます) 解決策としては input にかかっているfont-familyを"MS Pゴシック"に変更するか、widthで明確に横幅を指定するかのようです。 というわけで、widthで

    Firefox3でメイリオを指定するとinputのsizeが倍増する
  • CSSのレイアウトテクニック - Faux Absolute Positioning

    CSSのレイアウトテクニック - Faux Absolute Positioning ネタ元:CSSレイアウトテクニック"偽装絶対指定" 久々にCSSでの面白いテクニックですね。 Faux Absolute Positioningについて細かい説明は原文の解説にまかせるとして、かいつまんで説明すると、float方向のネガティブマージンとposition:relativeのleft(right):100%を利用して擬似的に自由配置するというもの。 これを利用するとfloatのみでは再現不可能だったレイアウトが可能になります。 例えば、メインカラムを先に記述して、後にサイド部分を記述するというマークアップの3カラムのリキッドレイアウト。 リキッドレイアウトの為、メインカラムを100%にして、サイド部分にfloatで入り込める領域を作成しなくてはいけないのですが、floatとマージンによる制御だ

    CSSのレイアウトテクニック - Faux Absolute Positioning
  • アルファ画像を扱うalphafilter.jsライブラリ[to-R]

    アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a

    アルファ画像を扱うalphafilter.jsライブラリ[to-R]
  • script.aculo.usでHTML Slidyを改造

    script.aculo.usでHTML Slidyを改造 CSS Nite in Osaka 2007 春の陣 前夜祭のプレゼンで使ったスライドですがscript.aculo.usを使って改造しています。 改造方法をちょっとだけ紹介します。 script.aculo.usというのはPrototype.jp上で動くエフェクトライブラリで、簡単にWEBサイト上の部品にアニメーションのようなインタラクティブな効果を与えることができます。 あの有名なLightboxなどもscript.aculo.usを使い作られています。 まず、script.aculo.usの公式サイトよりライブラリをダウンロードします。 ダウンロードしたファイルを解凍しlibディレクトリの中身とsrcディレクトリの中身をサーバー上のjsディレクトリにアップします。 (ディレクトリ構成は好みに別れますがボクはjsディレクトリに

    script.aculo.usでHTML Slidyを改造
  • ie以外でもクリップボードが使えるsetClipboard.js

    ie以外でもクリップボードが使えるsetClipboard.js IE以外のブラウザでもクリップボードにコピーが簡単にできるjavascriptライブラリを作成しました。 IEにはclipboardData.setDataという関数があり、クリップボードへのコピーなどが簡単にできますが、IE以外のブラウザはクリップボードにアクセスする機能がありません。 そこでflashプレーヤ―のsetClipboard関数を利用してクリップボードにコピーするライブラリです。 まずは関連ファイルをダウンロードします。 ダウンロード(setClipboard.zip) 解凍してできる『setClipboard.js』と『setClipboard.swf』は同じディレクトリにアップしてください。 header要素などでsetClipboard.jsを読み込みます。 <script type="text/jav

    ie以外でもクリップボードが使えるsetClipboard.js
  • 1