floatした際に背景が消える件(IE編)
floatした際に背景が消える件(IE編) floatした際に背景が消える件でIEには『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあると説明しました。 逆を言えば、親要素に幅や高さを指定しなければFirefoxと同じ表示になります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、FirefoxとIE
MTでopモディファイアを利用して複雑なレイアウトを行う
MTでopモディファイアを利用して複雑なレイアウトを行う MTのテンプレートでopモディファイアを利用して複雑なレイアウトを行う方法です。 例えば、エントリーの一覧画面で、商品画像掲載のページ構成CSSのようなエントリー3個づつをブロックレベル要素で包んで出力することなどが可能です。 基本的な使い方 まずは簡単なサンプルでopモディファイアの利用方法を説明します。 エントリーの変わりに数字を出力するテンプレートタグは以下のようになります。 <MTsetVar name="no" value="0"> <MTEntries> <MTSetVar name="no" value="1" op="+"> <mtgetvar name="no"> </MTEntries> 12345といった感じにエントリーの数だけ、数字をひたすら出力する記述です。 1行目でnoという変数に0を代入し、 <MTse
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
alphafilter.jsが透過pngのロールオーバーに対応
alphafilter.jsが透過pngのロールオーバーに対応 IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。 透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。 img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。 <img src="./sample.png" class="btn" alt="" /> sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。 透過機能と合わせて利用する場合は、以下のように指定します。 <img src="./sample.png" class="alphafilter btn" alt="" />
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
ロールオーバーを簡単に実装する-Image Rollover Code-
ロールオーバーを簡単に実装する-Image Rollover Code- Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。 設置方法 配布元のDaniel Nolanのサイトよりrollover.jsを取得し、head要素内などで読み込みます。 <script src="rollover.js" type="text/javascript"></script> ロールオーバーを実装したいimg要素のclass名に『imgover』を指定します。 <img src="sample.jpg" alt="Some Image" class="imgover" /> すでに、他のclass名がつけられている場合は、半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。 <img src="sample.jpg" alt="S
MT4.1以下で実現するサーバー・サイド・インクルード
MT4.1以下で実現するサーバー・サイド・インクルード MT4.15からサーバー・サイド・インクルードという機能が追加されますが、MT4.1以下でも似たような機能は実装可能です。 まず、サーバー・サイド・インクルードを利用することによるメリットはなにかというと、 サイドバーなどに常に最新の情報を表示することが出来る。 最新ニュースなどを表示する際に、サーバー・サイド・インクルードで表示しておけばインクルードファイルさえ更新してしまえば、すべてのページの情報を最新に変更することが可能です。 検索結果ページ、タグページの表示が高速化 表示の際にインクルード部分を生成する必要がなくなり、表示の高速化が図れます。 今回、実装してみたところ当サイトでは3～4倍の速度で表示されるようになりました。 再構築が高速化される 再構築の度にインクルード部分を生成する必要がなくなり、再構築のスピードがはやくなり
ブロックレベル要素の高さを揃える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
画像置換に関する考え方
画像置換に関する考え方 WEB標準からみるに最近では、画像置換に関して、『alt属性が必要な画像はimg要素で記述』『alt属性必要でない画像は画像置換を使う』という考えが主流になりつつあるようです。 どういうことかというと、『text-indent:-9999px』の記述は避けるべきだろうとの考えからだと思います。 なぜ、このような考え方にいたったのでしょうか？ 画像置換の利点・欠点など複数の視点から画像置換について考察していきたいと思います。 なぜ画像置換という技術が普及したのか? 画像置換が重宝されているのは JavaScriptを使わずにロールオーバーを実装することが可能な為であります。 これによりJavaScriptがOFFの環境でもロールオーバーを体感することが可能になりました。 画像置換の欠点は? CSSでテキストを非表示にして背景画像を表示している為、CSSがONで画像の表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
