2008年3月16日日曜日

 

【CSS】<pre>のデザイン

pre要素へのスタイル指定
  1. ほとんどのブラウザでpreは等幅フォントで表示される
  2. ほとんどのブラウザでpreのwhite-spaceはpreになっている
  3. フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる
  4. overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る
  5. overflow: auto;ではあふれた方向にのみスクロール・バーが出る
  6. Internet Explorerではoverflow: auto;は内容があふれる場合にうまく解釈されないことがある
  7. heightを指定しなければ内容に合わせて適当に拡大してくれるので縦にはあふれない
  8. Internet Explorerでは内容に合わせてボックス幅が際限なく拡大するのでoverflowと同時にwidthの指定が必要になる
  9. Internet Explorerではボックス・モデルの解釈に問題があるのでwidthと同時にpaddingやborderを指定する場合はwidth: 90%;などと余裕を持たせる必要がある

以上を踏まえてアンダースコア・ハックを使わないコードが以下。リンク元から採用させて頂きました。


div#contents div.story pre {
  margin: 1.5em auto;
  padding: 1em;
  border: 1px solid #cfccc6;
  clear: both;
  width: 90%;
  overflow: scroll;
  color: #333333;
  background-color: #edeae4;
}

div#contents div.story > pre {
  overflow: auto;
}

ラベル:


 

【CSS】<blockquote>での引用デザイン

イメージ無しのblockquoteで引用を表示するCSSサンプル
CSS疑似要素 before と after を使っての引用表示サンプル。


blockquote:before{
content:"“";
float: left;
font-weight: bold;
font-size: 500%;
display:block;
height:30px;
color: #666;
}

blockquote:after{
content:"”";
text-align:right;
display:block;
height:30px;
font-weight: bold;
font-size: 500%;
color: #666;
}
blockquote>p{
margin:0;
padding:1em;
}
blockquote>p:first-child{
text-indent:2em;
}
blockquote{
margin: 0 2em;
padding: 1em 2em;
background-color: silver;
}

IE以外に対応。画像を使わないのが良い。無駄な要素を使ってソースを汚さない。

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法
いくつかのパターン比較。

引用の始めと終りの画像をひとつで使いまわせたら理想。CSS の filter は IE のみ対応だし Javascript か CSS Sprite でやるしかなさそう。
CSS Spriteを活用しよう

blockquote は Web 標準的にblockquote要素はブロックレベル要素であるが、直接インライン要素やテキストを含むことはできず、p要素などの他のブロックレベル要素を含まなければならないなので注意。

その他blockquote デザイン。
Blockquote Examples by CSS-Tricks
同一HTMLソースで画像・CSSによる様々なデザイン。 Pull Quotes (15 examples)
凝った blockquote デザインのサイト例。

ラベル:


2008年3月1日土曜日

 

【Javascript】style.css.Text

[javascript] style.cssText の使い処に関する考察

<body style="margin: 1em; padding: 1em; border: 1em">....</body>

<script type="text/javascript">
alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em'

document.body.style.cssText = 'width: 100px'; 

alert(document.body.style.width);   // '100px'
</script>

一括で記述できるし、style.xxxx = "~" と書くよりちょっと動作も速いらしい。
クロスブラウザ - Safari 3, Opera 9, Firefox 2, IE 6, IE 7 だそうです。
"style" に続くんだからブラウザ算出値じゃなく、HTMLに直接指定したスタイルだけかな?
以下のスタイル値退避させる使い方は便利。


var style = element.style;
var cache = style.cssText;
//~なんか色々いじって~
style.cssText = cache;

元通り。

自分メモ

次のようなのを書きました。お粗末さまです。


function disable() {
   var item1=document.getElementById('id1').getElementsByTagName('*');//id1 内のHTML要素を全部取得
   var item2=document.getElementById('id2').getElementsByTagName('*');//id2 内のHTML要素を全部取得
   len1=item1.length;//id1 内の要素数取得
   len2=item2.length;//id2 内の要素数取得
   var cache={};//id1、id2 内の要素のスタイルを退避する配列
  if (document.frm.mycheck.checked == true) {//チェックされた時
     for (i = 0;i < len1;i++) {
        cache[i]=item1[i].style.cssText;//元スタイル保存
      item1[i].style.color='#eee';//文字色をグレーにして目立たせない
      item1[i].disabled=true;//選択できなくする
     }
     for (i = 0;i < len2;i++) {//同上
        cache[(len1+i)]=item2[i].style.cssText;
      item2[i].style.color='#eee';
      item2[i].disabled=true;
     }
  } else {//チェックが外れたら
    for (i = 0;i < len1;i++) {
       item1[i].style.cssText=cache[i];//スタイルを元に戻す
       item1[i].disabled=false;//有効にする
    }
    for (i = 0;i < len2;i++) {//同上
       item2[i].style.cssText=cache[len1+i];
       item2[i].disabled=false;
    }
  }
}

ラベル:


This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google