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
jQuery.ajax()のまとめ
jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする（1.4で止まっているとか）ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は１５項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見（といっても古い情報ですが…）があり、jQueryが日々進化していること
IE6/IE7/IE8/IE9の共存まとめ
Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用＋IETesterでIE9を確認できるようにカスタマイズする 「Microsoft Expression Web SuperPreview for Windows Internet Explorer」と「Internet Explorer Platform Preview（「Internet Explorer 9 Platform Preview」）」を併用する IE9のブラウザーモードとドキュメントモードを利用する 以下、
Twitterの公式ツイートボタンを(X)HTML validにする方法
Twitterの公式ツイートボタンのページで作成したボタン（下）を、ブログなどに表示しているサイトが増えてきました。当サイトも表示しています。公式ツイートボタンの設置方法は「WordPress/Movable Typeに公式ツイートボタンを設置する」で詳しく紹介しています。 ところで、このボタンを表示するコードをページに貼り付けると、XHTML1.xやHTML4.01のページがvalidにならなくなる場合があります。 本エントリーでは、問題点の簡単な解説と、設置したTwitterの公式ツイートボタンを(X)HTML validにする方法を紹介します。 １．問題点 公式ツイートボタンのページでは、公式ツイートボタンを表示するために、次のようなコードを生成します。 このコードを埋め込んだ、DOCTYPEがXHTML1.0のページをThe W3C Markup Validation Servic
Github を Windows で利用する（ローカルPCにリモートリポジトリの複製を作る）
Githubを使って、リモートリポジトリの複製（ローカルリポジトリ）をローカルPCに作成し、ローカルリポジトリで変更したソースコードをリモートリポジトリに反映させる手順です。 「Github を Windows で利用する（Git GUI編）」では新規のリポジトリ作成からの流れを説明しましたが、ローカルリポジトリが存在しない状態での手順を記していなかったので、本エントリーで紹介します。 Git Bashはネット上での情報が多いので、１項の「リポジトリの複製」のみにとどめ、後はGit GUIを使って作業します。 １．リポジトリの複製（ローカルリポジトリの作成） Git Bashを起動します。 MS-DOSのようなウィンドウが開くので、cdコマンドでローカルリポジトリを作成したいディレクトリに移動します。 移動後、「git clone」コマンドを実行します。「git clone」コマンドは、s
Github を Windows で利用する（Git GUI編）
Github を Windows で利用する方法を紹介します。このエントリーではGit GUIというツールを利用して、 リモートリポジトリの作成 ローカルリポジトリの作成 ローカルリポジトリのコミットとリモートリポジトリへのプッシュ ファイル更新時のコミットとリモートリポジトリへのプッシュ 等について紹介します。「githubの使い方が分からない」というビギナー（私も含め）のためのエントリーです。GUIのオプション設定など詳細な設定は割愛していますので予めご了承ください。 なお、以降の操作を行う前にgithubのアカウント取得は完了させておいてください。 １．ダウンロード githubのサイトにある「Help」をクリック。 右側のメニューから「Intermediate」の中にある「Install Git HTML help」をクリック。 Windowsの説明にある「Msysgit」をクリッ
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
Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
Google マップの埋め込み HTML でふきだしを消す方法（新）
Google マップをブログなどに埋め込むときの HTMLコードに含まれるふきだしを消す方法です。 ふきだしを消して、マーカーを残したい場合は「Google マップの埋め込み HTML でふきだしを消してマーカーを残す方法」を参照してください。 １．問題点 Google マップから検索などで特定の地域を表示させて、HTMLコードを取得して、ブログに埋め込むと、検索したときの情報がふきだしとして含まれてしまいます（下）。 実は、以前「Google マップの埋め込み HTML でふきだしを消す方法」をエントリーしたのですが「その方法ではふきだしが消えませんでした」というコメントを頂きました。 どうやら前回のエントリーからしばらく経ったこともあり、その間に Google マップの UI が変更されたようです。ということで、新しい技を紹介します。 ２．解消方法 Google マップで検索結果が表示
YUI Compressor で JavaScript ファイルを圧縮する
YUI Compressor の使用方法を紹介します。 YUI（Yahoo! UI Library） Compressor は、JavaScript ソースコードの圧縮アプリケーションで、バージョン2.0 からは CSS の圧縮も可能になっています。 ダウンロードした Windows 用のバージョンではコマンドラインからの実行のみ有効です。コマンドラインから実行するには Java の実行環境が必要なので、Java の設定方法もひっくるめて紹介します。 なお、当ブログではこれまで複数の JavaScript ファイルを読み込んでいましたが、HTTP リクエスト回数を削減するため、ひとつのファイルにまとめ、さらに YUI Compressor で圧縮してみました。 １．JRE 6 Update 7 のダウンロード JRE（Java Runtime Environment）は Java プログラ
Movable Type 4.1 書籍のまとめ
ここ最近、Movable Type 4.1 向けの書籍が出回り始めました。 ということで、拙著から本屋でざっと確認したものまで含め、以下にまとめてみました。参考になれば幸いです（まだ発売されていないものもあります）。 記述が曖昧な部分が気になるので、内容については改めて見直したいと思いますが、現時点で重大な誤りがありましたらご指摘ください。 １．まとめ 表は「初心者向け」や「ためになる」など、主観的かつ曖昧な感想はできるだけ避け、書かれている内容に着目しています（といってもやはり主観的ですが...）。 Movable Type プロフェッショナル・スタイル MT4.1対応 CMSとして使うMovable Typeガイドブック Movable Typeで作る絶妙なブログサイト―4.1対応 Movable Typeテンプレートタグ虎の巻 インストール詳しく解説なし簡単に解説なし 各機能の説明M
Windows XP のバックアップ機能
メインで使っているPCの調子が以前から思わしくなかったので、購入して以来、初めて OS（Windows XP） の再インストールを行いました。といっても、再インストールしたからすでに1週間ほど経過しています。 その中で、今回初めて Windows XP の「バックアップ」と「復元」という機能を使ってみたので、その手順と感想を記しておきます。 この機能を利用すると、指定したドライブやフォルダをバックアップできます。 復元は、バックアップと異なる単位で復元できますし、ファイル単位でも指定が可能です。例えば、Cドライブをまとめてバックアップして、復元はフォルダやファイル単位で行う、という組み合わせも可能です。 今回はCドライブ（約30GB）を、外付けのハードディスクに丸ごとバックアップして、その中から任意のフォルダを復元する手順を紹介します。 追記：バックアップ機能は、Windows XP Pr
「WordPress で『続きを読む』の折りたたみ」を特定のページだけに適用する
「WordPress で「続きを読む」の折りたたみ Web2.0」では、スライドダウンで本文下に続きを表示するカスタマイズをご紹介しましたが、カテゴリーアーカイブや月別アーカイブでも折りたたみが適用されてしまうため、追記部分のテキスト量が多い場合、ページの読み込みに時間がかかる可能性があります。 ということで、本エントリーではインデックスページのみ折りたたみを適用し、アーカイブページでは記事ページへのリンクを表示するカスタマイズを紹介します。 注：このカスタマイズを行う前に「WordPress で「続きを読む」の折りたたみ Web2.0」を設定してください。 設定方法 getContentforShowHide.php を任意のエディタで開き、以下の青色部分を追加してください。追加部分は大きく分けて４ヶ所あります。特に閉じカッコ "}" 忘れがないよう、ご注意ください。 ： functio
小粋空間: Firefox・Netscapeで連続した半角文字を折り返す
FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字（長いURLや半角空白のないスクリプト等）を途中で折り返せないという既知のバグがあります。当サイトでもMTタグをリストとして掲載している記事をFirefox・Netscape等で表示すると、画像のようにブロックからはみ出して表示されてしまいます。 Firefoxまとめサイト：URLっぽい文字列が右端で折り返されずレイアウトが乱れます FirefoxではURLの折り返しについては url_breaker という拡張が公開されており、これがスタンダードな対処方法になっているようです。 あすかぜ・ねっと：url_breaker またURL以外のテキストにも適用したい場合、url_breker_plus が公開されています。 outsider reflex：Firefoxで長いURIを折り返す （本文中に
label 要素を用いてトラックバックURLを1クリックで選択状態にする
個別エントリーアーカイブに表示されたトラックバックURLを、ドラッグせずに1クリックで選択する方法は既にスタンダードなカスタマイズとして確立していますが、label 要素を加えてさらに取得しやすくしてみました。label 要素は、それで括られた説明文をクリックした時やアクセスキーを押した時、本来の部分をクリックした時と同じ動作をさせる働きをもっています。 デフォルトテンプレートにおけるトラックバックURL表示のHTMLタグは下記のようになっています。 <h2 id="trackbacks">トラックバック</h2> <p class="techstuff">このエントリーのトラックバックURL:<br /> <$MTEntryTrackbackLink$></p> このタグでは下のような表示になり、トラックバックURLをコピーする場合、マウスでドラッグする必要があります。 トラックバック
WordPress で「続きを読む」の折りたたみ Web2.0
WordPress で追記文章を書いた時、「続きを読む」のリンクをクリックすると、スライドダウンで本文下に続きを表示するカスタマイズをご紹介します。 １．特徴 JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「Read more（続きを読む）」のリンクをクリックすると追記文章をスライドダウンで表示します。 JavaScript が無効の場合は記事ページにジャンプします。 「Hide more（続きを隠す）」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。 スクリプタキュラスのライブラリを編集せずに、折りたたみ速度の変更が可能です。 ２．サンプル 以下にサンプルを作りましたので、動作をお試しください。折りたたみ速度は0.5秒に設定しています。 追記文章の折りたたみ 2.0 サンプル ３．Word
リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」
XHTML の文法チェックには Another HTML-lint gateway や、The W3C Markup Validation Service が有名ですが、そのサイトに行かなければならないのがやや面倒という方に、リアルタイムに XHTML を検証できる Firefox 機能拡張「Html Validator」を紹介します。 「Html Validator」は、XHTML のバリデーション以外に、アクセシビリティのチェックや、ソースコードのクリーンアップ（ソースの自動修正）まで行ってくれるスグレモノで、Firefox ユーザにはポピュラーな機能拡張のひとつです。 すでにご利用の方も、記事後半にデフォルト設定以外の項目について詳細に記しておりますので、より活用できるのではないかと思います。 以下、Firefox をご利用でない方向けに、Html Validator のインストール
Movable Type 4 にアップグレードするメリット
Movable Type 3.x を使っている方対象に、Movable Type 4 へアップグレードするメリットをまとめてみました（今更感がありますが）。 主観的な見解で、これはいいと思ったものから順に並べています。 １．バックアップ／復元機能 Movable Type 3 まではエントリーの書き出しや、データベースのバックアップ等で、ブログのバックアップを行っていましたが、Movable Type 4 ではブログ全体のバックアップ＆復元機能が追加されました。 執筆のために何度かバックアップ機能については動作を確認しましたが、エントリーからテンプレート、アイテム等、全てのデータを完璧に復元してくれます。 私のブログはまだ 3.21-ja で、データベースのバックアップも正常に行えないため、エントリーの書き出しを周期的に行っている状態ですが、この機能さえあれば万が一の時も安心ですし、アップ
Google マップの貼り付け用 HTML を valid にする
Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。 １．埋め込み HTML の利用方法 埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします（スクリーンショット右上）。 リンクをクリックすると、HTMLコードがすぐ下に表示されます（下）ので、 「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、 <iframe width="425" height="350" ～ のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。 ２．問題点 埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
