人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSで表現する「ちょっと便利な」もしくは「かっこいい」小技、大技を教えてください。特に、「もしかしたら、日本で知っているの自分だけじゃない?」のような。

例えば(といっても、有名どころですが)、
Zoom Layout
http://2xup.org/log/2005/07/29-1835
クロスブラウザでルビを振る
http://blog.livedoor.jp/dankogai/archives/50514780.html
のような感じです。

単なるCSS hackのやり方ではなく、それに+αでぜひお願いします。

●質問者: あらた
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS Zoom クロスブラウザ 表現
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● ElekiBrain
●23ポイント

自分で作ったJavascript+CSSによるコンテンツ切り替えです。(小技かなぁ)

長々説明するよりも、実際に動かしてみることをお勧めします。

なお、<>は半角に変換してご使用ください。

--------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<meta http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS" />

<title>zIndexChanger</title>

<script type="text/javascript" language="javascript">

//z-indexの最上段の値を入力。今回は3つしかコンテンツが存在しないため、

//max_indexNumberの値は3になる。仮にコンテンツを99個用意する場合はmax_indexNumberは99となる。

max_indexNumber = 3;

function Change_Contents(index_number){

//max_indexNumberに更に1インデックス分上乗せする。

//次回関数が呼び出された時は既に1プラスされた状態からスタートするため、

//結果どのコンテンツを選んでも最上段にセットされる。

max_indexNumber += 1;

document.getElementById("box" + index_number).style.zIndex = max_indexNumber;

}

</script>

<style type="text/css">

a{

text-decoration:none;

}

a:hover{

background-color:#DDDDFF;

display:block;

}

a:visited,a:link{

color:#0000FF;

}

b#title{

font-family:"MS Pゴシック","osaka";

display:block;

line-height:50px;

}

b.red{

color:#FF0000;

}

b.blue{

color:#BBBBFF;

}

#honbun{

font-family:"MS Pゴシック","osaka";

font-size:13px;

line-height:20px;

/* ↓このように指定することで、文末を自動で揃えることができる */

text-align:justify;

text-justify:inter-ideograph;

}

#main_menu{

position:absolute;

top:100px;

left:-20px;

width:400px;

font-family:"MS Pゴシック","osaka";

font-size:20px;

font-weight:bold;

text-align:right;

border:solid 1px;

border-top:none;

}

#main_menu .contents{

border-top:solid 1px;

border-left:solid 0px;

border-right:solid 0px;

border-bottom:solid 0px;

text-decoration:none;

padding:10px;

}

#box1{

position:absolute;

top:100px;

left:450px;

width:400px;

height:300px;

border:solid 1px;

background-color:#FFFFFF;

padding:10px;

overflow:scroll;

z-index:3;

}

#box2{

position:absolute;

top:100px;

left:450px;

width:400px;

height:300px;

border:solid 1px;

background-color:#FFFFFF;

padding:10px;

overflow:scroll;

z-index:2;

}

#box3{

position:absolute;

top:100px;

left:450px;

width:400px;

height:300px;

border:solid 1px;

background-color:#FFFFFF;

padding:10px;

overflow:scroll;

z-index:1;

}

</style>

</head>

<body>

<!-- 以下はクリックによってスクリプトを動作させるメニュー -->

<div id="main_menu">

<a href="#box1_top"><div class="contents" onmousedown = "Change_Contents(1)">タイトル01</div></a>

<a href="#box2_top"><div class="contents" onmousedown = "Change_Contents(2)">タイトル02</div></a>

<a href="#box3_top"><div class="contents" onmousedown = "Change_Contents(3)">タイトル03</div></a>

</div>


<!-- 以下は切り替えるコンテンツの中身 -->

<div id="box1">

<a name="box1_top"></a>

<b id="title">タイトル01</b>

<div id="honbun">

本文(長文を挿入)

</div>

</div>

<div id="box2">

<a name="box2_top"></a>

<b id="title">タイトル02</b>

<div id="honbun">

本文(長文を挿入)

</div>

</div>

<div id="box3">

<a name="box3_top" /></a>

<b id="title">タイトル03</b>

<div id="honbun">

本文(長文を挿入)

</div>

</div>

</body>

</html>

--------------------------------------------------------

どうでしょうか? なかなかやっている人はいないとおもいますが…(多分)。

◎質問者からの返答

