フォントのスタイルシートを確認しながら設定できる -TypetesterTypetesterは、入力したテキストをベースに、フォントのスタイルシートを設定できるオンラインサービスです。 Typetester 入力できるテキストは日本語にも対応しており、表示も可能ですが、選択できるフォントは英語圏内が中心となっています。 また、一度設定したスタイルはクッキーに保存され、初期化するには「reset setting」をクリックします。 下記はTypetesterで人気のあるフォントのスタイルのBest 3です。
超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ | CodeCampus
超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ更新日: 2018年10月11日公開日: 2015年1月6日 ホームページデザインに彩りを添えてくれるグラデーションは、たくさんのホームページで使われていますよね。しかし、いざコードを書くとなると長くて面倒なのがこのCSSグラデーション。何種類もグラデーション用のコードを書かないといけない謎な仕様だったり、長いコードの意味がよくわからなかったり…。 そこで今回はこのグラデーション技術の基礎をご紹介していきます。簡単にグラデーション用のコードが作れるジェネレーターもご紹介するのでお見逃しなく！ グラデーションコードの基礎 色の移り変わりがとても綺麗なグラデーションですが、CSSでグラデーションを表現するには、linear-gradient()関数を使います。linear-gradient()関数は線型のグラデーションを表現して
CSSのセレクタによる優先順位を分かりやすくビジュアル化するオンラインツール -Specificity Calculator
Specificity Calculator CSSの優先順位とは、例えば同じセレクタでスタイルを定義した場合、後に記述したものが適用されます。これは「後に記述したものが優先される」ということです。 例： <h1 class="title">見出し</h1> h1の見出しに、同じセレクタで異なるスタイルを適用してみます。 .title{ color:red; } .title{ color:blue; } この例では、後に記述した「color:blue;」が適用されます。 いわゆる、上書き状態です。 また、記述の順番には影響されず、セレクタのポイントにより優先順位が決まります。 ここで紹介する「Specificity Calculator」では、セレクタを入力するだけで、そのポイントをビジュアル化して優先順位が簡単に分かるようになります。 例： h1.title{ color:red; }
雑に書いたCSSでもがっちりと美しく整形してくれるwebサービスを使って見えないところもオシャレに変身！ * prasm（プラズム）
インナーのタンクトップにまでこだわる男。フレッシュです。 さて、本題に。 ブログやサイトの見た目をいじる方は避けて通れないCSSです。 できれば後々の管理を楽にするためにちゃんと書きたいところですが、なんだかんだ動けばいいやの精神で雑に書いてしまうのです。僕は。 とはいえ、直接CSSを覗かれた時に「ははーん、雑！」とか言われないため（そんなシチュエーションはまあないけどな！）に、簡単にどうにかする便利なサービスがありますので、ご紹介を。 見えないところにも気を配りたいものですね。後々のいらいらを減らすことは、すなわち効率に関わるのです。だろ？未来の俺！ はい、という訳で。 #header { background: #8bcdba; border-bottom: none; padding:0; margin: 0; } #header .header-wrap { background:
スタイルシートの内容はそのままで、可読性・保守性を高めるオンラインサービス -CSS Trashman
サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
CSS3プロパティの勉強になるジェネレータ16個
CSS3のジェネレータを紹介します。海外サイトがほとんどですが簡単に使えると思います。それぞれ特徴があって面白いので、試しに色々作ってみればCSS3プロパティの勉強にもなります。 CSS3プロパティ全般 ボックスやテキストなど広範囲にわたって設定可能なジェネレータです。比較的有名なものが多いです。 CSS3.0 Maker テキストまわりから、角丸やシャドウ、回転など色々作れます。指定できる要素は以下のとおりです。 CSS Transform Box Shadow Text Shadow Text Rotation RGBA @Font Face Outline Offset Transition CSS Gradient CSS3 Generator これも指定できる要素はかなり多いです。レイアウトがシンプルで見やすいです。 Border Radius Box Shadow Text S
[CSS]便利なセレクタの使い方が実例を見ながら学べる -CSS Selectors
CSSのセレクタの記述例とそれがどのように適用されるか、実例を見ながら学べるサイトを紹介します。 各ブラウザのサポート状況も掲載されています。 Learn CSS Selectors interactively ※閉鎖してしまったようです（2014年11月）。 [ad#ad-2] サイトに掲載されているセレクタをいくつか紹介します。 :first-of-type この疑似クラスは、指定されたエレメントの最初の子エレメントにマッチします。 記述例 #target p:first-of-type {color: #36de4e;} 表示 対応ブラウザ Firefox Chrome Safari Opera Internet Explorer [ad#ad-2] :first-child この疑似クラスは、親エレメントの最初の子エレメントである場合のみマッチします。 記述例 #target p:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3を使わなくてもつい使いたくなる、楽しくて実用的なオンラインジェネレーター -Useless CSS3 Generator