Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: CSS

[CSS] Download Free CSS Menus – CSSでできたメニュー

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSでレイアウトされたメニューがDLできます。各メニュー内の文字は、テキストが生きているので汎用的に使えます。わりと趣味のイイものが揃ってます。ページ下部にある“Daily CSS menu inspiration”というのは外部サイトへのリンクなんだけど、これが結構イイ。オシャレなメニュー表現のされているサイトが紹介されてて、RSSも読めます。

[CSS] Get Started with CSS 3 – CSS3でできること

  • Pocket
  • このエントリーをはてなブックマークに追加

現在一部のブラウザで適用することのできる、CSS3を使ってできることがまとめられてます。DIVボックスの角丸表現、ボーダー周辺のグラデーション、テキストにドロップシャドウ効果をかける等の記述方が紹介されてます。現状これらのCSS記述表現はSafari 3, Opera 9.5, Firefox 3.1aが対応しているので、対応ブラウザで見ることが推薦されています。足を引っ張っているのはIEだというのは毎度のことですね。

[CSS] Navigation bar with tabs using CSS and sliding doors effect – 横方向に伸縮するタブ型メニューの作り方

  • Pocket
  • このエントリーをはてなブックマークに追加

横方向に伸縮する、スライディングドアと呼ばれるタブ型メニューのチュートリアル。横に伸びるため、尺の異なるテキスト情報を中に入れる事ができて汎用性が高いです。最近じゃわりとよく見るインターフェースの形。リンク先よりソースコードもDLできます。

[CSS] CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices – リストを使ったクールなCSSデザイン

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSを使ってデザインされた、クールなリストスタイル。実際コーディングする時にul, liタグってメニュー周りでよく使いますよね。メニュー表示以外でもこんな使い方もイカすだろ!みたいな作例が色々と紹介されてます。いくつか見てみたけど、こんな事もできるのかーみたいなのもあって勉強になります。

[CSS] CSS support in email clients – メールソフト側でのCSS対応状況まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

最近じゃ目にする機会も増えたHTMLメール。けど会社などでウェブ系の仕事してる人って、配信する側の人もいたりするんじゃないでしょうか。そんな時に便利なのがこの記事。各種あるメールソフトのCSS対応状況がまとめられてます。メールソフトの表示ウィンドウ内でレンダーできるCSS定義についてのチェックシートは、配信する側にとっては心強いですね。個人的にはOutlook ’07, Mac Mail, Thunder Bird 2あたりさえ押さえておけばイイような気がします。

[JAVASCRIPT] dfFlexiGrid – Liquid Javascript Grid Layout – 幅やカラムを変更できるJavascript

  • Pocket
  • このエントリーをはてなブックマークに追加

幅やカラム数、フォントの大きさを変更できるJavascript。サイトを閲覧するユーザー側でそれらを見やすいよう変更できるという点がナイス。もちろんこれにより、サイトオーナーにはデザイン的な工夫が求められるだろうけど、なかなか新しいんじゃないでしょうか。記事下部より実際に動いているデモと、ダウンロードが行えます。

[CSS] CSS Frame Generator – XHTMLからCSS定義名一覧を出力

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSでデザインする事を前提にしたXHTML記述をコピペする事で、CSSの定義名一覧を出力してくれるサイト。これなかなか便利。CSSで何て定義名に関して記述すればイイのか分かります。「よく考えたらこのclass指定いらなかったな」といった発見もあるかも。だいたいのコーダーの人は、XHTMLから書き始めてその後でCSSを書くと思うので、CSSを書き始める際にここから定義名一覧を出力しておけば、凡ミスが防げたりするかもしれません。

[WEB DESIGN] 30 Must See Comment Designs for Web Designers – ブログでのクールなコメント表現

  • Pocket
  • このエントリーをはてなブックマークに追加

ブログのデザイニングにおいて、コメント部分というのは地味かもしれないけど個人的には見せ場だと思っている俺です。といってもmBlogのコメント部はテキトーにしか作ってませんが。こちらの記事では、ナイスなコメントの見せ方が30例ほど紹介されてます。これ参考になるなー。いずれ参考にしたいなーと思えるものばかり。勉強になります。