Windows対応のSassとかのフリーのコンパイラ
気付いたら、三ヶ月更新なし・・・(；´Д｀) 最近は、Sassの勉強をやり直したりなんやかんやと過ごしてたり、ねこブログなんぞ始めたりしてました。 良ければ見てください！＞＜ ねこねこキューブ ～ スコティッシュフォールド『アル＆イブ』の今日この頃。 さて、今回はSassをコンパイルしてくれるGUIツールをちょっとご紹介。 以前、Scoutってのを紹介しましたが、こちらは最近更新がされてないってのも有りまして、Windowsで使い勝手良い他のコンパイラを紹介出来ればと。 Windowsで使えるってのが大事です。ボクはWindowsな人なので。 Koala 一つ目は、Koala と言うコンパイラで、更新頻度も高い感じでRubyさえインストールされていれば、すぐに使えます。 このコンパイラは、次のアップデートでほぼ確実に日本語対応が決定してます。 また、動作もかなり軽い感じで、相当使い勝手が良
【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする
気付けば、Vol.10！ ずいぶん長編になってまいりました。 何気に、既に去年1年分のエントリー数を超えてるだなんて！ 今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。 ・・・はい、後者です。 さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます！ ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。 ここまで来ればだいぶSassを使いこなしてる様な気がしますよ！たぶん。 や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ｀)フーン 程度なん
【Sassを覚えよう！Vol.9】変数と演算で効率的に
ちゃっかりデザインを変更しました。 デザイン以外にも、メインエリアの横幅が変わったりしてます。 かなり突貫工事なので、色々アレな部分があるかと思いますが、、、 さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。 変数と演算のおさらい 軽くおさらいです。 次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
CSSSってコワーキングスペース運営するです。
年が明けて随分経ってしまいましたが、本年もよろしくお願いします。 去年の今頃は、Sassに関する記事を頑張って書いていた頃ですが今年はタイトルの件だったりでバタバタとしててブログも全然更新できてませんでした。 ・・・あ、いつもの事か。 今もわりとコーディングに追われてたりしますが、今日はボクと数名にとってちょっと特別な日だったりするので、ブログでもエントリーしようかと思いカキカキ。 えっと、去年の11月頃からコワーキングスペースを運営しようと動き出しました。 計画自体は、2011年の終わり頃から考えてて1年間は資金を貯める期間としてコソコソ頑張ってました。 実際の所、余裕がすごい有る！って感じじゃないんですが、お陰様である程度の資金を貯めることが出来たので、動き出しました。 もっと余裕出来てからでも良いんですが、これ以上動くのが遅くなってもアレですし、ボクも今年で30歳になる節目の年なので
ブロックレベル要素の高さを揃える
1日に2エントリーもするなんて、、、 [CSS]高さの異なるカラムを揃えるスタイルシート | コリスを読んでてなんだか気になったので、ちょっと自分でも試してみました。 サンプルページ ダウンロード この方法のポイントになっている部分が、#mainとかカラムの親要素にoverflow: hidden;を指定して、各カラムには、以下のようにpadding-bottomプロパティとmargin-bottomプロパティを指定してる。 padding-bottom: 32768px; margin-bottom: -32768px; padding-bottomプロパティでおもいっきり下まで下げてから、同じ値のマイナス値をmargin-bottomプロパティで指定して、overflowプロパティで切り取ってる？ 値の「32768px」ってのは、軽く調べた限りIEの限界っぽい。 ぷろぐらむ の関係なん
コーディングする時のスライス方法とか - CSS HappyLife
珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！ Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは
見出しの横などにボタンを配置
結構見かける、見出しなどの横に配置されているボタン。 ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。 他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。 このデザインを実現する際に、floatかpositionのどちらでも可能ですが、この場合はpositionの方が楽な上に柔軟に対応できる（と思う）のでオススメ。 ということで、ウチのサイトを例に作成方法を。 HTMLはこんな感じになってます。 <div id="main"> <h2>New Entry</h2> <p id="btnRss"><a href="/index.xml">RSS 2.0</a></p> ・ ・ ・ <!-- / main END --></div> CSSを切っている状態だと→こんな感じ。 position以外のスタイルを適用させると
【Sassを覚えよう！】もくじ的なのと参考リンク
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
