CSS3 Isometric Text DemoAn example of 3D Isometric text created using CSS3 text-shadows, 2D transforms and @Font-face embedding. This demo has been tested in Safari 5, Firefox 3, Chrome 10 & Opera 11 on Mac.
はてブの糞すぎるレイアウトをとりあえずどうにかするusercss - いさぢちんメモ
はてなブックマークのエントリーページを改良しました - はてなブックマーク日記 - 機能変更、お知らせなど 一覧性云々はともかく、エントリページがとにかく見難いので。 @charset "utf-8"; /* Name: はてブ*/ div#container {min-width:0px!important;} .curvebox-body {padding-right:20px!important;} div#sidebar,div#ad {display:none!important;} min-widthを止めて いらん物を消して div#mainがちゃんと横幅広がるように すっきり。 ついでにいろいろ消す div#add-bookmark-container {display:none!important;} /*あなたのブックマーク*/ div#favorite-bookmar
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ブラウザ別ボーダーの表示差 一覧表
こんにちは。 溝上です。 主にCSSの基本や、初歩的なことを担当しますが、 今回はある案件でCSSコーディングをしていた時、 どうしても気になった部分があったため、borderのプロパティ(線種)について分析しました。 ※プロパティ分析とは、CSSの各プロパティを調べ、 使用する上での注意点や、対策などを紹介しようというものです。 それではプロパティ分析の第一回目、「ブラウザ別ボーダーの表示差 一覧表」です。 今回使用するプロパティは「border」です。 borderはその名前のとおり、指定した要素の周りを線(border)で囲む、 というものです。 画像の周りを囲んだり、各要素のまとまりを分かりやすくするためによく使います。 また線の種類も8種類もあり、なかなか使いやすいプロパティです。 (inherit、hidden、noneも含めれば11種類ですがここでは割愛します。) しかしこの
CSSの背景設定background:none;の正しい書き方
長くなりましたんで、先に結論書いておきますね。 結論 CSSで背景をナシにしたいときは、 background : none; を使う 以下、詳細解説です。 CSSのバックグラウンドプロパティで、背景をオフにしたい場合、次のようないくつかの書き方があります。 background-image : url(none); background-image : none; background-image : url(); background : url(none); background : none; background : url(); W3CのCSSValidatorに通すと、どれもエラーはありません。つまり、CSSの文法的にはどれも正しい。 じゃあどれでもいいじゃん、という話になりそうですが、しかし、サーバーのログを見てみると、この中のいくつかはnoneというファイルを実際にサーバ
ウェブサイトの横幅
ウェブサイトの横幅ついては過去に「固定派」「リキッド派」により幾度となく繰り返され、おそらく未だ「どちらが適当か」という結論には至っていない。ちなみに俺は元リキッド派で現在は丁度その中間とも言える「max-width派」なんだが固定派の言い分もよくわかる。例えば次の「固定派」の意見。 現実問題として、「多くの閲覧者が特に設定などをしないで見たときに、サイト公開側の意図に沿ったウェブデザインで見せたい」という要請は多いし、またその要請をかなえてこそウェブデザイナーと言えると思う。見せる側の意図を完全に排除し、閲覧者の自由度のみを主張するのは極めて偏った見方だと思うし、また現実問題として、ウェブブラウザーの操作において文字サイズ等を自在に設定できるユーザーは案外少ないものである（こんなページを見ている人なら当然できるような操作でも、ネットやパソコンになじんでいない一般の人たちには極めて高度な作
[CSS]横スクロール時にヘッダやフッタが切れてしまう時の解決方法
ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。 How to Resolve a Fluid Header/Footer Problem When the Window is Resized デモページ（不具合版） ※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして） この現象が起きる条件は下記のようになります。 ヘッダとフッタのサイズは指定されていない。 →横いっぱいに広がる。 コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。 ブラウザのサイズはコンテンツエリアのサイズより小さい。 →ブラウザに横スクロールバーがでる。 期待される表示は、下記のようにコンテンツが中央
cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas - かちびと.net
これ凄いです。僕が知らなかった だけかも知れませんが、この動き でjs等も使用していないのは驚き でした。cssとHTMLのみでマウス オーバーした際の画像に3D効果 を出しています。 動作はIE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。 マウスオーバーし、左右に動かすと画像も動きます。 複数の透過レイヤーを重ねてhoverで動きを出しているみたい。何枚かの画像と下記のような画像を使ったｃｓｓスプライトを使って実現しているようです。 この効果はmootoolsやjQueryのプラグイン(mParallaxやjParallax)を使えば同じ表現を実現出来ます。 実用性は期待できませんが、cssとHTMLだけっていうのが凄い。ソースは以下でご確認下さい。 Pure CSS 3d Meninas (説明ページ：CSS 3D Meninas)
ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？:WebClip - ウェブのニュースと Second Life (セカンドライフ) - CNET Japan
[みんなのお題]ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？ 公開日時： 2008/01/09 01:40 著者： ミキ・オキタ この記事のトピック Internet Explorer 7「ページの拡大」機能でレイアウトが崩れる 「letter-spacing」で「ページの拡大」時のレイアウト崩れを回避 Internet Explorer 7「ページの拡大」機能でレイアウトが崩れる こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。 このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしている。 今回は、Web制作者にとって悩ましいブラウザの問題のひとつ、Internet Explorer 7の「ページの拡大」機能によるレイアウト崩れの回避方法について。 僕
letter-spacingを隠し味程度に
このブログは基本font-sizeを100％にしています。もちろん文章が読みやすいようにという配慮からなんですけど、文字が大きいと詰め込んだ印象になって長文の場合かえって読みにくく感じることがあります。 これを解消するにはline-height（行間）を広めにとる（130%～150%くらい）と同時にletter-spacing(字間）をほんの少し広げてやると良いみたいです。 デフォルトではletter-spacing:0;です。 この文章はletter-spacig:0em;に設定されています。 この文章はletter-spacig:0.05em;に設定されています。 この文章はletter-spacig:0.1em;に設定されています。 この文章はletter-spacig:0.5em;に設定されています。 0.5emに設定すると明らかに広すぎますね。0.1または0.05emくらいで微妙
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
まだまだあるクロスサイト・スクリプティング攻撃法
前回はクロスサイト・スクリプティングのぜい弱性を突く攻撃の対策としてのHTMLエンコードの有効性を述べた。ただ，HTMLエンコードだけではクロスサイト・スクリプティング攻撃を完全に防御することはできない。そこで今回は，HTMLエンコードで対処できないタイプのクロスサイト・スクリプティング攻撃の手口と，その対策について解説する。 HTMLエンコードで対処できない攻撃には，次のようなものがある。 タグ文字の入力を許容している場合（Webメール，ブログなど） CSS（カスケーディング・スタイルシート）の入力を許容している場合（ブログなど） 文字コードを明示していないケースでUTF-7文字コードによるクロスサイト・スクリプティング <SCRIPT>の内容を動的に生成している場合 AタグなどのURLを動的に生成している場合注） 以下では，HTMLタグやCSSの入力を許容している場合と，文字コードを明
CSS YEAR OF THE CAT
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
とほほのＷＷＷ入門
HTML/JavaScript/CSS/CGIなど Webサイト作成に関する情報を満載した Web作成関連総合サイトです。
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About![2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
HTMLタグボード - HTMLタグ一覧、CSSリファレンスなど
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
http://d-lover.com/css/hack.shtml