[Web Design] Top 14 CSS Generators – 便利なCSSジェネレーターまとめ
便利なCSSがらみのオンラインジェネレーターまとめ。text-shadowを使ったテキストエフェクト、グラデーション指定、ボタンメイカー、その他CSS指定のための総合ツールなど色々あります。半分くらいはこの手のまとめ記事でよく見るツールではあるけど、初めて見るツールもいくつかあったので紹介。text-shadow指定は凝ったあしらいをしたい時に便利っすね。
Tag Archives: CSS
[CSS] CSS Media Queries for iPads & iPhones – iOSデバイスのメディアクエリー指定をまとめたサイト
iPadやiPad mini、iPhoneなどのiOSデバイスに対するMedia Query指定をまとめたサイト。iPadやiPhoneは機種によって解像度が違うので、それぞれどのように指定すればイイのかを機種ごとに解説してます。縦位置と横位置のそれぞれの指定方法について紹介されてます。スマートフォンに対応したレスポンシブレイアウトのサイト制作する際に便利っすねこれ。
[Web Design] 45+ Websites with Floating and Fixed Position Navigation Designs – 固定ナビゲーションのクールなサイト
スクロールしてもナビゲーションが一定の位置に固定された作りのサイトまとめ記事。最近チラホラ見る手法ですね。パララックススクロールを使ったいわゆるスクロール芸で見せるサイトもいくつか紹介されてます。わりと流行りの手法とはいえ、なんだかこう昔のWebサイトでよく使われたフレームでナビゲーション固定するのに見せ方は似てるよな、とか思うのであります。今じゃ化石化したタグではありますが。あ、けどつい最近仕事で見かけたなｗ
45+ Websites with Floating and Fixed Position Navigation Designs
[CSS Framework] Flat UI – フラットな印象のBootstrapテーマ
フラットな印象のTwitter Bootstrapテーマ。見た感じWindows 8のMetro風にも見えます。最近こういうグラデ少なめ、ドロップシャドウなし、テクスチャも控えめなデザインよく見ますよね。iOS 7もジョナサン・アイヴの趣味で今までのリアルなオブジェクトをメタファーにした多色デザインからフラットなものになるって言われてるし、こうしたシンプルなデザイン手法は今後主流になるのかもしれません。CSSフレームワークとしてBootstrapがベースになっているので、既存ユーザーの人は導入も簡単です。細かい部分の作り込みが丁寧で、イイですねこれ。
[Code Snipet] CSSFlow – CSSコードスニペットが充実したサイト
CSSのコードスニペットや、UIキットを配布するサイト。各作例はタグ付けされており、目的別に選ぶ事ができます。カレンダーとかログインパネルとかパーツ単位で掲載されてます。わりとオシャレな作例が多いので、デザインやコーディングのネタ探しにも使えそうです。スニペットのページを見てみると、9ページありました。それほど作例の数は多くないので、今後増えるとイイですね。
[Pattern] SVG Patterns Gallery – 各種パターンをSVGコードで取得できる素材サイト
上下左右にシームレスにつながらパターン素材（タイルテクスチャ）のギャラリーサイト。円形に表示されるパターンをクリックするとサイトの背景そのものが選んだパターンに変わります。各パターンは全てSVGで描画されているため、素材としてダウンロードするのは画像ファイルではなくSVGのコードとなります。「Get the Code」ボタンをクリックする事でコードを取得できます。パっと見CSS3 Patterns Galleryに酷似してますが、これはまぁわざとでしょうねｗ 画像情報をコードで取得できるので、CSSにコピペさえすれば使える点がナイス。今後SVGを使う機会ってどんどん増えていくんでしょうね。
[CSS Framework] CSS Front-end Frameworks with comparison – CSSフレームワーク 機能比較表
各種CSSフレームワークの機能比較一覧表。ブラウザへの対応状況（ファッキンIEについてはどのバージョン以降対応しているのかについて数字が明記）、LESS & SASSへの対応、PC・スマホ・タブレットへの対応、ライセンスについて比較されています。かなりの数のフレームワークが紹介されており、ここでの機能比較からチョイスするのもアリかもしれません。自分が使った事あるのはTwitter Bootstrapと960 Grid Systemくらいかなー。YUIとかBlueprintあたり有名どこでしょうかね。
[CSS] CSS Beautifier – CSSを整形してくれるオンラインツール
CSS記述をサイト内にコピペする事で、コードフォーマットを綺麗に整形してくれるオンラインツール。これCSSが汚い俺的になかなかナイスです。インデントの付け方や大括弧の位置などをコード内において統一したフォーマットに書き換えてくれます。サイト上部にあるのが現CSSをペーストするためのウィンドウ、下部にあるのがリアルタイムに生成される綺麗なCSSコードの書き出しエリアです。綺麗なCSSってなんか「綺麗なジャイアン」みたいな感じしますよね。しませんかそうですか。