CSSでヘッダ・フッタを固定してみる。IE6にも対応(いまさら?)。

2014年05月17日 正午の月齢:18.2  月名:寝待月  潮汐:中潮 月齢:18.2[寝待月] 潮汐:中潮 | 3年前 | 旧暦:2014年04月19日 | 仏滅
In デザイン | CSSでヘッダ・フッタを固定してみる。IE6にも対応(いまさら?)。 はコメントを受け付けていません。

この記事を読むのに必要な時間の目安: 13分ぐらい

最近の自分の中でのウェブデザインのワンパターン化(高さ100px程度のヘッダ、右メニュー2カラム。WordPressのテーマばかりいじっていたので。)を打破するべく、いろいろ考えてみた結果、ヘッダ・フッタを天地に固定してみようと考えました。他人の知恵を借りつつ、自分でいろいろ試してみると結構興味深いものがあったので、ちょっとまとめてみます。

まずは先人の知恵を覗いてお勉強。

サイドメニューの有無等によってCSSの記述に違いはあるものの、まぁだいたい想定内。これを元にベースとなるCSSとHTMLを書いてみました。まずはCSS。

body {
padding: 30px 0 30px 0;
overflow-y: scroll;
}

#header {
background-color: #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 30px;
}

#footer {
background-color: #000000;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}

#header p {
margin: 0px;
padding: 5px;
color: #FFFFFF;
}

#footer p {
margin: 0px;
padding: 5px;
text-align: center;
color: #FFFFFF;
}

それからHTML。

<body>

<div id="contents">
<h1>1</h1>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<h2>11</h2>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<h3>21</h3>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
</div>

<div id="header">
<p>ヘッダ固定のhtml&amp;cssサンプル</p>
</div>

<div id="footer">
<p>フッタ固定のhtml&amp;cssサンプル</p>
</div>

</body>

SEOにどれくらい効果があるかわかりませんが、ヘッダのdiv要素を下に置いてみました。これで十分、FirefoxやInternet Explorer8では表示されます。もちろん、ヘッダのdiv要素を上に配置しても同じように表示されます。ファイルにしたのがこれ。

で、ここからが本題みたいなものでして。実は上記の記述では、Internet Explorer6(IE6)で見たときにグチャグチャに表示されてしまいます。もう今さらIE6なんてどうでもいいよなーと思いながら、とりあえず対応してみたいと思います。参考になったのは次のサイト。

CSSハックでIE6用には別のCSSを適用してうまく表示できています。ところがよく見ると、ヘッダもフッタもコンテンツもdiv要素を3階層の入れ子にしていて、どうもそれが気になってしまうのです。できるだけシンプルにしたい・・・。そこでdivの入れ子は2階層にとどめて、CSSでコントロールできるかどうか試してみました。まずはHTML部分を2種類用意します。

<body>

<div id="contents_wrap">
<div id="contents">
<h1>1</h1>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<h2>11</h2>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<h3>21</h3>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
</div>
</div>

<div id="header">
<div id="head">
<p>ヘッダ固定のhtml&amp;cssサンプル</p>
</div>
</div>

<div id="footer">
<div id="foot">
<p>フッタ固定のhtml&amp;cssサンプル</p>
</div>
</div>

</body>

これがヘッダを下に持ってきて、SEOに効くかもしれない版。次はヘッダをコンテンツの上に置いた普通っぽい版。

<body>

<div id="header">
<div id="head">
<p>ヘッダ固定のhtml&amp;cssサンプル</p>
</div>
</div>

<div id="contents_wrap">
<div id="contents">
<h1>1</h1>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<h2>11</h2>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<h3>21</h3>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
</div>
</div>

<div id="footer">
<div id="foot">
<p>フッタ固定のhtml&amp;cssサンプル</p>
</div>
</div>

</body>

こんな感じで、ヘッダもフッタもコンテンツを設定します。div要素contents_wrapは、IE6が使います。次にCSSを2種類用意しました。1つ目はIE6非対応版。

body {
padding: 30px 0 30px 0;
overflow-y: scroll;
}

#header {
background-color: #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 30px;
}

#footer {
background-color: #000000;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}

#header p {
margin: 0px;
padding: 5px;
color: #FFFFFF;
}

#footer p {
margin: 0px;
padding: 5px;
text-align: center;
color: #FFFFFF;
}

それからIE6対応版。

body {
margin: 0;
padding: 0;
}

#header {
position: fixed;
top: 0;
width: 100%;
}

#head {
background-color: #000000;
height: 30px;
}

#contents {
overflow: auto;
margin: 0 auto;
padding: 38px 8px 38px 8px;
}

#footer {
position: fixed;
bottom: 0;
width: 100%;
}

#foot {
background-color: #000000;
height: 30px;
}

#header p {
margin: 0px;
padding: 5px;
color: #FFFFFF;
}

#footer p {
margin: 0px;
padding: 5px;
text-align: center;
color: #FFFFFF;
}

/* for IE6 */
html, body {
_height: 100%;
_overflow: hidden;
}

#header, #footer {
_position: absolute;
_margin-right: 17px; /* IE6 scroll bar space */
}

#head, #foot {
_margin-right: 17px; /* IE6 scroll bar space */
}

