フロントエンド Web 開発のためのローカル・ブックマーク
最近はブックマークといえばページ単位で Delicious に登録する場合がほとんどだけど、リファレンス系のサイトやオンライン・ツールなど、仕事中にちょくちょく使うものはやはりブラウザにブックマークしておくのが便利。というわけで、「フロントエンド Web 開発」とか言うとなんか大げさだけど、とにかく僕が仕事場の Firefox に保存している「そっち方面」のブックマークを、整理しつつさらしてみる。 W3C HTML HTML 5 HTML 4.01 XHTML 1.0 CSS CSS: Current Work CSS 2.1 CSS 2 CSS 1 HTML ごく簡単な HTML の説明 (The Web KANZAKI) ばけらの HTML リファレンス (未完成) (bakera.jp) Microformats CSS CSS - Contents and compatibilit
Movable Type から WordPress へ
このサイトのパブリッシング・プラットフォームを Movable Type から WordPress へ変更した。以下、いくつか覚え書きを。 パーマリンクの移行 すでにある記事のパーマリンクをそのまま持ってくる方法はいくつかあるようだけど、以下で紹介されている「MT で WP 形式のデータを書き出す」という方法を採用。下書きの記事は消えちゃうけど、パーマリンクのほかコメントとタグはすべてそのままスムーズにいけた。 Movable Type から WordPress に固定リンク込みで完璧に移行する方法 - ネットスクランダー プラグイン プラグインは、デフォルトで入ってたものやよく紹介されてる定番らしきもののほか、いくつか探してインストールした。 Disable WPAUTOP 編集画面で改行時に p 要素のタグが自動的に挿入される機能を無効化。旧サイトから持ってきたデータがおかしなマークア
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
jQuery と CSS を使った Apple 風パンくず
Fig 1: 「jQuery と CSS を使った Apple 風パンくず」完成図 パンくず (Breadcrumbs) ってその必要性に疑問を感じることの多い要素の筆頭だと思う。この案件で要るか、これ? みたいな。そんなわけだからあまり力を入れて作ったことがなかったんだけど、Veerle’s blog のパンくず作成チュートリアル Simple scalable CSS based breadcrumbs を読んで、必要かどうかはとりあえず置いといて、どうせ置くならお洒落な方がいい、っていうか俺もクールなパンくず作る! と盛り上がってしまい、作ってみた。 Fig 2: Apple のパンくず。影響力大 Fig 3: Delicious のタグのリスト。妙に好き 目論んだイメージとしては Apple 風のルックスに Delicious のチェーン状に繋がったタグのリスト的なロールオーバー効
チェック/ペケ
HTML/XHTML で チェックマーク (Tick) や ペケ (X mark) を表示させるには以下の文字参照が使える。 数値文字参照名称 ✓✓CHECK MARK (tick) ✔✔HEAVY CHECK MARK (bold tick) ✗✗BALLOT X (cross) ✘✘HEAVY BALLOT X (bold cross) しかし IE6 では文字化けすることが多いようなので、CSS で Unicode フォントを指定するといいみたい。 <!-- HTML/XHTML --> ... <span class="unicode">✔</span> ... /* CSS */ .unicode { font-family: "Arial Unicode MS", "Microsoft Sans Serif"
インライン要素に背景画像を指定する
Fig 1: インライン要素に背景画像を指定 CSS でインライン要素に背景画像を指定する場合、IE6 と IE7 では致命的なバグがあるので注意。たとえば Fig 1 のように、パラグラフ中のハイパーリンクにアイコンを表示させたいとする。となると CSS はこんな感じになるだろう: a.pdf { padding-left: 20px; background: url(/img/pdf.png) no-repeat 0 50%; } a.external { padding-right: 20px; background: url(/img/external.png) no-repeat 100% 50%; } すべてのモダン・ブラウザで Fig 1 のようなレンダリング結果が得られるが、背景画像を指定したインライン要素が改行して複数行にわたる場合、IE6/7 は Fig 2 のようにし
JavaScript と CSS を使った「このページを印刷」リンク
クリックするとブラウザの印刷ダイアログが立ち上がる、いわゆる「このページを印刷」リンク。マークアップはだいたいこんな感じになると思う: <p class="print"> <a href="#" onclick="window.print(); return false;">このページを印刷</a> </p> でもこれ、JavaScript が無効の場合はどうなるだろう? そう、何も起こらない無意味なリンクになっちゃうよね。そこで、JavaScript と CSS を使ってひと工夫してみよう。 まずは JavaScript。例によって jQuery を読み込んだ上で、こんな風なスクリプトを記述: $(function(){ $('body').addClass('js-enabled'); }); もちろんクラス名はなんでもよくて、body 要素になんらかの class 属性を付与できれば
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
