便利すぎて困る程のFireBug1.0系を使ってみよう:phpspot開発日誌
Firebug - Web Development Evolved 便利すぎて困る程のFireBug1.0系を使ってみよう、ということで、広く使われているであろう0.4系と変わった点をプレビュー。 Googleなどの検索エンジンで、addons.mozilla.org にUPされている0.4系が上に表示されているため、まだ1.0系を使っていない人も多いのではないでしょうか？(という私もそうでした) FireBug1.0系のインストール方法の紹介〜その追加された強力すぎる機能について見ていきましょう。 FireBug1.0系インストール http://www.getfirebug.com/ にてFireBug1.0系のインストール。 FireFox - DOMインスペクタのインストール FireFoxインストール時にDOMインスペクタが入っていない場合は、FireBug1.0系の機能を最大限
サイトのCSSを見たままリアルタイムに編集するツール色々:phpspot開発日誌
サイトのCSSを見たままリアルタイムに編集するツール色々。 WEBデザイン開発において、編集→リアルタイム反映というのはなかなか効率がよいですね。 ということで、各種、リアルタイムCSS編集ツールをピックアップします。 FireFox拡張 or スタンドアロンアプリ FireBug - リアルタイムに指定部分のCSSが切り替え可能(参考記事)。CSS以外にも便利機能満載。 EditCSS - FireFox拡張で、エディタがインストールされ、エディタ編集と同時に即座にCSSが反映される。 CSSVista - IEとFireFoxの画面で一括プレビューが可能。 Web Developer ToolBar - WEBデザイナー必須のFireFox拡張。CSSの直接編集も可能。 他にもCSSやアクセシビリティに関する便利機能満載。 ブラウザ上で動作するオンラインツール たぬきのしっぽ - CS
段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
毎日モザイク : 本物のレイアウターはフチを恐れずに付ける。
もちろん、元ネタは、「本物のプログラマーgotoを恐れずに使う」なわけですが（w。 つい最近まで、フチ恐怖症だったのです。いや、切実に。 フチ付きの文字が嫌いだったのではなく、フチが恐かったのですよ。フチを付けるのが文字通り恐い。フチと聞いただけで微妙に震えるくらいでした。 フチの恐怖を味わったのは、忘れもしない、25歳の夏の事。 アダルトビデオのジャケットを作った時、裏面のキャッチコピーの指定に、何のためらいもなく「フチ M100+Y100」と書いたのでした。 翌日、製版屋さんに呼び出されました。 小さい製版屋さんで、社長直々に説教です。 「お前らは、簡単にフチとか書きすぎる。お前らは二文字【フチ】と書けばすむかもしれないが、こっちは大変なんだ。今からフチを付ける作業を見せてやるから思い知れ」 と言って、フチを作る作業を始めました。 原稿台に版下を乗せ、トレスコで僅かにピントをズラして、
【Dreamweaver】スニペット使わないと後悔するよ！::::::STOPN' LISTEN::::::to the silence:::::::
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home｜ About｜ Gallery｜ Blog 普通にhtmlに｜を記述しているのでソースは当然下記のように。 <ul id="samp
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
アイトラッキングでみるユーザーの閲覧行動 | 実践！Webマーケティング：Blog | ミツエーリンクス
このコーナーでは、企業でWebサイトの運営に携わっている方、マーケティング部門等でWebの活用法について考えておられる方向けに、Webマーケティングの実践のための手法やノウハウ、事例をご紹介していきます。市場に出回る書籍や雑誌では論じられることない、Webマーケティングの最前線に触れていただければと思います。 2007年01月19日 アイトラッキングでみるユーザーの閲覧行動 マーケティングユニット 棚橋 先日、弊社でもアイトラッキング調査のためのシステムを導入しました。 アイトラッキングは、被験者の顔や眼球、角膜反射を赤外線で捕らえることで視線の動きを追跡する手法で、心理学や認知科学などの研究分野でも用いられている科学的な手法です。以前はそれこそ非常に専門的な研究室での使われていたツールでしたが、昨今ではWebの分野においても、Webサイトのユーザビリティ評価や広告およびコンテンツの評価な
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介
yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか？ 「エラスティック（elastic）」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
毎日考ブログ -Web屋のウェブログ- | Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」
テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。 対してCSSレイアウトは、上と同じレイアウトをHTML（XHTML）＋CSSで表現するもの。こんな感じです。記述は一例として適当に書いてるんで、アテにしたり突っ込みいれたりしないでくださいね(笑)。 【HTML】 <div id="header"> <h1>毎日考ブログ（ヘッダ部分）</h1> </div> <div id="main"> <div class="menu">メニュー部分</div> <div class="contents">本
BROWSIZE.ORG：ユーザーの本当の画面サイズ、知りたくないですか？
アクセス解析サービスの「BROWSIZE.ORG」は 2016年10月20日 にサービス提供を終了しました。 ご利用ありがとうございました。 akiyan.com+browsize at gmail.com
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 : akiyan.com
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 2006-02-09 mixiのレイアウトが大幅に変更された。右側にサイドバーが出現して、全体の横幅が大きく広がったのだ。全体の横幅は900pxほどだ。このため、私の環境ではブラウザの横スクロールバーが現れるようになってしまった。以下がその様子だ。 これはユーザビリティ的にかなりよくない状況だ。横スクロールは可能な限り避けなければならない。なぜなら多くのユーザーは横スクロールすること自体に不慣れだから。 しかし、画面を見てお気づきの方もいると思うが私はWindowsのタスクバーを縦に配置している。このレイアウトはマイノリティな類であろう。このレイアウトのためにブラウザの横幅が縮まっているので「それは例外だ。みんなブラウザの幅は900px以上にしてるよ」という声が聞こえてきそうだ。しかしこれには反論の余地があ
CSSのレイアウト40種類を集めた「Layout Gala」 - GIGAZINE
サイトのコンテンツのレイアウトを考える場合、コンテンツをどのようなレイアウトでは位置すればいいのか悩む場合が多々あります。2コラムにするのか3コラムにするのか、それぞれのコラムの下にさらに子コラムを入れるのか否か、右サイドに置くのか左サイドに置くのか、などなど。 そんな場合に参考になるのがこの「Layout Gala」。CSSによるレイアウトの例が40種類あるので、自分の作りたいサイトのスタイルに近いレイアウトを実際に見てから、CSSファイルをダウンロードできます。Layout Gala http://blog.html.it/layoutgala/ 全部のレイアウトのファイルを詰め込んだファイルのダウンロードは以下から。 http://blog.html.it/layoutgala/allLayouts.zip また、「Yahoo! UI Library」にも単一のCSSファイルで100
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plaza.rakuten.co.jp/catfrog/diary/200701140026/
*{ margin : 0 } はもう古い!? | Emotional Web
http://japan.internet.com/busnews/20070402/6.html
COULD：スクロールしたあとの見せ方
電脳狂想曲 Webデザインの小技