全称セレクタでPADDING:0を指定したら、TABLEのPADDINGが指定できなくなった - OKWAVE
全称セレクタについて こんにちは、HTMLやCSSについ学校で勉強をしている者です。 今自分で世に出ているサイトを見よう見真似で作ってみようと思い 有名な制作事務所さんがつくっている、簡単そうなもののソースやCSSを見ていました。 【質問１】 始めに全称セレクタで *{ padding: 0; margin: 0; } としているのに、以下の『 th 』や『 h1 』でも paddingとmarginに、さらに ０ をいれています。 学校では、全称セレクタはすべてに適応されると聞いていましたが すべにて適応されるのであれば、またわざわざpaddingとmarginに０を指定する必要はないと思うのですが、なぜでしょうか？ 【質問２】 htmlにスタイルシートで指定することをならいませんでしたが そのサイトでは html{ overflow: 0;} とありました。htmlにかけるとはどういう
CSSで、input要素にpaddingを設定したいのですが、IEで思い通りに行きません。…
CSSで、input要素にpaddingを設定したいのですが、IEで思い通りに行きません。 やりたいことは、input要素(type="text"または"password")のテキストを入力するフィールドに余白をつくる、ということです。 http://www.crazyegg.com/account/login このサイトのEmailやPasswordの入力フィールドのような感じです。フィールドのサイズがデフォルトより大きくなり、入力した文字の周りにある程度余白がある状態です。 Firefoxでは、 >> Style input.text { padding: 5px; } >> HTML <input type="text" class="text" ... /> とすれば思い通りの結果が得られました。 しかしIEで上記のようにすると、フィールドのサイズが変わらずに、文字の左と上のみに余
clearfixを使わないでやるには。
2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
RedLine Magazine : hrタグの使い道を考える
hrタグの使い道を考える このサイトの状況は段組部分の背景をそれぞれの段組をまとめているブロックの背景として表示する定番技を使っているわけだけど、floatを使っているので当然IE以外のブラウザでは背景がちゃんと縦に伸びない(伸びないっつーかそのブロックに高さがない状態になるアレね。) 解決策としてはこれまた定番の clearFIx 技で解決すればいいやと思ってたわけなんだけど、どうもOperaさんの機嫌を損ねたらしく、Operaでだけ背景が表示されないという罠に陥った。 いつもなら「しょうがないやー、brでクリアしてやるかー」なんていう発想にたどり着くわけなんだけど、br タグでクリアするってのも本当はスマートじゃないよなぁと思いとどまった。で代わりになりそうな要素を考えてて思いついたのがhrタグ。 web標準が広まってきて、「構造と見栄えの分離」ってフレーズを遂行しているわけだが、hr
IE7の具体的な対策の仕方。 | blog | circuit breaker
君の知らない未来へ、進もう＞挨拶。 アメリカ現地時間の10月18日、いよいよIE7(Windows Internet Explorer 7.0)がリリースされる予定です。 ほかのモダンブラウザ(FirefoxやOpera、Safariなど)に比べてしまえばまだまだなのかもしれませんが、従来のIEに比べれば無茶苦茶よくなりました。 PNGのアルファチャンネルにも対応したし、フィードも読めるようになったし、タブブラウザにもなった。 でも、具体的対策、みんなしているのかなぁ？って思った。 弊社(何)だって俺が「IE7! IE7!」って騒いでいなきゃ「じゃ、リリース後に」ってなってたくらいだから。 ってなわけで今回は覚え書きをかねて、IE7対策特集。 まず、細かいことは後で説明するけど、Windows版のIEはバージョン6以降から二つのレンダリングモードがあるんだ(ちなみにMac版のIEにもVer
bmblog: IEでmin-heightらしきことをする
Top Page: メイン Previous Page: 進化論の挑戦 Next Page: 地上ã¯åœ°ä¸Šã€åœ°ä¸‹ã¯åœ°ä¸‹ May 23, 2007 Category: web Tags: css , internetexplorer , min-height IEでmin-heightらしきことをする CSSのお話。 IEはmin-heightに対応してないのでhackが必要。 under score hackとボックスのheightを指定しても内側のコンテンツがそれより長かったら指定したheight以上に伸びてしまうbugを利用 <style type="text/css"> .no_hack{ margin: 8px; background-color: #CDC; min-height:40px; } </style> <div class=
アンダースコアハック
CSS覚え始めの頃、多様していたハックがアンダースコアハックです。 アンダースコアハックとは、Win版IEのみ適用させたい時に使います。 コレは、IEのバグを利用したテクニックで、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれます。 記述方法はいたって簡単。 プロパティの前に _ を置くだけ。 使いどころとしてはかなり多様で、IEだけ表示がおかしい時には何かと便利に使えます。 例えば、 .hoge { border-top:1px solid #CCC; margin:1px 10px 20px 0; _margin-top:0; } などのように、記述すればIEだけmargin-topが0になります。 IEには、互換モードの時に、 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう というバグがあるので、バグにはバグ
雑食堂
↓ クリックで それぞれの感想に飛びます。 黒執事 寄宿学校編 第2話 声優ラジオのウラオモテ 第2話 黒執事 寄宿学校編 第2話 黒執事 寄宿学校編 第2話 『その執事、偽装』 リジーのお兄ちゃんが出てくるのは覚えてた。 そうだ、そうだ、あの王子様も出てくるんだった。 www.kuroshitsuji.tv 声優ラジオのウラオモテ 第2話 声優ラジオのウラオモテ 第2話 『夕陽とやすみとユニットと』 お肉屋さんでコロッケが売ってる事を知らない人がいるのか。 揚げたては おいしいよね。 2人でユニット組むのかと思ってたら、3人だった。 seiyuradio-anime.com ビアードパパの《カスタードプリンシュー》。 シュー生地はクッキーシュー。 4月30日までの販売です。 ファミマの《U.F.O.ぶっ濃い濃厚そばめしおむすび》。 食べかけ。
clearfix overflow auto float - Google 検索
overflow: hidden は親要素に追記するだけです。 理由としてはoverflowプロパティではfloatで浮いている子要素の高さを認識してくれるからだそうです。
clearfix overflow float - Google 検索
2015/01/15 · overflow: hidden は親要素に追記するだけです。 理由としてはoverflowプロパティではfloatで浮いている子要素の高さを認識してくれるからだそうです。
clear:both;を忘れずに－ブログ・テンプレート作成入門
MovableTypeのオリジナル・テンプレート作成を０から図解式で解説します。 ブログ・テンプレート作成入門 ＞ ２カラムレイアウト ＞ clear:both;を忘れずに ＜＜ 前のページ メインページのテンプレートの修正と画面確認 前回サイドバーを設置し、ブラウザで画面を確認したところ、フッタ部分が最下部ではなくサイドバーの下に表示されてしまうという問題が発生しました。 これは、CSSの仕様であり、floatプロパティで指定したグループの次のグループは、回りこんで表示されるという仕組みになっているからです。 この回り込みを無くすために、スタイルシートのフッタグループ（footer）に次の1行(clear:both;)を追記します。回り込みをクリアしますという命令です。（厳密な仕様は違います。ここでは簡単な説明でおさえます。） ※width指定も追加します。指定しなかった場合、レイアウト
はてなブログ | 無料ブログを作成しよう
新米と秋刀魚のわた焼き お刺身用の秋刀魚を買いました。1尾250円です 3枚におろして、秋刀魚のわたに酒、味醂、醤油で調味して1時間ほど漬け込み、グリルで焼きました 秋刀魚のわた焼き わたの、苦味が程よくマイルドに調味され、クセになる味わいです 艶やかな新米と一緒に 自家製お漬物 土…
画像置換の問題点 | d-spica
画像置換の問題点 2007-05-19 0 0 XHTML/CSS CSS, image 画像置換の使いどころって，そんなにないような気がしてきました。 「heading要素（h1〜h6）にはビシッとテキストを入れておくほうが，SEO的にはいいだろう」と考えて，XHTMLにはテキスト，CSSでそれを背景画像に置換するという方法をよく使っていました。 画像置換 骨だけ書くと，次のような感じ。 <h1><a href="index.html">サイトタイトル</a></h1> h1 { background: url(img/logo.png) no-repeat; } h1 a { display: block; width: 200px; height: 50px; text-indent: -9999px; } 何も出なくなる場合 しかしこの方法だと，CSSが効いていて画像を非表示にした
リスト全体の余白を調整する
margin の値には auto（自動）を指定することもできます。 マージンとパディングの指定については、以下のページをご覧ください。 ボックスのマージン（外側の余白）を指定する ボックスのパディング（内側の余白）を指定する デフォルトの余白を取り除く方法 一般的なブラウザでは、リストの周囲に適度な余白が設定されています。 この余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。（以下は1つの目安です） ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ～ 2em 程度 マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。 余白の比較 u
リンク先の拡張子に併せてアイコンを自動挿入する方法「Showing Hyperlink Cues with CSS」
TOP > WebDesign > リンク先の拡張子に併せてアイコンを自動挿入する方法「Showing Hyperlink Cues with CSS」 かなり昔のエントリーですが、知らなかったのでメモ代わりにエントリーしたいと思います。今日紹介する「Showing Hyperlink Cues with CSS」はリンク先の拡張子に併せてリンクテキストの前にアイコンを表示させるというテクニックです。 基本的には何かプログラムを用いてと言うわけではなく、CSSで制御してアイコンを表示させるという物になっています。この方法に対応しているブラウザはIE7,FireFox,Safariとなっています。 詳しくは以下 例えばリンク先がPDFのテキストリンクの後ろにアイコンを表示させる場合について紹介したいと思います。HTML側にはまったくなにも細工する必要はなく下記のように記述します。 <
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
スライドするドアのように使いやすいボタンをCSSで作る方法『Make fancy buttons using CSS sliding doors technique』 – creamu
DiaryTechnology スライドするドアのように使いやすいボタンをCSSで作る方法『Make fancy buttons using CSS sliding doors technique』 汎用性のあるボタンが作りたい。 そんなあなたにおすすめなのが、『Make fancy buttons using CSS sliding doors technique』。スライドするドアのように使いやすいボタンをCSSで作る方法だ。 このエントリーでは、↑のようなボタンをCSSで実装する方法が紹介されている。 画像を2つ使い、テキストの長さによってスライドするドアのように縮小・拡大するというものだ。 HTMLとCSSがすべて公開されているのですぐに実装可能だろう。 スライドするドアのように使いやすいボタンをCSSで作る方法、チェックしてぜひ使ってみてはいかがだろうか。 先輩とジムで会ったので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タブインターフェースを使うための条件 | へたれwebディレクターの覚え書き
404 File Not Found - Neo's World