【CSS】TABLEのセルの中でURLが改行してくれない at softelメモ
問題 HTMLのtableの中のあるセル（td要素）内に、長いURLが入ると、突っ張り棒のようにそのセルの横幅が大きくなってしまう。 word-wrap:break-word;も効いてくれないみたい。 テーブルのセルの幅を調整したいんだけど、Javascriptでも使わないとだめ？ TDの中で折り返してもらうには、どうするといい？ 解答例 ここまでやれば、たぶん期待した表示になる。 １、table要素に、幅（width）を指定する。 ２、td要素にもcol要素か何かで、pxでも%でもよいから、幅（width）を指定する。 ３、table要素に、CSSで table-layout:fixed する。 ４、td要素（もしくはその中の問題の要素）に、CSSで word-wrap:break-word する。 以下、表示例をいくつか。 １、２だけだと長い単語とみなされたものが突っ張り棒状態になる
font-familyプロパティ - CSSリファレンス
平成27年12月15日現在の定義です。 プロパティの定義 優先して利用されるべきフォントのリスト。 定義のある水準 第一水準 (CSS 1) 以降。 第三水準以降はフォントモジュールで。 WAP 2.0 での定義 必須プロパティ。 フォント名指定は任意実装。 但し、国内端末では事実上利用不可。 対象メディア 視覚系メディア。 対象要素 全要素。 上位要素からの値の継承 あり。 第二水準でのプロパティ値 以下のいずれか： inherit 上位から継承。 一個以上のフォントリスト 適用したい順に , で区切って列挙。 フォントリストには、以下のいずれかを列挙： フォント名 引用符で囲む。 serif セリフを持つフォント(明朝体等)。 sans-serif セリフを持たないフォント(ゴシック体等)。 cursive 草書体(筆記体)。 fantasy 装飾文字。 monospace 等幅フォン
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
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
スタイルシート［CSS］/テーブル/境界線の間隔を指定する - TAG index
指定方法 次のように、2タイプの指定方法があります。値は半角スペースで区切って記述します。 border-spacing: 5px; … ［上下左右］ を指定 border-spacing: 10px 5px; … ［左右］ と ［上下］ を指定
print.css 印刷用CSSの作成方法
head内に <link rel="stylesheet" href="common.css" type="text/css" media="screen,tv" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> と記述。 →common.cssはWEB上適用されるCSS →print.cssは印刷時用に適用されるCSS common.cssの中身は @media screen{ /*この中にCSSを記述*/ } print.cssの中身は @media print{ /*この中にCSSを記述*/ } WEBでは表示されているけれども、印刷用には表示したくない時は、 .side { display:none; } とすればよい。 ただしMac IEで「@media type { 〜 } で
[CSS]IE6でもそれなりに、CSS3で実装するツールチップのチュートリアル
吹き出し風デザインの実装イメージ .tooltip { position: relative; background: #eaeaea; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none; } .tooltip span { visibility: hidden; position: absolute; bottom: 30px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #ccc; opacity: .9; background-color: #ddd; background-image: -webkit-linear-gr
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
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では正しく認識されず、きちんと表示されません 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)では、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vertical-align:middleが効かないのぉ（涙） | 素人ときどき玄人
sakurachiro.com
