どうのこうの

名古屋/元フリーランス/スタートアップ勤務/ウェブ/マークアップ/プログラマ/エンジニア

Category: HTML+CSS

Mac OS 10.8(Mountain Lion)にSASS + Compassをインストールするメモ

Mac OS 10.8(Mountain Lion)にSASS + Compassをインストールするまでの個人的なメモ。

SASSはCSS風に書けてCSSファイルにコンパイルしてくれる言語で、
CompassはSASSで使えるライブラリ群ね。

詳しくは公式サイトを参照。

 

Compassの何が便利って、
CSS Spriteを作るのに、
画像を結合しなくてもいいし、
画像のpositionを指定しなくて良いのが便利過ぎる。

自分で画像を結合して、
選択ツールで座標を調べてたのは、
すげー無駄だったなぁって思う。

 

Rubyのインストール状態の確認

まずはRubyが入っていることを確認。
Mountain LionにはRubyが始めから入っているっぽいので、確認する必要がないかもしれない。

rubyは1.8系でも大丈夫(だと思う)。

 

RubyGemsのインストール

まず、RubyGemsのインストール状態を確認。

インストールされていない場合は、
公式サイトからダウンロードしてsetup.rbを実行。

Download RubyGems | RubyGems.org | your community gem host

ダウンロードもターミナルでやる場合は下記のような感じでしょうか。

すでにインストールされている場合は、
rubygemsをアップデートする。
(update_rubygemsとgem update –systemはどっちがいいんですかねぇ?)

インストール or アップデートができたら、
念のためバージョンを確認。

 

Compassのインストール

gemからCompassをインストールする。

念のためインストールできたか確認。

ちなみに、sassはcompassを入れると勝手に入る。

 

Compassの初期設定と監視

ディレクトリ構成はまだまだ検討中だけど、
今のところ下記のような感じにしている。

  • project_directory/
    • css/ → cssファイルを出力する
    • js/ → jsファイル置き場
    • img/ → 画像ファイル置き場
    • sass/ → sassファイル置き場

で、上記ディレクトリ構成になるように、
compassの設定ファイルを生成する。

 

scssファイルを監視する

下記のコマンドでsassファイルを監視して、
更新があるとcssファイルを書き出してくれる。

出力するcssファイルは、
minify化しない理由がないので、
config.rbに下記行を追加して、
始めからminify化するようにしている。

 

以上。
個人的なメモでした。

PIE.htcは「http://192.168.1.1/」みたいなIPアドレスでアクセスした場合に動作しない

PIE.htcを使ってて、
ちょっとハマったのでメモ。

PIE.htcってのは、
IE8以下にCSS3を適用するライブラリね。

 

で、いきなり結論なんだけど、
PIE.htcは「http://192.168.1.1/」みたいなIPアドレスでアクセスした場合に動作しない。

 

みたいなコードがあるとして、

 

http://www.example.jp/

では正しくシャドウがかかるけど、

 

http://192.168.1.1/

ではシャドウがかからない。

 

理由はわからないけど、
PIE.htc側で何か判別してるんですかねぇ。

シンプルなXHTML Transitional 1.0 + CSSセット「ttXHTMLTemplate」を公開しました

「公開しました」という程ではないのですが、
以前から簡単なWebアプリとか仕事でHTML組むときとかに使っていたHTMLセットを、
GitHubで管理することにしました。

MITライセンスなので、
良かったらカスタマイズしたり、
参考にしたりしてください。

今更XHTMLなのは、
数年前に作ってたやつなので…。

HTML5版もそのうち作りたい。

 

「ttXHTMLTemplate」の「tt」は僕のイニシャルです。

彼女(というか妻)に「dounokounoTemplateとかどう?」って相談したら、
「私の名前が入ってない!」と言われたので、
頭に「tt」を入れました。
彼女のイニシャルも「tt」なので。

あと、「ttTemplate」っていう名前にしようと思ったら、
スパイウェアっぽいものがすでにあったので止めましたw

ttTemplate – Google 検索

 

一時期、HTML初期セットを公開するのが流行って(?)いましたが、
いろんな人のHTML初期セットがGitHubで管理されて、
自由にForkできたら面白いなと思いました。

マークアップエンジニアの皆さん、
HTML初期セットをGitHubにコミットしたら、
僕にも教えてくださいね!!

第2回コーディングコンテストに応募した作品を公開しておきます

とーーーっても今更感が満載ではありますが、
第2回コーディングコンテストに応募した作品(?)を公開しておきます。
ついでに、第1回目の作品も公開しておきます。

 

ちなみに、賞をとることはできませんでした。
残念です。
次回、がんばります。

 

以下、第2回作品をコーディングしてみた感想など。

 

「display: -moz-box;」、「display: -webkit-box;」を初めて使った

「display: -moz-box;」、「display: -webkit-box;」を初めて使ったけど、
便利ねー。
もうじゃんじゃん使っていきたい。

【参考】

 

inputのplaceholder属性

inputのplaceholderを使ってみようとしました。
テキストフィールドにうっすら文字が出ていて、
focusすると消えるアレです。

けど、Safari4でしか動きません。
Firefox3.6も動いてくれればいいのに。

なので、jQueryのプラグインで実装しました。

【参考】

 

「header」、「footer」、「nav」、「aside」、「article」、「section」はインライン要素

「header」、「footer」、「nav」、「aside」、「article」、「section」はインライン要素らしいので、
それぞれ「display: block;」するのが良さげ。

 

