CSSに関するネタを中心に色々書いてます。
ハイレベルCSS実践講座 東京2008年1月20日 | サイバーガーデンbizに行ってきました。
どんな感じかはbizを見ていただくとして。
内容としては、いちおう大半が復習で、やっべ全然知らない。。。っていう状況はほとんど無かったんですけど、Operaでinput type="button"のvalue値の消し方が知らなくってやるせない気持ちだったのですが、参加者の方もあんまり知ってる人は居ないと思われたので、世間の認知度もあんまり無いのかな？
ボクの場合、今までinput type="image" でやってたので、こういう状況になった事が無かったんですよ。えぇ。
まぁ言い訳はいいとして、そんな訳で、方法をば。
いろんなサイトで見かける「よくある質問」。
一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。
特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。
それならそういった手間が掛かるかも知れないことを少しでも省けないかしら？って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。
（単純にボクがこのスタイルが一番見やすくて好きってだけだったり）
（サンプルページの内容は適当ですので、あくまでも動きを見ていただければと思うです。）
使わせていただいた、JSは以下の3つです。
一応サンプルのよくある質問部分に関しては、がっつり改行してたりそれなりに分かりやすくしてるつもりなんでソコソコ使いやすいかと思いますが、カスタマイズする際の参考にでもしていただければって事で、ご説明をするです。
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で並べ、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>
んで、この余白を埋めるための方法をいくつか紹介しますだ。
ここ最近エントリーさぼり過ぎてたんで、ちょいネタでも上げていこうっていうスタンスで。
発生条件がイマイチわかってないんですけど、フラッシュを設置した際に、下にpaddingっぽい余白っていうか隙間っていうかが5px～10pxほど空くことがありませんか。IE以外のブラウザで。
こんな風に↓
図みたく、分かりやすい枠線が有ると露骨に気づくわけですが。
で、まぁコレは画像でも発生するベースラインのアレと同じなんで、解決方法は以下のように。
object,
embed {
vertical-align: top;
}
値は、bottomでもダイジョブです。
embed に指定が無いと、Firefoxで余白が発生して、object に指定が無いとSafariで発生するんで、どちらも指定すると良さげです。
本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。
http://feeds.feedburner.jp/csshappylife
では、本題に。
2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。
というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。
一度気が抜けると、中々書こうって思えないっすね。
今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。
殆ど経験が無い中作っていたので、なんか楽しくなってました。
個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。
広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。
タイトルが長い…
サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー
10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました）
さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。
どことなく良くありそうなリストのサンプルです。