パスワード入力欄のマスク文字サイズを調整する - えむもじら
もじら組フォーラムで紹介されていた、パスワード入力欄のマスク文字が目立ちすぎるのをスタイルシートで修正する Tips を早速導入したのですが、これだけだとマスターパスワードに対応できないので、対応させてみました。追記：Basic 認証のダイアログもこれで OK です。 マスターパスワードのマスク文字のフォントを設定：userChrome.css 用 #password1Textbox{ font-family: Verdana, sans-serif; } ウェブページのパスワードのマスク文字のフォントを設定：userContents.css 用 input[type="password"]{ font-family: Verdana, sans-serif; } Stylish を使っている人は、まとめて以下のようにすれば OK です。この場合、名前空間を指定してはいけません。 inpu
CSSレイアウトテクニック"偽装絶対指定" - A List Apart | エンタープライズ | マイコミジャーナル
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
Ultimate multi-column liquid layouts (em and pixel widths)
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
https://www.openvista.jp/archives/note/2007/webdesign-for-ipod-touch/?2007/webdesign-for-ipod-touch/
Web 標準的な CSS の値変換方法（px → em など）（訂正あり） - IT戦記
はじめに W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。 まず CSSStyleDeclaration オブジェクトを取得する 例えば、 var decl = element.style; または、 var decl = getComputedStyle(element, ''); http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration CSSStyleDeclaration オブジェクトから getPropertyCSSValue という関数を使って CSSValue オブジェクトを取得する var val = decl.getPropertyCSSValue('width') http://www.w3.org/TR/DOM-Level
CSS3 セレクタ チートシート
以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。 本当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。 CSS3 セレクタチートシート （PDF） ※PDF ファイルは URI が変わる可能性がありますので、ブクマする際はできればこのエントリーにして頂いた方が安全です。 今回、チートシートのフォーマットは、Microformats Cheat Sheet を参考に作らせてもらいました。右サイドに IE7、IE6、Firefox、Opera、Safari それぞれでの各セレクタ対応状況を簡単にまとめてあります。 なお、対応状況のチェックには、c
リアルな資産運用の結果をお見せします。海外投資が調子良い！
「私のリアルな海外投資の結果をお見せします」を運営している管理者です。お越しいただきありがとうございます。 投資全般が好きな私は国内株式や海外への不動産投資や株式・定期口座など多くの投資をしています。 情報収集で多くの投資ブログを閲覧していますが、圧倒的に「投資に失敗している人」が海外投資を批判する内容の記事が多いことに驚きました。 海外投資に失敗している方の特徴はどれも中間業者の選定に間違いがあると感じています。そう海外投資には必ず資産を運用する会社があってこの運用会社の投資の腕にかかってるのです。この選定さえきちんとすれば確実に海外投資はよい結果が期待できます。投資なのでリスクは必ずありますがそのリスクを極力少なくする私の経験を交えて情報を配信したいと思います このサイトは「将来の日本は大丈夫だろうか？」「国家破たんもあるの？」「日本に資産を置いても全然増えない！」でも海外投資は怖いし
My Page: nth-child(n)を使う
My Page 無料で使える100M さぁ、何に使おうか？ と言っていたら4Gになっていた。（2007/11/15）気がついたのは2007/11/23 ページの最初 nth-child(n)はcss3で策定中の疑似クラスです。 まだ対応しているUAは少ないようですが、Operaはその数少ないものの一つです。 ここのカレンダーは単に数字をテーブル組みしたものです。そのtdには何のクラスも設定されていません。 <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> このテーブルにはクラスは設定してありませんが、<div class="module-calendar module">の中にあるので div.module-calendar t
nth-child() 疑似クラスを試してみる | d-spica
nth-child() 疑似クラスを試してみる 2008-05-26 0 0 XHTML/CSS CSS, nth-child CSS3で定義される nth-child() 疑似クラス。これが使えるようになると，HTMLファイル，CSSファイルのメンテナスが楽になるだろうな...と思うのです。 どんな具合か，ちょっと試してみました。 nth-child() 疑似クラスとは 英文ですが，詳細は以下から。W3Cの Working Draft（草案）ですので，今後変更されることがあるかもしれません。 Selectors - 6.6.5. Structural pseudo-classes - :nth-child() pseudo-class その要素が何番目の子要素かによって，該当するものにだけ，CSSをあてることができます。 たとえば，セレクタにul li:nth-child(2n)，または
CSS で簡単に上下中央揃えを実現する
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
font-sizeのパーセント表記一覧 - Webtech Walker
font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで
HTML版『スタイルシートWebデザイン』すみけんたろう著
すみけんたろう著 簡略な目次 HTML版に寄せて 詳細な目次 まえがき 1. Introduction to CSS with HTML 2. tutorial of HTML as SGML 3. some more HTML 4. CSS syntax in detail 5. CSS properties for visual media in detail 6. road to mastering CSS 7. new feature in CSS2 解説と凡例――HTML版編者より アーカイヴ版の配布 HTML版に寄せて いま私はプロの編集者として勤務しています。その目から見れば、本書の記述はあまりに固く、冒頭が長すぎ、リファレンスとして使いにくく…と欠点だらけです。 ところが本書は、専門家を含む一部のかたに一定以上の評価をいただいています。大変ありがたいことです。「美人は3日で
CSS Message Boxes for different message types : Janko Jovanovic
Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Acc
浅漬けCSS | Blog hamashun.com
最初に結論 ブラウザの差異を最小限だけリセットするCSSって浅漬けCSSって感じじゃない？ きっかけはTwitter 昨日、@reaさんがTwitterにポストした一言がきっかけです。 最近、ぬか味噌 CSS を使わなくなった。デメリットの方が多い気がする。 それに対する@hamashun（僕）の反応がこんな感じです。 @rea 実はぬかみそ的な CSS は使った事がなかったりします。 必要な要素への margin と padding のリセットと、あとは border 消したり、とかは大抵毎回使いますけどもー。 浅漬け CSS 。 ちなみにここでのborderを消す、というのはimg要素にリンクをした時に表示されるborderについてです。 フォームのborderとかは消していないです。 Twitterのログだけだと説明不足だったのでここで追記。 @reaさんから頂いた更なる反応。 @h
「リセット用CSSを使わない」ことが流行ってる（らしい）理由 | necoze LOG2 [ネコゼログログ]
一定期間更新がないため広告を表示しています
![「リセット用CSSを使わない」ことが流行ってる（らしい）理由 | 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)
border-radius における個人的覚え書き « Study « Forest.Kの徒然日記
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
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
スキンカスタマイズの手引き - 3ping.org
Vicuna CMS で用意してあるスキンの利用方法を解説します。 土台用スキンの特長 Vicuna CMS で配付しているスキンは、レイアウトや配色変更等のカスタマイズを簡単に行えるよう工夫しています。どのスキンも一般的なレイアウトパターンには対応しているので、カスタマイズのベースとするスキンは、以下に説明する各スキンの特徴を考慮して選択してください。 Origin Skin もっともシンプルな形状のスキンで、 Vicuna のスキンは全てこの Origin スキン を土台に作られています。 コンテンツの領域と背景, メニュー領域と本文領域が色で区切られているスキンを作成する場合に土台として利用すると楽にカスタマイズできます。 画像を一切使っていないので、シンプルなデザインや、ポイントとなる画像をここから付け足していく場合にも、他のスキンよりも比較的楽に進められます。 Smart Can
「Acid2 test」と「マージンの相殺」のちょっとした疑問 - IT戦記
マージンの相殺の仕様を読み直していて Vertical margins may collapse between certain boxes: … Box model と書いてあることに気がついた。 マージンの相殺はあくまで「may」なのだ。 なので、マージンの相殺をしないブラウザでも CSS 2.1 準拠とうたうことは出来る訳だ。 Acid2 test の場合はマージンの相殺が必須 Acid2 test で表示されるスマイルマークのおでこ部分のボックスと鼻部分のボックスはマージンの相殺が行われてあの距離を保っている。 「may」のものもテストの対象になっているんだなあ。 それってどうなんだろう。 「may」なのも「どうなのそれ？」って思うし 「may」なのにテスト対象なのも「どうなのそれ？」って思う。 でも、 UA 間で仕様が統一されてなかったら、それはそれで仕事が大変なんだろうなって思
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]チェックしておきたい50のCSSのテクニック | コリス