2009年8月26日のブックマーク (10件)

  • 改行されない~HTML、プラグインに関するメモ - ぴのBlog(●´Å`)

    改行されない〜HTML、プラグインに関するメモ FC2ブログのプラグイン機能は、一部のリスト内文字列の区切りが、デフォルトのhtmlでは空白を含まない半角記号「:」になっています。例えば「名前:タイトル」といった具合です。 最近のコメント部分 <%rcomment_name>:<%rcomment_etitle> 最近のトラックバック部分 <%rtrackback_blog_name>:<%rtrackback_title> 連続する半角英数字が改行されない 通常はまず問題ないので気にする事でも無いですが(^^;)。稀に半角英数字が連続する場合に、文字が折り返さない、右に突き抜けてレイアウトが崩れる、といった事が起こり得ます。 半角文字列の折り返し(ブラウザ表示比較) 文献らしき物も発見したが、読もうとしたら目眩がしたので、気になる方はGoogle等で詳細を調べてみて下さ

    mor-eve
    mor-eve 2009/08/26
    url等のせいでデザインが崩れる
  • 半角文字列の折り返し 〜HTMLの半角英数字〜

    通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、折り返さない場合が多い。また、折り返しの条件はブラウザ毎に異なります。 文字列折り返し ブラウザ別サンプル Firefox と IE6 (PNG画像) IE7 beta 2 日語版 (PNG画像) Opera と Safari (PNG画像) テキスト。実際(現在)の表示 mozilla系以外のブラウザの多くは、URL (URI) 等の連続する半角文字でも、ハイフン「-」等の一部の半角記号を区切りと認識し折り返しするようです。 CSSのword-break:break-all;、word-break:keep-all;はIE独自の仕様なので、IE以外では通常通りの挙動。つまりCSSによる折り返しはされない。Safari,Operaのサンプルでは、半角文字が折り返しさ

    mor-eve
    mor-eve 2009/08/26
    url等のせいでIEでデザインが崩壊する
  • 改行されない長い英数字の判定方法 - いっしきまさひこBLOG

    ご存じのとおり、HTMLコードでURLなどの長い英数字を記述すると、自動的に改行されずに、画面のレイアウトが崩れてしまうことがあります。 これに対応するには、適切な位置に改行(<br>タグ)、もしくは単語ブレーク(<wbr>タグ)を挿入する必要があります。単語ブレークの場合、HTMLページのテキストをコピーした場合に、実際の改行が入らないというメリットがあり、特にソース コードの場合に便利です。 (ちなみにIEでは、「word-break: break-all;」というスタイルを適用することで、すべての文字で単語ブレークが可能になります。) このような改行や単語ブレークの挿入をプログラムで自動化する場合、「自動的に改行されない英数字かどうか」(つまり「HTMLコードで単語と見なされる英数字」。以降、単語化される英数字)を判別して単語の長さを測定する必要があります。 その際、実際にはどのよう

    改行されない長い英数字の判定方法 - いっしきまさひこBLOG
    mor-eve
    mor-eve 2009/08/26
  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

    このウェブサイトは販売用です! desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています!

    mor-eve
    mor-eve 2009/08/26
    float, position:absolute;
  • http://www.suama-works.com/2009/02/ieborder.html

    mor-eve
    mor-eve 2009/08/26
  • http://tetlist.info/2009/02/positionrelative_border_intern

    mor-eve
    mor-eve 2009/08/26
  • :link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp

    スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか? 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効

    :link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
    mor-eve
    mor-eve 2009/08/26
  • IEで絶対配置(position:absolute)のボックスが消えるバグの検証

    先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う~ん、なぜだ・・・ 日語のリソースを調べてみても解決策

    mor-eve
    mor-eve 2009/08/26
  • jmblog.jp - Win/IEで絶対配置(position: absolute)のボックスが消えるバグの検証ページ

    http://jmblog.jp/archives/180より。 Bruno Fassino氏のIE/Win: Disappearing position:absolute boxes near to floats and clears のテストを元にしています。 日語 | English 概要 Win/IEでは、以下の場合に絶対配置(position: absolute)にしたボックスがレンダリングされないことがある。 position:absolute が float と hasLayout をもつ clear の直前に存在する場合。(Test1) 解決方法 : #1, #2, #3, #4, #5 position:absolute が float と hasLayout をもつ clear との間に存在する場合。(Test2) 解決方法 : #1, #2, #3

    mor-eve
    mor-eve 2009/08/26
  • IEで position:absolute した要素が消えるバグ - ぴのBlog

    ぴのBlog 一貫して一貫性が無いブログ。競馬予想メモ・時々料理‥。 http://pinotan.blog15.fc2.com/ htmlソース上では下方に置いてある検索窓などを、position:absoluteでページ上部に絶対配置する。よく使われる手法だと思うんですが、Win IE(Windows Internet Explorer)ではposition:absoluteを指定した要素が表示されない場合があるみたい(IE6/IE7 beta 2)。IEのバグ?(仕様なのかバグなのかは知りません)例えば下記のような順序で組まれた物。 カラム : float カラム : float 検索窓 : position:absolute フッター : clear:both html上では検索窓がfloatとclearに挟まれている。検索窓はfloatとは無関係に配置出来るはずだが

    mor-eve
    mor-eve 2009/08/26