IEで指定どおりのfont-sizeにならない | d-spica
IEで指定どおりのfont-sizeにならない 2008-05-18 0 0 XHTML/CSS CSS, font-size IE との兼ね合いで，font-size は%で指定しておくのが，いちばん無難だと思うのですが，IE6, 7 にちょっと痛いバグがありました。 小さなサイズの文字が指定どおりの大きさにならないのです。 11px以下のフォントが指定より大きくなる まず，font-size のページを IE6 または IE7 でご覧ください。 順にフォントサイズが小さくなっていくはずなのですが，74%から72%あたりの日本語のフォントサイズが一旦大きくなっています。その後71%から 60%のところまで，日本語フォントはサイズが変わっていません。 FIrefox の場合と比べると，よく分かるかもしれません。 %で指定された font-size は，最終的にpxに変換され，端数処理して整
スタイルシート［CSS］/テーブル/セル内の文字の位置を指定する - TAG index
vertical-align の指定がない場合は、垂直方向の中央に揃えられます。 justifyの指定について 複数行に渡る長い文章の場合に、各行（最終行を除く）の右端が綺麗に揃うように単語間隔が自動的に調整されます。（英文などの場合に有効のようです） 表示される内容は、letter-spacingプロパティやword-spacingプロパティの影響を受ける場合があります。 ベースラインについて 英文などの場合、例えば x と y では下辺の位置が異なります。 x 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。 日本語の場合はベースラインは存在しません。 使用例 left、center、rightの指定例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3
スタイルシート［CSS］/ページ全般/印刷時の改ページ部分を指定する - TAG index
avoid の指定は、Opera以外では対応していないようです。 指定例 見出し（h2要素）の直前で改ページさせる例 h2 { page-break-before: always; } 水平線（hr要素）で区切って改ページさせる例 hr { page-break-after: always; } 使用例 h2要素の直前で改ページさせる例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> h2 { page-break-before: always; } </style> </head> <body> <h1>印刷時の
border-collapse－スタイルシートリファレンス
border-collapseプロパティは、隣接するセルのボーダーを重ねて表示するか（collapse）、間隔をあけて表示するか（separate）を指定します。 ■値 スタイルシート部分は外部ファイル（sample.css）に記述。 table.sample1 {border: solid 1px #000000; border-collapse: collapse;} table.sample2 {border: solid 1px #000000; border-collapse: separate;} td.sample {border: solid 1px #ff0000} HTMLソース <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <table cl
margin-topで起きるFIREFOXのバグ - cording|コーディングウォーカーcording walker
WEB標準をわりと正確に読む人気のブラウザとして、FIREFOXがある。 （グーグルクロムが出てからはそっちに人気が移動しそうだけど） コーディングする際、まずはFOREFOXで確認しながらコーディングしていき、 最後にIEなどで確認をしたり、CSSハックを行ったりして、 調整する流れで作っている。 そんな信頼のFIREFOXもバグがないわけではない。 一番頻繁に遭遇するのが、入れ子（ネスト）構造になっている場合の子供にあたる<DIV>につけたmargin-topのバグだと思う。 <div id="box1"> <div style="margin-top:20px;"> あいうえーお </div> </div> こんな風にbox1というdivの中にmargin-top:20pxをつけたdivを作る。 本来ならば、box1の中で、20pxの余白ができたあとに、中のdivの内容が表示されるは
WEBデザイナー覚え書きノート IE6でスクロールしているとborder(ボーダー)が消える現象。
CSSを使ったコーディングなどを行っていると、border指定のCSSが、スクロール操作で消えてしまったり、マウスでなぞったら出てきたりと、挙動がおかしくなることがある。 フルCSSでコーディングを行っている方は、遭遇されてる方も多いのではないかと思います。 解決策は至って簡単で、以前にエントリーした「IE6で文字間がギュっと詰まったりする症状」の解決策と同じです。同じ条件で発生するバグですね。 自分の場合は、IE6で文字が詰まるバグに、合わせ技で発生していました。 分かりやすく言えば、線（border）を乗せる裏地がいるってこと。 要素を包んでいる親タグ自体に「background-color:#FFFFFF;」などのそのボックス背景にあわせた色を指定することで改善ができる。 もうひとつの解決策は、そのボックスサイズを「width」でサイズ指定。 どちらか片方でも直ります。 「背景がない
WEBデザイナー覚え書きノート IE6 【文字が重なる、文字が詰まる、背景がダブる、表示がおかしくなる】現象
iframeなどを切った中のHTMLのタグにCSSで背景の設定を行うと、 IE6で表示上おかしくなることがある。 解決方法は至って簡単。 body { margin: 0px; padding :0px; text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif; font-size: 12px; line-height:140%; background-image: url(../common_img/bg.gif); background-repeat: repeat-x; } 上記にbackground-color: #FFFFFF;(サイトに併せたカラー)を指定する。 リピートさせたい時は、背景色指定を行いましょう。 body { margin: 0px; padding :0px; text-align: cen
list-style-imageを使わずにリストマーカーに画像を使う
DoRuby! (ドルビー!) は現場のエンジニアによる、主にRubyなどの技術に関する様々な実践ノウハウを集めた技術情報サイトです。 こんにちは、maiです。今回は初心に返って、ごく簡単で使いどころが多い「リストマーカーを画像にする」について。 リストマークを画像にする場合、 list-style-imageというプロパティが既にありますが、 これを使うとちょっとズレたりしちゃうのでデザインとしてちょっと…ということがあります。 そういうズレを防ぐためにも、リストマークを画像にする時は backgroundで入れてしまいましょう。 具体的にはこんな感じ↓ ◆list-style-imageを使った場合 cssの記述自体は簡単ですが、テキストに対して上ズレしちゃってます。li { list-style-image: url(../list-mark.png); } ◆backgroun
ボックスモデルの解釈の不具合（IE）
スタイルシートの認識の違い 一部のInternetExplorerでは、CSSの『width、height、border、paddingプロパティ』において解釈の不具合があり、ボックスの表示サイズに既知のエラーがあります。 対象は以下のブラウザです。 InternetExplorer 5.5以前のバージョン InternetExplorer 5.5以降のバージョンかつ互換モードで表示時 ブラウザの標準/互換モードの起動やDOCTYPEスイッチによるこれらの切り替えについては『ブラウザ別標準・互換モード対応表』をご覧ください。 具体的な不具合 ボックスモデルでwidth/heightプロパティを指定した場合、「width/heightプロパティは要素内容の縦横の長さを指定するもので、パディング（padding）とボーダー（border）を含まない」とCSSで定義されています。 従って、実際の
Web標準HTMLコーディングのHomeWeb-coding｜「※（米印）」が付く注意書きをきれいにインデントさせる
注意書きなどでは、文頭に「※（米印）」が付くことが多いですが、改行されて複数行になる場合はインデントさせて文頭をそろえるときれいに見えます。 そのためには「※（米印）」を画像化して背景処理をするという手もありますが、フォントサイズや色の変更などを考慮すると、やはりテキスト処理したいところです。 そんな「※（米印）」のテキスト処理で簡単な方法としては以下のようなコーディングがあります。 CSS .note { padding-left: 1em; text-indent: -1em; } HTML <p class="note">※注意書きテキスト（改行されても文頭がそろいます）</p> こんな簡単なことで注意書きの見栄えがグッとよくなります。ただ、Macの標準ブラウザSafariでみると、2行目の文頭がずれてしまいます。さすがに標準ブラウザは無視することはできないですよね・・・。 そこで以
HTML文書文法チェック
HTML文書の文法をチェックし、採点します htmllint.cgi 1.28 / htmllint.pm 3.58 44,160 lints / 0 visits / since Jan 6, 1998 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 このページは、基本的な設定だけの軽いゲートウェイです (軽いのはこのHTMLのことで、チェック自体はどれでも同じです)。細かなオプションを指定したいときは、こちらのゲートウェイを利用してください。 チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタンを押してください。巨大なHTMLは途中でちょん切られてしまうことがあります。 [リセット] は全ての設定内容を初期状態に戻します。 URL DATA (D
『平方メートルや立方メートルの記号をHTMLで入力する方法』
「平方メートル（㎡）」や「立方メートル（㎥）」などの記号は、単純に文字変換したり 文字パレットから拾ってもHTMLでは正しく認識されず、きちんと表示されません HTMLで正しく表示させるには、 1. 特殊文字用の正しいコードで入力する 2. cssで上付き文字として設定する いずれかの方法が必要になります ■ 文字コード 平方メートル：m² 立方メートル：m³ ■ css（上付き文字） span.sup { font-size:80%; vertical-align:super; } ※下付き文字の場合は、 span.sub { font-size:80%; vertical-align:sub; } ■ 参考サイト [WEBMASTERTOOLs]特殊文字コード表（ROOM53） ちなみに、わたしの環境(Mac OSX 10.4.11／Firefox3.0.8)では、
特集バナー・内部リンクのブブンデザイン｜Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) ＜前へ 次へ＞(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
cssのフォント指定を完璧にするぜ2009 winter
2009年12月10日 サイト制作時のフォント指定の総集編2009冬。 【2010.2.28追記】cssのフォント指定を完璧にするぜ2010 Spring with jQueryという記事を新しく書いたので、そちらもぜひ！ 面倒が嫌いな人は以下をコピペで h1,h2,h3,h4,h5,h6 { font-size: 100%; } body { font-size: 62.5%; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; line-height: 1.8; } 普通は、これで十分です。 ここから先が本番です cssでのフォント指定は、非常に難しい。ウェブ上でのフォントは、印刷物とは違い、見る人の環境に左右され、その環境も千差
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
nondelion.com - 画像リンクを横に並べる方法
深夜に友人とメッセで、画像のバナーを margin や padding 指定がキッチリできるよう横に並べることはできないかな？っていう話になったので、少し考えてみた。 1. imgタグにそのままリンクを貼る 多分、最も簡単な方法。imgタグをアンカータグで直接リンクを貼る。 <p id="banner"> <a href="./" title="page1"><img src="gazo1.gif" width="80" height="19" alt="gazo1" /></a> <a href="./" title="page2"><img src="gazo2.gif" width="80" height="19" alt="gazo2" /></a> <a href="./" title="page3"><img src="gazo3.gif" width="80" height=
とほほのＷＷＷ入門
HTML/JavaScript/CSS/CGIなど Webサイト作成に関する情報を満載した Web作成関連総合サイトです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vertical-align:middleが効かないのぉ（涙） | 素人ときどき玄人
sakurachiro.com
WinMergeの使用方法 - ファイルを比較して相違点を確認