タグ

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

  • YUIのfonts.css

    YUIのfonts.css ブラウザ間やOS間のフォントの差異を吸収してくれるCSSライブラリにYahoo! Developer Networkで公開されているYUI(Yahoo! UI Library)の「fonts.css」があります。 利用方法は非常に簡単でhead要素などでfonts.css を読み込むだけで利用できます。 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css"> Yahoo!のサーバー上のファイルを直接読み込んでも良いですし、ダウンロードしたファイルを読み込んでも大丈夫です。 fonts.css を読み込むとブラウザやOSは関係なく、font-familyは「Arial」、font-sizeは「13 px 」、lin

    YUIのfonts.css
    eclucifer
    eclucifer 2009/02/16
    <q>ブラウザ間や OS 間のフォントの差異を吸収してくれる CSS ライブラリ</q>
  • アルファ画像を扱う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]
  • WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました

    WEB製作者の為のSEOチートシート SEOmozで配布されているSEOチートシートが素敵ですので日語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包みましょう。 img要素のalt属性、ファイル名にキーワードを含みましょう。 a要素のtitle属性、アンカーテキストにはキーワードを含ませましょう。 a要素のnofollowを上手に使いましょう。 インデクシングに関する限界 ページのファイルサイズは150KB以下にしましょう。 ページ内のリンクは100個以内にしましょう。 title要素は70文字(半角)以内にしましょう。 meta要素のdescriptionは155文字(半角)以内にしましょう。 URLの含まれるパラメーターは2個以内にしましょう。 ディレクトリの

    WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました
  • CSS で簡単にメニューの上下中央揃えを実現する

    CSS で簡単にメニューの上下中央揃えを実現する ネタ元:CSS で簡単に上下中央揃えを実現する IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。 haslayoutがtrueの場合にdisplay:inlineを指定すれば、inline-blockのようになるようですが、zoom以外のプロパティはdisplay値の影響を受けるプロパティが多く、この方法はzoom以外では利用できないようです。 hasLayoutに関してはコリスさんが詳しく説明されています。 参考:IEでのCSSのバグを回避するhasLayout 以下のプロパティはdisplay:inlineと同時に指定してもhaslayhoutをtrueにできない。 × display:inline-block; × height:any valu

    CSS で簡単にメニューの上下中央揃えを実現する
  • IE6以下をWeb標準に準拠させるライブラリ『IE7.js』

    IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c

    IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
  • IEでposition:fixedを再現するFixed positioning

    IEでposition:fixedを再現するFixed positioning Fixed positioningはIEで固定配置つまり、position:fixedが利用可能になるjsライブラリです。 IEの6以下のバージョンにはposition:fixedが正常に動作しないというバグがありますが、それを解決するのがこのFixed positioningです。 設置方法 head要素内などで、ダウンロードしたfixed.jsを読み込みます。 <script type="text/javascript" src="fixed.js"></script> これだけでposition:fixedが正常に動作するようになります。 サンプル 関連エントリー テーブルをソートできるようにするjsライブラリ-table sorting 画像に鏡面効果を与えるreflection.js 半角カナを全角カ

    IEでposition:fixedを再現するFixed positioning
  • 複数の文章をまとめてコピー&ペーストするツール-CLCL-

    複数の文章をまとめてコピー&ペーストするツール-CLCL- この仕事で多い作業がコピー&ペーストの繰り返しです。 複数の文章をまとめてコピーしクリップボードに格納するCLCLというツールを使い始めたので紹介します。 セットアップ VectorよりCLCLをダウンロードして解凍します。 ダウンロードしたclcl111.lzhを解凍しCLCL.exeを実行します。 タスクトレイにクリップのアイコンが表示さればCLCLが実行された状態です。 使い方 まずはコピーします。 複数の文章を1個づつ『Ctrl + C』でコピーをしていきます。 次にペースト(貼り付け) 『Ctrl + V』では最後にコピーした文章しか張り付けられません。 ペーストしたい箇所で『Alt + C』と入力ると、今までコピーした文章(や画像)がツールチップで表示されますので、ペーストしたい物の番号を入力すれば、その番号の物をペー

    複数の文章をまとめてコピー&ペーストするツール-CLCL-
  • input要素などにおけるIEのバグ

    input要素などにおけるIEのバグ ちょっと、はまったのでメモ書き IE6やIE7では、margin-leftとwidthが指定されたブロックレベル要素内の行ボックスの先頭にinput要素やtextarea要素がある場合、適切な位置に配置されないというもの。 select要素などは適切に配置される。 CSS p{ margin-left:50px; width:100px; } HTML <p><input type="text" /></p> <p><textarea></textarea></p> <p><select><option>test</option></select></p> サンプル とりあえずmargin値で余白をとるのではなくpadding値を指定することで対応。 関連エントリー operaでのfloatの挙動 IE7でページが表示されない件について IE7用のCS

    input要素などにおけるIEのバグ
    eclucifer
    eclucifer 2007/08/25
    IE6 や IE7 では、margin-left と width が指定されたブロックレベル要素内の行ボックスの先頭に input 要素や textarea 要素がある場合、適切な位置に配置されない。
  • ブロックレベル要素の高さを揃えるheightLine.js[to-R]

    ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

    ブロックレベル要素の高さを揃えるheightLine.js[to-R]
  • ページ内リンクをスマートにするsmoothScroll.js[to-R]

    ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#(ハッシュ)付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#

    ページ内リンクをスマートにするsmoothScroll.js[to-R]
    eclucifer
    eclucifer 2007/07/13
    <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動にする。
  • FeedburnerがYahoo!ブログ検索にインデックスされない件

    FeedburnerがYahoo!ブログ検索にインデックスされない件 FeedburnerがYahoo!ブログ検索にインデックスされないらしいので解決法を考えてみました。 (参考:Googleが「Feedburner」を買収?) Feedburnerがインデックスされない原因は、Yahoo!ブログ検索が『RSSのアドレスが、ブログや各記事のドメインと異なる』場合インデックスしないというポリシーで運営されているからのようです。 Yahoo!ブログ検索にポリシーを変更してもらうのが一番いいのですが、そうも言ってられないので解決法を考えてみました。 Yahoo!ブログ検索のボットのユーザーエージェントは『Y!J-BSC』らしいので、それで条件分岐したら大丈夫と思います。 (参考:Y!J-DSCとY!J-BSC - Yahoo! JAPAN独自のクローラー) オートディスカバリーの設定(heade

    FeedburnerがYahoo!ブログ検索にインデックスされない件
  • htmlの属性名の読み方

    htmlの属性名の読み方 a要素のhref属性の読み方はエイチレフになります。 htmlの属性名は省略されて書かれていることが多く、省略のされ方により読み方が変わってきます。 色々な読み方を調べながら法則性(?)を研究してみました。 (法則1)省略されていない属性 そのまま英語の発音で読みます。 この形式のが一番多いです。 align(アライン)や、name(ネーム)、class(クラス)などです。width(ウィドゥスウィズ)とheight(ハイト)は英語読みでも誤読されやすいので要注意。 (法則2)3~4文字に省略される属性 この場合表示されている部分までを英語読みします。 langage→lang(ラング) sorce→src(ソース) alternative→alt(オルト) 複数の単語の略語からなる属性 この場合上記2つの読み方に『(法則3)単語の1文字目のアルファベットで読む』

    htmlの属性名の読み方
    eclucifer
    eclucifer 2007/04/12
    href =エイチレフ ( なぜか 『 フレフ 』 と読んでた(゜ε゜*)ハズカシー )
  • 1