GIGAZINEさんで紹介されていた「カムタジア スタジオ」を試してみたくて、ボクが実際に2カラムレイアウトのサンプルを組んでいる画面キャプチャを作ってみました。
これといった編集を行わずにやったのに、とっても素晴らしい出来でびっくりです。
複数ページを組むのに使えそうな感じ
「SBMに追加」ボタンは、自分の記事ブックマークしてもらえたかなぁ？どんなコメント付いたかなぁ？というチェックをするのに一番手っ取り早く見れる気がするので付けてるかな。後は、SBMの存在をチョットだけ意識してもらうとか？
さて、1ページもののサンプルやらテンプレートはいっぱい有るけど、実際のサイトで1ページしかないサイトはごく一部だと思う。
なので、複数ページが詰まったサンプルを作ってみました。
yuga.js 0.6.0がリリースされたのもあり、次はもうちょっとしっかりしたデザインで、yugaを使ってより実際のサイトに近いのでも作れたらいいなーとか妄想中です。
そんな訳で、取りあえず今回のサンプルのご説明みたいなことをば。
テーブルのボーダーに余白がある場合のサンプル
的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。
今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。
ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。
試行錯誤した結果、背景でやってみることにしたらうまく行きました。
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。
だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！
display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。
タグクラウドのサンプル作ってみた
タグとかめんどーだから、入れる気無かったんですけど、今更になって悪くないかも？とか思い始めたので、試しにタグクラウド設置してみました。
トップページの下の方におりますが、あんまり古いエントリーとか、タグ付け自体が適当だったりするので、あんまり使い物にならないかもしれません。。。永遠のベータ版です。
で、まぁかっこ良さげなタグクラウドを頑張ってつくろーとkiai出して作ってる途中に、ふと3ping.orgさんを思い出し、過去記事をあさってたらTag Cloudのスタイルというエントリーがありました。
んで、被ってる感じバリバリだからいっかーとか思ったんですけど、何となく作っちゃったんで公開っていう流れです。えぇ。
にしても3つほど作ったら疲れました。
ダウンロードとか実際の表示を見たい方は以下より。
それなりに使い勝手が良さそうなヘッダーのサンプル4種
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。
ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。
というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？
ヘッダーって作るの大変というか、厄介だったりしませんかね。
全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。
文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。
今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。
感謝感激でございまする。
デザイン提供してくれた方はこの人↓
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出来ます。