html/css

base href

base href

baseタグっちゅーのがあって、head内に記述すると
その指定以降の要素に適用される。
[html]<base href="http://sakurachiro/" />[/html]
みたいに書いておくと下の図のように
http://sakurachiro/を基準とした相対パスになるそうな。
(hrefに絶対パスと相対パスの両方指定出来るような解説をしてるサイトがあったけど絶対パスしか使えないハズ)

[image]base href

ちなみに記述した後の要素に適用されるので
[html]<!– A –>
<link rel="stylesheet" type="text/css" href="layout.css" />
<base href="http://sakurachiro/" />
<!– B –>
<link rel="stylesheet" type="text/css" href="layout.css" />
[/html]
(あれ、リンク貼ってないのにリンクになってる?)

こうゆう順番で書くと
A は普通の相対パス
B はbaseで指定した位置からの相対パスになります(した)。

[image]記述順による違い

自分で使う分にはメリットが思いつかないんだけど
baseタグを外部jsで吐き出すようにしておくと
リンク先のフォルダを簡単に変更出来たりする?

base target

target属性を追加するとそれ以降のリンクが指定した挙動で開くよ。
[html]<base href="http://sakurachiro/" target="_blank" />[/html]
_blankとかすげぇウザいですけど。

フレームを使ったサイトをいじくる時
target=”_top”を指定する手間が省けていいかも。
しかしこれ
ローカルで確認する時はどうするんだろう?
ローカルサーバー必要?

background-attachment:fixed;の基準点を勘違いしていた。

どの要素に指定しても、ブラウザ表示領域の左上が基準みたい

次みたいな書き方をした時に(至って普通の記述ですが)、場合によって背景画像が消える事があって気づいた。
[html]div {
background:#fef url(img/bg.gif) no-repeat right bottom fixed;
}[/html]

続きを読む

コンテンツはセンタリングしつつ、ブロック毎の背景をwidth100%で表示させて横縞にする(横スクロール時に背景が切れる問題解決版)。

これは、こないだのフッター / コンテンツの高さが少なくてもブラウザ下部に表示させるでも試していて、安易にdivを入れ子にしてみたら上手くいったようにみえて
ええ!こんなに簡単に実装できちゃっていいのかい?
なんて思ってたんですけど、実際は早とちりで。

ブラウザ幅をコンテンツ分の固定幅より縮めてスクロールバーが表示させ右にスクロールさせると背景が切れるという問題を見つけました。とほほ。

(*ちなみにこんなソース)
[html classname=”html-sh”]
<body>
<div id="content">
<div class="inner">コンテンツ</div>
</div>
</body>
[/html]
[css classname=”css-sh”]
#content{background:#f33;}
.inner{width:780px;margin:0 auto;}
[/css]

先に解決法を書くけど

コンテンツ部分のwidth(固定幅)と同じサイズのmin-widthをbodyに指定すればいいみたい

続きを読む

コンテンツの高さが少なくてもフッターをブラウザ下部に表示させる

ブラウザの高さに対してコンテンツ量が足りない時、
フッターの下に隙間が空いちゃって、薄っぺらい感じになっちゃうのを回避したい。

[image]理想と現実

つまり、コンテンツの中身が足りない時はフッターをブラウザ(ウィンドウ)下部に固定したい。

DEMO / コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

続きを読む

ある要素内にpaddingが付いてる子要素があったりなかったりする場合に余計なclassを付けないでpaddingを揃える

[下に追記あり / 20100915]
タイトルが意味不明なのはわかってるんだけど、上手くまとめられなかったです。
あと内容はあまり役に立たないと思います。

例えば、aタグをdisplay:block;すると、クリック出来る範囲が広がるのでリンクが押しやすくなってちょっと優しかったり
背景をうまいこと操ってテキストなのにリッチなメニューを作れたりするのでご存知かと思いますが

ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,
[html classname=”html-sh”]
<dl>
<dt>dt / リンクなし</dt>
<dd><a href="#">dd / リンクあり</a></dd>
<dt><a href="#">dt / リンクあり</a></dt>
<dd><a href="#">dd / リンクあり</a></dd>
</dl>
[/html]

リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと
[css classname=”css-sh”]
dt {
padding:10px;
background:#09c;
}
dt a {
display:block;
padding:10px;
background:#ace;
}
dd a {
display:block;
padding:10px;
background:#f7f7f7;
}
[/css]

dtのpaddingとdt aのpaddingでdt aのレイアウトが揃わない。
[image]現状dtとdt aのpaddingが合計されるので広がる

理想としてはこうしたいのが心情。
[image]dtの中身にリンクがあってもpaddingが変わらないようにしたい

簡単にどうにかする方法がないかなとちょっと考えてみた。

続きを読む