#contents_wrap {
_width: 100%;
_height: 100%;
_overflow: auto;
}

この2つのHTMLと2つのCSSで4パターンのファイルを作ってみました。CSSの値等はなるべくどのファイルも同じように表示されるようにしてみました。

いかがでしょうか。Firefox12とIE8で確認したところ、どれも同じように表示されました(我が家の環境では)。少なくともぐちゃぐちゃでわけがわからないということはないと思います。さて、IE6非対応のファイルがどのように表示されるのかIE6があれば試してほしいのですが、もうIE6なんて断捨離執行済みの人のためにスクリーンショットを載せておきますネ。

non-ie6 non-ie6_seo

あちゃー。1つめの画像が「ヘッダ・フッタ固定のhtml&cssサンプル(IE6非対応・ヘッダ上に配置)」で次が「ヘッダ・フッタ固定のhtml&cssサンプル(IE6非対応・ヘッダ下に配置)」なのですが、どちらもスクロールに対してヘッダ・フッタが固定されていないし、コンテンツ部分のスクロールバーが2重になっているし、ひどいもんです。「乱れ初めにし我ならなくに」って感じ(?)ですかね。

div要素を入れ子にしなくてもできないかなーといろいろ試してみたのですが、今のところこれが精一杯です。でもIE6はもう対応しなくてもいいんじゃないかなって改めて思いましたー。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

WordPressテーマの配色と初音ミクカラーパレットの関係

2014年03月30日 正午の月齢:29.2  月名:月隠  潮汐:大潮 月齢:29.2[月隠] 潮汐:大潮 | 3年前 | 旧暦:2014年02月30日 | 先勝
In デザイン | WordPressテーマの配色と初音ミクカラーパレットの関係 はコメントを受け付けていません。

この記事を読むのに必要な時間の目安: 3分ぐらい

2週間くらい前に変更したWordPress自作テーマ。今回のテーマに使った配色をカラーパレットにしてみました。

susu03_7color

左から順に、

  • #333333 (51,51,51)
  • #666666 (102,102,102)
  • #F8F8F8 (248,248,248)
  • #FFFF99 (255,255,153)
  • #99CCCC (153,204,204)
  • #00CCCC (0,204,204)
  • #FF0099 (255,0,153)

です。

この他にも、bodyの基本背景色として#FFFFFFなどいろいろと設定はしているのですが、7色に限定するなら上記のコードになるかな、って思います。

さて、この色設定に関して参考にしたのが、初音ミクのカラーパレット。

miku_7color

左から順に、

  • #373B3E (55,59,62)
  • #BEC8D1 (190,200,209)
  • #FFFEEC (255,254,236)
  • #C3E5E7 (195,229,231)
  • #86CECB (134,206,203)
  • #137A7F (19,122,127)
  • #E12885 (225,40,233)

となっています。

もちろんこの色は、実際に使われている画像から抽出されたものなので間違っているわけではないのですが、このまま使ってしまうと全体的にちょっと緑がキツい感じ。なので薄い黄色(#FFFF99)を入れてみました。

初音ミクってよく「緑髪」なんて言われますが、緑色か水色かどっちだ? ということで意見が分かれるみたい。でも、いわゆる緑ということは考えられなくて、個人的には水色に近い気がします。波長で表現するなら500nmくらいかな。本当に緑色と青色の中間。

実際に分析してみると、R:G:Bが1:2:2くらいで、ウェブセーフカラーで最も近いのは#66CCCC (102,204,204)あたりのようです。実際にはグラデーションがかかっていたり、使われる面積によって感じ方が変わったりして、何色かわからないですケド。

●←#66CCCCってこんな色。

しかし、テーマにはあえて#66CCCCを使わず、広い面積(ヘッダー等)には#99CCCC、狭い面積(A要素の文字)には#00CCCCにして、周囲の色とのバランスを取りました。ヘッダーに#66CCCCだと、彩度が高くて。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

かなりカワイイ壁掛け時計を買いました。

2013年07月19日 正午の月齢:11.2  月名:十二日月  潮汐:中潮 月齢:11.2[十二日月] 潮汐:中潮 | 3年前 | 旧暦:2013年06月12日 | 大安
In デザイン | かなりカワイイ壁掛け時計を買いました。 はコメントを受け付けていません。

この記事を読むのに必要な時間の目安: 1分ぐらい

今まで1階にしか時計がなくて、2階にはどの部屋にも時計がなかったのです。唯一の時計はパソコンの右下の時計だけ・・・

「そろそろ各部屋に時計くらいないと」との思いで探し出したのがコレ。

chara-chips_ccu10r chara-chips_ccu10m chara-chips_ccu10y

その名は「Chara Chips(キャラチップス)」。カチカチ言わない連続秒針、優れたデザイン、それでいて1台891円。もう完璧です。かわいすぎる。

早速、壁に取り付けてみました。

ccu10r

限りなく白に近いピンクで彩られた女子部屋には、赤を。

ccu10y

ナチュラルカラーの男子部屋には、黄を。

ccu10m

白のクロスに灰色のタイルカーペットの大人部屋には、青を。

これでどの部屋にいても時刻を確認できるようになりましたー。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>