Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消
中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。 あのズレ、気になる人っていますよね？ すぐ分かるように簡単なサンプルを用意しました。 http://css-happylife.com/template/11/ あ、当たり前だけど、Firefoxで見て下さいね。 コレを解消する為に以下のスタイルを適用させればズレがなくなります。 html { overflow-y:scroll; } 簡単っすね。 で、コレOperaじゃ解決出来ないのが難点。 overflow:scrollでズレないようには出来るけど、下が出ちゃうのはいけてない。 height:100%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。 んーこの辺まで解決したかった... Track Back [1] スクロールバーを表示
CSS Mobile Profile 2.0
CSS Mobile Profile 2.0 W3C Working Draft 8 December 2006 This version: http://www.w3.org/TR/2006/WD-css-mobile-20061208 Latest version: http://www.w3.org/TR/css-mobile Previous version: http://www.w3.org/TR/2002/CR-css-mobile-20020725 Editor: Svante Schubert, Sun Microsystems Inc. <Svante Schubert @sun.com> Previous Editor: Robin Berjon, Expway <robin.berjon @expway.fr> (first draft) Copyright © 2
Most Inspired | Home
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
HTMLヘルプのソースを公開
HTMLヘルプはHTML Help Workshopで逆コンパイルできるのだけど、抜き出されたHTMLのファイル名がテキトウ極まりないものだったり(うろ覚え)とか色々アレだったと思うので、元にしたHTMLファイルにHTML Help Workshopのプロジェクト・ファイル群を加えてzipアーカイブにまとめ、公開しておくことにした。 css2-src.zip html-4.01-src.zip perl-5.8.8-src.zip prototype.js-1.4.0-src.zip domref-src.zip HTMLヘルプのプロジェクト・ファイルは単純な内容のものなので、目次やキーワードの追加などは容易にできる。また、CSS2とHTML 4.01のHTMLヘルプをマージして新しいHTMLヘルプにするとかも、プロジェクト・ファイルのソースがあればものの数分でできる。 「ここがおかしかっ
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
CSS Nite LP Disk 1 で行った microformats に関するセミナーの資料などを公開 - 2xup.org
2006-10-10T18:00:00+09:00 本日 CSS Nite LP DIsk 1 が行われました。現在会場の Opera ブースから更新しています。今回もたくさんの方にご来場いただいたようで、確かに会場はものすごい熱気でした。無料版の CSS Nite もそうですが、みなさんお熱い。『とったらんかい！』と言わんばかりの熱心な姿勢の方が多く、このような雰囲気の中、お話できて本当に良い経験になります。今回は長谷川恭久さんとのジョイントセッションでした。 CSS Nite 公式ブログ: CSS Nite LP Disk 1(CSS Nite 公式ブログ) 今回はこれまでの経験から、いくら簡単なことでも難しく伝えられると手を付けるのが遅くなったり、その簡単さに気づくのに時間がかかったりしてしまうので、microformats の魅力をできるだけ楽しく伝えられるように努力してみましたが
CSS Zen Garden Book | Web標準Blog | ミツエーリンクス
弊社が監修しました書籍「CSS Zen Garden Book」が、毎日コミュニケーションズより発売されました。本書は、以前当Blogの「『The Zen of CSS Design』のリンク集」でご紹介済みの書籍、「The Zen of CSS Design: Visual Enlightenment for the Web」の日本語訳になります。 本書を特徴付けているのは、やはり取り上げられている素晴らしいデザインの数々ではないでしょうか。css Zen Gardenとは、同じXHTML文書に対して異なるCSSを適用することにより、いかに多様で優れたデザインが実現可能かをデモンストレーションするサイトです。そこに投稿された優れたデザインのなかから、選りすぐりの36のアイデアを題材として、デザイン原則やスタイルシートの作成法を解説しているのが本書です。それら2つのメイントピックスのすべて
CSSとSEOスパム | Web標準Blog | ミツエーリンクス
Webデザイナーのまことさんより、CSSとSEOスパムに関するご質問をいただきました。 ＣＳＳコーディングにおいて、画像のメニューボタンをマウスオーバー時に画像変更させたい場合、まず、リストタグでテキストリンクのメニューを作成します。 そして、ＣＳＳにて画像を背景画像にして変更する形をとります。 そのため、各画像ボタンにあるリンクテキストの文字は見えなくさせる必要があります。 その方法としては、テキストインデントを負の-9000などにしてリンクテキストの文字を画面から消す方法、もう１つは、可視性で非表示にして消してしまう方法があります。 この２つの方法が使われるようですが、これはＳＥＯスパムではないでしょうか？ＣＳＳ設定で文字を非表示にしたり、画面から見えなくするのはＳＥＯスパムだと思うのですが。。。 本件につきましては、既に画像置換とSEOスパムという記事のなかでも触れている事柄ではあり
CSS Nite LP Disk 1 で microformats についてお話しします
2006-10-06T20:05:55+09:00 告知がおくれましたが、来る10月10日に行われる、CSS Nite 有料版、CSS Nite LP Disc 1 で microformats についてお話することになりました。しかも、長谷川恭久さんとの共演になります。どきどき。microformats がどんなもので、これからどんな未来があるのか、できるだけ柔らかく、楽しくお伝えできればと思います。 やはり CSS Nite LP Disc 1 の詳細は、hCalendar を使って書くべきでしょう。 CSS Nite LP Disc 1 2006年10月10日15時から20時 津田ホール コピペして使えるように、以下にソースを書いておきます (こういう時に Live Clipbord を使うと良いかも)。 <dl class="vevent"> <dt class="summary"
Googleカレンダーの土・日の日付の背景色を変更してみました - Marginal Leaves
[追記] Googleカレンダーの土日の色 その2 - Marginal Leaves に改良版がありますので、そちらを使ってください。 Googleカレンダーの土・日の文字色を変更しました おお！ これはすごい。 カレンダーが断然見やすくなります。 標準で設定できるようにならないかな。 これだとちょっと隙間が開いちゃうので、takayama さんのを参考に自分でもいじってみました。 @-moz-document url-prefix("https://www.google.com/calendar/") { #dh5,#dh12,#dh19,#dh26,#dh33,#dh40,#dh47,#dh54 { color: #00F; background-color: #CCF; display: block; padding: 0 0.4em 2px 0; margin-bottom: -
CSSデザイン格付けサイトいろいろ - GIGAZINE
CSSでデザインされたサイトを集めた「csstux」は、CSSを使ってかっこよくデザインされたサイトがいろいろノミネートされており、それぞれにトラックバックを送ったり、コメントを付けたりすることが可能です。また、各サイトはレートによる格付けがされているので、人気の高いデザインがどれなのかもすぐにわかるようになっています。 これ以外にも同様のサイトはいろいろあるので、知る限りのCSSデザイン格付けサイトをまとめてみました。ウェブデザインの際の参考になるのではないかと。 今回最初に紹介する「csstux」はこれらのCSSデザイン格付けサイトの中ではかなり新参の部類なので、知らない人も多いのではないかと。 以下のフォームから自分のサイトをノミネートさせることも可能です。 csstux - Submit your site 2つめは「CSSElite」 ノミネートするには以下のページに書いてあるメ
pre 要素のスタイル定義とマークアップ - 2xup
2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
汎用CSS - tikeda's blog
先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。 構成 ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。 common.css タグの基本スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば「一覧用（.table-list）」「管理画
hail2u.net - Weblog - CSS2 Specificationでのプロパティの出現順序
少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。大体のところはソラで覚えているのだけど、font-weightとfont-sizeはどっちが先だっけとかは忘れるので、備忘録がてら序列付きリストにしてみた。 margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-bottom border-right border-left border-width border-top-width border-right-widt
CSS Nite公式サイト - 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント
セミナー開催情報 CSS Nite以外のセミナーへのお問い合わせは、 それぞれのイベントの主催者までお願いします。 #朝までフォトショ 2「生成AI」特集 #朝までフォトショ の第2弾は「生成AI」特集。21-25時のハーフポーションでお送りします。 開催日：2024年8月23日[金] オンライン 詳しく見る 誰も教えてくれない、制作単価を上げるための「ビジネスリテラシー」育成講座 仕事の成功に必要な「ビジネスリテラシー」の高め方について松尾 茂起さんにお話しいただきます。 開催日：2024年8月30日[金] オンライン 詳しく見る 心をつかむ「紙」のデザイン 〜生成AI時代におけるデザイナーの生存戦略とは 生成AIが急速に進化する2024年、デザイナーが生存戦略として考えるべきポイントについて倉又美樹（まるみ）さんにお話しいただきます。 開催日：2024年9月6日[金] オンライン 詳し
CSSコーディング・スタイル
「こういうスタイルがCSSを記述する時に便利だよ！ コンセンサス(つづりは知らない)も取れるし！」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になったんだけど。 とりあえずスタイル指定を取っ払う 各ブラウザ間でのデフォルトの状態での差異を考えると頭が痛くなってくるので、手始めに取っ払って勝負。 フォント・ファミリの指定は別ファイル 見出しはこのフォントで本文はこのフォントといったように、フォント・ファミリの指定はいろいろな要素にまとめて指定することが多いので、まとめて別ファイルに。 様々なところで使うスタイルはhiddenやwrapperなどというクラスでまとめる CSS側でこの要素ではclear: both;とかいうのでも良いのだけど、こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.quirksmode.org/css/javascript.html
last.fm、広告非表示 - FAX
http://mastodon.dojotoolkit.org/~david/recss.html