CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap
Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons! The Freedom of CSS Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! Use In Graphic Apps Weather Icons come with OTF and TTF files
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
ThemeRoller | jQuery UI
Using ThemeRoller ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects. To create a custom theme, select the Roll your own tab and tweak the settings. As you work, the UI components to the right will update to reflect your design and you can download your theme whenever you like. If you'd like to use a pre-designed theme, select the Theme Gallery tab and
[Think IT] 【これならわかる！JavaScript/Ajax】Ajaxライブラリ入門 第5回：Ajax開発の未来 (1/3)
もうHTMLやCSSをゼロから書くことはない？ JavaScriptのライブラリは、各ブラウザ間のバグや仕様の違いを吸収することで、開発者の負担を激減することを可能としました。しかし、JavaScriptの仕様の違いと同時にCSSレイアウトのバグや仕様の違いも、Web開発者の大きな悩みの1つでした。そんな中、最近ではCSSのフレームワークも出てきたので、その中でも注目度の高い2つを紹介します。 1つ目は、blueprintcss（http://code.google.com/p/blueprintcss/）です。blueprintcssは柔軟にグリッドの設定ができるCSSフレームワークです。最新バージョンは0.7です。印刷時のCSSも用意されており、印刷時も適切なレイアウトで表示されます。また、非常に細かくグリッドの設定（http://files.bjorkoy.com/blueprint
Webブラウザの検証！
複雑化するWebブラウザの検証 WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。 テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。しかし、CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。 現在、一般的に使用されている主なWebブラウザは、Internet Explorer（通称IE）のバージョン6と7、Firefox、Safari、Operaです。これらのWebブラウザシェアは日々推移していますが、ユーザ環境リサーチを行っているW3Counte
[Think IT] 第3回：リストタグを試す！ (1/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第3回：リストタグを試す！ 著者：米倉 明男 公開日：2008/04/15（火） リストタグの用途 Webサイト内のコンテンツの多くは、「見出し ＋ 本文」の構成から成り立っています。これはユーザエクスペリエンスに基づくもので、ユーザはまずコンテンツの見出し箇所から閲覧し、その中の興味を持った部分の詳細を読みます。「ブラウズ」とは流し読みの意味でもあります。 これをXHTMLの文書構造化に置き換えると情報の区分けや段落の整理が必要となってきます。そしてこの情報の整理に有効的な方法として、リストに整理するという手法があります。 CSSコーディングでWebサイトをレイアウトする場合に欠かせない要素の1つにリストがあります。 XHTMLで使用するリストは3種類あります。「箇条書きリスト」「番号付きリスト」「定義リスト」です。 「箇条
第16回 Webサイトの配色で失敗しないための知識
今回のポイント Dull，Dark，Light，Vivid 標準灰色 トーンによる印象 補色と等色相差 今回は色の使い方について，少しつっこんだお話をしましょう。色味を表現する形容詞や，ある色の色味を変えた「トーン・バリエーション」から喚起されるイメージなどについて説明した後，色を組み合わせる際の考え方について，以前に紹介した「同系色の組み合わせ」から一歩進んだ知識を紹介します。 色味を表現する形容詞と明るさの基準 古くからある日本語の色の呼称は，その色を持つ物体からつけられることがよくあります。例えば「藍色」「橙色」「鶯色」「茜色」などはわかりやすい例です。こうした呼称はあいまいさもあります。「ねずみ色」と「灰色」はどちらもグレーを指しますが，果たしてどちらが暗い灰色なのかは微妙です。日本語は何事に対してもあいまいさが美徳とされる言語なのです。 あいまいな日本語の世界は置いておくとして，
[Think IT] 第1回：XHTMLの文書構造化とボックスモデル (1/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第1回：XHTMLの文書構造化とボックスモデル 著者：米倉 明男 公開日：2008/04/01（火） テーブルレイアウトとは HTMLコーディングの主流が、旧式のテーブルレイアウトからCSSレイアウトに変わり、大規模Webサイトを中心にXHTMLへの移行がひと段落した感があります。しかし、まだテープルレイアウトを用いたWebサイトが多いのも実情です。 そこで本連載では、慣れ親しんだテーブルレイアウトからなかなか抜け出せない方向けに、CSSレイアウトへスムーズに移行をできるポイントを解説していきます。はじめにCSSレイアウトはHTML 4.01、XHTMLいずれのバージョンでも対応可能ですが、本記事ではXHTML 1.0を対象にCSSコーディングについて解説します。 テーブルレイアウトとは、HTMLタグの1つである表組み<tab
Webデザインをオンライン上で作成して共有するCSSEZ（1/3） ― ＠IT
Webデザインをオンライン上で作成して共有するCSSEZ：どこまでできる？ 無料ツールでWebサイト作成（5）（1/3 ページ） サイト作成の際に気を付けなければならない「使い勝手」 今回は、記事を書きながら「『使い勝手』はデザインと同じくらい大切ではないか？」と考えさせられた。作成したものをユーザーに継続的に見てもらい使ってもらうためには、機能の充実度や素晴らしいデザインだけでは駄目だと思うのだ。今回の無料ツールの紹介を行う前に少し「使い勝手」について触れてみたい。 「（日常の）経験」の観点から考える ユーザーの使い勝手を考える際、その基準の1つに「（日常の）経験」という観点がある。 これは、「ボタンは押すもの」というWebに限らず世間一般で広く使われている認識や、「チェックボックスはもう一度クリックすると非選択状態にできる」といったWebの中で広く使われる認識などのことで、この観点に当
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでフォント指定する時の安全な記述方法、OSにプリインストールされているフォントのまとめ -CSS Font Stack
GitHub - kawasima/jagrid: Japanese-styled grid framework.
CSSでTableをデザインするサンプル集 | CSS Lecture
CSS Spriteを活用しよう - DesignWalker