Top 10 CSS buttons tutorial list CSSでクールなボタンを作るまとめ。 CSSでボタンを作るための様々なサンプル集がまとまっていました。
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
最近方々からDreamweaverでサイトの更新をしたらCSSが消えるという報告がでてきている。実際に、僕も先日この現象に遭遇した。その現象が起きた状況はこんな感じ・・・ CSSでレイアウトを行い、その際背景画像をCSSでコントロールするのはCSSレイアウトで良く行われる実装方法だと思うのだけれど、そのCSSファイルから呼び出される画像のリネームもしくはディレクトリの変更をDreamweaver 8のサイト上で行う。 すると、Dreamweaverはもともとサイト内のリンク状況をキャッシュで管理しているので、ファイル名の変更やディレクトリ変更が起きたときにリンク切れをしないように関連するファイルの更新を行う処理をする。その更新の際、CSSファイルが途中からごっそりと消えてしまうのがこの問題。 僕が調べた限りでは、ごっそりと消える部分は、変更された画像の記述されている部分以下なんだけれど、と
8 Feb 2022 — Updated 20 Mar 2023 Table of contents CSS Grid: Static 3 column Responsive 3 column Flexbox: Static 3 column Responsive 3 column Main content with left & right sidebars Padded boxes with headings Product feature comparison table Responsive Attributes: Static 3 column Responsive 3 column Responsive Columns: Static 3 column Responsive 3 column In this article, we'll explore various type
CSSの各セレクタのブロック内でInternet ExplorerとFirefoxやOperaなどで分けてプロパティを設定するハックとしてUnderscore Hackという有名なものがあるが、Details on our CSS changes for IE7によるとInternet Explorer 7では修正されている。だが、アンダースコアのかわりにアスタリスク(*)をプロパティ名の頭につけるというAsterisk Hack (勝手に命名)は健在だったりとか。 Asterisk HackはUnderscore Hackとほとんど同じで、 #menu { position: fixed; *position: absolute; } というような記述をするハック(サンプル・ページ)。結果はInternet Explorerでabsolute、FirefoxやOperaなどではfixed
Home Study border-radius における個人的覚え書き border-radius における個人的覚え書き April 28, 2008 02:16 forestk Comments(0) TrackBack(0) border-radius における個人的覚え書き #forestk Posted in Study Tags : CSS border-radius Mozilla Webkit 超個人的覚え書きです。 CSS に border-radius といういわゆる角丸を作るプロパティがあるんだけど、今のところ Mozilla系(Gecko エンジン)と Safari(Webkit)はそれらを独自拡張のプロパティで採用している。 実際に使うとこんな感じ。 Mozilla系(Gecko エンジン) -moz-border-radius: 10px; Safari(We
ハイブリッドクラウド時代の救世主 企業ITを素早く進化させるためのAVS サービス開始から1年で大幅に機能がアップ 仮想デスクトップサービスの最新事情 複数の選択肢のあるMSのVDIサービス どう違うのかをわかりやすく解説 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両立 ZOZOTOWNが選んだストレージ基盤を解説 50年の経験を持つアイネットが提供 ユーザー企業の使いやすさを第一に考えた ワンストップで使えるマネージドクラウド Kubernetes活用の最適解とは? 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 年間5,000件の問い合わせに対応 疑問を解消したいユーザーも答える情シスも みんな幸せになるヘルプデスクの最適解 サービスを止めない! サイバーエージェントに聞く高可用性の実現 そこにピュア・ストレージが選ばれた理由 大事
最初に結論 ブラウザの差異を最小限だけリセットするCSSって浅漬けCSSって感じじゃない? きっかけはTwitter 昨日、@reaさんがTwitterにポストした一言がきっかけです。 最近、ぬか味噌 CSS を使わなくなった。デメリットの方が多い気がする。 それに対する@hamashun(僕)の反応がこんな感じです。 @rea 実はぬかみそ的な CSS は使った事がなかったりします。 必要な要素への margin と padding のリセットと、あとは border 消したり、とかは大抵毎回使いますけどもー。 浅漬け CSS 。 ちなみにここでのborderを消す、というのはimg要素にリンクをした時に表示されるborderについてです。 フォームのborderとかは消していないです。 Twitterのログだけだと説明不足だったのでここで追記。 @reaさんから頂いた更なる反応。 @h
すぐに使えそうなネガティブマージン 2008-05-15 0 0 XHTML/CSS CSS, margin margin にはマイナスの値を入れることができます。マイナスの値を持つ margin を「ネガティブマージン」と言ったりします。 あまりむずかしくなく,すぐに使えそうなネガティブマージンを紹介してみましょう。 見出しにネガティブマージン 本文の左に見出しよりも大きな余白をとりたいというとき。 <div class="section"> <h3>見出し</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> </div> div.section { padding-left: 15px; } div.section h3
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites(CSSスプライト)」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは? 通常、ウェブページを制作する場合、デザインファイル(psdやpngなどの画像)をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、1度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
HTML ソースの冒頭にある(べきである) DOCTYPE 宣言を見て、HTML や CSS 解釈の挙動を変えるブラウザがあるんスよ、というハナシ。 「DOCTYPE スイッチ」 DOCTYPE 宣言とわ 各ブラウザの「DOCTYPE スイッチ」状況 関連リンク 「実例編」へつづきます 「DOCTYPE スイッチ」 Mozilla (Netscape6), MacIE5 は「HTML/CSS をその仕様どおりにかなり正しく解釈することのできる高度なブラウザ」と言われてます。しかし、これまでそういうブラウザが少なかったこともあって、巷には「あんまり正しい解釈をしない古いブラウザ」に合わせて記述された HTML/CSS が数多いです。 そういう世の中を、仕様どおり厳格に解釈しまくるだけじゃぁ「アタマが固い頑固者」呼ばわりされかねないので(笑)、Mozilla (Netscape6), MacI
Mozillaの独自拡張CSSは使わないでください Mozillaは標準準拠を基本方針として開発されていますが、独自にCSSのプロパティをいくつか定義しています。 -moz-border-radiusや-moz-box-resizingといったものです。混乱を避けるため、独自拡張したプロパティは"-moz-"で始まっています。 そのほとんどはMozillaのGUIのために作られたものです。MozillaはCSSによってGUIの外見を定義しており、 W3Cの仕様にあるCSSのプロパティで足りない部分は独自のプロパティで補っています。 また、将来のCSSに対する提案として実験的に実装されているプロパティもあります。 これらのプロパティは一般のWebページで使うべきものではありません。 プロパティ名が突然変わり、使えなくなってしまうこともありえます。 Internet Explorerの独自拡張
Firefox 3は、displayプロパティの値である「inline-block」と「inline-table」に対応した。これで、CSS 2.1で定義されたdisplayプロパティの値に一通り対応したことになる。そこで今回は、displayプロパティの基本と「inline-block」について紹介していきたい。また、SafariやOpera、Internet Explorerの対応状況も紹介する。 displayプロパティと基本的なボックスの種類 displayはボックスの種類を指定するプロパティだ。まずは、基本的なボックスの種類を再確認しておこう。 HTML/XHTMLではタグでマークアップした部分が四角形のボックスとして扱われる。ボックスにはいくつかの種類があり、タグごとに標準でどのボックスになるかが定義されている。 基本となるボックスの種類は「block(ブロック)」と「inli
以下の文書はウェブ制作者にとって非常に有用な文書でしたが、サイト自体が消滅していたようなのでキャッシュからサルベージしました。 この文書を公開することについては翻訳者さまへメールで連絡をとっていますが、まだご返答を頂いていません。なので、申し出によっては公開を止める可能性もあります。何か問題がありましたら eiji.fukushima@gmail.com までご連絡ください。 また、以下の文書は、ほぼ元のままで手を加えておりません。従ってリンク切れしているものもあります。また、画像はサルベージできませんでした。 公開者 福島英児 公開日 2007-07-31T11:05:00+09:00 この文書について Apple Developer Connection - Working with CSS - CSS Hints for Internet Explorer 5 の日本語訳です。200
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く