Posts Tagged ‘css’

images

一番理解しやすかったやり方を備忘録。

@import "compass";
@import "../img/icons/*.png";
@include all-icons-sprites;

$sprites: sprite-map("../img/icons/*.png");

.btn {
	background-image: $sprites;
	background-position: sprite-position( $sprites, facebook );
	&:hover{
		background-position: sprite-position( $sprites, facebook_off );
	}
	width:52px;
	height:52px;
}
images

WindowsでもCompass使えて、なおかつライブプレビューをしたいなーと思っていたところ、Preprosがいいという情報を見つけました。

つまり、HTMLやCSSを変更すると、即座にブラウザ上の編集しているページに変更が同期されるわけですね。
より直感的なコーディングが可能になります。

それで早速インストールして、使ってみたらこれがなかなか快適。
しかし、HTMLを変更してもそれはライブプレビューに反映されません。
これはProの機能だという事でProを購入しました。日本円で2500円くらいでした。

これでCSSフレームワークを使ってかっこいいサイトを作るぞ!と意気込み、フレームワークはGumbyが熱いという事で、これを使う事に。

しかし使い始めてしばらくして、トップのナビの色を変更したいなと思って該当のファイルをいじってみたところ(_setting.scss)、それ以降gumby.scssのコンパイルが通らなくなってしまいました。

ネットの情報を見てみたところ、こういう人は結構多いようで?
config.rbの中のコメントを外したりつけたりしたりだとか
参考:CSSフレームワーク「Gumby」について質問です。

などの情報がありまして、試してみたのですが解決しません。。。

custom Rubyにチェックを入れないといけないよ。
[SOLVED] Can’t compile gumby.scss that was generated by Claymate

という情報を見つけたので、これはPreprosについてくるCompassを使うのではなくて、マシンにインストールしたRubyを使うのだなと理解した私は、こっちにかけて見ることに。

とりあえず、rubyをWindows7のマシンにインストールするために、ソースコードからビルドとかちょっと不安だったのでインストーラーを使う事に
このページでx64のインストーラーをダウンロードして実行しました。
http://rubyinstaller.org/downloads/
インストールする時にPathを通すのもお忘れなく~。

それから
gem installコマンドを使って sass と compass をそれぞれインストール。
ついでにgumbyが使っている数式ライブラリである、modular-scalesassy-mathもインストールしておきました。

意気揚々とPreprosのオプション→Advanced Optionsから
Use Custom Rubyにチェックをいれ、For Sassにもチェックを入れ、いざコンパイル!
としてみたところ、やはり動かず。

config.rbをいじって該当箇所のコメントをつけたり外したりしてみたけどダメぽ。
PermissionDeniedとか出てきてWindowsでPermissionってどうするの?状態。

途方にくれていると、こちらの情報を見つけました。
なるほど、バージョンに依存するバグなのか?
参考:compassで自動コンパイルを設定した!

参考にさせていただいたサイト様の情報によると、以下の通り

1.コマンドプロンプト「gem uninstall sass gem uninstall compass」でsass/compassのアンインストールをする
2.コマンドプロンプト「gem install sass –-version “3.2.10″」でsassをインストールする
3.コマンドプロンプト「gem install compass –-version “0.12.2″」でcompassをインストールする

とあり、このバージョンを使えばうまく行くのかなあと、実際に試してみました。

上記は原文ママの引用ですが、私の使っているgemのバージョンではバージョンを指定するオプションは––versionでした。
つまり、gem install sass ––version “3.2.10″
とする事でコマンドを通す事が出来ました。

それでコンパイルをしてみましたが、やっぱりダメでした。
ダメ元でconfig.rbの構成を

# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
extensions_dir = "sass/extensions"

Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))

# Uncomment these to use regular Ruby gems.
# require 'modular-scale'
# require 'sassy-math'

と、マシンにインストールしたcustom rubyを使っているにもかかわらず、modular-scaleなどのライブラリはgumby付属のものを使うという設定にしてみたところ、
動いた━(゚∀゚)━!

という事で紆余曲折ありつつ、なんとかGumby.scssに触れる権利を手に入れました。
いやー、ハマったハマった。

css-miami-desktop

どうもこんにちは!最近はとっても寒いですね。
しかも、新年からなんとなくイメチェンしたくて先輩のやってる美容室に行って
「なんか変わった感じにしてください」とお願いしたら、ものすごい刈上げをいただき、首元がスースーすごい!
第二次世界大戦時のドイツ男性みたいな髪型になりました。面白い!でも寒い!

近況報告はこのあたりにして・・・。

最近友人のホームページを製作中に、友人の提示するフォントをホームページ中に使って欲しいと言われました。
WEBフォントの事は大体知っていたので、「ああ、出来ると思うよ。出来る出来る。」と二つ返事で快諾したところまではよかったのですが。
もらったフォントはTTFファイルであるにも関わらず、ど~しても適用できない。
どこのリファレンスを見ても

@font-face{
  font-family:'testFont';
  src:url('FontFileName.ttf') format('truetype');
}

.test{
  font-family:testFont;
}

と書いたら適用できました!ワーイ!みたいな事が書いてあるのですが、自分のはそうはならない。
なんでー!!といろいろやりつつ結局ほぼ丸一日ハマってしまいました。(つらたん)

しかしとうとう、この問題を解決する事ができました。
問題はフォントファイルのタイプ、または状態にあったようです。

フォントファイルを変えて試してみようと思いたち、
こちらのサイトで変換しようとしてみたところ
this file is corruptedと(このファイルは腐ってる)言われてしまいました。
それで、こちらのサイトでTTFをWOFFに変換してみたところ、上手くいきました。

これを以って、

@font-face{
  font-family:'testFont';
  src:url('FontFileName.woff') format('woff');

.test{
  font-family:testFont;
}

と記述してみたところ、testクラスにフォントを適用することがようやく出来ました。
この状態でスマフォでサイトを確認してみると、フォントは適用されておらず(Sleipnir)、
改めてTTFをソースに追加しました。

@font-face{
    font-family:'testFont';
    src:url('FontFileName.woff') format('woff'), /* Modern Browsers */
    url('FontFileName.TTF')  format('truetype'); /* Safari, Android, iOS */
}

どうやら、.TTFファイルはiOSやAndroid、SafariでのWebfont適用を可能にし、
通常のモダンブラウザ(FF,Chrome)等で見るときは.WOFFという形式にしないといけないのではないのかな。と。

しかし僕の持っていたTTFフォントファイルはCorrupted認定されていた訳で、普通のTTFファイルなら問題なく表示出来ている物だったのかもしれません。

なにはともあれ、かくしてホームページに目的のフォントをスマフォ、PCのブラウザ両方に適用する事ができました。
この問題解決のいとぐちはこちらのWebparkさまから頂きました。
感謝いたします。

ここまで読んで頂いてありがとうございました。

では、また!

photo by: geirarne