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

Browse By

Tag Archives: CSS

[CSS] CSS Menu Builder – CSSメニューのジェネレーター

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

CSSメニューを簡単に作る事のできるジェネレーター。結構テンプレートも用意してあってイイ感じ。メニューの種類も横メニュー、縦メニュー、パンくずリストと3種類の中から選べます。だいたい出来たなーって思ったら、HTML、CSS、Imageそれぞれをダウンロードできます。けどメンドク!って人はZipファイルで一括ダウンロードもできるようになってます。

[CSS] 9 Top CSS Essential Skills That Every Web designer Should Learn – ウェブデザイナーの学んでおくべき9つのCSSテクニック

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

×××しておくべきシリーズ。いやまぁそんなシリーズは別にありませんが、ウェブデザイナー向けのCSS関連の記事。基本的なCSSレイアウトから始まり、ポジショニングの話、CSSで行うタイポグラフィー、フォーム装飾、フレームワーク、最適化やハック、ボタン類制作のTipsなど盛りだくさんでございます。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。サイトを閲覧するユーザー側でそれらを見やすいよう変更できるという点がナイス。もちろんこれにより、サイトオーナーにはデザイン的な工夫が求められるだろうけど、なかなか新しいんじゃないでしょうか。記事下部より実際に動いているデモと、ダウンロードが行えます。