タグ「スタイルシート」 の検索結果(1/1)

2008年12月 5日

ヘッダとメニューの余白解消

以前「テンプレート修正に伴う余白」「ヘッダ部分の拡大(副産物)」で書いたように、ヘッダ部分のバナー画像とその下の画像化したメニュー(ナビゲーション)の間に若干の余白が生じていました。
気にしないようにしてはいましたが、見るたびにそこに目がいくので、やはり修正することにしました。
かつて色々試してだめだったので、最後の手段として、マイナスのマージンを設定するしかないと思い、テンプレートのスタイルシート(ベーステーマ)を修正しました。
ところが、Safari、Firefox、Opraなどのブラウザではきちんと修正されて余白がなくなったものの、IEだけは余白がなくならず、メニューの上部が切れるという状態になってしまいました。
そこでやむを得ず、IEだけに適用させるハックを使いました。 修正されたスタイルシートは以下のとおりです。3行目のアンダーバーを付けたプロパティ"_margin"がIEだけに適用させる指定で、結局従来どおりです。
#navigation ul{
      margin: -14px 0 10px 0;
      _margin: 0 0 10px 0;
      list-style:none;
      text-indent: -9999px;
}

で、ここで終わるはずだったのですが、「念のため」とIE7で確認したところ(上述のIEはv.6なのでした)、メニューが上に移動しすぎてバナーと重なってしまっているのです。
普段あまりIE7でブラウズすることがないので気がつかなかったのですが、どうやらIE7では余白が他のブラウザにくらべて少なかったようです。
仕方がないのでマイナスの値を"-5px"にしてみたところ、まさにぴったり、でも当然他のブラウザでは、少なくなったとはいえ、依然として余白が残ったまま。
結局、最も多くの日本人が使っている(と思われる)ブラウザに合わせてレイアウトを調整した形になりました。

2008年11月 5日

メニューの画像化

ヘッダ下のメニューを画像にしてみました。
マウスがメニューに乗ったときには、やはりボタンの色が変わるようにしたい、となると通常javascriptを使いますが、今回はスタイルシートを使いました。
比較的知られている方法ですが、下のような1枚の大きな画像を用意します。Illustratorで作成しました。

この画像をメニューの各項目の背景画像として表示させるわけです。
もちろんそのままではすべての項目に同じメニュー(「ブログ記事」など)が表示されてしまうので、各項目にid属性で名前をつけます。(左から"navi01"、"navi02"・・・といった具合)
そして、スタイルシートで背景画像の位置をメニューボタンの幅(130ピクセル×25ピクセル)の分だけずらすことで各メニューボタンの表示とマウスオーバー時の画像差し替えを実現するのです。
スタイルシートは以下のとおりです。
/* Navigation ------------------------------------------------------------- */

#navigation ul{
      margin: 0 0 10px 0;
      list-style: none;
      text-indent: -9999px;
}
#navigation ul li{
      float: left;
      width: 130px;
      height: 25px;
}
#navigation ul li a{
      display: block;
      width: 130px;
      height: 25px;
      color: #33789c;
      text-decoration: none;
      background: url(images/menu2.gif) no-repeat;
} 
#navigation ul li#navi02 a{background-position: -130px 0;} 
#navigation ul li#navi03 a{background-position: -260px 0;} 
#navigation ul li#navi04 a{background-position: -390px 0;} 
#navigation ul li#navi05 a{background-position: -520px 0;} 
#navigation ul li#navi01 a:hover{background-position: 0 -25px;}
#navigation ul li#navi02 a:hover{background-position: -130px -25px;}
#navigation ul li#navi03 a:hover{background-position: -260px -25px;} 
#navigation ul li#navi04 a:hover{background-position: -390px -25px;} 
#navigation ul li#navi05 a:hover{background-position: -520px -25px;} 
というわけで、このブログも結構体裁が整ってきました。

2008年11月 3日

ヘッダ部分の拡大(副産物)

昨日の投稿「メニュー部分の修正」で、ヘッダとメニューの間の僅かな余白が消せない、と嘆きました。
試行錯誤を重ねるなかで、#header-contentの下のパディングの値を40px→50pxに変えたところ、余白は逆に広がったのですが(!)、ヘッダの画像で今まで隠れていた下の部分が表示されるようになりました。
まさに試行錯誤の副産物です。スタイルシートは以下のとおりです。

#header-content {
    width: 750px; 
    padding: 30px 0 50px 30px;
}
また、メニューの左端のボーダー表示はあきらめ、スタイルシートの"#navigation ul"の部分からborder-leftの指定を削除しました。近日中にここは画像に変えるので、こだわる意味はないわけです。

2008年11月 2日

メニュー部分の修正

