Hatena::Groupcss

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

3000.0.00ガイド

お知らせ お知らせ - つみきスタイル を含むブックマーク はてなブックマーク - お知らせ - つみきスタイル お知らせ - つみきスタイル のブックマークコメント

nn

SCSSに置き換え中
専用ページ対応(あとasinreviewlistを見たいな)
目標は全モジュールを見る(だいたい見た)
公開デザインから消えるかも(SCSSに置き換え終わったらCormorantで復活予定)

qgofeesixxqgofeesixx2013/01/31 10:42pKj76b <a href="http://esifpgrndcga.com/">esifpgrndcga</a>

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書いてるときや検証を行っているとき、表示の変化を確認したいときにコメント代わりに使ってはいかがでしょう…

[]おあー4ヶ月 00:35 おあー4ヶ月 - つみきスタイル を含むブックマーク はてなブックマーク - おあー4ヶ月 - つみきスタイル おあー4ヶ月 - つみきスタイル のブックマークコメント

も放置してましたか。いつの間にか日記のほうのPV数追い越しちゃったしー。でもがんばらない。書くことあんまりないもの!

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.2.01

[]IE7のラベルについて 15:50 IE7のラベルについて - つみきスタイル を含むブックマーク はてなブックマーク - IE7のラベルについて - つみきスタイル IE7のラベルについて - つみきスタイル のブックマークコメント

今さっき気付いたんですが、IE6と7でlabelの動作が違う。

formの部品と関係付けるlabelタグがありますよね。ラベルをクリックすることで対応するフォーム部品を選択できるという。

そのlabelの作成方法のひとつに、labelの中にラベルとフォーム部品をひとつ入れてラベルを作る方法があるんですが、IE6以前ではこのforなしの指定方法に対応してませんでした。

それがIE7では対応してる。これは案外重要なことだと思いました。IE7が普及すればフォームの部品に無駄なidをつけていく必要がなくなり、ラジオボタンやチェックボックスだらけのページで余計なマークアップが消えてくれるので、かなりすっきりします。

フォームの部品はidつけるほどユニークじゃないと思ってたのでちょっとうれしいかも。

JosieJosie2012/02/16 07:20If time is money you've made me a wleatehir woman.

dywoasskdywoassk2012/02/16 20:06mVQqih <a href="http://vhryxaxgbmxu.com/">vhryxaxgbmxu</a>

sgrbegrwsgrbegrw2012/02/17 17:30ONHCxN , [url=http://xiixxtxschjh.com/]xiixxtxschjh[/url], [link=http://oixfwzepoqqe.com/]oixfwzepoqqe[/link], http://qzzwbuahkjie.com/

hrsuzkktfyhrsuzkktfy2012/02/18 02:10ZQXB2O <a href="http://ljtpkdqyeeel.com/">ljtpkdqyeeel</a>

2007.1.28

[]nnで一行更新をしたい 21:16 nnで一行更新をしたい - つみきスタイル を含むブックマーク はてなブックマーク - nnで一行更新をしたい - つみきスタイル nnで一行更新をしたい - つみきスタイル のブックマークコメント

nnでは記事タイトルのみ、またはごく短い内容での更新を行うとIEで記事タイトル(h3)同士が重なってしまい、非常に見づらい(というか見えない)です。

nnでも一行更新をしたい場合は

div.section {
	margin: 0 0 1em 200px;
	padding: 0 0.5em 0 1em;
	min-height: 5em;
	*min-height: 0;

の、*min-height: 0;_height: 5em;に修正してください。こうすることでIEでも記事タイトルが(ある程度の長さまでは)重なることなく表示されます。

ただし、日付ごとの「今日の1枚」を登録していると、その画像ぶんタイトルがずれてしまいますので、この修正をおこなう方ははてなフォトライフに画像の登録をしてください。

StafoniaStafonia2012/02/17 12:57I could watch Schindler's List and still be happy after raednig this.

hxklrcblevhxklrcblev2012/02/17 19:126G642a <a href="http://qdejrjwptesd.com/">qdejrjwptesd</a>

kwmobqynxkwmobqynx2012/02/19 21:43krLbon , [url=http://newihcsalnjn.com/]newihcsalnjn[/url], [link=http://fwzxrbqfsmbi.com/]fwzxrbqfsmbi[/link], http://cgwtfeysdneu.com/

jpslpicrejpslpicre2012/02/24 02:48imzCAt <a href="http://ytopsjkhfqpr.com/">ytopsjkhfqpr</a>

keyword

はてなダイアリーの構造

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

box-sizing

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

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

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

はてなアンテナの構造

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

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

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