これ、面白いですね!!!わざわざ、コードまでのせていただいて、ありがとうございます。

新着情報→詳細とか、名前→プロフィールとか、やろうと思えば、ブログのタイトル→本文とか。

応用いろいろできそうですね。

ありがとうございます!


2 ● ElekiBrain
●23ポイント

※小技集です(全部自作ですのでショボイ可能性大……)


Gecko系のみ角丸がかかります

----------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS" />

<title>角丸四角形</title>

<style type="text/css">

div#mozrad{

position:absolute;

width:200px;

height:200px;

border:solid 0px;

background:#DDDDFF;

padding:15px;

?moz?border?radius:20px;

}

</style>

</head>

<body>

<div id="mozrad">

Mozilla系のみ角丸が適用されます

</div>

</body>

</html>


----------------------------------------------------


クロスブラウザに対応した文末を揃えた表記(意外とやってる人は少ないようです)。

<style type="text/css">

#test{

font-family:"MS Pゴシック";

font-size:13px;

line-height:20px;

margin:200px;

margin-top:20px;

text-align:justify;

text-justify:inter-ideograph;

}

</style>


---------------------------------------------------


クロスブラウザ対応の透過(透ける)表示です。

alphaLayer{

position:absolute;

top:50px;

left:300px;

width:200px;

height:200px;

padding:10px;

color:#FFFFFF;

background:#5555FF;

filter:alpha(opacity = 70);

opacity:0.7;

}


---------------------------------------------------


追随するメニューです(目新しいものではないかもしれません)。Javascriptよりの内容ですいません

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<meta http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS" />

<meta name="author" content="著作者" />

<meta name="discription" content="ドキュメント概要" />

<meta name="keywords" content="キーワード" />

<meta name="copyright" content="著作権" />

<link rel="stylesheet" type="text/css" href="CSS名.css" />

<title>Moveing Menu</title>

</head>

<script type="text/javascript" language="javascript">

var offsetTop = 10;

var navID = "moveMenu";

var nowY;

//移動用関数

function mv(){

//現在のスクロール位置を取得。

if(document.all){

nowY = document.documentElement.scrollTop;

}else{

nowY = self.pageYOffset;

}

//現在のスクロール位置に固定座標にしたい座標をセット。

nowY += offsetTop;

//メニューのブロックを移動。こちらはGekko系

if(document.getElementById){

//先ほどセットした座標にpxをプラスしてスタイルに適用。

document.getElementById(navID).style.top = nowY + "px";

//こちらはIE系

}else if(document.all){

//先ほどセットした座標にpxをプラスしてスタイルに適用。

document.all(navID).style.pixelTop = nowY;

}

}

</script>

<style type="text/css">

#moveMenu{

position:absolute;

width:150px;

}

#moveMenu #contents{

border:solid 1px;

width:150px;

padding:5px;

}

#moveMenu #maintitle{

border:solid 1px;

width:160px;

font-size:30px;

text-align:center;

}

#NullContents{

position:absolute;

left:200px;

}

</style>

<body onload="setInterval('mv()',1)">

<div id="moveMenu">

<div id="maintitle">Menu</div>

<div id="contents">インフォメーション</div>

<div id="contents">このサイトについて</div>

<div id="contents">コンテンツ紹介</div>

<div id="contents">ダウンロード</div>

</div>

<div id="NullContents">

※任意の長文を挿入...

</div>

</body>

</html>

---------------------------------------------------

(なお、?moz?border?radius:20px;の?部分は半角に修正してください『はてな』の独自表記のために全角表記となりますが、ご了承ください)

◎質問者からの返答

続けて、ありがとうございます。

文末を揃えるやつ、かなりいいですね。これも使い回しが効きそう。

それと、透過もかなりいい感じです。これで、写真ごとに透過のレイヤーをかけることもある程度は回避できそうです。

mozilaの角丸は知っていました。ただ、mozila系にだけ適用するのもどうかなと思いつつ、今まで使ってこなかったんですが、ブラウザで確認すると、角丸やっぱりいいですね。ie7に期待します。

最後のやつは、ちょうど何かのWeb系の雑誌で最近見ました。実装するとこんな感じなんですね。

蛇足ですが、メニューをコンテンツの高さによって、移動させる場合は、僕はこのサイトが好きです。確か、CSSオンリーのはず。

http://www.hicksdesign.co.uk/

