サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS(Sassも)に変換してくれるオンラインサービスを紹介します。
サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS(Sassも)に変換してくれるオンラインサービスを紹介します。
さまざまなカラーパレット、グラデーション、パターンを見るだけでなく、作成して共有することもできるColRDを紹介します。 ColRD [ad#ad-2] カラーを見つける カラーを作る カラー作成に役立つツール カラーを見つける まずは、ColRDの「Discover(見つける)」から紹介します。 ColRDでは、カラーに関する4つのカテゴリが用意されています。 Discover Color Discover Palette Discover Gradient Discover Pattern
手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、
前景と背景のカラーコントラストをオンラインでチェックできる「Colour Contrast Check」をsnook.caから紹介します。 Colour Contrast Check テキストの視認性はカラーだけでなく、サイズや行間なども重要なポイントですが、ここでは前景色と背景色のコントラストを数値でチェックし、その視認度を確認することができます。 使い方は簡単で、左に前景色、中央に背景色を入力すると、右にそのカラーコントラストの結果が表示されます。 項目は上から順に。 Brightness Difference 明度差 Colour Difference 色差 Are colours compliant? 色の組み合わせが良いか、悪いか、まぁまぁか Contrast Ratio コントラスト比 WCAG 2 Contrast Compliant at 18pt or larger WC
デザインやHTML, CSS, JavaScriptなどの知識が無くても、簡単にWordPressのテーマファイルが作成できるアプリケーション「Artisteer」を紹介します。 Artisteer - WordPress Themes and Website Templates Designer Artisteerには、レイアウトやパーツのデザインパターンが豊富に用意されており、それぞれを組み合わせたり、細かくカスタマイズして、WordPressのテーマファイルを作成することができます。 マニュアルは、下記ページからダウンロードできます。 Documents ナビゲーションのパターン Artisteerは有償のアプリケーションで、トライアル版も用意されています。制限は画像に「Trial」の文字がついてました。 日本語版も用意されており、環境はWidows版のみとなっています。 Mac,
重要なお知らせ:このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。 Webデザインに黄金比を取り入れよう - Re:Creator’s Kansaiに、黄金比をWebデザインに活用する海外の記事の翻訳が載っていました。 黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8です。「その美しさをWebデザインでも」というのがエントリの趣旨です。 Webデザインの場合、横幅を固定し、縦幅は固定しないデザインが一般的です(ディスプレイサイズを考え、文字数の増加は横方向のスクロールなしに、縦方向へのスクロールで対応している)。Flashで作られたサイトなどは、縦幅も横幅も固定している場合があります。 Webデザインに黄金比を取り入れようとした場合、全体の横幅と横幅の比からそ
Column Layout Generator 使用方法は簡単で、左側のスライドバーを操作して、各カラムの幅を好みのサイズに設定するだけです。 設定したカラムは、リアルタイムにプレビューでき、右側のパネルにスタイルシートが生成されます。 Column Layout Generatorでは、1、2、3カラムのレイアウトを作成することができます。 1カラム用 2カラム用 3カラム用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く