2015年04月23日

固定ヘッダでposition:fixedとabsoluteでabsoluteが上にきちゃって困った・・・の対応策

たぶん、固定ヘッダにしてみたけど、中のabsoluteに指定しているパーツが固定ヘッダの上にきてしまって、思った通りの動作にならない。。。納期も足りないのにWebに解決策が載ってない!困った〜・・・
と、いう感じでこのページをご覧になってませんか?
あ、違いますか。すいません。
昨日の私がそんな感じでしたので。。。

固定ヘッダの設定は最後にして、とりあえずお客さんに全体を見てもらわなければ!
と思ってコーディングしたのに、最後に設定した固定ヘッダがトラブルの原因で納期ピーンチ!になりました。

固定ヘッダとは?
固定ヘッダは、最近流行りのスクロールしても上下にいつも同じメニューが表示されているもので、CSSの設定としては
position:fixed;
で該当エリアを設定します。
これは、jQueryで設定する場合でも、何ピクセル下ったら該当エリアをposition:fixed;にするというスクリプトを書いているので、CSS的には結局同じなんですよね。

固定ヘッダの問題点
固定ヘッダにはいろいろ問題があります。
今まで引っかかったのとしては、
・アンカー指定時に、固定ヘッダ分位置がずれてしまう。
・Youtube動画を貼り付けるとヘッダの上にきてしまう。
などなど。
アンカー指定時に固定ヘッダ分ずれてしまう問題は、JSで解決すると外部リンクからの参照時に動作しないという問題もあります。
まぁそれぞれ他のサイトで言及されていますので、ここでは別の問題
・absoluteで指定したパーツがヘッダの上にきてしまう
を取り上げたいと思います。

問題点
position:absoluteで指定したものがfixedの上にくるというだけで、「固定ヘッダの問題」というわけではありませんのでお間違えなく。
z-index指定してもダメ〜
このあたりはCSSの問題で、解説されているサイトもいくつかあります。
<参考>
要素の重なりについて本気出して考えてみた(z-indexとか何とかとか)

