Hatena::Groupcss

つみきスタイル このページをアンテナに追加 RSSフィード

2013.1.30

[][]CSSをもっと便利に楽しく書けるCSS拡張メタ言語「SCSS」導入ガイド 06:53 CSSをもっと便利に楽しく書けるCSS拡張メタ言語「SCSS」導入ガイド - つみきスタイル を含むブックマーク はてなブックマーク - CSSをもっと便利に楽しく書けるCSS拡張メタ言語「SCSS」導入ガイド - つみきスタイル CSSをもっと便利に楽しく書けるCSS拡張メタ言語「SCSS」導入ガイド - つみきスタイル のブックマークコメント

もはやスパムの墓場にすらなってる感じの当グループですが、みなさまいかがお過ごしでしょうか。諸事情によりidと名前が変わった鵜巷です。

世の中の変遷は凄まじいもので、インターネット新時代やらWeb2.0やらもすっかり過ぎ去り、ブラウザついてりゃどこでも動くウェブアプリケーションの時代、HTML5+JavaScriptでなんでも作っちゃう世界がやって来ました。ウェブアプリケーションの開発が活発になったため、CSSによるデザインについても開発効率を向上させるニーズが大きくなりました。CSSって書くのものすごく辛いですもんね。親子関係とか親子関係とか親子関係とか。

というわけで最近流行りのスタイルシートを動的に出力するための言語をやってみようという話。主に使用されているCSSメタ言語は LESS と SCSS がありますが、今回挑戦するのはSCSSです。SCSSを選択した理由は、

  • 出力されるCSSがすっきりまとまっている
  • Mixin(自分で用意できるCSSコードブロック)の仕様が好み(可変長引数とか)

あたりです。LESSのほうがシンプルだしとっつきやすそうですが、のちのち書いてるうちに辛くなりそうなのでやめときました。LESS と SCSS の比較記事はたくさん書かれているので検索してみましょう。

導入

SCSSはCSSではなく、そのままではブラウザに読ませることは出来ないため、SCSSからCSSにコンパイルする作業が必要になります。SCSSを始めるにあたって、まずその仕組を準備しなければいけません。

1. Ruby のインストール
Windows
http://rubyinstaller.org/から実行ファイルをダウンロードしてインストール。インストール時に必ず「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れること
MacOS
最初から入ってるらしい
Linux
わかるだろ
2. Sass のインストール

コマンドプロンプトで

> gem install sass

試してみる

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

上記を style.scss という名前で保存。SCSSを記述するファイルの拡張子は .scss で統一しときましょう。

コマンドプロンプトで

> sass style.scss style.css

と打てば、

.content-navigation {
  border-color: #3bbfce;
  color: #2ca2af; }

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce; }

という内容で style.css が出力されます。インデントが気に入らない場合、

> sass -t expanded style.scss style.css

とすればいつもの感じになります。

> sass -t expanded --watch style.scss:style.css

と打つと、 style.scss の監視を始め、 style.scss を更新するたび style.css を自動で書き換えてくれます。開発するとき便利ですね。

