1：住 太陽のブログ （1）「住 太陽のブログ」とは？ 「住 太陽のブログ」は、住 太陽（すみ もとはる）さんが運営している有名な老舗のSEOブログのひとつです。 有益な情報が盛りだくさんであることはもちろんのこと、書かれた日付を見るとさらに驚かされます。（「こんなに前から、こんなことを！」みたいなね） ゆえに、数年前に書かれた記事であっても、現在もなお色あせてはいません。（それは先見性の高さだけでなく、「上っ面の情報ではない」ということ） （2）おすすめの記事 「どのようなブログを作れば良いか？」、「人気のブログを作るにはどうすれば良いか？」をお悩みなら、次の記事をご覧になってみてください。 『つまらないブログから脱却するための 102 の方法』 『すばらしく印象的なブログを書くための7つの習慣』 「こんなに実践できるかーいぃ！」と感じる人もいらっしゃるかもしれませんが、ひとつでもできる

Copyright © 2007-2018 With-D - http://with-d.net All Rights Reserved.

WCHECK - Google、Yahoo日本語分割チェッカー Google の仕様変更により、従来の本ツール（WCHECK）の方法で日本語分割のチェックを行なうことができなくなりました。 残念ですが、ツールの提供を終了いたします。これまでご利用いただきありがとうございました。

無料 seo対策に便利な検索エンジン比較 Google / Yahoo / MSN 順位検索ツール :DW230。グーグル、ヤフー、MSNの三大検索エンジンから特定のキーワードで100件同時検索して URLの順位を表示します。無料 SEO対策便利ツール Google / Yahoo / MSN 順位検索ツール 特定のキーワードでの自分のサイトの検索順位 気になりませんか？ 三大検索エンジン グーグル ヤフー MSN から100件同時検索して自サイトの順位を表示します。 : 使い方のコツ キーワードにお好きなキーワードを入力してください。 URLの一部は　http://www.dw230.com/　ならば　dw230.com　だけで　http://　や　www　は必要ありません （URLに含まれる固有の部分だけを入れると検索が早くなります） : 検索後タイト

What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can

SEO page spider Learn about your webpages and how Google sees your site. Checks redirects, keywords, pagespeed, title, description, links and more. Image SEO tool Checks images on a page for common mistakes that affect users and Google. Checks for alt tags usage, dimensions, and spam.

punypng is a PNG optimization image compression tool that makes PNG, GIF and JPEG images smaller, developed by Gracepoint Fellowship Church* Flash required. Supported Types: JPG, GIF and PNG (Max 500KB each) What is punypng? punypng is a free optimization service that can dramatically reduce the file size of an image by converting it into a highly-compressed, lossless PNG image. That translates to

Mac Firefox 3 のみ。 いずれ、いろいろ確認します。 不具合を発見された方は、ご連絡ください。

yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s

Gallerifficは、サムネイル箇所もオートプレイに対応した、シンプルな画像ギャラリーのスクリプトです。 Galleriffic 画像ギャラリーの機能は、サムネイル画像からの拡大表示、マニュアルとオートプレイを備えており、拡大した各画像にはダウンロード用のリンクが表示されます。 GallerifficはjQueryのプラグインのため、動作にはjquery.jsが必要です。 次のバージョンでは、タイトルや説明文の表示機能がつくとのことです。

セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合（rebuildメソッド） サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱

jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );

Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 タブ・メニュー作ってみました。使いまわしを考慮してパッケージ化に挑戦。JavaScriptを切っているときは、ページ内リンクとなります。 HTML <ul id="tab"> <li class="present"><a href="#page1">Page_1</a></li> <li><a href="#page2">Page_2</a></li> <li><a href="#page3">Page_3</a></li> <li><a href="#page4">Page_4</a></li> <li><a href="#page5">Page_5</a></li

CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに

<form><input type="button" value="表示切替" onClick="checkExpand('text');"></form> <span id="text">あいうえお</span> <script language="JavaScript" type="text/JavaScript"> <!-- /**************************************************************** * 機　能： オブジェクトの表示非表示を制御する 1 * （表示している場合は非表示、非表示の場合は表示） * 引　数： ch 表示/非表示を切り替えるオブジェクト名 * 戻り値： なし ****************************************************************/ functio

アップロードフォームに画像のプレビューを出すことが可能です。 IE6では、動作確認が取れたけど、firefoxではできなかった。 <script type="text/javascript"> function preview_image(obj_image, image_id) { document.getElementById(image_id).src= obj_image.value; document.getElementById(image_id).style.display="inline"; } </script> <style type="text/css"> #preview_img_1{ display: none; width: 150px;/*サムネイルサイズ*/ } #preview_img_2{ display: none; width: 150px;/*サム

サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは本日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