ですが、今知りたいのは、目の前の!納期が迫った今!あんまり手直ししなくても固定ヘッダの下にabsoluteがくる方法!を知りたいんですよね!
私も知りたいです(え
いや、正直万能の解決策はないようです。(あったら教えてください!)

解決案!
いくつかサイトを巡って、正直私もあまりpositionと親要素子要素とz-indexをきちんと理解したわけではないのですが、私なりの結論としては

(1) fixedとabsoluteの親要素、子要素の関係を見直し、それぞれ適切なpositionを指定する
(上部リンクのサイトなどを参考にしてください)
ちなみに、下に潜り込む要素全体のz-indexを-1に指定するとちゃんと潜り込むと思います。ただし、下の要素のリンクも効かなくなるという落とし穴。
ただ・・・固定ヘッダをイメージすると、どうしてもヘッダ部分と記事部分は良くて同層、間違っても固定ヘッダを親要素にはできないですよね。。。

(2) absoluteに指定しているパーツを他のpositionやdisplayに指定し直す
私はこれで納期を間に合わせました。
デザインにもよりますが、例えばfloatにして、ネガティブマージンなどで逃げる手はあると思います。
全体をabsoluteを使わない方針で行けば、固定ヘッダのみfixedで問題ないはず。

(3) 正直上2つしか思いつかなかったんですが、今思いついた代案として、できるかどうかわからないのですが、固定ヘッダをabsoluteに指定して、jQueryなどでスクロール量によって固定ヘッダのtopの座標を変えるってのはどうでしょう。昔はやったスクロールしてもついてくるサイドリストみたいな感じですかね。

そんなわけで、納期迫ってますよ!ほらほら急いで!
posted by BigMoonEz at 11:57 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2009年07月20日

Firefoxでスタイルシートが利かない

お客さんと打ち合わせ中、実績ということでいろいろと今まで作ったサイトを見せていたら、すごいガタガタに崩れたサイトが!

Noooooooooooooooooooooooooo!!

その場は取り繕ったものの、後から直そうと思っても、何が原因かよくわからない。どうもスタイルシートがきちんと適用されていないようなので、Google先生に聞いてみたところ、
<meta http-equiv="Content-Style-Type" content="text/css">
で、contentがきちんとtext/cssに宣言されていないと適用されないと書いてあるブログを教えてくれましたが、きちんとなってるしなぁ・・・

ヘッダ部分を見直したり、大文字小文字がおかしくなると書かれていたサイトもあったので試してみたけど一向によくならない。
作ったときはきちんと表示されていたんだから、最近直したのは・・・
と考えていたら、そういやプログラムの文字コードを直したんだっけ、と思って、CSSの一番上に書いてあった

@charset "euc";

@charset "euc-jp";

に直したらあっさり直りましたとさ。
どこかのサイトに@charset "euc";
って書いてあったから信用したのになぁ。。。きちんと検証しなかった自分に反省。
しかし、IEのあいまいでもきちんと表示してしまういいかげんさとFirefoxの厳格さ、なんとかなんないのかなぁ。。。
ブラウザは動作を統一して欲しいもんだっ!
posted by BigMoonEz at 17:43 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2009年04月29日

iframeでスクロールバーの色が変わらない

お客さんから「更新情報はiframeで・・・・」と指定されることがよくありまして、iframe使うよりもdivでoverflowを使うほうがSEO的に効果がありますよ、という説明をするのですが、それでもやはりiframeを指定されるお客さんがいらっしゃいまして、仕方がないのでiframeで設定したのですが、スクロールバーの色が変わらなくて困ったことがありました。
スクロールバーの色は、
scrollbar-base-color
scrollbar-face-color
scrollbar-arrow-color
scrollbar-shadow-color
scrollbar-darkshadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-track-color
など細かく設定できますが、効果があるのはIEとOperaのみで他のブラウザでは表示しません。

いくつかポイントがありますが、iframeでページ中のスクロール領域に色を設定するには
・子Window側に設定する
・DOCTYPEを宣言している場合は、body,html内に記述する
・幅を縮めてもIE6で横のスクロールバーが出てしまう場合は、
 html{overflow-y: scroll}
 をいれてみる
などに注意する必要があります。
posted by BigMoonEz at 18:22 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2007年06月26日

超カンタンなプルダウンメニュー(でも超適当)

メニューにマウスをあてたときにサブメニューが表示される・・・というプルダウンメニューをCSSでできないかなーと思ってやってみました。
ネットで調べたら結構いろいろあったんですが、どれも結構ソースが長くて理解するのがまず面倒そう。
だから、オンマウスの処理はJavaScriptで、表示部分はCSSで、と分担し、なるべくソースを短くできないかなーと試行錯誤しました。

で、仕上がり。

【JavaScript部(<head>〜</head>に記述)】
<script language="JavaScript">
<!--
flg = false;
function pullDownMenu() {
if(flg) pdm.style.visibility = "hidden";
else pdm.style.visibility = "visible";
flg = !flg;
}
//-->
</script>

【HTML部(<body>〜</body>に記述)】
<a href="#" onmouseover="javaScript:pullDownMenu()">リンク</a>

<div id="pdm" onmouseout="javaScript:pullDownMenu()">
<A href="http://tyokotto.com/">ちょこっとアルバム</a><br />
<A href="http://tyokob.com">ちょこっとアルバムベビー</a><br />
</div>

【CSS部(外部ファイルで定義する場合)】
#pdm{
visibility: hidden;
position:absolute;
}


※CSS部分はお使いの環境にあわせて、topやleftで位置を決めてください。背景にpng画像なんか使うと半透明のメニューも作成できますわーい(嬉しい顔)
※動作的には、リンク部にマウスをあてるとサブメニューが表示され、サブメニューからマウスを離すとメニューが消えます。
サブメニューに一度マウスをあてないと、表示が消えずにそのまま残ります。
※ポイントは、サブメニューを囲んでいるDIVに対してonmouseoutを設定しているところで、一応IEとOperaで動作の確認を行いましたが、このような使いかたをしていいものかどうかよくわかりません。ごめんなさい。
一応、使用は自己責任で^^;
posted by BigMoonEz at 16:29 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2007年05月07日