グラデーション

背景のグラデーションをCSSで表現してみました。

あと、角丸もCSSでやってみました。

【参考】

HTMLメールなメルマガをWebメール対応したときのメモ

確認したWebメールとメーラー

メーラー

  • Apple Mail
  • Thunerbird 2
  • Thunerbird 3
  • Outlook Express

Webメール

  • Gmail
  • Yahoo!メール
  • Hotmail
  • hetemlのWebメール

 

対応したときのメモ

  • 基本的なレイアウトはテーブルコーディング
  • でも、ボーダーとかのCSSは使える
  • 「HTML 4.01 で」っていう情報もあったけど「XHTML 1.0 Transitional」でOK
  • CSSは基本、その要素に書く(Yahooメール、hotmailはhead内のスタイルも反映される。Gmailは反映されない。)
  • 画像はフルパス(http://〜)で書く
  • Gmailは独自のフォーマット(フォントサイズやリンク色)で表示される(hetemlのWebメールも)
    Hotmailも独自フォーマットだけど、Gmailほど規制が厳しくない。
    Gmailの独自フォーマットは調整がむずかしい。僕にはできなかった。(pは上下にマージン、等)
    だから、Gmailのフォーマットに添ったコーディング、見た目にしなければならない。
  • cssのbackgroundプロパティは使えない(Gmail、hotmailが未対応。Yahooメールは対応している。)
  • 画像をリンクする場合は、img要素にborder=”0″を追加する(追加しないと、Gmailでボーダーが表示される。)
  • Gmailでクリッカブルマップが動作しない(Yahooメール、hotmailは対応している。)

 

動作確認した環境

Mac

  • Mail
  • Thunderbird 3
  • Firefox 3(単純な表示を確認)
  • Firefox 3 + Gmail
  • Firefox 3 + Yahoo!メール
  • Firefox 3 + Hotmail
  • Firefox 3 + heteml Webメール
  • Safari 4(単純な表示を確認)
  • Safari 4 + Gmail
  • Safari 4 + Yahoo!メール
  • Safari 4 + Hotmail
  • Safari 4 + heteml Webメール

Windows

  • XP + Outlook Express
  • XP + Thunderbird 2
  • XP + Thunderbird 3
  • XP + IE6(単純な表示を確認)
  • XP + IE6 + Gmail
  • XP + IE6 + Yahoo!メール
  • XP + IE6 + Hotmail
  • XP + IE7(単純な表示を確認)
  • XP + IE7 + Gmail
  • XP + IE7 + Yahoo!メール
  • XP + IE7 + Hotmail
  • 7 + Windows Live メール
  • 7 + Thunderbird 3
  • 7 + IE8(単純な表示を確認)
  • 7 + IE8 + Yahoo!メール
  • 7 + IE8 + Hotmail

動作確認する環境が多すぎる。
これでもだいぶ端折った。
(「WinXP + IE8」とか「Opera」とか)

もっといろんな環境があると思うけど、
すべてを確認するのは現実的に難しいと思う。

OS と メーラ or ブラウザ + Webメール のパターン多すぎ。

上記動作確認環境で、
Win7 + IE8 + Gmailも確認したんだけど、
なぜか画像がまったく表示されなかった。

ほかのHTMLメールなメルマガも画像が表示されなかったから、
回線の問題なのかもしれない。

原因不明。

「Webメールはどのブラウザで見ても同じでしょ?」っというわけにいかないので注意。

「IE6 + Gmail」や「IE7 + Gmail」が微妙に崩れることがあった。

Firefox、Safari、OperaはOSやバージョン毎に確認しなくても、
まぁ大丈夫でしょう。

多分。
きっと。

jQueryの$().click(function(){$().submit()})がIE6で動作しない

例えば、下記の様なコードはIE6で動作しない。

理由はよくわからない。

「ある画像ボタンをクリックしたらsubmit」みたいなことがしたかったけどな。

ボタン画像をformのsubmitにする場合は、
buttonを使うのがよいかも。

僕はbuttonに対して画像置換を使った。

HTML

CSS

AirMac Extream2台で無線間通信

ちょっと離れたところにネットワークを引きたくて、
無線間の通信を導入しました。

 

「AirMac Extream」をベースに「AirMac Extream」でネットワークを拡張する形で成功。

「AirMac Express」をベースに「AirMac Extream」でネットワークを拡張はできなかった。

 

あと、
「AirMac Extream」をベースに「AirMac Express」でネットワークを拡張して、
「AirMac Express」のLANポートつかって有線ネットワーク作ろうと思ったら、
「AirMac Express」のLANポートはWANでしかないのかね。

「AirMac Extream」 → [無線] → 「AirMac Express」 → [有線] → LANハブ

ってのはうまくいかなかった。

 

関係ないけど、
「AirMac Express」で無線LAN使いながら、
AirTunesが使えない。

iTunesでスピーカー選択すると、
エラーが発生する

不便で仕方がない。

「AirMac Extream」で無線LAN使いながら、
AirTunesは使えるけど、ネットワークがすごく不安定。

なんでだろう。。。

CSSで複数のセレクタを区切るカンマの位置は1列目がいい

タイトルの通りだけど、
CSSで複数のセレクタを区切るカンマの位置は、
左端の1列目がいいと思う。

Continue reading

© 2017 どうのこうの

Theme by Anders NorenUp ↑