line-height に単位ありの指定は駄目？
最近、CSS の line-height プロパティに指定する値は単位なし （<number>） が良いという話が話題になっているようです。別に今に始まった話題ではないんですけども、最近この話題に触れている記事の中に、ちょっと気になる書き方をされる方がいるので書いてみます。 で、そもそもなんで line-height の値は <number> で指定しておいた方がいの？ってところですが、その理由をわかりやすくまとめている Lucky bag::blog さんの記事をまずは紹介しておきます。 line-height の値には単位なしが良いとされる理由 ： Lucky bag::blog line-height の値には、 normal inherit <length> <number> <percentage> が指定できますが、ユーザーエージェントのデフォルト値を使用する normal と
CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE
terrill.caにてCSSとPHPできれいなグラフを描く方法が紹介されていました。 » terrill.ca | Vertical Bar Graphs using CSS and PHP 棒グラフや立体グラフなどがCSSのスタイルで描けます。PHPはデータの抽出と縮尺の設定だけなので、必要でない方は紹介されているCSSだけ使っても良いかも。 ↓なグラフや、 ↓なグラフが描けます。 なお、HTMLのほうの記述は以下のような感じです。わかりやすいですね。変更も簡単かと。 <ul class="barGraph"> <li class="p1" style="height: 57px; left: 0px;">57</li> <li class="p2" style="height: 27px; left: 0px;">27</li> <li class="p3" style="heigh
SCRUFA4 เว็บแทงบอล ยอดนิยมอันดับหนึ่ง เว็บตรง UFABET ✅✅
UFABET เว็บพนันออนไลน์ อันดับ 1 บริการ แบบครบวงจร ตลอด 24 ชั่วโมง UFABET เป็น เว็บไซต์พนันออนไลน์ อันดับ 1 ของประเทศไทย และเอเชีย ที่ได้รับการยกย่อง เรื่องการบริการ และความมั่นคง ทางการเงินอย่างสูง UFABET ฝากถอน ไม่มีขั้นต่ำ เนื่องจากเราใส่ใจ คุณภาพในด้านการบริการ และประสิทธิภาพ ของเว็บไซต์ อย่างมาก ทำให้มีสมาชิก จำนวนมากให้ความเชื่อถือ กับเราและเพิ่มขึ้นอย่างต่อเนื่อง เราเป็นเว็บพนันออนไลน์ ที่บร
PDFやEXE、CSS等ファイルのフォーマット別アイコン集:phpspot開発日誌
忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」 次の記事 ≫：各種CMSの無料レンタルができる「CMS Square」 Iconize Textlinks with CSS - pooliestudios Links are fun, but sometimes we don't know where they take us. With this little CSS technique a user can identify a link by it's icon, kind of. This whole thing was inspired by the "Showing Hyperlink Cues with CSS" article of Ask the CSS Guy. PDFやEXE、CSS等ファイルのフォ
【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (1) 01 はじめに IE7日本語正式版のCSS実装を検証する (MYCOMジャーナル)
Internet Explorer 7日本語正式版 Internet Explorer 7(IE7)の日本語正式版がリリースされた。現在はまだダウンロードしてインストールする必要があるが、2007年4月をめどに、Windowsの自動アップデートで「優先度の高いアップデート」として配布される予定だ。「IE7ではWebページの表示が崩れる」といった問題が出る場合、それまでには対応を済ませておきたい。 そこで本稿では、IE7 beta2のCSS実装検証を元に、IE7日本語正式版における変更点やバグをまとめる。また、IE6以下との下位互換やモダンブラウザとの互換性を保ちながらバグを回避する方法、CSSハックについても検証する。 新規対応機能一覧 未対応機能一覧 修正済みバグ一覧 未修正バグ一覧 CSSハック一覧 参考 CSS実装徹底検証! そこが知りたいInternet Explorer 7 なお
段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
サイトのCSSを見たままリアルタイムに編集するツール色々:phpspot開発日誌
サイトのCSSを見たままリアルタイムに編集するツール色々。 WEBデザイン開発において、編集→リアルタイム反映というのはなかなか効率がよいですね。 ということで、各種、リアルタイムCSS編集ツールをピックアップします。 FireFox拡張 or スタンドアロンアプリ FireBug - リアルタイムに指定部分のCSSが切り替え可能(参考記事)。CSS以外にも便利機能満載。 EditCSS - FireFox拡張で、エディタがインストールされ、エディタ編集と同時に即座にCSSが反映される。 CSSVista - IEとFireFoxの画面で一括プレビューが可能。 Web Developer ToolBar - WEBデザイナー必須のFireFox拡張。CSSの直接編集も可能。 他にもCSSやアクセシビリティに関する便利機能満載。 ブラウザ上で動作するオンラインツール たぬきのしっぽ - CS
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
リンクいじりCSS - progressive link
[N] リンク先ファイルの種類をマウスカーソルで表示するFirefox機能拡張「Link Alert」を読んで、そんなのuserContent.cssでするのがfxユーザじゃないだろうかと思った。 というわけでいろいろ検索してみると、Link Warning | userstyles.orgというナイスなものを発見したのだが、ちょっと好みからはずれるのでいろいろいじってみた。 変更箇所 :hoverをつけて普段は隠しておくことに。 :not([href^="/search?"])をつけて検索エンジンの検索結果では出ないように MSのofficeを持っていないのでアイコンはOpenOfficeのものに変更。 Stylish | Firefox Add-ons | Mozilla Corporationでの利用をお薦めしますが、userContet.cssに書き込んでもかまいません。 @nam
Geekなぺーじ：右クリックで保存できない画像、コピペできない文字 (not javascript)
Javascriptなどを使わずに右クリックで保存できない画像の作り方を思いつきました。 もしかしたら、既にwell knowかも知れませんが。。。 あまり実用性はないと思いますが、まあ、ネタの一種だと思ってください。 以下に表示している画像の左半分は右クリックで保存できなくしてあります。 右クリックで画像を保存できないのは、スタイルシート設定で透明な蓋を画像の上に置いているからです。 右クリックは画像に対してではなく、DIVに対して行っている事になっています。 上記サンプルをHTMLをわかりやすく整形したものを以下に示します。 <html> <head> <style> <!-- #myfilter { position:absolute; z-index:2; filter:alpha(opacity=50); -moz-opacity:0.5; width:120px; height
Google カレンダーのフォントサイズを調整する方法 - 風待ち日記
日本語版になって嬉しい反面、なんだかフォントサイズが大きくなったと感じているユーザーの方も多いでしょう。そんな悩みもFirefoxとユーザースタイルシートを使うことで解決します。以下はFirefoxのuserContent.css（ユーザースタイルシート）を編集してフォントサイズを調整する手順。 まずは以下のフォルダを開きます。 Windows 95/98/Meの場合は C:\Windows\Application Data\Mozilla\Firefox\Profiles\（英数字）.default\chrome\ Windows 2000/XPの場合は C:\Documents and Settings\(ユーザー名)\Application Data\Mozilla\Firefox\Profiles\（英数字）.default\chrome\ この場所にあるuserContent-e
ウノウラボ Unoh Labs: CSSで見る、IE7。
Sashaです。 MicrosoftがIE7 RC1（Internet Explorer 7 Release Candidate 1）を公開しましたね。タブ・ブラウジング? RSS? 今ドキ当たり前。タブに出ているサイトのサムネイルが一括して見れるとか、印刷するときに用紙の大きさに合わせて印刷してくれるぴったり機能とかも、「あったらいいな」的機能であったことは確かですが、ウェブデザイナーたちの興味の中心は、今まで私たちの忍耐力をギリギリまで試してきた、IEの CSSへのサポートが、どのように変化するのか、ですよね。せっかくなので、今まで長年にわたって多くの人を悩ませてきたバグたちと照らし合わせながら見ていきましょう。ちなみに、私はまだ一つ一つ検証してませんので、その解決宣言に関する信憑性には責任は負いかねます。悪しからず。 positioniseverything.net では数年前から
CSSだけでフレームを作るテクニック:phpspot開発日誌
CSS Frames v2, full-height | 456 Berea Street Way back in August of 2003 I wrote a short article called CSS Frames, in which I described a technique to emulate the visual appearance of HTML frames with CSS. CSSだけでフレームを作るテクニック。 通常、フレームというとframeタグを使って実現しますが、検索クローラーに対して不利などの理由から最近ではあまり見かけなくなってしまいました。 フレーム風のインタフェースをＣＳＳだけで実現するテクニック。 常にヘッダー、フッターのナビゲーションが固定されているのでフレームの使いやすさはそのままで、かつクリーンなHTMLによってフレームを実現でき
Firefox のツールバーなどをコンパクトに その2 - 朝顔日記
2006-08-29 ua firefox ユーザスタイルシートで、Firefox のツールバー周りをコンパクトにする試み、Firefox のツールバーなどをコンパクトにの続きです。もう少しがんばってみました。 まずはスクリーンショット。全体像にリンクしています(約20KB)。 ご覧頂くとわかりますように、今回は横方向にも詰めてみました。miniFox あたりを使ったほうがいいような気もしますが。:p) @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); #toolbar-menubar { margin-bottom: -2px !important; margin-top: -2px !important; } #urlbar, #searchbar { margin-bottom
CSSオンリーでクールなグラフを書くサンプル集:phpspot開発日誌
Apples To Oranges ? San Francisco Bay Area Visual and Experience Design Studio CSSオンリーでクールなグラフを書くサンプル集。 3つほど紹介されていてどれもクールで実用的。 1. まず、次のようなグラフを書くサンプル。 実際のHTMLコード <style> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height
hxxk.jp - CSS の記述ルール記事のまとめ
いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
認証がかかっています
*{ margin : 0 } はもう古い!? | Emotional Web
HTMLKit.com CSS Poster
四畳半 裸電球 日記帳: 携帯用Gmailのメニューを左上にする