CSSテンプレート

Opera9 input type="button"のvalue値の消し方

ハイレベルCSS実践講座 東京2008年1月20日 | サイバーガーデンbizに行ってきました。
どんな感じかはbizを見ていただくとして。

内容としては、いちおう大半が復習で、やっべ全然知らない。。。っていう状況はほとんど無かったんですけど、Operaでinput type="button"のvalue値の消し方が知らなくってやるせない気持ちだったのですが、参加者の方もあんまり知ってる人は居ないと思われたので、世間の認知度もあんまり無いのかな?

ボクの場合、今までinput type="image" でやってたので、こういう状況になった事が無かったんですよ。えぇ。

まぁ言い訳はいいとして、そんな訳で、方法をば。

よくある質問っぽいののjQueryを使ったサンプル

2007年12月6日追記
IE6で選択中のタブの上が切れていたのを修正しました。
具体的にはcss/style.cssの35行目にfloat: left;を追加しております。

いろんなサイトで見かける「よくある質問」。
一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。

特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。

それならそういった手間が掛かるかも知れないことを少しでも省けないかしら?って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。
(単純にボクがこのスタイルが一番見やすくて好きってだけだったり)

(サンプルページの内容は適当ですので、あくまでも動きを見ていただければと思うです。)

使わせていただいた、JSは以下の3つです。

一応サンプルのよくある質問部分に関しては、がっつり改行してたりそれなりに分かりやすくしてるつもりなんでソコソコ使いやすいかと思いますが、カスタマイズする際の参考にでもしていただければって事で、ご説明をするです。

クリーンな水平分割が出来そうな2カラムサンプル

2カラムなサンプルです。
海外で流行気味?ということで、「クリーンな水平分割」が出来そうなサンプルです。

どんなもんか見たい方・欲しい方は以下よりどうぞ。

この辺で知りました↓
POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行?

新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)

08年6月4日追記:
コレの新しいの作りました。

11月7日追記:
contens.cssの56行と60行目の#contents部分でスペルミスしておました。
ごめんなさい...

現在は修正版になっております。
修正後のcontents.css
---

SO905iがやば過ぎる件。JOGですよ!じょぐ!!!すげー待ってた。アナタを心から待っていた。

さて、一行駄文はお終い。本題です。
毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。

んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。

以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。
どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう可能性が大きいです。はい。

コレはかなり社内向けというか、仕事で最初に使うのに使えそうな感じにしているので、incとかあったりもしますが、SSIとか使わない場合は不要です。

まぁ何はともあれ、以下よりDL出来ます。

リストをinlineで並べた時の余白

下記のような指定でリストをinlineで並べ、li要素毎に改行すると、半角スペース分の余白ができてしまう。

ul {
	text-align: center;
}
ul li {
	display: inline;
}
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/service/">サービス案内</a></li>
<li><a href="/company/">会社情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>

んで、この余白を埋めるための方法をいくつか紹介しますだ。

flashを設置した際に出来る、下辺の余白

ここ最近エントリーさぼり過ぎてたんで、ちょいネタでも上げていこうっていうスタンスで。

発生条件がイマイチわかってないんですけど、フラッシュを設置した際に、下にpaddingっぽい余白っていうか隙間っていうかが5px~10pxほど空くことがありませんか。IE以外のブラウザで。

こんな風に↓
Flash設置時に出来る余白の図

図みたく、分かりやすい枠線が有ると露骨に気づくわけですが。
で、まぁコレは画像でも発生するベースラインのアレと同じなんで、解決方法は以下のように。

object,
embed {
	vertical-align: top;
}

値は、bottomでもダイジョブです。
embed に指定が無いと、Firefoxで余白が発生して、object に指定が無いとSafariで発生するんで、どちらも指定すると良さげです。

3カラムサンプル18種

本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。
http://feeds.feedburner.jp/csshappylife

では、本題に。

2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。

というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。
一度気が抜けると、中々書こうって思えないっすね。

今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。
殆ど経験が無い中作っていたので、なんか楽しくなってました。

個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。
広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。

フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ

タイトルが長い…

サイトやブログの価値を調べる10の指標とツール|前向きストラテジー
10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか?ボクはしっかりバテてダレてます。あんまり仕事してま…(加藤さまに給与減らされるので自重しました)

さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。
SampleImage 1

このページの上部へ

↑上に行くよ