HTML5公開草案初版 (First Public Working Draft) がリリースしたりで、色んなトコロで見かける今日この頃。
HTML5関連適当にリンク。
とりあえず、ボクが一つだけ言えることは、英語は分からんって事です。
えぇ。
日本語訳が充実する日を心待ちにしていようっと。
タグ「download」の一覧
それなりに使い勝手が良さそうなヘッダーのサンプル4種
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。
ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。
というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？
ヘッダーって作るの大変というか、厄介だったりしませんかね。
全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。
文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。
今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。
感謝感激でございまする。
デザイン提供してくれた方はこの人↓
最近のブラウザで使えそうなCSSハック
使う機会は滅多に無いんだけど、知識として知ってないと困ったりしたので、取りあえず現在主流だろうブラウザのハックを自分のまとめ用に。
実際の状況を確認出来るように、デモページもご用意しました。
必要あるか分かりませんがダウンロードも出来るようにしときました。
拡張子がshtmlとかなってるので、htmlにして下さい。
yuga.js 0.4.2 - 優雅なWeb制作のためのJSとデモ
ひょんな事から、yuga.jsを作られたKyosukeさんから未公開最新版のyuga.js 0.4.2 をもらっちゃいました！
嬉しさのあまり、本人に公開と配布の許可を確認したら快諾していただいたので、せこせことデモページも作ったっす。
元々CSS Nite LP2で紹介したJSなんで、デモっぽいデモも無いかな？と思い用意したというのもあるのですが。
あ、yuga.jsってのはjQueryのプラグインです。jQuery使って優雅なWeb制作しちゃおーっていう感じだとボクは思ってます。
まぁ何はともあれデモをば。
デモページは、IE6無視してます。IE6でどんなに素敵なことになってても仕様です。
ですので、Fx、IE7、Opera、Safari3（Winでしか見てないけど）辺りで見ていただければ良いかと思うです。
であ、設置方法などの説明をば。
よくある質問っぽいののjQueryを使ったサンプル
- 2007年12月6日追記
- IE6で選択中のタブの上が切れていたのを修正しました。
具体的にはcss/style.cssの35行目にfloat: left;を追加しております。
いろんなサイトで見かける「よくある質問」。
一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。
特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。
それならそういった手間が掛かるかも知れないことを少しでも省けないかしら？って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。
（単純にボクがこのスタイルが一番見やすくて好きってだけだったり）
（サンプルページの内容は適当ですので、あくまでも動きを見ていただければと思うです。）
使わせていただいた、JSは以下の3つです。
一応サンプルのよくある質問部分に関しては、がっつり改行してたりそれなりに分かりやすくしてるつもりなんでソコソコ使いやすいかと思いますが、カスタマイズする際の参考にでもしていただければって事で、ご説明をするです。
クリーンな水平分割が出来そうな2カラムサンプル
2カラムなサンプルです。
海外で流行気味？ということで、「クリーンな水平分割」が出来そうなサンプルです。
どんなもんか見たい方・欲しい方は以下よりどうぞ。
この辺で知りました↓
POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？
タイトルと日付（リスト）が一行なサンプル
どことなく良くありそうなリストのサンプルです。自分が使いやすいと思ったJSを混ぜ混ぜしてみる
JavaScriptいぢってるのは楽しいけど、書くことはまったく出来ないので、似たような機能を持つのが多い中でも選ぶ理由の一つが、class名が気に入るかとかhtmlがごちゃごちゃしないかとかそんな基準だったり。
んで、jQueryのプラグインの中でもjquery_autoさんがぼちぼち気に入ったけど、class名が！とか思ったので、いぢって自分用にしてみました。
そんな事してたら、他の便利なJavaScriptも足してみたくなったので、足したりしてたらこんなんなりましたっていうのを公開。
今回その実験に使わせていただいたJavaScriptたちは以下。
上記の色々なJSたちを自分用にしたサンプル？デモ？とダウンロードは以下。
見てお分かりのとおり、基本的には全部足しただけで別にどーこうってしてません。
主にclass名やらを自分の好みにして、重複しちゃってる機能を消したりという感じです。
こういうのはちょっとライセンス問題が気になるので、間違ってたらご指摘ください。
いちお、MIT LicenseとPublic Domainだったので、勘違いしてないか調べた限りでも、まぜまぜして公開するのはOKだったので公開してます。
リニューアル（ほぼ）完了
前のデザインが昨年の12月2日からだったので、結構長かったんですけど、MT4の勉強目的とか前のに飽きてきたって事でリニューアルしました。
あんまり構造は変えてないですが、1から全部組み直しました。
苦労した割にはあんまりいけてないってのが今回の最大のポイントでしょうか。
過去のエントリーチェックなどがまだ残っているので、一部変なページが有るやも知れません。
徐々に直していきますが、優しい方はそっとご連絡をしたって下さい。
しかしこんな配色にすると、またCSSNiteのあのお方から突っ込みもらっちゃいそうだ・・・いいんす。ピンク好きなので。
今気づいたんすけど、MT4で感動した瞬間がありました。
それはプレビュー機能の圧倒的な強化。
MT4でついに、ちゃんとプレビューされたっ！（感涙
今まではプラグイン使ってやってたけど、コレは本気でうれしい。
案件で使う場合も、プレビューは問題に上がるケースが多かっただけに手間が減ったのは相当素敵。
MovableType 4の最大の利点＝プレビュー機能の強化。
すみません、言い過ぎました。
条件分岐が圧倒的に増えたとかページ機能の実装辺りもかなり大きいですね。
さて、だらだらと追記にて。
3カラムサンプル18種
本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。
http://feeds.feedburner.jp/csshappylife
では、本題に。
2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。
というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。
一度気が抜けると、中々書こうって思えないっすね。
今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。
殆ど経験が無い中作っていたので、なんか楽しくなってました。
個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。
広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。