カーソルの形を変える

その要素内にあるときに、カーソルの形状を変化させることができます。
ブラウザによって見え方が異なります。
オリジナルの画像を指定することもできますが、IEのみ対応していますのでここではモダンブラウザに対応しているカーソルのみご紹介します。

【デフォルトのカーソル】
cursor: default
この範囲はデフォルトのカーソル


【リンクのカーソル】
cursor: pointer
この範囲はリンク用のカーソル


【処理中のカーソル】
cursor: wait
この範囲は処理中のカーソル


【ヘルプのカーソル】
cursor: help
この範囲はヘルプ用のカーソル


【移動のカーソル】
cursor: move
この範囲は移動用のカーソル


【テキストのカーソル】
cursor: text
この範囲はテキストのカーソル


【十字のカーソル】
cursor: crosshair
この範囲は十字のカーソル


【リサイズ用のカーソル(上方向)】
cursor: n-resize
この範囲はリサイズ用のカーソル


【リサイズ用のカーソル(下方向)】
cursor: s-resize
この範囲はリサイズ用のカーソル


【リサイズ用のカーソル(右方向)】
cursor: e-resize
この範囲はリサイズ用のカーソル


【リサイズ用のカーソル(左方向)】
cursor: w-resize
この範囲はリサイズ用のカーソル


【リサイズ用のカーソル(右上方向)】
cursor: ne-resize
この範囲はリサイズ用のカーソル


【リサイズ用のカーソル(左上方向)】
cursor: nw-resize
この範囲はリサイズ用のカーソル


【リサイズ用のカーソル(右下方向)】
cursor: se-resize
この範囲はリサイズ用のカーソル


【リサイズ用のカーソル(左下方向)】
cursor: sw-resize
この範囲はリサイズ用のカーソル


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

2007年04月06日

borderで見出しのデザインをする

borderを使って、見出しをデザインしてみましょう。
よくあるのが、
[css]
.h1{
border-left: 20px solid #7bf;
padding-left:15px;
}

[html]
<h1 class="h1">見出し</h1>


などとして、デザインする方法です。
[実行結果]

見出し



solidは実線を引きますが、点線のdotted、破線のdashed、二重線のdouble、へこんだ溝のようなgroove、凸型のridge、エンボスのinsert、outsideなどを指定できます。
これらをうまく使うことで上記の表示も2色で表示することができます。

例えば、
border-left: 5px ridge #7bf;


[実行結果]

見出し



border-left: 5px double #7bf;


[実行結果]

見出し



border-left: 5px outset #7bf;


[実行結果]

見出し

posted by BigMoonEz at 10:17 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2007年04月05日

ブロック要素のセンタリング

タグのalign要素はすでに推奨ではなく、将来的にはなくなる方向です。
テキストのセンタリングは
<p align="center">本文の文字</p>

ではなく、
<p style="text-align:center">本文の文字</p>

が、正しい記述になります。

ところで、pやdivなどのブロック要素をセンタリングしたい場合、text-alignでセンタリングはできません。
WindowsIEでは、センタリングされますが、その他のブラウザではデフォルトの左寄せになります。
ブロック要素をセンタリングしたい場合は、内側のブロックのほうで、横のmarginをautoに指定します。

<div>
<table style="margin:0 auto">
<tr><td>

</td></tr>
</table>
</div>
posted by BigMoonEz at 10:06 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2007年03月02日

onMouseで画像を変えられるようにする

画像にマウスをあてたときに画像が変更されるようにする場合はJavaScriptで変更するのが一般的ですが、画像をキャッシュさせたり画像を複数用意する、ソースが長くなるなどの問題があります。
ここではスタイルシートで変更させる方法をご紹介します。

スタイルシートで変更させる場合は、画像をひとつにまとめられる、ソースがきれいになる反面、スタイルシートに対応していない環境では表示されないといった問題もあります。

CSSソース
#head{
text-indent:-9999px;
}

#head a:hover{
background-position: 0px 17px;
}

#head a{
background-position: 0px 0px;
height:17px;
display:block;
text-decoration:none;
}

a.home {
background-image:url(./image/home_b.gif);
width:41px;
}