あとはこのへん(http://sass-lang.com/tutorial.html)みて。

日記

SCSSの練習にはてなダイアリー公開デザインをSCSSで書いてみようと思って導入記事かいてみた。ところで、公開デザインの公開者名だけ変更したいんだけどなんか手段ないだろうか。多分なさそうなので新規で公開しなおして古いのを非公開にするかなぁ。

cf.

SinemSinem2013/11/22 01:58You've hit the ball out the park! Inreidcble!

JesuussJesuuss2013/11/23 01:44Just the type of <a href="http://ixewhwrl.com">insgiht</a> we need to fire up the debate.

AslanAslan2013/11/23 13:49Phnoamenel breakdown of the topic, you should write for me too! http://spyrcjhx.com [url=http://craxkr.com]craxkr[/url] [link=http://grxszosnu.com]grxszosnu[/link]

VitoriaVitoria2013/11/25 09:01This article aceeivhd exactly what I wanted it to achieve. http://ibfdyoiw.com [url=http://rjmkgxyj.com]rjmkgxyj[/url] [link=http://gcipqsvrv.com]gcipqsvrv[/link]

2007.5.30

[]ダブルスラッシュのコメントが使える 00:23 ダブルスラッシュのコメントが使える - つみきスタイル を含むブックマーク はてなブックマーク - ダブルスラッシュのコメントが使える - つみきスタイル ダブルスラッシュのコメントが使える - つみきスタイル のブックマークコメント

というのはガセ。ネタ元は僕です。大発見だと思ったんですけど思い違いでした…

事の発端はg:twitter:id:Cormorantのデザイン変更のためにCSSをいじっていたときのこと。最近たまにjavascriptを書いたりするので

//    alert(&#39;コメントアウト。コメント化されているので実行されませんの&#39;);

みたいなことをよくするようになったのですが、このダブルスラッシュのコメントアウトをCSSでも出来ないかなーと思ってやってみたところ、出来る。標準・互換関係なく出来る。

f:id:Cormorant:20101228022148j:image:w350

えー!出来るの!?試したことなかったー!と大興奮。これは革命が起こる…!

ところが、他のブラウザでもやってみようとIE,FireFox,Operaで試したところ、IEでコメントアウトが効かない。もしや…と思いCSSのエラーを見てみると、スタイル宣言であるべきところが '/' になっています。 これを無視して次のスタイル宣言を処理します。とのこと。行頭でエラーが起こってるからこの行まるまる無視するねーっといわれてしまいました。

つまりこれはアンダースコアハック(スターハック)と大して変わらないのでした。IEの、プロパティの前に様々な特殊記号を置いてもそれを読み飛ばして解釈するバグが影響しているという点で(なのかはよくわからんかったけど)。違うところは、不明なプロパティでエラーになるか、文法エラーか。

アンダースコアハックの代わりに使えないこともないですが、ダブルスラッシュだとコメントみたいでハックだって分かりにくいし、ああもう!

まぁ、えーと、CSS書いてるときや検証を行っているとき、表示の変化を確認したいときにコメント代わりに使ってはいかがでしょう…

DetrojaDetroja2012/06/06 12:15What an awesome way to explain this-now I know everythnig!

oajwbhnooajwbhno2012/06/07 06:06Q0VPNC <a href="http://qxdsshlqhhmn.com/">qxdsshlqhhmn</a>

dflkbuvdyldflkbuvdyl2012/06/07 10:40L8Ty5a , [url=http://ffpiyjstemsr.com/]ffpiyjstemsr[/url], [link=http://fqsfvzntmlra.com/]fqsfvzntmlra[/link], http://vrqeqklxxznv.com/

vttmjvxnvttmjvxn2012/06/07 18:27ZewcVr <a href="http://mygnpnlimbgi.com/">mygnpnlimbgi</a>

fovqvcrffovqvcrf2012/06/13 05:528F0ZGx , [url=http://wobavnsyffuk.com/]wobavnsyffuk[/url], [link=http://ypkqlzmyfqkd.com/]ypkqlzmyfqkd[/link], http://ilaeyvfyeqgr.com/

2007.1.27

[][]今日見たIE7のバグに関連すること 00:14 今日見たIE7のバグに関連すること - つみきスタイル を含むブックマーク はてなブックマーク - 今日見たIE7のバグに関連すること - つみきスタイル 今日見たIE7のバグに関連すること - つみきスタイル のブックマークコメント

[][]nnに重大なバグが 00:14 nnに重大なバグが - つみきスタイル を含むブックマーク はてなブックマーク - nnに重大なバグが - つみきスタイル nnに重大なバグが - つみきスタイル のブックマークコメント

d:id:asukabさんに不具合のご報告を頂きました。見限ったりせずに教えていただけたのは本当にありがたいことです。

内容は、登録した画像の幅の分タイトル(h3要素)が左へずれる。原因は、

で、このバグが空のエントリー用に高さを指定してあったdiv.sectionに適用されて表示が崩れていたようです。ちなみにこのバグ、IE7正式版でも修正されてないようです。IE7StandaloneをRC1から正式版に変えてチェックしてみましたが、ばっちりずれました。IE7ではmin-heightが実装されたので、そっちでもこのバグが適用されました。

あぁ、思い出した。半年前の自分はこのために高さを指定しなかったのだな。じゃあどっかに書いとけよ!! 何ヶ月かにいっぺん思い出したかのように更新してたのが悪いですけど!!

と、これの修正のためにheightとmin-heightを0にしたのですが、今度はasin-detailのfloatで表示が崩れまくり。これはwidthを指定して解決しました。こうなることは分かっていたのに面倒くさがって指定してなかったのがまずかった。今のところ崩れてないからいいやってのはだめですね。

ついでなので、ほかにも公開してから気になってた部分を2つ3つ修正。AA記法が出来る前からちまちまと書いてたのでAA表示用のクラスがあったのですが、それをAA記法のdiv.ascii-artに対応させました。これでAA記法を使ってもきちんと表示されるはずです。もうひとつは原因が分かっていながらも修正箇所が多くて見なかったことにしてた左右ボーダーとパディングを設置した要素に後続する部分がずれるバグの対応。paddingと左右borderを同時に指定している部分に透明なborder-bottomを指定して、さらにIE6用にborder-bottom-colorを指定。border繋がりで、blockquoteにも使えるようにしてた見出し要素をpreにも使えるようにしました。あと、色違いごとに特別な指定をしたくないと言う理由で放っておいたnn yellowの見出し要素のキーワードリンクがIEで目立つ問題も修正しておきました。

以上の修正で気になってた部分は大体直せたのですが、div.sectionに高さを指定できなくなったので、IEで空のエントリーのタイトルが確実に重なるようになりました。これはもうどうしようもないという事にしておきます。CSSだけでheightを指定せずにfloatに隣接したブロックの高さを確保する方法は僕にはborderを指定するしか思い浮かびませんが、5emのborderを指定する根性はありませんのでやっぱ無理じゃないかと思いました。その旨も公開デザインの説明に書いて、つみきスタイルのURLを貼って置いたので、警告はしました、もうnnいいよね…?(一年以上nnと付き合ってるような気分だ)

そんなこんなで公開デザインにあるnnシリーズの更新をしましたので、nnを使用してくださっている方はインポートのやり直しをお願いします。CSSしか直してないのでスタイルシートの部分をコピペするだけでも問題ないです。お手数をおかけします。

2007.1.19

[][]IE7CSS攻略 01:11 IE7CSS攻略 - つみきスタイル を含むブックマーク はてなブックマーク - IE7CSS攻略 - つみきスタイル IE7CSS攻略 - つみきスタイル のブックマークコメント

MYCOMジャーナルさんいい仕事してます。

IE7正式版のCSS実装・バグ・ハックまとめ。IE7になって何が出来るようになったのかよく分かります。バグの対処法までばっちり載ってるので、4月のIE7自動配信までには対応できそうですね。

最初の数ページは「IEがんばったじゃん!」と見直してたんですけど、読み進めるうちに「あ…」と思いました。7でも出来ないことはあるし、7はよくても6以前がアレなんで結局アレでした。IE様とうまくお付き合いするためにはまだまだ気を使う部分が多そうです。

ognjenognjen2012/06/04 12:05Now that's sbulte! Great to hear from you.

hbktevdnvdhbktevdnvd2012/06/04 15:26J1ZFR2 <a href="http://kbgyyytgsmwg.com/">kbgyyytgsmwg</a>

crqkabymaxcrqkabymax2012/06/05 16:05ZG5kcR <a href="http://lumeekijdxda.com/">lumeekijdxda</a>

yoazvfadqjyoazvfadqj2012/06/06 14:13XmI7id , [url=http://krjljxzmuvnm.com/]krjljxzmuvnm[/url], [link=http://ldhtisvkshye.com/]ldhtisvkshye[/link], http://ctsmzuqmwxft.com/

2007.1.14

[][]nnとか公開してきました 22:10 nnとか公開してきました - つみきスタイル を含むブックマーク はてなブックマーク - nnとか公開してきました - つみきスタイル nnとか公開してきました - つみきスタイル のブックマークコメント

前回一応完成ということにしていましたが、Operaで微妙に崩れていたり、色違い作ってるときにちょっと気に入らない部分が出てきたりで、またちょっと修正しました。あとIEで本文がないと崩れる問題も高さを指定して解決しました。そうだよheight指定すればいいんだよ…いままでずっと気づかなかった…

そしてなんとtDiaryにも対応。tDiaryの設定で、ヘッダに

<div class="hatena-body">

フッタに

</div>

を入れると使えるようになります多分。

そんな感じで色違いも無駄に6つ作って、せっかく公開デザイン機能があるので、そこにnn7種を投下してきました。色違いで7種も登録しちゃって全く迷惑な奴ですね。

そして今テーマ一覧見てきたら早速カスタマイズされててびっくりしました。ありがとうございますうへへ。


万が一気づいていただけたら以下を追加して欲しいなぁ

pre a.keyword,
pre a.okeyword {
	color: #fff;
}

TomTom2012/06/06 11:57If you're reidnag this, you're all set, pardner!

bjnuiagybjnuiagy2012/06/06 16:42hPPbw5 <a href="http://yhmhvuswzuvr.com/">yhmhvuswzuvr</a>

libfdjzdgylibfdjzdgy2012/06/07 11:01UZ7pDA , [url=http://wfmybuzngibc.com/]wfmybuzngibc[/url], [link=http://bcgojcddybwt.com/]bcgojcddybwt[/link], http://gvrokuvpyivp.com/

libfdjzdgylibfdjzdgy2012/06/07 11:02UZ7pDA , [url=http://wfmybuzngibc.com/]wfmybuzngibc[/url], [link=http://bcgojcddybwt.com/]bcgojcddybwt[/link], http://gvrokuvpyivp.com/

mjibdsemjibdse2012/06/07 18:03HfXWzQ <a href="http://lhutqlotpwnu.com/">lhutqlotpwnu</a>

lnqyikcroylnqyikcroy2012/06/07 21:27FBrqBE , [url=http://zbnjuncdjcvc.com/]zbnjuncdjcvc[/url], [link=http://qmiqxnaohbhv.com/]qmiqxnaohbhv[/link], http://xqsjoymjpkoc.com/

keyword

はてなダイアリーの構造

■ はてなダイアリーの構造 はてなダイアリーのデザインの参考にしてください。 ダイアリーの構造 ヘッダの構造 カスタマイズに関するメモ ■ ブックマーク...

box-sizing

■ 注意 Opera8.0enで実装されていることを確認しました。CSS3草稿の先行実装と思われます。 実験的なものなので将来削除される可能性があります。 ■ 用語の簡単な解説 &#...

はてなブックマークの構造

■ はてなブックマークの構造 はてなブックマークのデザインの参考にしてください。 ブックマークページの構造 タグリスト絞り込みの構造 コメント直接編集機能の構...

はてなアンテナの構造

はてなアンテナの構造です 基本の構造 アンテナモード シンプルモード 詳細モード ■ 基本の構造 html body table tbody ...

はてなグループの構造::日記::日記を書くの構造

■ /css.g.hatena.ne.jp/UserID/edit ←はてなグループの構造←はてなグループの構造::日記の構造 ■ ページの構造 html body table //はてなヘッダ h1 div#ha...