ウェブデザイン, CSS, Javascript, Flash, 海外のウェブサービスなどを紹介 | mBlog[CSS] Navigation bar with tabs using CSS and sliding doors effect - 横方向に伸縮するタブ型メニューの作り方
By Quattro | 7 月 10, 2008
横方向に伸縮する、スライディングドアと呼ばれるタブ型メニューのチュートリアル。横に伸びるため、尺の異なるテキスト情報を中に入れる事ができて汎用性が高いです。最近じゃわりとよく見るインターフェースの形。リンク先よりソースコードもDLできます。
Navigation bar with tabs using CSS and sliding doors effect >>
[CSS] CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices - リストを使ったクールなCSSデザイン
By Quattro | 7 月 8, 2008
CSSを使ってデザインされた、クールなリストスタイル。実際コーディングする時にul, liタグってメニュー周りでよく使いますよね。メニュー表示以外でもこんな使い方もイカすだろ！みたいな作例が色々と紹介されてます。いくつか見てみたけど、こんな事もできるのかーみたいなのもあって勉強になります。
CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices >>
[CSS] CSS support in email clients - メールソフト側でのCSS対応状況まとめ
By Quattro | 6 月 12, 2008
最近じゃ目にする機会も増えたHTMLメール。けど会社などでウェブ系の仕事してる人って、配信する側の人もいたりするんじゃないでしょうか。そんな時に便利なのがこの記事。各種あるメールソフトのCSS対応状況がまとめられてます。メールソフトの表示ウィンドウ内でレンダーできるCSS定義についてのチェックシートは、配信する側にとっては心強いですね。個人的にはOutlook ‘07, Mac Mail, Thunder Bird 2あたりさえ押さえておけばイイような気がします。
CSS support in email clients >>
[JAVASCRIPT] dfFlexiGrid - Liquid Javascript Grid Layout - 幅やカラムを変更できるJavascript
By Quattro | 4 月 18, 2008
幅やカラム数、フォントの大きさを変更できるJavascript。サイトを閲覧するユーザー側でそれらを見やすいよう変更できるという点がナイス。もちろんこれにより、サイトオーナーにはデザイン的な工夫が求められるだろうけど、なかなか新しいんじゃないでしょうか。記事下部より実際に動いているデモと、ダウンロードが行えます。
dfFlexiGrid - Liquid Javascript Grid Layout >>
[CSS] CSS Frame Generator - XHTMLからCSS定義名一覧を出力
By Quattro | 4 月 9, 2008
CSSでデザインする事を前提にしたXHTML記述をコピペする事で、CSSの定義名一覧を出力してくれるサイト。これなかなか便利。CSSで何て定義名に関して記述すればイイのか分かります。「よく考えたらこのclass指定いらなかったな」といった発見もあるかも。だいたいのコーダーの人は、XHTMLから書き始めてその後でCSSを書くと思うので、CSSを書き始める際にここから定義名一覧を出力しておけば、凡ミスが防げたりするかもしれません。
[WEB DESIGN] 30 Must See Comment Designs for Web Designers - ブログでのクールなコメント表現
By Quattro | 4 月 8, 2008
ブログのデザイニングにおいて、コメント部分というのは地味かもしれないけど個人的には見せ場だと思っている俺です。といってもmBlogのコメント部はテキトーにしか作ってませんが。こちらの記事では、ナイスなコメントの見せ方が30例ほど紹介されてます。これ参考になるなー。いずれ参考にしたいなーと思えるものばかり。勉強になります。
30 Must See Comment Designs for Web Designers >>
[WEB DESIGN] Free Web Templates - フリーのウェブテンプレート
By Quattro | 3 月 21, 2008
自由に使えるウェブのテンプレート集。XHTML 1.0に準拠して、テーブルを使わずにレイアウトしたものだそうです。数が結構豊富にあるので、いちからサイト作れない人にとっては便利かも。デザインもわりとしっかり作ってあるものが多いですね。
[GENERATOR] IzzyMenu - CSSベースのメニューを生成してくれるサイト
By Quattro | 3 月 16, 2008
CSSでデザインされたメニューのジェネレーター。“Start Now - Free!”を押すと始まります。メインメニューだけでなく、サブメニューについても指定でき、指定できる項目やテンプレートの数も豊富。テンプレートの指定は、右側にある“Menus Catalogue”タブから選ぶ事ができます。最近のオンラインジェネレーターって多機能なんですね。
[CSS] Most used CSS tricks - 知っておくとハッピーになれそうなCSSトリック
By Quattro | 3 月 13, 2008
知っておくとハッピーになれそうなCSSトリックが12個紹介されています。画像なしで丸角を描く、テーブルなしでフォームを整形、テキストにグラデーションをかける、縦方向にセンタリング、class指定の重ねがけ、p要素の最初の1文字だけ大きく表示、といった感じのTipsが盛りだくさん。コーディングする際の参考になりそう。
[CSS] 8 Premium One Line Css Tips - 8つのナイスなCSS指定
By Quattro | 3 月 11, 2008
8つのCSS Tipsが紹介されてます。コーディング作業で日常的に、また困った際にも活躍してくれそう。備忘録代わりに紹介。“高さを固定している場合、縦方向にセンタリング”、“レイアウト崩れを防ぐためにDIVからはみだしたコンテンツを隠す”、“IEで通常は常に表示されている縦方向のスクロールバーを非表示に”といったような小技が8つ紹介されています。ブラウザによるレイアウト崩れ（まぁだいたいIEが原因なんだけど）に対処する場合なんかに参考になります。
8 Premium One Line Css Tips >>
[PHOTOSHOP] Button Tutorials - ウェブ用のボタンのチュートリアル集
By Quattro | 3 月 5, 2008
ウェブデザインでネタとして使える、ボタンデザインのチュートリアル集を作ってみました。とりあえずはアップルのサイトのメインナビゲーションメニューと、Windows Vista風（といっても使った事ないから、どこがどうVistaなのかは不明）のボタンデザインの2つを紹介。どちらもAdobe Photoshopを使った製作過程の紹介。続きを読むクリックで各デザインと、チュートリアルが紹介されているリンクを見る事ができます。多分この記事、今後ネタ帳として随時追加していくと思います。
2008-03-05追記：久しぶりにこの記事追記しました。
[WEB DESIGN] CSS Design-Wettbewerb: Newsletterbox Designideen - CSSでデザインされた入力フォーム
By Quattro | 2 月 21, 2008
WordPress内にある、過去の下書きを見ていたらこんな記事が（2006年の記事でした）。CSSでデザインされた入力フォーム。フォームをデザインしたものってSafariでは再現できない場合をよく見かけるんだけど、こちらで紹介されているものはSafariでも全然オッケー。しかもZipファイルでソースや画像まで配布されてます。最近じゃECサイトやCMSガラみのサイト等、入力フォームのある仕事も多いからとってもありがたい。いつか使おっと。