ここでは、"head"というIDの中のリンクについての定義をしています。
aタグのdisplay要素がblockになっていることに注意してください。

用意した画像
home

上半分が通常表示させる部分、下半分がonMouse時に表示される部分です。
この画像は高さが34pixelなので、スタイルシートではheightを17pxにしています。

HTMLのソース
<div id="head">
<a href="../index.html" title="ホーム" class="home">ホーム</a>
</div>

classで先ほどスタイルシートで指定したhomeを指定します。このようにリンクだけ記述し、実際の画像などはソースには記述しません。

使用する場合の注意点
背景画像として扱っているので、IEなど印刷時に背景画像が標準で印刷されないブラウザでは、印刷プレビュー時にメニューが表示されなくなります。メニュー自体をdisplay:noneで印刷されないようにするなどの工夫が必要になります。
印刷時と画面表示時の表示方法を分けるのは、こちらに解説してありますので参考にしてください。
HTMLソースのタグを閉じ忘れると画像自体が表示されません。
posted by BigMoonEz at 10:48 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2007年02月26日

hrタグで1pxの線を描く

hrタグを入れたときに1pxの区切り線を表示させたい!というとき。hrタグは標準で2pxの高さを取ります。
<hr size="1">
とすれば1pxになりますが、そんなソースは美しくないっっ!というアナタに。
hr{
border-top:1px solid #111;
border-bottom:none;
border-left:none;
border-right:none;
color:#fff;
}

でOKですっ!
この場合は、solidでなくdottedを設定すればドット線にすることもできます。
でも、NNではフツーに区切り線が引かれますので、ご注意ください。

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

2007年02月22日

印刷用とモニタ表示用のスタイルシートを区別する

各メディア用にスタイルシートの適用をわけることができます。

