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
はてなブックマークでタイトルを一覧表示するブックマークレット
はてなブックマークでタイトルを一覧表示するブックマークレットを作りました。 １．作った理由 2013年1月8日、はてなブックマークのデザインがリニューアルされました。 リニューアル前 リニューアル後 個人的に、はてなブックマークを読むときは、「人気エントリー一覧」のページをスクロールしながらタイトルだけをざっと見て、読みたいと思ったものを別タブで開いていき、あとでそれらをゆっくり読む、というスタイルをとっています。 リニューアル後は、ページに表示されるタイトルの数が減ってしまっていて、スクロール量が増えました。 また、順序なしリストをinline-blockで横並びになり、タイトルだけの表示もできないようなので、タイトルを追うための視線の移動が以前より大きくなりました。 ２．ブックマークレット ということで、タイトルを一覧表示するためのブックマークレットを作ってみました。 一覧表示 上のリ
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
jQueryのtext()とhtml()の違い
jQueryのtext()とhtml()の違いについて紹介します。jQueryビギナー向けのエントリーです。 １．text()について text()は指定した要素のテキストノードを返却します。 簡単な例として、次のようなHTMLマークアップがあるとします。 <div class="foo">Demonstration Box</div> このマークアップに対して $('.foo').text(); を実行すると、次のような結果を返却します。 Demonstration また、text()は指定した要素に含まれる子孫要素のテキストノードすべてを結合して返却します。 例えば次のようなHTMLマークアップがあるとします。 <div class="foo"> <div class="bar">Demonstration Box</div> <ul> <li>list item 1</li> <li
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
プログラミング初心者がJavaScriptを1分で実行する方法
プログラミング初心者がJavaScriptを1分で実行する方法を紹介します。 JavaScriptはブラウザ上で実行できるので、ブラウザを利用します。ブラウザはIE8/IE9またはGoogle Chrome、Firefoxのいずれかを使います（FirefoxはFirebugのインストールが必要です）。 プログラミング初心者にプログラムのサンプルを見せるときにも使えるかもしれません。 １．IE8/IE9で実行する WindowsであればIE8/IE9がデフォルトでインストールされていると思うので、もっとも手っ取り早いです。 ブラウザを起動して任意のページを表示します。この状態でF12を押下すると、次の画面が表示されるので、「コンソール」タブをクリック。 （画面をクリックすれば拡大します。以下同様） 一番下の行に実行したいJavaScriptを記述してリターン。ここでは「document.wr
HTMLの整形やJavaScriptの難読化を解除する「jsbeautifier.org」
HTMLの整形やJavaScriptの難読化を解除する「jsbeautifier.org」を紹介します。 JavaScriptの難読化解除には「JsDecoder」を利用していましたが、いつのまにか「Not Found」になってしまってました。 JsDecoder ということで代わりのサイトを探したところ、「Online JavaScript beautifier」を見つけました。 Online JavaScript beautifier 使い方は簡単で、整形したいコードをはりつけて、ページ上にある「Beautify JavaScript or HTML」をクリックするだけです。サンプルコードが表示されているのでクリックすれば整形されることが分かります。 jQueryで試してみます。下は整形前のものです。 いい感じに整形されました。 次にHTMLで試してみます。下は整形前のものです。 こち
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
WordPressのTwenty Elevenテーマ解説：メインインデックスのテンプレート (index.php)
WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説してみたいと思います。確認バージョンは3.2.1です。 メインインデックスのテンプレート (index.php) Twenty Elevenテーマの「メインインデックスのテンプレート (index.php)」で出力されるページは次のようになります。 テンプレートのソースコードは次のとおりです。 <?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a pa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
