2010年10月01日

CSSで大文字に!

CSSにこんなのあったんだ。しらなかった。


text-transform:none そのまま
capitalize 単語の先頭文字を大文字に
uppercase 全ての文字を大文字に
lowercase 全ての文字を小文字に

posted by ほえ at 22:08| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2010年07月08日

classは複数指定できるんだ!

知らなかったので。

classは複数指定する事ができます。

...
<style type="text/css">
.base_text {
font : bold 200% "MS ゴシック";
}
.red_text {
color : red;
}
.blue_text {
color : blue;
}
</style>
...
<span class="base_text red_text">ほえほえ</span>
...


javascriptで一部のスタイルだけ入替えたい時なんかに総とっかえしなくていいから便利じゃないでしょうか。
フォントの色だけ変更したい時、ret_text -> blue_text だけ変更みたいに。

elm.className = elm.className.replace('red_text', 'blue_text');


posted by ほえ at 11:42| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

<a name="abc">はもう古いんです!

知らなかったので。

<a href="#abc">abcに行きますわよ!</a>

<a name="abc">ここよ!</a>

はもう古いそうです。



<a href="#abc">abcに行きますわよ!</a>

<span id="abc">ここよ!ここよ!</span>

で十分だそうで。
posted by ほえ at 11:21| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2009年07月17日

divからはみ出さないで!の件をもう一度。

divからはみ出さないで!の件をもう一度。
こういう事でした。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#outer {
border: 1px solid red;
padding: 10px;
width: 400px;
overflow: hidden;
}
#inner1 {
margin: 5px;
border: 1px solid blue;
height: 200px;
width: 100px;
float: left;
}
#inner2 {
margin: 5px;
border: 1px solid green;
height: 100px;
width: 100px;
float: left;
}
</style>
</head>
<body>

<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
</div>

</body>
</html>

これで、 #outer の overflow: hidden; が無いと、赤い枠が延びてくれないのでした。
overflow: visible; の場合は、正しくは「領域をはみ出して表示」だそうなのですが、IE6は「領域を広げて表示」してしまっているのでした。なのでFirefoxの方が正しい表示をしていたわけです。


overflow: hidden;
boxok.gif


overflow: visible;
boxng.gif
posted by ほえ at 11:36| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2009年06月05日

ブラウザの戻るボタンで

戻るのだ。
posted by ほえ at 10:35| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2008年08月07日

divからはみ出さないで!の件

divが入れ子になっている時に、IEだと綺麗に収まっているのにFirefoxだとはみでてる!みたいな事があります。
div.PNGこんな感じに。


とても困っていたら、どうやらoverflow:hiddenにするとよいらしいとわかりました。
赤のdivは高さを指定していません。
IEだと水色のdivがoverflow:visibleでも、水色のdivが収まる高さまで赤が伸びてくれます。
Firefoxだと水色のdivの事は気にしてくれません。
でも、overflow:hiddenにすると伸びてくれるのです!
なんででしょうね?
でも、これでうまくいったからそういう事なのです。
posted by ほえ at 20:30| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2007年11月28日

imgタグのsrcが空の時…

サーバ側でそのページにアクセスするとDBにログを登録するようなプログラムを修正していました。
そのページのHTML出力部分を色々変えていて、妙な事に気がつきました。
ページにアクセスすると、DBのログが2件登録されてしまうのです。
自分で作ったプログラムではなかったので、JavaScriptでもう1回submitしているのかな?と思って見てみたけれどもそんな事はしていません。
おかしいなぁ?と思い、ページの要素を削ってどこでもう一度アクセスに行っているのか探してみました。
すると最後に残ったのが
<img src="" alt="nnn">

という部分でした。
このHTMLだけにしてみても相変わらず2回アクセスしてきます。srcが空ではなくてなにか文字列が入っていると1回しかアクセスに来ません。
ファイルの修正途中だったのでsrcが空になっちゃっているのは気がついていましたが…。
うーん。なんて思ったら、わかりました。

URLがhttp://xxx.xx.xx/yyy/xx.phpで、
xx.phpにimg src=""がある時、

・IE6では、http://xxx.xx.xx/yyy/に画像を取りに行きます。
・FireFox(2.0)では、http://xxx.xx.xx/yyy/xx.phpにアクセスに行くのですね…。

FireFoxで試してたので、ログが2回登録されたわけです。

気がつかなかったのにはいろいろ別の要因も…
FireFoxではalt属性があると、画像が存在しない場合などにはaltのテキストを表示します。
本来画像を表示するエリアに「1」とか「2」とかそれらしいテキストが表示されていたので、コードで画像が無い場合の処理とかやってるのか?とか余計なことを考えてしまいました。
IEだと壊れた画像のアイコン?が表示されるんですが、上記の通りFFとは別のURLにアクセスに行くので別の結果になっていました。


このimgタグのsrcが空の時…って前にもハマったことがある気がするので、メモしておきます。トホホ…。
posted by ほえ at 16:13| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2007年04月18日

IEのデフォルトのフォントの件

IEでテキストフィールドに'\'(円マーク)を入力しようとしたら、バックスラッシュになってしまいました。
きっとcssでフォントの指定をしているからなんだろうと思って見てみても、フォントの指定はされていませんでした。
firefoxだとちゃんと'\'(円マーク)を入力できます。
他のサイトではどうなんだろう?と思ったのでYahoo!とか見てみたのですが、ちゃんと'\'(円マーク)が入力できます。

IEの設定でデフォルトのフォントを見てみるとMS Pゴシックになってます。うーん。とふとみるとYahoo!は文字コードがEUCなのに気が付きました。
バックスラッシュになってしまったのはUTF-8でした。
試しに
<input type="text">
だけのhtmlファイルを作成して、
UTF-8で保存してエンコードをUTF-8でIEで見てみると、バックスラッシュが、
SHIFT-JISで保存してだと、'\'(円マーク)が
入力できました。

なるほどー。
posted by ほえ at 15:45| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2006年10月11日

IE6でフォント指定と印刷の件

IE6で、フォント指定でsans-serifなんて指定をすると、画面に表示したときはtdの高さがフォントの高さになりますが、印刷プレビューをすると妙な高さになってしまいます。











どうでしょう?






どうでしょう?






上のテーブルは印刷プレビューで見ると、「どうでしょう?」の下に隙間が開いてしまいます。
下のテーブルはフォントの高さでうまく収まっています。

このページを直接印刷プレビューしても、問題なく見えてしまいます…。

Quirks モード(互換モード)、Standardモードに関わらず、このようになってしまうようです。

※この記事、後で書き直す事。
posted by ほえ at 18:59| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2006年03月01日

中央に配置したい!

インライン要素のタグを中央に配置したい時はブロック要素にして、marginを設定しましょう。

例えばsubmitボタンを中央に配置したい時
<input type="submit" id="korecenter" value="送信!">
の時
#korecenter {
display: block;
margin: 0 auto;
}
とすると中央に配置されるわけです。




こんな風にね。
posted by ほえ at 16:47| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2006年02月20日

line-heightと<dl>とborder

<body>とかでline-heightを指定していると、<dl>にborderを付けようとした時に項目毎にborderが付いてしまう件。
<body>
<dl>
<dt>その1</dt><dd>これはこう</dd>
<dt>その2</dt><dd>それはそう</dd>
<dt>その3</dt><dd>あれはああ</dd>
</dl>
</body>
body {line-height: 1.5;}
dl {border: 1px solid;}
dt {float: left;}
dd {margin-left: 8em;}
と、<dl>全体を枠で囲みたいのですが、IE6だと
その1 これはこう
その2 それはそう
その3 あれはああ
となってしまうのです。

<body>のline-heightを削除すれば、全体を枠で囲むようになります。
その1 これはこう
その2 それはそう
その3 あれはああ


<dl>のfloat設定を削除しても、全体を枠で囲むようになります。
posted by ほえ at 17:45| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

2005年12月20日

vertical-align: middle;がうまくいかない時は…

line-height: 30px;とかするとうまくいくみたいです。vertical-alignは削除して。
posted by ほえ at 15:00| Comment(0) | TrackBack(0) | XHTML+CSS | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。