Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
hxxk.jp - CSS を書く前に読んでもらいたいこと
記事データ 投稿者 望月真琴 投稿日時 2006-04-09T19:40+09:00 タグ CSS IRC Team-One オフ会 仕様 実践 Web Standards Design 春に会いましょう 概要 CSS の初心者なあなたもエキスパートなあなたも、とりあえずここは押さえとけ、という記事を紹介。 リプライ 7 件のリプライがあります。 CSS を書く前にブラウザ毎のクセをリセット CSS を書くことに慣れている人はよくご存知でしょうけど、 IE や Firefox や Opera や Safari などの UA はデフォルトスタイルシートと呼ばれるスタイルシートを持っており、それを適用せねば、あるいはそうであるかのように動作せねばならないと仕様で定められています。 User agent: Conforming user agents must apply a default s
Ocher - フルCSSサイトの超高速構築
マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C2セッションにて「CSS完全攻略!!!3ブラウザ対応のWebサイトのつくり方」を聴講。日本におけるCSS提唱オピニオン・リーダーの一人、アンカーテクノロジー神森氏がプレゼンター。 いやぁー内容濃かったですね。あまりにスピーディーでちょっと置いてかれそうなところもありました。実際の内容はセッション題とはやや趣向が異なり、どちらかというとDreamweaverでのCSS Tipsみたいなノリでした。ま、Macromedia主催なので。その中で、超高速フルCSSサイト構築法が紹介されていました。（*勝手に命名） 作り方大公開（らしい） 画面デザインを領域に分け、名前を決めておく。 見出しレベルを確認。 Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。 見出し付けを行う。 メニュー項目のリスト化。
満足せる豚。眠たげなポチ。:2005年の技術的なトレンドに乗り遅れないための5つのテーマ
年の暮れだからこそ、今年の技術的なトレンドへ乗り遅れないように復習をしたいもの。 Web2.0が脚光を浴びた2005年。とりあえずこの5つの分野から苦手分野をきっちり潰していきたいと思います。（多分にぼくの偏見と苦手分野の重視が影響している点はご了承ください。） Ajax Ruby on Rails HTML/CSS Javascript 正規表現 ということで、おすすめの書籍やサイトを総括。 Ajax 2005年はこれしかないでしょう。猫も杓子もAjaxと連呼した年でした。 Ajax: Web アプリケーション開発の新しいアプローチ http://antipop.gs/docs/translations/ajax.html これがなくちゃ始まらないですから。 Ajaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメ http://satoshi.blogs.com/life
Lucky bag: : blog: CSS デザインギャラリー
世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー（ショーケース）サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとまとめてみた。（ちなみに順不同） CSS Vault » The Web's CSS Site CSS Beauty | CSS Design Showcase Unmatched Style | CSS Design Gallery and Design Inspiration. CSS Drive css thesis: sites, that's all. » screenspire.com | the leading full
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スチーム速報 ＶＩＰ
脱初心者をめざす人のためのホームページ作成講座
http://www.webdesignfromscratch.com/current-style.cfm
BodyTalk: 伝えるWebレイアウトの配色