@media以降に対象となるメディアを指定し、それに続いて適用するスタイルシートを { 〜 } の間に記述します。
@media print {
body{color:#000;}
}

@media screen{
body{color:#fc0}
}

のように記述します。

よく印刷時にサイドメニューなどが不要となる場合に、
@media print {
#side_menu{ display:none; }
#main_contents{ width:100%; }
}

としてメインコンテンツのwidthを100%に設定して必要なコンテンツだけ印刷させるといった手法が使われます。

注意点

  1. 1つのCSSファイルにいくつもmedia用の記述するとわかりにくくなりますので、外部ファイルでmedia別のファイルを用意し、別々に読み込ませたほうが後々管理が楽になります。
    <head>〜</head>内に
    <link rel="stylesheet" href="common.css" type="text/css" />
    <link rel="stylesheet" href="print.css" type="text/css" media="print" />
    のように分けて記述

  2. 上記のように分けて表示すると、前に読み込まれた設定が有効になり、思ったように表示しない場合があります。
    たとえば、印刷のときだけ表示したい項目があるとすると、画面表示用のcommon.cssではdisplay:noneと指定すると、print.cssで、明確に指示をしていないとdisplay:noneのまま引き継がれてしまいます。print.cssではdisplay:blockなどの指定をする必要があります。

  3. FrontPageは(DreamWeaverなどと比べると)比較的スタイルシートの適用がされやすいHTMLエディタですが、@mediaには対応していません(FrontPage2000の場合)。後に記述したほうが有効になってしまいますので、印刷用の記述を先に行い、画面表示用の記述はあとで行うほうがいいです。

  4. 印刷用の記述はなかなか確認しながら作業を行うのが大変ですので、画面用の記述を別ファイルに保存しておき、印刷用の記述を画面表示用として作業してからその記述を印刷用にするのが良いかと思います。


この他にも

screen・・・モニタなどコンピュータスクリーン用
projection・・・プロジェクタ用
handheld・・・画面に制限のある携帯デバイス等用
print・・・印刷プレビュー、および印刷物等用
embossed・・・点字印刷用
speech・・・音声ブラウザ等用
tv・・・テレビ型(解像度、色数に制限)用
tty・・・画素幅pixelの制限をもったテレタイプなどの携帯デバイスなど用
all・・・すべてのデバイス


などの指定方法があります。

posted by BigMoonEz at 10:09 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2007年02月16日

記事表示部分のセンタリングがうまくいかないとき

記事部分の表示幅が固定であるとき、ブラウザの幅に対して記事部分をセンターにあわせたいとき、XHTML+CSSでは・・・
<<HTML部分>>
<body>
<div id="wrapper">
本文記事
</div>
</body>

<<CSS部分>>
body{
text-align:center;
}

#wrapper{
width : 860px;
height : auto;
text-align:left;
}


でよさそうなもんですが、これだとIEでは問題ないですが、FirefoxやOperaなどのブラウザでは左寄せのままでセンタリングしてくれません。
センタリングしたい場合は#wrapperに
margin:0 auto;

を追加することでFirefoxやOperaでもセンタリングされます。
※もちろん、上下のmarginが必要だったら入力してください。大切なのは左右のmarginがautoであることです。

スタイルシートに関しては、スタイルシートサンプルブックがお勧めです。私はこれで勉強しました。。。
posted by BigMoonEz at 10:08 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2007年01月29日

absoluteを使って自由に配置する

絶対配置であるabsoluteを使うと、HTMLの位置に拠らずページ中のどこにでも自由に配置することができます。
例えば、http://www.barque.jp/tyoko/ このページの右上にある
「>> 会社概要 >> 特定商取引法に基づく表記 >> ログイン」部分は、absoluteを使うと、HTMLの一番下に記述することも可能になります。
このページの場合は、

position:absolute;
top:20px;
left:650px;
display:block;
width:350px;
height:22px;


と記述しています。
ところが、これが左に寄せているページなのでleftを650pxのように固定できますが、コンテンツを中央に寄せている場合やリキッドデザインのページの場合はleftの指定に注意が必要です。
具体的には中央寄せのコンテンツの場合は

left: 50%;
margin-left:100px;


のように指定してページの半分の位置からどのくらい左右に配置するかを指定します。
リキッドデザインの場合は、上記方法か右寄せにしてmarginを指定すればOKです。
posted by BigMoonEz at 16:10 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2007年01月24日

リンクの色が変わらない〜!の怪

リンクにカラーを設定する場合、4つの状態に対して色の指定やアンダーラインの有無、背景などを指定できます。

:link・・・まだ見ていないリンク先の場合
:visited・・・すでに見たリンク先の場合
:hover・・・カーソルがリンクの上にある場合
:active・・・マウスボタンを押している状態の場合


通常、aタグに対して適用させますが、もちろんID、classによる指定も可能です。

a:link{
color:#ff0000;
background:#ffffff;
text-decoration: none;
}


のように使用しますが、1ページの中でIDやclassを使って複数リンクのカラーを指定したい場合があります。
その場合は、上記の

link
visited
hover
active

の順に指定しないと色がきちんと適用されない、アンダーラインの表示がおかしいなどの動作不良になる場合がありますのでご注意を。

CSSといったらやっぱり・・・
posted by BigMoonEz at 09:40 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2006年10月05日

意外とハマる!?外部スタイルシートで画像を指定する

スタイルシートで背景画像なんかを指定しちゃったりします。

.img_back{
background:url(./image/back.gif);
}


なんて書いたりするわけですが、意外とハマるのが相対パスで画像を指定したりすると、HTMLから見た画像へのパスを書いちゃったりして画像が表示されなくて悩むことがあります。

例えば、

index.html
common.css
(imageディレクトリ)-back.gif


back.gifがimageディレクトリの中にある場合は、

.img_back{
background:url(./image/back.gif);
}


でいいわけですが、

(imageディレクトリ)-index.html
common.css
(imageディレクトリ)-back.gif


同じくimageディレクトリにあるindex.htmlが一つ上のディレクトリにあるcommon.cssを参照してback.gifを指定するとき、なんとなく

.img_back{
background:url(../image/back.gif);
}


と書いてしまいがちです。
まぁDreamWeaverとかHTML生成ツールを使っていればこういう間違いはないんでしょうけど、私はもっぱら手書き派なもので・・・

要するに、cssファイルから見た画像(に限らないですけど)へのパスを記述すればOKです。
posted by BigMoonEz at 23:06 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする