ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

2011年6月4日土曜日

FirefoxにてDIV要素を連続でドラッグ&ドロップできない問題

FirefoxにてDIV要素を連続でドラッグ&ドロップできない問題に遭遇しました.一応解決したので,メモしておきます.

DIV要素を水平にドラッグ&ドロップできるようにしたつもりでしたが,一旦ドロップして再度ドラッグしようとすると,そうならずに半透明になった要素がマウスポインタの動きに合わせて追随してくるという問題にFirefoxで遭遇しました.つまり,次の図のような感じです.


結局,下記のようにCSSを変更すると期待通りの動作をするようになりました.

.scroll_bar-handle {
  position: absolute;
  height: 16px;
  top: 0px;
  background-color: red;
  -moz-user-select: none; /* これを追加 */
}


Firefoxでは,要素に対して操作が行われると,それが選択対象となるようです.続けて選択対象の要素に対して操作を加えようとすると,その分身が表示されます.そして,本体に加えられた操作がその分身に対して適用されるようになるみたいです.その設定を無効にするのが,CSSに新たに加えた1行となります.他のブラウザ(といってもChromeだけですが)では,当初から期待通りに動作していたので,この問題(その仕様を知らなかった僕に問題があるのですが)はFirefoxに固有のもののようです.

2010年9月2日木曜日

印刷時にWebページ内の特定の要素を出力されないようにする方法

印刷時にWebページ内の特定の要素を出力されないようにする方法をメモしておきます.

test.html
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>

test.css
@media print {
    #B {display: none;}
}


上記のtest.htmlをブラウザで表示すると,AとBが上下に並んで表示されます.このページの印刷プレビューを表示すると,Aのみが表示されます.CSSの@mediaルールを使うと,そういうことができます.

2008年12月28日日曜日

CSSで要素を表示したり非表示にしたりする方法

CSSで要素を非表示にする方法をメモしておきます.

display プロパティに none を指定すると,要素は完全に表示されなくなります.

<span style="{display: none;}">要素</span>を非表示

visibility プロパティに hidden を指定すると,要素は表示されませんが,表示領域は確保されます.

<span style="{visibility: hidden;}">要素</span>を非表示

[1] スタイルシート CSS / ボックス / 表示・非表示を指定する
http://www.tagindex.com/stylesheet/box/visibility.html

2008年6月18日水曜日

HTMLにおけるtitle要素の位置

title要素は,MIME型と文字コードを指定するmeta要素の後に記述する必要があるとのことです.次のような感じです.知らなかった...

<html>
<head>
<meta meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>直前のmeta要素以降に記さないと文字化けする可能性があるんだってさ</title>
</head>
<body>...</body>
</html>


[1] エンジニアのためのWebデザイン教室 第4回 Webデザインの基本を学ぶための環境について
http://itpro.nikkeibp.co.jp/article/COLUMN/20080221/294371/?ST=swd-design

2007年12月30日日曜日

Webページの自動更新

Webページを自動更新するには次に記すmeta要素を使う.

<meta equiv="Refresh" content="1;URL=hogehoge">

http://www.htmq.com/html/meta.shtml