html/css

base href

base href

baseタグっちゅーのがあって、head内に記述すると
その指定以降の要素に適用される。

みたいに書いておくと下の図のように
http://sakurachiro/を基準とした相対パスになるそうな。
(hrefに絶対パスと相対パスの両方指定出来るような解説をしてるサイトがあったけど絶対パスしか使えないハズ)

[image]base href

ちなみに記述した後の要素に適用されるので

(あれ、リンク貼ってないのにリンクになってる?)

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

[image]記述順による違い

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

base target

target属性を追加するとそれ以降のリンクが指定した挙動で開くよ。

_blankとかすげぇウザいですけど。

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

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

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

次みたいな書き方をした時に(至って普通の記述ですが)、場合によって背景画像が消える事があって気づいた。

続きを読む

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

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

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

(*ちなみにこんなソース)

先に解決法を書くけど

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

続きを読む

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

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

[image]理想と現実

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

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

続きを読む

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

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

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

ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,

リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと

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

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

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

続きを読む

height:0;で画像置換(背景置換)するっス

画像置換用画像

前置き(おもひで)

なんでもかんでもcssでやりたがる時代の終わり頃に、text-indentに負の値を指定してテキストを画面外に飛ばし背景画像のみを表示させる画像置換(Image Replacement)が流行りました
(FirefoxのアドオンWeb Developerでcssを外したりして、文字だけのシンプル(質素)な表示になるコーディングに喜びを感じてた人も居たはず)。

その方法のメリットはうろ覚えだけどjavascriptを使わずにロールオーバーを作れて、音声ブラウザにも読み上げられて、”画像にalt”より”生のテキスト”の方がSEOに有利なんじゃないかとかそんな感じでしたっけ?

デメリットは、印刷設定で”背景を印刷しない”になっている(印刷用cssも用意されてない)場合に置換した部分が印刷されなかったり、画像無効css有効なブラウザブラウザだと画面外に飛ばしたテキストも背景も表示されないなど、これで不具合でるのって特殊な環境だからたいしたデメリットでもないよね?仕方ないよね?みたいな扱いだったような。

その後SEO界隈のtext-indentに負の値てスパムになるんじゃない?みたいな話題が絡んで、altをちゃんと入れておけばわざわざ画像置換しなくてもいいらしいですぜとか、jQuery便利!javascriptを自分でoffにしてる人の事なんてしったこっちゃないよ(最低限の情報が表示されれば問題ない)的な風潮になってcssで画像置換する機会が減ったり減らなかったりの毎日で、今の主流はどんな感じなんでしょうか。

とりあえずtext-indentさせずに画像置換するメモ

appleのサイトで使ってる感じのheight:0;overflow:hidden;paddingでやるやつ。

背景画像で置換した表示結果

乱雑モックアップ

上記使用font / セプテンバー-教漢(無料お試し版)

(関係ないけどURLはURIの一部だから今までのURLはURIと書くのが正しいような事を聞いた気がするけどbackground:urlなんですよね、これはなぜだろう、うちの勘違いなだけでしょうか?)

続きを読む