cssでかわいい図形できた。 追記 またかわいいのかけた。 がんばればもっとかわいいのかけそう。 ●ᴥ●
かわいい図形 - もちゃ もちゃぴ
cssでかわいい図形できた。 追記 またかわいいのかけた。 がんばればもっとかわいいのかけそう。 ●ᴥ●
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
デザインCSSをカスタマイズする土台に適したサンプルテーマを公開しました - はてなブログ開発ブログ
本日、はてなブログのサンプルテーマ「Boilerplate」を公開しました。デザインCSSをカスタマイズする土台に適しています。 Boilerplate（ボイラプレート）は、必要最小限の見た目だけがあらかじめ調整された、プレーンなサンプルテーマです。このテーマをもとにCSSを記述すると、はてなブログのデザインテーマを比較的カンタンに作ることができます。 Boilerplateテーマの見た目「オリジナルテーマの制作にチャレンジしたいけど、ゼロから作るのは大変」という方のために用意しました。ぜひ、このテーマを使ってCSSのカスタマイズに挑戦してください。 もちろん何もカスタマイズしなくても、シンプルなデザインテーマとしてそのまま使うこともできます。 Boilerplateテーマの使い方 Boilerplateテーマのソースコード（CSSおよびLESSファイル）は、GitHubで公開しています。
B!KUMAテーマの画像にリボンをつけて、かわいいわたしを演出する。…ことができなくなった…けどちょっと何とかした - くらげだらけ
はてなブログに公式テーマとしてB!KUMAテーマが追加されました。 もともとのiPhone & Androidアプリの雰囲気を再現したテーマに作ったつもりです。 上の画像にあるように、写真にリボンが付くようなアレンジも加えようかと思ったのですが、あまり汎用的でないという理由からやめました。 けれど「もっともっとかわいく演出したい！」という人のために、上の画像のようなリボンを表示する方法を書いてみようと思います。 ※場合によっては上手く画像が配置されない場合もあります。注意事項を読んでご利用ください リボンの使用方法 今回紹介するのは、あくまでB!KUMAテーマでの使用方法です。なのでまずはブログの管理画面・デザインでB!KUMAテーマに変更しましょう。 別のテーマで使用したい場合は適宜変更して使ってください。 管理画面・デザインにある「カスタマイズ」の中の「デザインCSS」に下のコードをコ
CSS Filtersで写真加工するWebApp - CSS PhotoEditor - くらげだらけ（くだくらげのBLOG）
iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。 世間ではAppleのマップでいろいろと騒いでいたりしますが、OSがアップデートされるたびに私がチェックすることといえばブラウザの仕様や機能の変更です。 去年はWebAppやスマホサイトを作るには嬉しい変更がありました。position:fixedやiframeの慣性スクロール、他にもSVGや縦書き、明朝フォントのサポートもありました。 その辺りはiOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】と【後編】というエントリーでまとめて書いています。このときもデモ用にフルスクリーンで使えるWebAppを作成しました。 今回はCSS Fi
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
楽しいCSSこと「Sass」の3.1が異様な進化：Rails Hub情報局：エンジニアライフ
HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。 Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエンジン。SassはHamlとセットで誕生した、インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語です。CSSを書くのが苦痛じゃなくて、楽しくなるという触れ込みです。 Hamlのほうは、今回はSassの分離が大きなトピックである以外は変化はありません。変化が大きいのは「Brainy Betty」と名付けられたSass 3.1.0のほうです（brainyって脳みそが詰まっていて頭が良いという意味ですね。変な名前を付ける人たちです……。Sass自体も、生意気な女という意味で使われる「sassy girl」にかけているんだ
CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS
/* * CSSでキュウべえ(FULL)を描いてみた * ※Google Chrome, FireFox, Safari, Operaに対応しています。 */ <div class="qb"> <!-- tail --> <div class="tail"> <div class="parts-1"></div> <div class="parts-2"></div> <div class="parts-3"></div> <div class="parts-4"></div> <div class="parts-5"></div> <div class="parts-6"></div> <div class="parts-7"></div> <div class="parts-8"></div> <div class="parts-9"></div> </div> <!-- ear --
Faux Column CSS Layouts - Code-Sucks.com
Coming SoonGet ready, something cool is coming!
CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE
terrill.caにてCSSとPHPできれいなグラフを描く方法が紹介されていました。 » terrill.ca | Vertical Bar Graphs using CSS and PHP 棒グラフや立体グラフなどがCSSのスタイルで描けます。PHPはデータの抽出と縮尺の設定だけなので、必要でない方は紹介されているCSSだけ使っても良いかも。 ↓なグラフや、 ↓なグラフが描けます。 なお、HTMLのほうの記述は以下のような感じです。わかりやすいですね。変更も簡単かと。 <ul class="barGraph"> <li class="p1" style="height: 57px; left: 0px;">57</li> <li class="p2" style="height: 27px; left: 0px;">27</li> <li class="p3" style="heigh
Japanese Traditional Colors
桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
