タグ

ブックマーク / css-happylife.com (6)

  • Windows対応のSassとかのフリーのコンパイラ

    気付いたら、三ヶ月更新なし・・・(;´Д`) 最近は、Sassの勉強をやり直したりなんやかんやと過ごしてたり、ねこブログなんぞ始めたりしてました。 良ければ見てください!>< ねこねこキューブ ~ スコティッシュフォールド『アル&イブ』の今日この頃。 さて、今回はSassをコンパイルしてくれるGUIツールをちょっとご紹介。 以前、Scoutってのを紹介しましたが、こちらは最近更新がされてないってのも有りまして、Windowsで使い勝手良い他のコンパイラを紹介出来ればと。 Windowsで使えるってのが大事です。ボクはWindowsな人なので。 Koala 一つ目は、Koala と言うコンパイラで、更新頻度も高い感じでRubyさえインストールされていれば、すぐに使えます。 このコンパイラは、次のアップデートでほぼ確実に日語対応が決定してます。 また、動作もかなり軽い感じで、相当使い勝手が良

    Windows対応のSassとかのフリーのコンパイラ
  • 【Sassを覚えよう!Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する

    前回の記事を書いたら、バッチファイルを使えばもっと楽ですよ!と言うのをTwitterで@grfxdsgnさんから教わりました。 バッチファイルとか全くわかってなかったんですが、軽く調べたり教わったりしてたらボクが理想とする感じの運営が出来そうだったので、当初は予定してなかったエントリーですが、これで黒い画面からの利用がScoutより楽な感じになると思うので、ぜひ利用してみてください! こうやって記事を公開することで、反応があってよりステキな方法に巡り合えるって良いですね。 久々に、ブログを書くことの面白さの一つを思い出したような気がしないでも無いです。 バッチファイルって? ウィキペディアとか見てもらうと色々書いてありますが、黒い画面で実行できるコマンドをテキストファイルに記述したもので、これを実行すると黒い画面がそこに書いたコマンドやらを読んで実行してくれます。 その際、拡張子は通常「.

    【Sassを覚えよう!Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する
  • レスポンシブウェブデザインに対応したMT5のテーマを公開しました

    最近は、スマートフォン向けのサイトをやけに作ったりしてるhirasawaです。どうも。 しばらく更新されてなかったMTのテーマを配布している、MT underHatですが、久々にテーマを2つほど追加しました。 1つ目は、企業サイトの新着情報とかで使えそうなテーマです。 特長として、PDFファイルをアップしたら、記事の詳細ページにリンクせず、直接PDFファイルにリンクしたり、URLを入力すると該当のページに移動できたりと、企業サイトで必要そうな機能を入れた感じにしています。 テンプレートはあんまり複雑にせず、デザインも殆ど当ててないので、このテーマをベースにカスタマイズして使えそうな感じです。 企業サイトで、部分的にMTを使う場合の参考にもなるかもです。 MT underHat テーマ 005 - 新着情報 | MT underHat 2つ目は、ブログに使える普通のテーマですが、レスポンシブ

    レスポンシブウェブデザインに対応したMT5のテーマを公開しました
  • 指定した幅からはみ出たテキストを...にする

    ブログを更新してるって事はわりと仕事が落ち着いている時! 良いのか悪いのかは分かりません。 して、さすがに、前のネタはビミョー過ぎたかな!とか思いつつも今回も特に珍しいネタではないですが、メモがてら。 随分昔に、似たような記事を書いてますが、あっちは使い勝手が悪いので、今回はちゃんと使えそうな方法です。 使いドコロとしては、パンくずリストとかスマホ対応の記事一覧とかでしょうか。 サンプルは下記よりご覧ください。 重要になってくるのは、以下の3つのプロパティです。 ul li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } どれか一つでも無いとダメなので、セットで書くようにしませう。 わりとIE6でも...にはならないけど、切ることは出来たりと対象ブラウザも広いです。 パンくずリストで使う場合は、2行にな

    指定した幅からはみ出たテキストを...にする
  • コーディングする時のスライス方法とか - CSS HappyLife

    珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい! 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます! Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは

    コーディングする時のスライス方法とか - CSS HappyLife
  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
    lion_7326
    lion_7326 2012/07/27
  • 1