ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
サイトマップをフッタに配置する際のポイントとその効果
サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン（スパイダー）がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです
Excel（csv）データを一瞬にして大量のhtmlに変換する方法 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
ドロップシッピングなんかで商品データベースをCSVにて配布いているサイトがたまにあったりします。このように大量の商品データがある中で、個々のページをそれぞれ作りたい!そんな要望に応えてくれるフリーのソフトがあります。要はExccel(CSV)の内容をhtmlに簡単にもってくることが出来ます。 Excel（csv）から一瞬にして大量のhtmlを作成する方法 まずソフトをダウンロードします。 まずこちらからhttp://www.mediakiryu.biz/、ソフトをダウンロードします。容量も20KBとお手軽です。すると上記のような4つのファイルがダウンロードされます。この「excel2html_ver2_2.hta」を使用することで、Exccel(CSV)の内容をhtmlに変換することが出来ます。 同梱されているファイルを使って試してみる。 早速excel2html_ver2_2.htaを開
Dreamweaver用拡張機能でCSSプロパティを並べ替える | ツール・サービス | かたつむりくんのWWW
昨日、Adobe Dreamweaver CS3 10 周年記念 イベント - 夢を紡ぐ者たちへ -に参加してきました（レポートのエントリーを後日掲載します）。 そこで紹介されたTipsやCS4に関する最新情報は、どれも興味深く、自分にとっては役立つ情報ばかりでしたが、その中ですぐに試せて、かつ大変便利そうで、さらに自分が今までずっと欲しかった機能があったので紹介します。 それは、Dreamweaverの拡張機能を使って、CSSプロパティの記述順序を自動的に並べ替えることができる、というものです。 以前の「CSSプロパティの指定順序」というエントリーでも書いたとおり、これまでは「自分が作ったプロパティの指定順序と、Dreamweaverの「CSSルール定義ダイアログボックス」からはき出されるコードのプロパティの指定順序が全く違う」ということに非常に不便を感じていました。今回の拡張機能は、そ
font-sizeのパーセント表記一覧 - Webtech Walker
font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
WEBデザイナ/開発者が覚えておくと便利なブックマークレット集:phpspot開発日誌
15 Must-Have Bookmarklets For Web Designers And Developers WEBデザイナ/開発者が覚えておくと便利なブックマークレット集。 起動すると、その場で画像などの要素をドラッグ＆ドロップでデザインできたりする便利なブックマークレット集です。 ReCSS - Reloads The CSS 起動すると、サイトのＣＳＳが再読込みされ、リロードすることなく見栄えの更新ができる Edit Any Website - ブックマークレット XRAY - See Details Of Any Web Element 起動するとJavaScript製のＤＯＭインスペクタが起動します。 MRI 起動してエレメントをクリックすると、クリックしたエレメントのセレクタが取得可能。 Design - Grid-Rule-Unit-Crosshair 起動すると、4
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
今よりコーディングのスピードを上げるには
「今よりコーディングのスピードを上げる17の方法」とかってタイトルにしたら、いかにもそれっぽい感じがするなぁ（笑） さて、仕事をする上でもっとも重要な要素の一つに、作業スピードって有ると思うけど、正直最近の自分が以前に比べて早くなっている気がしない今日この頃。 一応、現状の作業スピードでも期間内に納品は出来てるから最低限の作業スピードは確保されてると思うんだけど、コレが1.5倍くらい早くなったら、空いた時間に勉強したり、もっとガンガン組んでいけるから、速さを極める事はとても重要だよなーと。 なので、自分がやろーとしてる思いついた方法をメモ。 コーディングのスピードが上がりそうな事 無理やり出した感も有るけど、取り合えず思いついた方法を。 1）基本的なタイピング速度を上げる。 タイピングソフトとかを活用して、基本となるタイピング速度を上げれば少しはコーディングのスピードも速くなるかもって思っ
第10回 公開に差し支えのある問題を無くそう（2）必須の校閲項目／品質編 | gihyo.jp
内容面のチェックが済んだところで、最後に考えなくてはならないのが品質面のチェック、いわゆる「文字校正」です。 特に広告目的のコンテンツでは、文中に残る"アラ"が取り引きをためらわせる直接的な要因にもなるため、極力見逃しの無いようにしなければなりません。 編集・ライティングの中で、最も機械的で、面白みも少なく、正直なところただただ面倒な作業ですが、根負けせずに頑張りましょう。 文章の破損箇所を無くす コンピュータを使った執筆作業は、文章の修正が簡単にできて便利ですが、タイプミス、変換ミス、文字の消しすぎや消し忘れ、コピー＆ペーストの失敗などから、文章の破損箇所も多く発生します。 誰が見ても"間違い"とわかる問題だけに、あまり多く残してしまうとひどく"いい加減"な印象をユーザーに与えてしまいます。1文字1文字ていねいなチェックを心がけましょう。 【例文】 脱字：お安くなています → お安くなっ
Web制作に超便利！無料のプロトタイプ作成ツール
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
新規サイト制作セット（CSSライブラリ＋基本フォルダ構造＋HTMLテンプレート）、一式zipでダウンロードできるようにしました
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
Portfolio > JavaScript > yuga.js :: Kyosuke.jp
About this script CSS Nite LP2で紹介した、優雅なWeb制作のためのJavaScript、yuga.jsです。主な機能は次のとおりです。 class="btn"でロールオーバー 自分にリンクしていればclass="current" 自分にリンクしている画像は置き換え 外部リンクは自動で外部ウインドウ ページ内リンクはするするアニメ 直接画像にリンクするとthickbox CSSでデザイン用のクラス付加 ニュース 2008/03/23 jquery1.2.3、thickbox3.1を利用した0.5.1を公開しました。interface.jsを使わずにするするスクロールを実装しています。 2007/06/18 jquery1.1.2、thickbox3を利用した0.3.0を公開しました。前のものより動作速度がUPしています。 サンプル トップとプロフィールしかない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームズ｜メールフォームでお悩みの方はこちら 70万件突破 運用実績15年
NVDA Japanese Users - Google Groups
Web制作 W3G
フロートとネガティブマージンまとめ:CSS | Tech de Go
kuler
携帯シミュレータ - P1エミュレータ