ieには対応していませんが。。。

ありがとうございます!


3 ● YANOSHI
●22ポイント

昔試行錯誤して作ったものです(しょぼかったらすいません)

(一応メニューバーらしきものです)

?????????????????????(別ファイルに保存。ここではmenu.js)

//Text=表示するTextの配列, Link=表示するLinkの配列, Mozi=HTML, IsOver=マウスがメニューに乗っているか

var text,link,Mozi,IsOver;

//メニューにカーソルがのったときの処理

function Menu_Over(Menu_Name){

//id=メニューのid, id_bar=メニューバーのid

var id,id_bar;

id=document.getElementById(Menu_Name);

id_bar=document.getElementById("menubar");

//Menu_Numberの数ごとの処理

switch(Menu_Name){

case 'tips':

text = new Array("ファイル",

"aaa",

"bbb",

"ccc",

"ddd",

"eee");

link = new Array("http://www.yahoo.co.jp",

"http://aaa.aaa2",

"http://aaa.aaa3",

"http://aaa.aaa4",

"http://aaa.aaa5",

"http://aaa.aaa6");

break;

case 'kyodai':

text = new Array("123");

link = new Array("http://aaa.aaa");

break;

case 'program':

text = new Array("345",

"aaa",

"vvv");

link = new Array("http://aaa.aaa",

"http://aaa.aaa",

"http://aaa.aaa");

break;

case 'sample':

text = new Array("asc");

link = new Array("http://aaa.aaa");

break;

}

//ここからメニュー表示

//length=配列の数, i=カウント, menubar=menubarのID, top=表示するメニューバーのY座標, left=表示するメニューバーのX座標

var length,i,top,left;

length=text.length;

//HTML作成

Mozi="";

i=0;

while(i != length){

Mozi += '

'onmouseover=\'over();return true\'' +

'onmouseout=\'Text(\"\");out();return true\'>' +

text[i] +

'';

i++;

}

top = document.getElementById("MeinTable").offsetTop +

id.offsetTop +

document.getElementById("Menu_td").offsetTop +

4;

left = document.getElementById("MeinTable").offsetLeft +

id.offsetLeft +

document.getElementById("Menu_td").offsetLeft +

document.getElementById("Menu_td").offsetWidth -

10;

id_bar.style.top=top;

id_bar.style.left=left;

id_bar.style.visibility="visible";

id_bar.innerHTML=Mozi;

}



//メニュー非表示

function Menu_Close(){

document.getElementById("menubar").innerHTML="";

document.getElementById("menubar").style.left=0;

document.getElementById("menubar").style.top=0;

document.getElementById("menubar").style.visibility="hidden";

document.getElementById("menubar").style.width=0;

document.getElementById("menubar").style.height=0;

}

function out(){

document.getElementById("menubar").style.visibility="hidden";

IsOver=0;

}

//メニュー表示持続

function over(){

document.getElementById("menubar").style.visibility="visible";

IsOver=1;

}

//文字表示

function Text(Text){

defaultStatus=Text;

}



?????????????????????(HTMLファイル)

<html>

<head>

<title>testpage</title>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script src="menu.js" type="text/javascript"></script>

<style type="text/css">


.menu

{

background-color:Blue;

color:White;

padding-left:5px;

}





.menu_link

{

text-decoration: none;

font-weight:bold;

display:block;

padding-right:10px;

padding-left:10px;

padding-bottom:5px;

padding-top:5px;

color: White;

font-size:10.5pt;

width:205px;

background-color:#00a5ff;

border-bottom: solid 2px white;

}


.menu_link:hover

{

background-color: Blue;

}



.menubar

{

visibility:hidden;

Z-INDEX: 1000;

LEFT: 0px;

WIDTH: 0px;

POSITION: absolute;

top:0px;

left:0px;

border-top: solid 2px white;

}

.menubar a

{

padding-right: 10px;

display: block;

padding-left: 10px;

font-weight: bold;

font-size: 10.5pt;

padding-bottom: 5px;

width: 205px;

color: white;

padding-top: 5px;

border-right: solid 2px white;

border-bottom: white 2px solid;

border-left: solid 2px white;

background-color: #99cc99;

text-decoration: none;

}


.menubar a:hover

{

background-color: #356835;

}



</style>

</head>

<body bottomMargin="20" vLink="#ffffff" aLink="#ffffff" link="#ffffff">

