2015年02月22日

SUIT CSS

SUIT CSSはコンポーネントベースのCSS設計手法。ReactやEmber、 AngularといったコンポーネントベースのUI設計と相性がよい。個人的にはBEMよりこちらの設計手法のほうが使いやすい

SUIT CSSはCSSのclassの命名規則CSS preprocessor(プリプロセッサー)などで定義される。続きを読む
タグ:CSS suit
posted by ねこまんま at 07:30 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2014年01月07日

MarvericksにSass/Compassをインストールしようとしたらハマった

MarvericksにSass/Compassをインストールして「compass watch」をするとエラーが出てハマった。

/Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_require.rb:135:in `require': cannot load such file -- sass/script/node (LoadError)


Subtheme error. `require': cannot load such file -- sass/script/node (LoadError) [#2148277] | Drupal.org

を見るとruby 2.0.0p247だと動かないかもなのでruby-2.0.0-p353をインストールしろとのこと。ということで Homebrew と rbenvをインストールしてruby-2.0.0-p353にしても改善されず。

色々と見ているとCompassとSassの相性の問題らしい。CompassとSassをアンインストールしてからバージョンを指定してインストール。あと、compass-sourcemapsも必要らしいのでこちらもインストール。

gem uninstall sass
gem uninstall compass
gem install sass -v 3.3.0.alpha.149
gem install compas
gem install compass-sourcemaps -v 0.12.2.sourcemaps.57a186c --pre


これでもエラーが出てグヌヌ!ってなってたけどターミナル再起動したらちゃんと「compass watch」できるようになってた。
posted by ねこまんま at 21:21 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年10月30日

StyleDoccoの使い方

StyleDoccoはnode.jsベースのCSSドキュメント生成ツールです。node.jsとgitがインストールされている環境なら以下のコマンドでインストールが可能。

 sudo npm install -fg styledocco


node.jsは公式サイト(http://nodejs.org/)よりパッケージをダウンロードしてインストール可能。gitはXcodeの上メニューXcode→ preferences→ DownloadsよりCommand Line Toolsをインストールすることでインストールできます。

ターミナルで作業ディレクトリに移動し以下のコマンドを入力すればドキュメントが生成される。

 styledocco -n "My Project" css 


ドキュメントの内容はマークダウンでCSSファイル内のコメントに記述

### デフォルトのボタン



`.btn01`クラスを付与する。



```

<a href="#" class="btn01">Btn</a>

```
posted by ねこまんま at 14:04 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年04月08日

IEのlayout-grid-line プロパティ

ネタ元:【CSS】画像を上下中央に表示する(IE7以下にも対応させる) | バシャログ。

IEで利用できるlayout-grid-lineを指定することでvertical-alignで中央表現できるらしい。知らなかった。

line-heightでいいんじゃないかと思うけど、これはこれで便利そう。
posted by ねこまんま at 14:54 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

CSSの包含ブロック

CSSの包含ブロックをちゃんと理解してなかったのでメモ。

"包含ブロック"の定義

基本はroot要素、先祖要素にfloatやposition:absolute、position:fixedがあるとそいつが包含ブロックのroot要素になる。

ちなみにpadding-topやpadding-bottomに%で指定を行うと、包含ブロックの幅が%の基準になる。

8.4 パディング特性 (’padding-top’, ’padding-right’, ’padding-bottom’, ’padding-left’及び ’padding’)
タグ:padding
posted by ねこまんま at 12:28 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

position:absoluteを指定された要素のheight;

ちょっと知らなかったのでメモ。

position:absoluteを指定された要素にheightを%で指定するとposition:static以外の先祖要素のコンテンツボックス(height+padding)を基準に高さが算出される。



普通は明示的に指定されたheightをもとに算出だけどちょっと違うっぽいです。
posted by ねこまんま at 11:43 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年02月06日

CSSでマウスカーソルを設定する

予想以上に手間取ったのでメモ。

CSSでカーソルを変更するにはcursorプロパティにurl()で画象を指定します。autoも忘れずに。

cursor: url(img/cursor_zoom01.cur), auto;


利用できるのは.aniと.cur。これを作るのがメンドクサイ。

32px☓32pxのbmp画象を用意し、透過色は1色なので透過したい箇所は別の色を指定しておく、アンチエイリアスとかは諦める。

bmp→curの変換はMacのソフトが見つからなかったので、WindowsのANIメーカーを使って変換しました。Windows 7でもちゃんと動いたよ。
タグ:cursor
posted by ねこまんま at 12:26 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年01月20日

Firefoxのキャレットブラウズに対応する

Firefoxではキャレットブラウズといってテキストをクリックするとテキスト選択状態になります。

テキストの場合はいいけど画象とかボタンの場合にもテキストがでてきてうっとおしい。

これはCSSでfont-size:0;を指定すれば消すことができます。
タグ:Firefox
posted by ねこまんま at 21:14 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年01月13日

Stylus+nibのインストール

まずはnode.jsをインストールします。node.jsはインストーラーが公開されているので公式サイトで「インストール」からpkgファイルをダウンロードしてクリックしてインストールできます。

つぎにStylus+nibのインストールをします。Macのターミナルを開いて次のコマンドを入力

sudo npm install -g stylus nib


これでインストールは完了。

コンパイルする際には-uオプションでnibを指定する必要があります。

stylus aa.styl -u /usr/local/lib/node_modules/nib/

タグ:node.js NIB stylus
posted by ねこまんま at 04:54 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年12月14日

MacでCSS3アニメーションで画面がチカチカする件

CSS3の-webkit-keyframesを-webkit-transformを利用してアニメーションを指定しているとどうやMacのSafariやGoogle Chromeで画面がチカチカしてしまう。

どうもclassの抜き差しでグラフィックアクセラレータが切り替わるのが問題っぽい。以下のように隠し要素を無限にアニメーションしておけばチカチカ問題も解決です。

#hack{
width:0;
height:0;
-webkit-animation:hack 2000ms infinite;
}
@-webkit-keyframes hack {
0%{
-webkit-transform: rotate(0);
}
100%{
-webkit-transform: rotate(360deg);
}
}
posted by ねこまんま at 19:37 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年09月03日

