IE8における拡大縮小バグ
IE8における拡大縮小バグ 先日リリースされたIE8だが、多くのバグを含んでおり、まだまだWEB製作者を悩ませそうです。 (追記)Firefox3でも発生しますね。検証不足でした。 例えば、私が見つけたのは拡大縮小に関するバグ。(文字ではなくズームによる) ul{ margin:10px; width:600px; border:1px blue solid; } ul li{ list-style-type:none; margin:2px; border:1px red solid; width:194px; height:194px; float:left; display:inline; } サンプル などのようにリスト要素を利用して表状の形態を表現した際、通常は以下のように表示される。 IE8 100%で表示。 これを95%に変更すると以下のようになる。 IE8 95%で表示。
jQueryでアコーディオンを設定する際の注意
jQueryでアコーディオンを設定する際の注意 ネタ元：jQuery.js トピックのしつもんの89 アコーディオンを設定する際に動作がカクカクすることがあります。 サンプル この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。 高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。 $("dl dd").each(function(){ $(this).css("height",$(this).height()+"px"); }); サンプル アニメーションを設定する場合はheightを指定、これ重要です。 リキッドレイアウトの場合 リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。 その場合は以下のclickイベントの最初で高さを指定しておき
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
Movable Typeのタグ入力を簡単にするtagSupportプラグイン
Movable Typeのタグ入力を簡単にするtagSupportプラグイン MTのタグ入力をサポートするtagSupportプラグインを作成しました。 タグ入力欄の下に、今まで利用したタグの一覧が表示されますので、今まで利用したことがあるタグはクリックで入力が可能です。 tagSupportプラグインをダウンロード ダウンロードしたtagSupport.zipを解凍し、tagSupport.plをmtディレクトリ内のpluginsにアップしてください。 ライセンスはGPLで配布しますので、自由にご利用ください。 MT4.1とFirefox2/IE7で動作検証は行っております。 不具合等ありましたらご連絡ください。 関連エントリー MTの編集画面にカラーピッカーを付けるcolorEditorプラグイン MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン Mo
Firefox3でメイリオを指定するとinputのsizeが倍増する
Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。 検索窓は <input id="search" name="search" size="20" /> といたってシンプルなコード。 フォントの指定も font-family:sans-serif; と非常にシンプル。 font-family:"ＭＳ Ｐゴシック"; などに変更すると元の長さに戻ります。 font-family:"メイリオ"; などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます) 解決策としては input にかかっているfont-familyを"ＭＳ Ｐゴシック"に変更するか、widthで明確に横幅を指定するかのようです。 というわけで、widthで
re:マルチシートアプローチとかクラス名とか
re:マルチシートアプローチとかクラス名とか ネタ元:マルチシートアプローチとかクラス名とか いろいろな人の意見が出てきて面白いところですので、私の意見も書いておきたいと思います。 個人的にはスタイルシートを、分けないほうが効率が良いと思ってます。 Firebugを利用すれば編集したいCSSが、どのスタイルシートの何行目に記述されているかが3秒でわかるので1枚だと非常に楽です。 作業的には ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 で済むのですが複数枚で管理していると ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集するスタイルシートに移動(Ctrｌ+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 という
MTの画像挿入時に rel=
MTの画像挿入時に rel="lightbox"を挿入する「LightBox2MT」プラグイン 自分用に作成したプラグインですが一応公開しておきます。 サムネイルを作成して画像を挿入した際に以下のようなリンクが挿入されますが、 <a href="元画像"> それを以下のように「 rel="lightbox"」を追加した形に変更します。 <a rel="lightbox" href="元画像"> lightboxをご利用されている方は作業の効率化の為にご利用ください。 LightBox2MTのダウンロード(v1.01) 解凍したLightBox2MTフォルダをmtディレクトリ内のpluginsにアップしてください。 LightBoxの利用方法は以下を参考にしてください。 Lightboxを使い画像を拡大表示する。 jsファイルは絶対パスで読み込まないとアーカイブによってはlightbox化さ
Movable TypeでSEO対策-Feed編-
Movable TypeでSEO対策-Feed編- Movable TypeでSEOを行う際にRSSやAtomなどのフィードを最適化する方法です。 表示件数を変更する デフォルトですと最新15件の情報しか出力されません。 これではさすがに少ないのでもう少し増やしましょう 参考：MovableTypeでFeedの配信数を変更する あまり、増やしすぎてもFeedの情報量が多くなりすぎます。 私の場合はFeedBunerのフィードの最大サイズの関係もあり、 部分配信の場合は200件、全文配信の場合は50件 という目安で配信しています。 アーカイブテンプレートでRSSを配信する。 カテゴリーごとにFeedを配信するのも効果的です。 トップメニューのデザインからテンプレートを選択。 左にあるクイックフィルタよりアーカイブテンプレートを選択。 アーカイブテンプレートを作成からブログ記事リストを選びます
[MT4LP5]プラグインを利用したカスタマイズ by 藤本 壱
[MT4LP5]プラグインを利用したカスタマイズ by 藤本 壱 MT4LP5のHajime Fujimoto's Web Siteの藤本壱さんのプラグインの利用方法について解説されたセッション。 私は普段、藤本さんの配布されているプラグイン「メールフォームプラグイン」と「SortCatFld」を異常なくらい愛用しています。 参考：MovableTypeにお問い合わせフォームを設置 参考：ダイナミックパブリッシング環境でSortCatFldプラグインを利用する。 紹介されたのは以下のようなプラグインです。 FCKeditor SortCatFld メールフォームプラグインV2.0 ページ分割 MTPaginateプラグイン PHPを利用してページ分割 PageButeプラグイン 静的に作成したHTMLを分割 DivPagesプラグイン トップページは静的、2ページ以降はPerl版ダイナミッ
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
MTのカテゴリー操作 色々
MTのカテゴリー操作 色々 Movable Typeでカテゴリーを操作する際の方法です。 カテゴリーの一覧 いたってノーマルにカテゴリーの一覧の取得 <ul> <MTCategories> <li><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a></li> </MTCategories> </ul> 特定のカテゴリーのサブカテゴリーの一覧 ある特定のカテゴリーのサブカテゴリーの一覧を取得する時 <ul> <MTCategories> <MTIfCategory name="特定のカテゴリー"> <MTSubCategories> <li><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a></li> </MTSubCategories> </MTIfCategor
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
spry - to-R
spryの記事一覧 【Adobe Spry TIPS】 ツールチップ ツールチップは文字などにマウスが重なったときに、詳細内容など表示する為の機能になります。 2008年2月25日 17:02 【Adobe Spry TIPS 】タブパネル タブパネルはタブでコンテンツを切り替えるためのUIになります。 2007年12月28日 05:54 【Adobe Spry TIPS】RSSの表示する件数を変更してページングをつける。 質問があったので解説です。 2007年12月18日 02:40 【Adobe Spry TIPS 番外編】よくある質問っぽいののSpryを使ったサンプル ネタ元：よくある質問っぽいののjQueryを使ったサンプル Spryでまねしてみました。 2007年12月 7日 01:15 【Adobe Spry TIPS】メニューバー ひとまず毎日更新はこのエントリーで終了。次回
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
Movable TypeでSEO対策-metaタグ編-
Movable TypeでSEO対策-metaタグ編- Movable TypeでSEOを行う際のmetaタグについて。 head要素内のmeta要素ですが、一時期は検索エンジンがまったく評価していなかったのですが、最近では量やコンテンツとのマッチを加味した上で評価されているようです。 参考：SEO対策-meta要素 Movablet Typeではデフォルトではmeta要素が出力されないので、metaを出力する際の設定を紹介。 Movablet Typeには基本の入力フィールドに『概要』と『キーワード』が存在するので、それを利用してmetaを設定する場合は以下のような記述をhead要素内に入れます。 <MTIf name="entry_template"> <MTIfNonEmpty tag="MTEntryKeywords"> <meta name="keywords" content=
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。
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 半角ｶﾅを全角カ
jsライブラリで実装する効率的なWeb制作(Web標準の日々)
空前絶後のJavaScriptブーム!『jsライブラリ』に焦点を絞りお話しました。 音声データ、スライドデータはCSS Nite公式ブログより公開されるので少々お待ちください。 事前にデザイナーさん数人に「JavaScriptで何を聞きたい？」と聞いたところ『DOM』と『jsライブラリ』という声が多かったです。 JavaScriptブームを語る上で欠かせない2つのキーワードのようですね。 『DOM』に関しては中村享介さんや羽田野太巳さんがお話されるだろと思い、私は『jsライブラリ』をチョイス。 あまりJavaScriptの難しい話ではなく、JavaScriptを覚えなくても、これだけWebサイトをインタラクティブにできるよ、効率的なWebサイトが作成できるよ、という感じの内容です。 最後のグループディスカッションは、『どのようなライブラリがあれば、あなたの仕事は効率的になりますか？』とのテ
ブロックレベル要素の高さを揃える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
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