<table id="MeinTable" style="WIDTH: 920px; HEIGHT: 676px" cellSpacing="1" cellPadding="1"

width="920" border="0">

<tr>

<td style="WIDTH: 205px" vAlign="top">

</td>

<td vAlign="top" align=right style="FONT-SIZE: 9pt;">

</td>

</tr>

<tr>

<td style="WIDTH: 205px" vAlign="top" colSpan="1" rowSpan="1" id="Menu_td">

<a class="menu_link"

onmouseover='Text("aaa");Menu_Close();return true'

onmouseout='Text("");return true'

href="http://www.yahoo.co.jp">aaa</a>

<a class="menu_link"

id="tips"

onmouseover='Text("bbb");Menu_Over("tips");return true'

onmouseout='Text("");return true'

href="http://www.yahoo.co.jp">bbb</a>

<a class="menu_link"

id="sample"

onmouseover='Text("ccc");Menu_Over("sample");return true'

onmouseout='Text("");return true'

href="http://www.yahoo.co.jp">ccc</a>

<a class="menu_link"

id="program"

onmouseover='Text("ddd");Menu_Over("program");return true'

onmouseout='Text("");return true'

href="http://www.yahoo.co.jp">ddd</a>

<a class="menu_link"

id="kyodai"

onmouseover='Text("eee");Menu_Over("kyodai");return true'

onmouseout='Text("");return true'

href="http://www.yahoo.co.jp">eee</a>

<a class="menu_link"

onmouseover='Text("fff");Menu_Close();return true'

onmouseout='Text("");return true'

href="http://www.yahoo.co.jp">fff</a>

<a class="menu_link"

onmouseover='Text("hhh");Menu_Close();return true'

onmouseout='Text("");return true'

href="http://www.yahoo.co.jp">hhh</a>

</td>

<td vAlign="top" colSpan="1" rowSpan="1" style="WIDTH: 715px" width="715">

<div class="menu"><strong>このホームページについて</strong></div>

</td>

</tr>

</table>

<div class="menubar" id="menubar"></div>

</body>

</html>

?????????????????????

なんとなくCSSが関係ない感じもしますが(汗)

応用するとこんな感じです

http://vb.program-yanoshi.net/

(長文すいません)

◎質問者からの返答

サイトを見てみましたが、もしかして中学生???いやはや、将来が恐ろしいですね。

これ、いいとは思うのですが、こういった表示なら、ulとliを入れ子にすることによって、結構簡単に出来るみたいです。

http://www.cssplay.co.uk/menus/index.html

このページの右下の「multi-level CSS only」なら、javascriptなしで、更にクロスブラウザのメニューを作れます。

自サイトもこの形式でやっていますが、今のところはモダンブラウザは問題なく表示されています。ただ、paddingあたりの空白がうまくブラウザ間によって、違いが出ちゃっていますが。

ありがとうございます。


4 ● dede-suke
●22ポイント

http://q.hatena.ne.jp/1152968941

※ダミー

JavaScriptを使わずCSSだけでポップアップを実現します。

IE、NN、Firefox、Operaで動作確認しました。

はっきりいってJavascript使った方が楽なので殆ど無意味の小技です(汗)

classがpopupbaseの要素がホバー状態になると、classがpopupの要素がポップアップされます。

説明下手なので、下のHTMLをコピペしてみてください。

<html>

<style type="text/css">

span.popup {

display:none;

}

span.popupbase:hover span.popup {

display:block;

background-color:#fff;

padding:0.1em 0.3em;

border:3px double #00f;

position:absolute;

top:40%;

left:35%;

right:35%;

bottom:40%;

width:30%;

height:20%;

}

</style>

<body>

<p>

<span class="popupbase">CSS<span class="popup">Cascading Style Sheetsの略。HTML文書の見た目を制御できる。</span></span>は面白い!

</p>

</body>

</html>

◎質問者からの返答

僕は、popup嫌いな人間ですから。これ、便利だと思いますよ。title属性やabbr要素では、説明できないくらい長い説明文を文章中に入れたいとか、そんな時には、popup使わずに、これで対応するとか。

あとは、無理やりかもしれませんけど、画像のサムネイルを置いておいて、でかい画像を表示したいとか(どうも、lightboxは表示はかっこいいけど、時間がかかるのが嫌なので)

どうも、ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