年末年始としばらくインターンの方お休みしていて、いったい何日目なのかわからなくなったので日数のカウント諦めました(´・ω・｀) 今回はCSS課題に取り組んでいった結果の報告です。

お手本 css

上のサンプルを見ながらcompass使いながらsass記法でコーディングしていきました。

作ったもの sass | css

つまづいたこと

• sublime textでの文字コードの変換が分からずしばらく文字化けに苦しんだ。sassで@charset "UTF-8"を宣言してもコンパイルされたcssがUTF-8として認識されない。 メニューバーから　File > Set File Encording to > … で変換して解決。超絶初歩なところで躓いてた。
• データ定義リスト dl の dt /dd のfloatのやり方で躓いた。display:inline;で解決。

注力したこと

• ズルいデザインのmixinを使う（ボックスシャドウ・テキストシャドウ・ズルい線・角丸・グラデーション…大体使ってみた）
• 変数を使う
• @mixinを=、@includeを=で記述する

今後の課題

• extendを使いこなす
• もっと短いコーディングでスタイリングできるようにする

ひと通りやって思うことは、写経は大事だな…ということ。 業務で併せてsassでコーディングをするようになったので、extendの使い所は少し理解してきた。 基礎を抑えたら、習うより慣れろ。

ノベルティバッジのデザイン公募で採用していただき、イベントのチケットプレゼントしていただいたので、東京Ruby会議10へ行ってきた。

一枚目の写真のバッジが採用していただいたデザインのバッジ。 二枚目の写真は5種類コンプリートしたバッジ（4種類あるバッジを会場にいる方と交換してコンプリートすると5つ目のレアバッジが手に入るという…ちなみにルビーのでかいのがレアバッジ）とノベルティバッグ。スタバのテイクアウトカップのデザインを言語に模したやつ。 プログラマー向けデザイン講座とco-meetingの作り方、本当はこわいエンコーディングの話、などの講演を拝聴。 残念ながら長時間の参加ができなかったけど、エンジニア向けのイベントが初めてだったので良い経験でした。黒Ruby会議、見たかった！

先週、学習週だったのにブログ書くの溜めてしまった。 今回はcssの学習と一緒にSassの学習も併せて進めていきました。まとめてダダっと書いていきます。

やったこと

CSS

• ドットインストール CSSの基礎をすべて見た
• ドットインストール CSS3の基礎をすべて見た

• Reset CSS の記事を読んだ

• HTML初心者が知っておくべきリセットCSS と3つのポイント
• Reset CSSについてのまとめ：リセットするべき?しないべき？
• Eric Meyer's Reset CSS

• CSS Reset - YUI LibraryYahoo!製JS/CSS libraryのYUI

• clearfix の記事を読んだ

• floatボックスが親ボックスを突き破る問題

• clearfixの使い方

• その他、読んだ記事

• 10分くらいで分かるXHTML+CSS
• 色彩センスのいらない配色講座
• ズルいデザインテクニック
• ノンデザイナーのための配色理論

Sass

• ドットインストール Sassの基礎をすべて見た
• 公式サイト

Compass

• ドットインストール Compassの基礎をすべて見た
• 公式サイト
• Rubyは既に入れていたので、ターミナルからCompassをインストール

ターミナルでgemのアップデートしてcompassをインストール

gem update --system
gem install compass

同様にターミナルで、sassやcssのディレクトリを作成したいプロジェクトのディレクトリまで移動して、compassをcreate

cd hogehoge
compass create

デフォルトだとstylesheets、javascripts、imagesなどのディレクトリ名で作成されるので、config.rbで任意のディレクトリ名に変更する。 compass createする際に下記のコマンドをターミナルで打っても同じ。

compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

また、sassからcssにコンパイルされるときにline commentsが書き出されるのが嫌な場合、config.rbの下記の箇所の#を消して有効化しておく。

# line_comments = false

デフォルトだとscssのシンタックスなので、sassのシンタックスを使う場合はターミナル下記のコマンドを打つ。

compass create --syntax sass

SCOUT

• SCOUT（GUIアプリ）をインストールした。
• Sassのデザイナー向けのGUIツール。 プロジェクトのsassディレクトリをInput Folderに、cssディレクトリをOutput Folderに登録して再生すると、ターミナルでコマンドいちいち打たんでもコンパイルされるので便利。エディタでsassファイル保存したら即ブラウザチェックができる。エラーログも監視できるので、ブラウザチェックする前にエラー確認できるのが便利。

CSS課題

• 上記内容を踏まえて、CSS課題をCompass + SCOUTでやってみている。変数、nest、mixin、extendやsassのfunctionを見ながら試しながらやっているので恐ろしく時間がかかる…。でも慣れたら天国と思ってやってみるのみ。

つまづいたこと

• エディタはSublime Text 2(以下、略称ST2)を使用しているが、sassファイルのシンタックスが反映されてなかった。 ST2の右下に判別されたファイル形式が表示される箇所があるが、そこを確認すると"Ruby Haml"の文字が。Hamlとして判別されたらしい。

該当箇所をクリックするとファイル形式を選択できるので、sassに変更するとsassのシンタックスが反映された。 ST2を再起動してsassファイルを開くと、再びHamlとして判別された…。 元々Hamlから派生して開発されたものなので、Hamlのパッケージがあると干渉してダメっぽい。 Package ControlからHamlをremove packageしてST2再起動。やっとsassファイルがsassとして判別され、メデタシメデタシ。 remove packageでなく、enable packageでもいけたかも。検証はしていない。 Hamlの作業する際はHamlのパッケージまた入れると思うので、そこは地道にファイル形式をsassに選択し直していこうと思う。

これからやること

• CSS課題をやりながらsass記法に慣れる

2013.02.26 追記 cssからsass へのコンバートをよくやるので追記。 ターミナルで下記コマンドでコンバート可能。

# Convert CSSto SASS
$ sass-convert style.css style.sass

今回は記録だけ。 怖話の漫画コンテンツの要望が多いそうなので、 怖話コミックの漫画を依頼する人を20人見つけてfulcrumに書き込んだ。

今回はBufferを使って怖話のtwitterアカウントとfacebookアカウントにポストを予約する作業をやっていきました。 Bufferは予め追加したツイート等のポストを予約した時間に分散してtwitterやfacebook、LinkdInなどのSNSに投稿してくれるサービスです。 今のうちに怖話のtwtterアカウントのフォローやfacebookアカウントをいいね！しておくと、明日以降には私の投稿したエントリーもあなたのタイムラインに流れてきますよ！ 自分で怖いと思った内容のものをエントリーしたので、ぜひよろしくお願いします(●ↀωↀ●)✧

残った時間で次の作業に移りましたが、それはまた次回に…！