ボックスを上下左右画面中央に
ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。 何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え！とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。 Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。 重さとかスクロールの仕方とかが、、、 だから確認もIEが先だったりします。 まーコレはボクのスタンスなんで、どーでもいいんすが。 ちなみにこのサイトのアクセス解析を見てると、IEとFirefoxの比がおおよそ、5:4っていう普通のサイトじゃありえない結果が出ます。こんなブログ書いてると当然っちゃ当然かもしれませんが（笑 さて本題にでも。 Tipsでも充実させたいと思ったので、特に目新しい内容ではございませんが、div要素とかのボックスを左右の中央、そして上下も中央に
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
主要ブラウザのデフォルトCSS - 我的春秋
久々の CSS ネタにも関わらず、メモ程度の備忘録ですが、W3C CSS 2.1 勧告候補の Appendix にある、HTML 4 の推奨デフォルトスタイルと、現時点で僕が把握している主要ブラウザのデフォルトCSS の在りかのリストです。ネタ元は Accessify Forum: list of browsers' default CSS（via e-luck さんのブックマーク）です。 （※ Mac OS X 10.4、Windows 2000 で確認していますので、10.3 + IE 5 や Vista + IE 7 はチェックできていません。XP + IE 7 はそのうち実家の端末で確認する予定。）
CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU
DiaryTechnology CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type="text/css"> body { background:#ccc; margin:0; padding:0; } #wrap { position:absolute; width:500px; height:100px; left:50%; top:50%; margin-left:-250px; margin-top:-50px; background:#ff
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 - GoogleMania | グーグルの便利な使い方
AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 管理人 @ 6月 26日 04:20pm AdSense Web 2.0 Magazine: 29 Different Google Ads Styleにて、AdSenseのテキスト広告をCSSでWeb2.0風にするテンプレートが、２９種類も公開紹介されています。 これまで、背景に馴染ませるしかなかったテキスト広告が、立派なサイトのデザインの一部になります。 どうやって、デザインを変えるかというと、AdSenseのコードを変更するのは違反ですので、CSSを使ってその周りの背景に手を加えます。 利用方法 次のテンプレート一覧ページで好みのテンプレートを選びます。 Web 2.0 Magazine: 29 Different Google Ads Style 「View Code」リンクをクリックすると、それぞれのテンプレー
リアルな資産運用の結果をお見せします。海外投資が調子良い！
「私のリアルな海外投資の結果をお見せします」を運営している管理者です。お越しいただきありがとうございます。 投資全般が好きな私は国内株式や海外への不動産投資や株式・定期口座など多くの投資をしています。 情報収集で多くの投資ブログを閲覧していますが、圧倒的に「投資に失敗している人」が海外投資を批判する内容の記事が多いことに驚きました。 海外投資に失敗している方の特徴はどれも中間業者の選定に間違いがあると感じています。そう海外投資には必ず資産を運用する会社があってこの運用会社の投資の腕にかかってるのです。この選定さえきちんとすれば確実に海外投資はよい結果が期待できます。投資なのでリスクは必ずありますがそのリスクを極力少なくする私の経験を交えて情報を配信したいと思います このサイトは「将来の日本は大丈夫だろうか？」「国家破たんもあるの？」「日本に資産を置いても全然増えない！」でも海外投資は怖いし
CSS:ボックスのおはなし
この資料についての説明と謝罪 この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。 これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。 社内勉強会の資料についての説明及び謝罪
ウノウラボ Unoh Labs: CSSをデバッグしよう
こんにちは、Sashaです。CSSって、誰でも比較的簡単に始めることが出来るくせに、何年たってもつまらないバグにハマったりするものです。今日は、CSSをデバッグする手順を紹介します。特にCSS初心者の方々に参考にしていただければ光栄です。ただ、ここで紹介しているのは、CSSの問題解決の方法ではありません。CSS上の問題点の原因を、自分で見つけるためにとるべき手段です。見つかった問題点を、どうやって解決するかは、ここでは触れないのでがっかりしないでくださいね。 ※以下の手順は、下記のサイトをパクッ･･･、じゃなくて、翻訳しつつ簡単にまとめたものです。 参考: http://www.subcide.com/tutorials/debuggingcss/ まず、問題あるって認めましょう。 見なかったフリをしたい気持ちはよくわかります、が。 人的ミスをつぶそう スペルをチェックしよう
俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
CSSを使ったテキストをデザインとして魅せるテクニック集:phpspot開発日誌
Mandarin Design: Text Tricks CSSを使ったテキストを魅せるテクニック集が色々公開されていました。 例えば、次のような見出しの１文字を修飾するテクニック 次のようなCSSで実現可能のようです。 <!-- the drop cap --> <span style="margin-right:6px;margin-top:5px;float:left;color:white;background:khaki;border:1px solid darkkhaki;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family:times;">T</span>his is a drop cap with a black background, white text, and a
CSSだけでメニューにツールチップヒントを付けるテクニック:phpspot開発日誌
CSS: Menu Descriptions | Mike’s Experiments | MikeCherim.com This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. CSSだけでメニューにツールチップヒントを付けるテクニック。 次のようにメニューにカーソルを合わせるとヒントが表示できます。JavaScript不使用なので、JavaScriptが苦手な方も実装可能です。 JavaScriptは使わずにやりたい場合は覚えておきたいテクニックですね。 関連エントリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS） - youmos
http://youmos.com/news/css_star_rating_system
http://youmos.com/news/css_step_menu
CSSでフッタ位置をレイアウトする （CSS Sticky Footer） - youmos
モバイルでのXHTMLとCSS
CSSオンリーでロールオーバーマップ:phpspot開発日誌
マージンの相殺について：CSS | Tech de Go
フロートとネガティブマージンまとめ:CSS | Tech de Go