CompassでCSSをminifyして出力する

CompassでCSSをminifyして出力するにはconfig.rbを以下のように変更するとCSSをminifyして出力してくれるようになります。

output_style = :nested




output_style = :compressed 


便利。
タグ:minify compass
posted by ねこまんま at 00:39 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年08月19日

compassでCSS3

compassを利用してCSS3を利用する方法

@include background-size(5px 5px);


といった具合に基本的に@includeの後に利用したいCSS3の記述を行ない、()内に値を記述する。

-webkit-transformなどは各値ごとに関数が設定されているので次のように記述

@include rotate(45deg);


グラデーションは少し複雑だがbackground-image()の中にlinear-gradient()を設定し、グラデーション部分はcolor-stops()で設定を行う。

@include background-image(linear-gradient(left top,color-stops(
rgba(255,255,255,0),
rgba(255,255,255,0) 45%,
rgba(255,255,255,.2) 46%,
rgba(255,255,255,.2) 54%,
rgba(255,255,255,0) 55%,
rgba(255,255,255,0)
)));
posted by ねこまんま at 21:37 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年06月05日

CSS3のpointer-events

CSS3のpointer-eventsを利用するとマウス操作のイベントを無効化できる。

pointer-events: none;


Androidでレイヤーのせた際に下のエレメントが反応する場合などにも利用可能。
タグ:pointer-events
posted by ねこまんま at 15:37 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年04月02日

Compass入門

CompassはSassを拡張するメタ言語、CSS3などに対応した様々なMixinsが用意されていてかなり便利。

@import "compass";
.simple { @include border-radius(4px); }


と書くと

.simple {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}


って表示されたりする。
タグ:compass SASS
posted by ねこまんま at 17:10 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

はじめてのSass入門

SassってCSSを生成するメタ言語。つまりSassで書いたコードはコンパイルするとCSSにです。

Sassのインストール

Mac OS X 1.7 Lionを前提に解説を進めていきますね。

CUIで作業しても良いのですが今回はScout というGUIベースのフリーソフトを利用します。

via Compass / Sass の導入が簡単にできる Scout を試してみた|linker journal|linker

インストールできたらプロジェクトにSassを利用したディレクトリを追加してその中にstyle.scssのように拡張子scssのファイルを作成します。

では早速Sassを書いていきましょう。

まずはネスト

body{
margin:0;
h1{
font-size:12px;
}
}


といった内容をscssファイルに記述すると書きだされるcssファイルの内容は次の様になります。

body{
margin:0;
}
body h1{
font-size:12px;
}


このようにセレクタをネストして書いていくことでセレクタを補完してくれます。

親要素の参照

ネスト中に&を利用すると親要素を参照できます。

a {
color: #ce4dd6;
&:hover { color: #ffb3ff; }
&:visited { color: #c458cb; }
}


このように書くと

a {
color: #ce4dd6;
}
a:hover {
color: #ffb3ff;
}
a:visited {
color: #c458cb;
}


つぎのように変換されます。

変数

$で変数が定義できます。

$main-color: #ce4dd6;
#navbar {
border-bottom: {
color: $main-color;
}
a {
color: $main-color;
}
}


これは以下のように変更されます。

#navbar {
border-bottom-color: #ce4dd6;
}
#navbar a {
color: #ce4dd6;
}