dtをfloatする場合の注意点 2008-05-12 0 0 XHTML/CSS CSS, dl, float dl の定義リストで，dt を float させることがよくあります。このとき注意したい点をまとめておきます。 新着情報のようなところで，更新日を dt で，更新内容を dd でマークアップした場合を想定してみましょう。 まず，XHTMLでのマークアップは次のような感じです。 <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキスト...。</dd> <dt>2008-05-06</

header このページはScuderiaWebのフッタ固定のサンプルです。(このメッセージはサンプルとして影響のない場所に表示しています。) footer

Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par

このブログのアクセス解析を見ると、キーワード「firefox 印刷」で検索してこのエントリに飛んでくる人がかなりいます。やっぱりみんな困っているんだなぁと。Firefoxの印刷はかなりやっかいで、完全FIXは無理かもしれないという結論に自分の中でも解決していたのですが、最近この方法をやっていて、普通に印刷できてます。 display:tableで印刷対応 まずは、普通にfloat:left left leftで左に詰めたレイアウト。 floatによる3カラムレイアウトのサンプル（印刷対応無） <div id="all"> <div id="header">header</div> <div id="body"> <div id="localNav">localNav</div> <div id="main">main</div> <div id="relatedNav">relatedNa

第 10 回 CSSで文字サイズを変更するボタンを設置する 第 10 回目は「CSSで文字サイズを変更するボタンを設置する」です。 今回の文字サイズの変更は「styleswitcher.js」を使います。 この「styleswitcher.js」は複数のスタイルシートファイルを切り替えて読み込むことができ、クッキーに保存できる優れもののライブラリです。 実装手順は以下の通りです。 1. styleswitcher.js をダウンロード 「styleswitcher.js」をサイトからダウンロードしてきます。 「A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets」のエントリーの中にある Download styleswitcher.js から Download できます。ファイル名 「s

Sponsors Free website builder. Create a website now! EcommerceBooth is an eCommerce resource where you can find useful guides, tutorials, and exclusive deals. WPKube - learn how to get most out of WordPress. Popular Topics Companies (6,703) Freelance / Portfolios (4,828) Technology (6,562) Internet (5,264) Marketing (4,812) Lifestyle (3,905) United States (3,078) United Kingdom (1,713) Weblogs (2,

floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever

定義リストで、dtとddを横並びにしたいとき、ddのマージンの調整でそれを実現するやり方は私がよく使うテクニックなのだが、あるとき、IE7で見たらdtがすっかり消えていて、あわてたことがある。原因は、またしても、その定義リストを含むボックスへの背景画像の指定だった。 [該当するブラウザ] Windows／IE7.0以下 症状 たとえば、年表のようなリストを角マルの矩形で囲むレイアウトを組んだとする（右図）。 角マル矩形は、 frame_top.gif（トップの部分）、 frame_bg.gif（中間部分）、 frame_btm.gif（ボトムの部分）、 以上3つの画像を、dlおよびdlを含むボックスに背景として指定することで実現している。詳細は以下の通りである（→サンプルページ1）。 【スタイルシート】 body { margin: 10px; padding: 0; } .box { w

サンプル 2007-05-30 テキストテキストテキストテキストテキストテキストテキストテキスト 2007-05-15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2007-04-30 テキストテキストテキストテキストテキストテキスト 2007-04-15 テキストテキストテキストテキストテキストテキストテキスト 2007-03-30 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ソース XHTML <dl class="list309"> <dt>2007-05-30</dt> <dd>テキストテキスト......</dd> <dt>2007-05-15</dt> <dd>テキストテキスト......</dd> <dt>2007-04-30</dt> <dd>テキストテキスト......</

DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser

通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、折り返さない場合が多い。また、折り返しの条件はブラウザ毎に異なります。 文字列折り返し ブラウザ別サンプル Firefox と IE6 (PNG画像) IE7 beta 2 日本語版 (PNG画像) Opera と Safari (PNG画像) テキスト。実際（現在）の表示 mozilla系以外のブラウザの多くは、URL (URI) 等の連続する半角文字でも、ハイフン「-」等の一部の半角記号を区切りと認識し折り返しするようです。 CSSのword-break:break-all;、word-break:keep-all;はIE独自の仕様なので、IE以外では通常通りの挙動。つまりCSSによる折り返しはされない。Safari,Operaのサンプルでは、半角文字が折り返しさ

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel

パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre

ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる

IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示 June 28, 2009 以前エントリーした記事、IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示から1年4ヶ月ほど経ちました。ブラウザの最新版はIE8/FF3/Safari4となったのでフォントのセットを少々変更してみました。 IE8ですが、IE6/IE7と同様にフォントをピクセル指定すると文字の大きさを変更することが出来ません（ページズームを使えと言う感じではありますが）。 以前のセットではhtml>bodyハックでモダンブラウザ(Safari/Firefox)用にフォントをピクセルで指定していたのですが、IE8ではこのハックが有効になってしまい、ピクセル指定したCSSが適用されてしまいます。 今回はIE8をのぞいたモダンブラウザに適応