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

Browse By

Tag Archives: CSS

[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追記:久しぶりにこの記事追記しました。

(さらに…)

[WEB DESIGN] CSS Design-Wettbewerb: Newsletterbox Designideen – CSSでデザインされた入力フォーム

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

WordPress内にある、過去の下書きを見ていたらこんな記事が(2006年の記事でした)。CSSでデザインされた入力フォーム。フォームをデザインしたものってSafariでは再現できない場合をよく見かけるんだけど、こちらで紹介されているものはSafariでも全然オッケー。しかもZipファイルでソースや画像まで配布されてます。最近じゃECサイトやCMSガラみのサイト等、入力フォームのある仕事も多いからとってもありがたい。いつか使おっと。

[CSS] Create Resizing Thumbnails Using Overflow Property – Javascriptを使わずに、CSSだけでサムネール画像を大きく見せる方法

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

などのJavascriptを使わずに、サムネール画像をユーザーの必要に応じて大きく見せる方法。デモはこちらで見る事ができます。概要を読むと、CSS書いた事のある人なら「あぁなるほどね」と思うような、ごくシンプルな内容です。リンク指定した画像の上にマウスオーバーすると、“overflow:hidden”されていたものが“visible”に変化するというもの。JSを使えば確かにリッチな見せ方はできますが、ロードに時間がかかったり、他のJSライブラリとのからみで導入できない場合もあるので、そんな時に便利な小技。

[CSS] CSS Type Set – テキスト関係のCSSのジェネレーター

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

テキスト関係のCSSを、分かりやすいインターフェースで生成してくれるジェネレーター。左の入力欄にサンプルテキストを放り込んで、入力欄下部にある各種項目を指定するだけで、ページ右側にCSS記述を生成してくれます。この手のサイトっていくつかあるけど、ロードレスであること、スライダーを動かした時に連動するサンプルテキストの動き、マック環境でも変な動きをしないカラーパレット等、かなり使いやすい印象。特に“line-height”、“letter-spacing”、“word-spacing”の指定方法が秀逸。サイト内のpタグの基本指定を作る際に役立ちそうです。といってもフォントの種類に関しては基本的に英語圏でのサンプルしかないので、日本語フォントに関しては自分で指定する必要があります。