使いまわす値が多い場合に便利ですね。

演算

算術演算も可能です

#conatent{
width:500px+200px
}


と書くと

#conatent {
width: 700px;
}


に変換されたり

$main-width :500px;
$side-width :200px;
#contain {
width:$main-width+200px
}


と書いたら

#contain {
width: 700px;
}


と変換されたりします。

Interpolation

#を利用するとセレクタやプロパティでも変数が利用できます。

$side: top;
.rounded-#{$side} {
border-#{$side}-radius: 10px;
-moz-border-radius-#{$side}: 10px;
-webkit-border-#{$side}-radius: 10px;
}


と書いたら

.rounded-top {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}


と変換されます。

ミックスイン - Mixins

よく利用する記述は記述する@でMixinsとして定義でき後から使い回しができます。

@mixin clearfix{
content:"";
display:block;
clear:both;
}
#main:after{
@include clearfix;
}
#comment:after{
@include clearfix;
}


これが次のように変換されます。

#main:after {
content: "";
display: block;
clear: both;
}
#comment:after {
content: "";
display: block;
clear: both;
}


ミックスインは引数をとることができます。

@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }


こう書くと

#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}
#footer {
border-top-radius: 5px;
-moz-border-radius-top: 5px;
-webkit-border-top-radius: 5px;
}
#sidebar {
border-left-radius: 8px;
-moz-border-radius-left: 8px;
-webkit-border-left-radius: 8px;
}


次のように変換されます。
タグ:SASS
posted by ねこまんま at 13:36 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年03月16日

CSSでhr要素のラインを装飾する

hr要素を装飾するにはborderを0にしてからborder-topかborder-bottomにスタイルを適応させます。

hr{
border:0;
border-bottom: 1px dotted #009760;
height: 1px;
}


ちななみにデフォルトではborder-topとborder-leftを使って描画されてるみたい。
タグ:hr CSS
posted by ねこまんま at 11:55 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年02月13日

webkitAnimationEndでCSSアニメーションが終了した際にJavaScriptを実行

webkitAnimationEndをバインドすればアニメーションが終った際のイベントが設定できる

$('h1').bind('webkitAnimationEnd', function () {
alert("ok")
});


サンプル
posted by ねこまんま at 18:19 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年02月12日

CSS3アニメーション入門

次のようなHTMLが合った場合

<h1>hogehoge<h1>


@keyframesを利用してアニメーションが設定できます。

@-webkit-keyframes hogeName{
0% {background-color:red}
50% {background-color:yellow}
100% {background-color:black}
}


設定したアニメーションは次のように指定することで要素に適応できます。

h1{
-webkit-animation;hogeName 5s;
}


サンプル

次のようにeasingで速度を調整することも可能です。(ease linear ease-in ease-out ease-in-out)

h1{
-webkit-animation;hogeName 5s ease;
}


animation(またはanimation-delay)でアニメーションを送らせて再生できます。次のようにすると3秒後にアニメーションが発生します。

h1{
-webkit-animation;hogeName 5s 3s;
}


animation(またはanimation-interation-count)で繰り返し回数を制御することができます。

次のように指定するとアニメーションを3回繰り返し、

h1{
-webkit-animation;hogeName 5s 3;
}


次のように指定するとアニメーションを無限に繰り返します

h1{
-webkit-animation;hogeName 5s infinite;
}


animation-directionでは2回目以降のアニメーションの方向が指定できます

h1{
-webkit-animation;hogeName 5s infinite alternate;
}
posted by ねこまんま at 01:00 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年02月02日

Firefoxでbackground-position-yが動かない件

background-position-yを利用しようとして次のようなコードを書いたんだけどもFirefoxだけ見事に動かない。

$("#purposeBlock").css("background-position-y",hoge+"px");


background-position-yはIEの独自実装をwebkitが取り込んだものなのでFirefoxで動かないのは仕方ない。

$("#purposeBlock").css("background-position","center "+hoge+"px");


このように修正するとFirefoxでも動きますよ
posted by ねこまんま at 16:40 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2011年12月17日

Twitterの新ツイートボタンの横幅を縮小する

Twitterのツイートボタンが新しくなったのはいいけど横に無駄な余白が・・・・次のようなCSSを適応するとサイズを縮小することができる。

iframe.twitter-share-button{
width:100px !important;
}


Twitterはiframeのstyle属性にCSS を書いているので!important は忘れずに!
タグ:twitter
posted by ねこまんま at 17:55 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする