CSSデザインカタログ
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
マイクロソフトWEBサイトみたいなCSSメニューとphotoshopデータ - WEBデザイン BLOG
自分の好きなサイトMicrosoft Windows ホーム ページのメニューを真似して作ってみました。CSS難しいですね。スマートじゃないですが、形になっていると思うのでデータ共に公開します。 CSSでWindowsVista風のナビゲーションバーを作成するサンプル:phpspot開発日誌と『Dezinerfolio流』自動的に横幅を調節してくれるCSSタブメニューの作り方*ホームページを作る人のネタ帳のエントリーにつられてエントリーアップすることにしました。 こんな感じのメニューです。マイクロソフトのWEBサイトみないなMENU（別窓表示） 以下XHTMLとCSSとサンプルページと同じファイルとメニュー元画像Photoshopデータおいておきます。よろしかったら使ってみてください。 ※尚、データを別々に作成したため、hoverのマージンが異なりますので、若干CSSのマージンが違います
[CSS]IEで、min-widthやmax-widthを実現する方法
CSS-Tricksで、IE用に「expression」を使用して、min-width、max-widthを実現する方法がエントリーされていました。 The Perfect Fluid Width Layout デモページでは、最小幅780pxを維持しつつ、最大幅1280px以上になると残りの箇所は背景画像が表示されるようになっています(参照：キャプチャ画像)。 min-width、max-widthの箇所は、下記のように記述されています。 #page-wrap{ background: white; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 12
DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法 | F+R (FplusR)
今日は、DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法を紹介します。 DreamWeaverのデザインビューで、clearfixを指定したときに、デザインビューではレイアウトが崩れてしまいます。 私はデザインビューをあてにしないで作業していますが、たまにはあてにしたくなる時もあります。 そんなときには、clearfixを指定している部分に、「overflow:hidden;」「overflow:auto;」のどちらかを指定します。 これで、デザインビューでclearfixが原因でレイアウトが滅茶苦茶になる時はなくなるでしょう。 ただし、「overflow:hidden;」「overflow:auto;」は、諸刃の刀ですので、本番環境でのブラウザ確認はしっかりとやられたほうがいいでしょう。 これが原因で本番環境でレイアウトが変になっても責任は取れな
Bridge Word
This shop will be powered by Are you the store owner? Log in here
AJAXタブを作る際の13のユーザビリティガイドライン
先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。。。以後気をつけます。 さて、気を取り直して今日はAJAXの普及などで益々多用されるようになった「タブメニュー」を作る際に気をつけるべき、ユーザビリティのガイドラインをご紹介したいと思います。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! タブユーザビリティ、13のガイドライン Ajaxタブは、違うコンテンツを表示するにもかかわらず、ページを先に読み込むため、ページが切り替わるストレスが少ないことから、さまざまなサイトに導入されています。 1. タブは同じ文脈内で一覧を作る代わりに使おう 異なるエリアへのナビゲーションに使ってはいけません。言われてみればなるほどと感じます。amazon.comは、過
モバイルサイトのCSS : LINE Corporation ディレクターブログ
こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。それらのサービス以外では、モバイルサイトのコーディング関連のとりまとめを担当していることもあり、今回はモバイルサイトのCSSについてご紹介したいと思います。 以前の記事『モバイルサイトのデザイン』でもご紹介させていただきましたように、『ケータイ livedoor』は 3Gケータイを中心とした開発を行っており、XHTML でコーディングする機会が増えてきました。モバイルで XHTML を表示できるということは、スタイルシートに対応していることも意味するので、モバイルサイトの表現力のアップにつながります。 ■モバイルサイトのCSS事情 スタイルシートを採用するメリットとして、通常は HTML 構造の簡略化やデザインの一括管理などがあげられます。しかしモバイルサイトでのスタイルシートの採用は、通常
bmblog: IEでmin-heightらしきことをする
Top Page: メイン Previous Page: 進化論の挑戦 Next Page: 地上ã¯åœ°ä¸Šã€åœ°ä¸‹ã¯åœ°ä¸‹ May 23, 2007 Category: web Tags: css , internetexplorer , min-height IEでmin-heightらしきことをする CSSのお話。 IEはmin-heightに対応してないのでhackが必要。 under score hackとボックスのheightを指定しても内側のコンテンツがそれより長かったら指定したheight以上に伸びてしまうbugを利用 <style type="text/css"> .no_hack{ margin: 8px; background-color: #CDC; min-height:40px; } </style> <div class=
CSSデバッギングツール１０選:phpspot開発日誌
Man with no blog : CSS Debugging Tools - Gary Barber Seems lately that we are now starting to get a good spread of CSS and JavaScript (DOM Scripting) debugging tools available. CSSデバッギングツール１０選。 便利な各種ブラウザ用CSSデバッギングツールがまとまっていました。 XRay - ブックマークレット登録後、ページ内をクリックで情報を表示 YSlow - 先日Yahoo!がリリースしたパフォーマンス測定＆アドバイスツール (for Firefox) Dust-Me Selectors - 不要なCSSを調査して表示してくれるFirefox拡張 Web Developer - おなじみ、CSS用に便利機能を提
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
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
CSS:ボックスのおはなし
この資料についての説明と謝罪 この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。 これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。 社内勉強会の資料についての説明及び謝罪
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の略で
base.cssメモ（初期化と基本設定） - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSSの初めでUA固有の表示設定を解除するリセットCSSと、フォントサイズ指定、そしてタグ自体の基本的な振る舞いを規定する指定、この３つを合わせたもの。 この部分はいつでもどんなサイトでも大抵は使いまわせるので、自分なりのものを用意している人も多いと思います。ちなみにSig.は「base.css」という名前で用意してますが、「default.css」とか「master.css」とかって命名も良く見かけますね。それはともかく。 このところデフォルト設定に関するレポを良く見かけるので、いちど当サイトでも纏めておこうかと思った次第です。（ま～「良い感じの方法を見つけたんだけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マークアップエンジニアも幸せ探し（前編） | necoze LOG2 [ネコゼログログ]![マークアップエンジニアも幸せ探し（前編） | necoze LOG2 [ネコゼログログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2302e44c95c7e474fefb218540004f95dc47a4bb/height=288;version=1;width=512/https%3A%2F%2Fimaging.jugem.jp%2Ftemplate%2Fimg%2Fjugem_og-image.png)
CSS Coding Guideline
CSSプルダウンメニュー１ 〜CSSテクニック〜
ダメ院生がギークになるまで続ける日記
ExType.com is for sale | HugeDomains
フロートとネガティブマージンまとめ:CSS | Tech de Go