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

Browse By

Tag Archives: CSS

[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例ほど紹介されてます。これ参考になるなー。いずれ参考にしたいなーと思えるものばかり。勉強になります。

[WEB DESIGN] Free Web Templates – フリーのウェブテンプレート

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

自由に使えるウェブのテンプレート集。XHTML 1.0に準拠して、テーブルを使わずにレイアウトしたものだそうです。数が結構豊富にあるので、いちからサイト作れない人にとっては便利かも。デザインもわりとしっかり作ってあるものが多いですね。

[GENERATOR] IzzyMenu – CSSベースのメニューを生成してくれるサイト

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

CSSでデザインされたメニューのジェネレーター。“Start Now – Free!”を押すと始まります。メインメニューだけでなく、サブメニューについても指定でき、指定できる項目やテンプレートの数も豊富。テンプレートの指定は、右側にある“Menus Catalogue”タブから選ぶ事ができます。最近のオンラインジェネレーターって多機能なんですね。

[CSS] Most used CSS tricks – 知っておくとハッピーになれそうなCSSトリック

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

知っておくとハッピーになれそうなCSSトリックが12個紹介されています。画像なしで丸角を描く、テーブルなしでフォームを整形、テキストにグラデーションをかける、縦方向にセンタリング、class指定の重ねがけ、p要素の最初の1文字だけ大きく表示、といった感じのTipsが盛りだくさん。コーディングする際の参考になりそう。

[CSS] 8 Premium One Line Css Tips – 8つのナイスなCSS指定

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

8つのCSS Tipsが紹介されてます。コーディング作業で日常的に、また困った際にも活躍してくれそう。備忘録代わりに紹介。“高さを固定している場合、縦方向にセンタリング”、“レイアウト崩れを防ぐためにDIVからはみだしたコンテンツを隠す”、“IEで通常は常に表示されている縦方向のスクロールバーを非表示に”といったような小技が8つ紹介されています。ブラウザによるレイアウト崩れ(まぁだいたいIEが原因なんだけど)に対処する場合なんかに参考になります。

[PHOTOSHOP] Button Tutorials – ウェブ用のボタンのチュートリアル集

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

ウェブデザインでネタとして使える、ボタンデザインのチュートリアル集を作ってみました。とりあえずはアップルのサイトのメインナビゲーションメニューと、Windows Vista風(といっても使った事ないから、どこがどうVistaなのかは不明)のボタンデザインの2つを紹介。どちらもAdobe Photoshopを使った製作過程の紹介。続きを読むクリックで各デザインと、チュートリアルが紹介されているリンクを見る事ができます。多分この記事、今後ネタ帳として随時追加していくと思います。

2008-03-05追記:久しぶりにこの記事追記しました。

(さらに…)