0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

邪悪なHTML

Posted at

太古の昔よりweb pageには定石があった。pageの左側にlink項目、右側に主要文書を配置するというものだ。これは操作性が悪過ぎて非常に不便だ。mouseを左右に大きく動かす羽目になるからだ。

単純な例
<!doctype html>
<head><title>T</title>
<style>
body,html{
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden
}
iframe{border:0;width:100%;height:100%}
.main{right:0;left:200px}
.menu{left:0;width:200px}
.main, .menu{overflow:auto;position:absolute;top:0;bottom:0}
</style>
<base target=main></head>
<div class=menu>menu
	<dl>
	<dt><a href="data:,AbC">abc</a>
	<dt><a href="data:,dEfG">def</a>
	<dt><a href="data:,HiJkLm">ghij</a>
	<dt><a href="data:,NoPqR">klmn</a>
	</dl>
</div>
<div class=main><iframe name=main></iframe></div>

以下のようにlink項目を右側に配置すれば楽ちんなのである。scroll量が多いほど効果は顕著。しかし昔からこういう形式は少数派という印象

<!doctype html>
<head><title>T</title>
<style>
body,html{
	height:100%;
	margin:0;
	padding:0
}
iframe{border:0;width:100%;height:100%}
.main{left:0;right:200px}
.menu{right:0;width:200px}
.main, .menu{overflow:auto;position:absolute;top:0;bottom:0}
</style>
<base target=main></head>
<div class=main><iframe name=main></iframe></div>
<div class=menu>menu
	<dl>
	<dt><a href="data:,AbC">abc</a>
	<dt><a href="data:,dEfG">def</a>
	<dt><a href="data:,HiJkLm">ghij</a>
	<dt><a href="data:,NoPqR">klmn</a>
	</dl>
</div>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?