CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
Windows Updateで「KB2686509」が失敗する件の対処
会社のPCではWindow Updateの自動更新を行っているのですが、KB2686509のインストールが失敗するという事象が発生したので、その対処方法を情報展開します。 結論から言うと、KB2686509はキーボードレイアウトを変更しているとき、例えばCapsLockキーとCtrlキーを入れ替えているようなケースがあると、インストールに失敗するようです。 ということで、キーボードレイアウトを変更するためにレジストリに設定している「ScanCodeMap」を削除してWindows Updateを実施し、再起動後に削除したレジストリを復元させるという手順で無事解決しました。 以下、自動更新しかやったことない＆キーボードレイアウトを入れ替えている人（そんな人はいない？）向けの手順です。 問題が確認できたのはWindows XPのみです。自宅のVistaではこの問題は未確認なので、スクリーンショ
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
Movable Type 5を始める前に設定しておきたい10の項目
Movable Type 5を始める前に設定しておきたい10の項目を紹介します。 このエントリーは、「Movable Type 4を始める前に設定しておきたい10の項目」のMT5版です。MT4から機能が拡張・改善され、画面構成も変更されており、以前の記事では対応できなくなったので、全ての記述をこのエントリーで見直すことにしました。Movable Type 5を利用する場合の参考になれば幸いです。 掲載順序は、ブログ作成－サイトの設定－記事投稿－記事公開－コメント投稿という流れに沿って並べています。全ての項目が必須という意味ではありません。不要と思われる項目は適宜スキップしてください。 このエントリーではMTの基本機能だけを使った項目に絞っています。プラグインを利用した設定については別途エントリーしたいと思います。 また、ここに掲載していることよりも大事なことがあれば適宜追加しますので、ご連
pre要素で折り返しをするためのCSS
pre要素でソースコードを折り返すためのCSSです。最近は色々なSyntax Highlighterが登場しているので必要ないかもしれませんが、URLなどの横に長い文字列をpre要素で表示したいときに有効かもしれません。 １．CSS 以下のCSSでpre要素の文字が折り返せます。「white-space: pre-wrap」または「word-wrap: break-word」に未対応のブラウザはoverflowプロパティでスクロールします。 pre { white-space: pre-wrap; word-wrap: break-word; overflow: auto; } 以下は、過去の記事でよくみかけた設定です。 pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; w
HTML5+RDFaについて
このブログをHTML5に変更してみました。最近流行のFacebookのOGP（Open Graph Protocol）も設定しました。 HTML5に変更した理由は、OGP（Open Graph Protocol）を設置したときにvalidなHTMLにしたかったからなのですが、そもそもproperty属性はHTML5の属性ではなく、RDFaの仕様のようでした。勉強不足ですいません・・・。OGPを設置するにあたってHTML5にする必要はないようです。 ただしOGPを設置する場合、html要素に「xmlns:prefix」というネームスペースに対応した属性を設定する必要があります。FacebookのOGPに対応する場合は「prefix」に「og」を設定します。この設定はhtml5とかxhtmlには依存しません。 <html lang="ja" xmlns:og="http://ogp.me/ns
Movable Type プラグイン一覧（MT5対応）
Movable Type 5 対応のプラグインの一覧です。国内サイトで配布されているプラグインでMT5専用、あるいはMT4.xからのアップグレードまたはMT5での動作確認等が配布先で明示されたものを掲載しています。 本エントリーに掲載されていないプラグインでも、MT5で動作可能なものが多く存在すると思われますので、「Movable Type プラグイン一覧（MT4 対応）」等から配布サイトへ進み、動作状況を確認するか、実際にお試しください。 注：▲印はMovable Type プラグイン一覧（MT4 対応）から引き継いだもので、私自身がMT5での動作確認に関する情報を得られていないものです。 なお、動作確認状況の多くは、「WolaWola」の小野崎さんのエントリーを参考にして頂きました。この場をお借りしてお礼申し上げます。 MT5・プラグインの皆さん動いてますか 続・プラグインの皆さん動い
Movable Typeのプレビューを別ウィンドウで開く「PreviewTargetChangerプラグイン」
Movable Type 5のプレビューを別ウィンドウで開く「PreviewTargetChangerプラグイン」を公開します。 １．機能 デフォルトの動作では、ブログ記事編集画面で「プレビュー」をクリックすると、同一ウィンドウでプレビューされますが、修正するごとに画面を切り替えなければならず不便です。 このプラグインを利用すれば、プレビューを別ウィンドウに表示し、編集とプレビューを効率よく行うことができます。 注：現状ではプレビュー後の公開動作などを行うと、ウィンドウ（またはタブ）を一度閉じないとプレビューが正常に行えなくなる不具合がありますのでα版としてお試しください。v0.02で改善しました。 ２．価格 3300円/1インストールMT（税込み、購入前に必ず動作確認してください） ３．プラグインのダウンロード 下記のリンクよりプラグインをダウンロードしてください。 2010.12.27
Movable Typeで選択カテゴリを限定する「CategorySelectorFilterプラグイン」
Movable Type でカテゴリ選択を限定する「CategorySelectorFilterプラグイン」を公開します。 １．機能 ブログ記事投稿画面のカテゴリ選択でカテゴリをチェックすると、他のカテゴリを選択できないようにします。チェックを外せば再び選択できるようになります。 選択前の状態 選択後の状態（選択したカテゴリ以外のカテゴリのチェックボックスはdisable） また、選択可能なカテゴリをプラグインで指定することもできます。チェックを外しても選択不可のカテゴリは選択できません。 例：サブカテゴリのみを選択可能にした状態 細かい話ですが、選択可能なカテゴリはマウスオーバーで背景色を変更しますが、選択不可の状態では背景色を変えることはできません。 選択可能なカテゴリ上でのマウスオーバー 選択不可なカテゴリ上でのマウスオーバー ２．謝辞 このプラグインではJavaScriptを実装し
IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ
先日エントリーした「IE6/IE7/IE8/IE9の共存まとめ」で書いたとおり、IE8/IE9の開発者モードには「ブラウザーモード」と「ドキュメントモード」が用意されています。これを利用すれば、IEの旧バージョンの表示や挙動などを確認できるようです。 ブラウザーモードの選択 ドキュメントモードの選択 が、公式サイトの「ブラウザーモード」と「ドキュメントモード」の説明（７項に掲載）を読んでも、それぞれの使い方が良く分かりません。 ということで、本エントリーで「ブラウザーモード」と「ドキュメントモード」を変更することで、なにがどうなるかを調査してまとめました。参考になれば幸いです。 １．サンプル 説明は後回しにして、「ブラウザーモード」と「ドキュメントモード」を変更すると何がどのように変わるか、簡単なサンプルを作ってみました。 サンプルページ このページをIE8またはIE9で表示して「ブラウザ
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
Movable Type のウェブサイトに関するテンプレートタグ
Movable Type 5.0 で新しく「ウェブサイト」という概念が導入されました。そのことでウェブサイトに関連するテンプレートタグがいくつか追加されました。 ここではウェブサイト関連のテンプレートタグをいくつか紹介しておきます。基本的にはブログ系テンプレートタグ（MTBlogXX）と大きく変わらないので、ファンクションタグの説明は省略します。 MTWebsites ウェブサイトの一覧を取得するブロックタグです。このテンプレートタグを使えば、ウェブサイトから他のウェブサイト、あるいはブログが属さない他のウェブサイトの情報にアクセスすることも可能です。 <mt:Websites> <mt:WebsiteURL /> </mt:Websites> site_ids モディファイアを指定することで、特定のウェブサイトを指定することもできます。 <mt:Websites site_ids="1,
Movable Type 4 の再構築負荷を軽減する8つのTips
Movable Type 4 の再構築負荷を軽減する方法をまとめました。Movable Type を運用していて、「再構築に時間がかかるな」と思い始めたときに参考になれば幸いです。 １．SSIによるモジュール化 サイドバーの「最近のブログ記事」「最近のコメント」「カテゴリーリスト」「月別アーカイブリスト」「タグクラウド」などは、メインページや各アーカイブページ・ブログ記事ページの各テンプレートから呼び出され、必要なページ分再構築を繰り返します。 例えば、あるブログに100のブログ記事が投稿されていると仮定すると、ブログ記事ページは100ページあり、ブログ記事ページの再構築を行なった場合、サイドバーの情報も（同じ内容を出力する場合でも）100回再構築を繰り返すことになります。テンプレートタグを使っているリスト類が多いほど、再構築の負荷が大きくなります。 サイドバーのリスト類の再構築の負荷を軽
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