ヘッダ下のメニューを単純なテキストからボタンのような外観に変えてみました。
いずれここは画像にするつもりですが、その前にスタイルシートのお勉強も兼ねてやってみたわけです。
一般的によく使われる方法だと思いますが、以下のように書き換えました。(結構長くなってしまいました。)
/* Navigation ------------------------------------------------------------- */
#navigation ul{
      margin: 0 0 10px 0;
      list-style: none;
      border-left: 1px solid #33789c;
}
#navigation ul li{
      float: left;
      width: 130px;
      height: auto;
      border-top: 1px solid #33789c;
      border-bottom: 1px solid #33789c;
      border-right: 1px solid #33789c;
      text-align: center;
      white-space: nowrap;
}
#navigation ul li a{
      display: block;
      background-color: #cff;
      color: #33789c;
      text-decoration: none;
}
#navigation ul li a:hover{
      background-color: #ff6;
      color: #f00;
} 
その後、#contentのmargin-topを20px→0としてヘッダとメニューの余白をなくし、同時に#alpha(左側の広いスペース)と#beta(右側の狭いスペース)についてmargin-topを20pxに設定して逆に余白を作りました。
また、メニューの各項目をfloat:leftで左寄せにしたので、回り込みを解除するために、#alphaに"clear:both"の指定を追加しました。
これで一応体裁は整ったかに見えますが、ヘッダとメニューの間に10〜15ピクセル程度の余白が残っていること、メニューの左端の青い線が表示されないことが課題(大げさ?)として残りました。
特に余白については、divタグを複雑に入れ子にし、スタイルシートが長くなると、指定場所を見つけるのが結構大変になります。
というわけで、不満ながら今日の作業は終わりとします。

2008年10月17日

スタイルシート適用成功

前回の投稿で、ナビゲーションとウェブページにスタイルシートが効いていない、と書いたのですが、先ほど確認したら、ちゃんと適用されていました。ブラウザの再読み込みがうまくいかなかったのかも知れません。
ナビゲーションに関するスタイルシートは以下のとおりです。
#navigation ul{
      margin: 0 0 10px 20px;
      list-style-type:none;
}
#navigation ul li{
      display: inline;
      padding-right:20px;
} 

ウェブページについては、リンク集は#link、プロフィールは#profileと名前をつけ、以下のように記述しました。

#link{
      line-height: 2em;
}
#link ol li{
      color: #33789c;
      font-weight: bold;
}
#link ul li{
      color: #333;
      font-weight: normal;
}

#profile dl{
      margin-left: 20px;
}
#profile dt{
      font-weight: bold;
      color:# 33789c;
}
#profile dd{
      margin-bottom: 10px;
      text-indent:1em;
}

何はともあれ、ほっとしています。

2008年10月 5日

テンプレート修正に伴う余白

昨日の投稿の最後に書いたとおり、今まで別ファイルだったスタイルシートをコピーし、テンプレートの中のスタイルシート(ベーステーマ)にペーストしました。
同時に、テンプレートにあるもうひとつのスタイルシート(メイン)で別ファイルを読み込む指定@import urlL(http://...../screen.css);という1行を削除しました。
背景の斜線やヘッダの画像がリンク切れとなって表示されなくなったので、パスを修正、ブラウザで確認すると・・・・。 Safari、Firefoxなど、問題なく従来どおり表示されましたが、Win版IE6(v.5以前は未確認)だけは右側に約50ピクセルの余白ができてしまいました。
これから原因を究明したいと思いますが、私の知識では見通しは厳しいでしょう。

2008年10月 4日

ヘッダとフッタの修正

Kim's Blog-2の制作に忙しく、こちらのブログがしばらく休止状態になってしまいました。
今回はヘッダの画像を変更するとともに、フッタについては画像を削除し、すっきりとさせてみました。
いくらかイメージが変わったと思います。
しかし、試行錯誤でカスタマイズを進めてきたということもあり、テンプレートの修正よりも、主に別ファイルのスタイルシートを修正するという変則的な形になってしまいました。
そのため、いちいちDreamweaverを立ち上げ、スタイルシートを開いて修正、アップロードという面倒な作業を強いられているのです。
ここまで書いてきてふと思いついたのですが、別ファイルになっているスタイルシートの中身を、テンプレートのスタイルシート(ベーステーマ)にそっくりコピペしたらどうなんでしょう。
これは次回に試してみることにします。

2008年8月19日

ヘッダとフッタの画像変更

ヘッダとフッタの背景画像を変更してみました。
スタイルシート(screen.css)は以下のとおりです(下線が変更部分)。

#header{
   width: auto;
   height: auto;
   background: url(banner2.jpg) no-repeat top left;
}
#footer { 
    background: url(footer2.jpg) no-repeat top left; 
}
上の記述で、ヘッダ画像の幅と高さの値をautoとしているのには理由があります。
実は当初、画像のサイズをそのままピクセルで指定したところ、何故かタイトル(Kim's Blog)とサブタイトルが表示されなくなってしまったので、やむなくこの形にしたのです。
しかし、画像の下の部分が切れてしまい、見栄えがあまり良くないので、ちゃんと表示できるよう、少し研究したいと思います。
ページの先頭に戻る