em と rem の違い!!

言わずと知れたフォントサイズ指定の単位「em」。レスポンシブやら様々なサイズのデバイスが多い中で「em」だけを使っていると、親要素の事をいちいち考えなければなりません。「px」指定も絶対的でいいのですが、汎用性に欠いてしまいますよね・・・。

「em」のデメリット

  • 親要素のフォントサイズを考慮しなくてはならない!
  • 兎に角計算がわけわかめ!

そこで「rem」
この「rem」を分解すると、「root + em」ということで、html 要素(最も親の要素)に指定されているフォントサイズから計算してくれます。
なので、直近とか少し離れた親要素関係なく root に指定された要素に指定してあるフォントサイズから計算してくれるので、非常に助かります!


html {
font-size: 10px;
}

p {
font-size: 1.4rem; /* => 14px */
}

こんな感じに相成りまする。
久々のブログだった・・・(`;ω;´)怠慢過ぎるよね、がんばろっと。。。
ここは秘密の日記帳兼メモ帳だ!!
そんなこんなで今後ともよろしくお願いいたしますm(_ _)m

Ruby の Array について

変数に何が入っているかわからない時、
valuable.class
するといい!

Array しか each メソッド使えない!

最近更新してない・・・

逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ。。。

まるっとお休みの夏休みはいただきませんでしたが、先日は金峰山荘でオートキャンプしたり、ライブをたくさんみたりしてきました☆

今度余裕のある時にブログにアップしようと思います!!

あと、開発関係も今 HAML や Sass のリファクタリングなどもやっているので、こちらで記事にできたらなと思います!!

そんなこんなで今後ともどうぞよろしくお願いいたします!

image_tag ヘルパーの assets path の書き方と幅・高さ指定

image_tag ヘルパーを使用したときに assets path の書き方をいつも検索してしまうので、備忘録。

このヘルパーを使用した時の画像パスは、デフォルトで app/assets/images/ を参照するようになっているので、表示させたい画像が images ディレクトリにある場合は、画像のファイル名だけ記述するだけで大丈夫。

=image_tag 'image.png', :alt => '画像だよ'

※ ちなみに alt 属性は指定しないと、画像のファイル名の拡張子以外の部分の先頭大文字で設定してくれます。ファイル名にアンダースコアが入っている場合はそこが半角スペースになって設定されます。

そして、ついでに image_tag ヘルパーなら画像の幅と高さの指定も簡単にできます。

=image_tag 'image.png', :alt => '画像だよ', :size => '100x150'

幅と高さを別々に指定する場合は

=image_tag 'image.png', :alt => '画像だよ', :width => '100', :height => '150'

こんな感じです。

link_to ヘルパーの中に image_tag ヘルパーを入れる

View を Haml で記述しているのですが、いつも画像リンクの作り方を失念してしまうので、ここで備忘録。
link_to ヘルパーのブロック構文を使って記述するのがどうやら良さそうですね(^^)

=link_to "url"  do
  =image_tag "image_source", alt: => "alternate strings"

=link_to image_tag("image_source"), "url"

ブロック構文を使用すれば、リンクタグの中身に画像以外のものも追加で記述したいときに便利です(^^)

=link_to "url"  do
  %span ポコにゃん!
  =image_tag "image_source", alt: => "alternate strings"

Compass を install したのに “compass: command not found” になる。

複雑な mixin を書く機会があって、そろそろ Compass を使用してみなくてはと思って、ひとまずインストールして、いじってみようと思ったら、躓いたのでメモしときます。

下記のような結果になりました。

$ gem install sass
$ gem install compass
$ compass -v
-bash: compass: command not found

compassをインストールしたのにcommand not foundになる
`rbenv: rails: command not found`の対処方法

上記のページを参考にさせて頂いて、下記のようにしたらうまくいきましたm(_ _)mありがたや・・・。

$ gem install railties && rbenv rehash
$ compass -v
Compass 1.0.3 (Polaris)

できました!

rbenv は私の環境にもインストールしてあったので、これかなと思ったらそうでした。
ただ、この辺はとても疎くて説明を読んでもなかなか理解できませんでした。

そういえば、Sass についてそんなに勉強したことなかったので、評判の良いこの本でも買ってみようかなって思います。

47都道府県カンマ区切り文字列メモ

完全に自分用のメモです。ただいまプログラミングを勉強しているのですが、その際に都道府県文字列が必要になったので、作成しました!よかったら使ってくださいね(^^)

'北海道', '青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県', '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県', '新潟県', '山梨県', '長野県', '富山県', '石川県', '福井県', '岐阜県', '静岡県', '愛知県', '三重県', '滋賀県', '京都府', '大阪府', '兵庫県', '奈良県', '和歌山県', '鳥取県', '島根県', '岡山県', '広島県', '山口県', '徳島県', '香川県', '愛媛県', '高知県', '福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県'

Facebook の Page Plugin をレスポンシブ対応させる

タイトルの件ですが、開発者向けの Facebook のドキュメントにも書いてありますが、要は

  1. “.fb-page”の生成コードを埋め込む際の width の設定を 500px に設定。これはページプラグインの設定可能最大幅です。
  2. その生成されたコードの親要素の幅を指定したい幅に設定します。CSS で設定することも可能です。

デスクトップ版で表示させたい幅を media query で記述してあげます!これだけでした(^^)

@media screen and (min-width: 500px) {
  .fb-page-parent > .fb-page {
    width: 300px;
  }
}

2015/07/14 追記

上記のコードだけでは、スマートフォンでウィンドウサイズを超えて、500px で表示されて、全体の表示が崩れる事態が発生しました。なので、CSS には下記のようなコードを追記することにしました。お粗末さまでしたm(_ _)m

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
  width: 100% !important;
}

参考URL: https://developers.facebook.com/docs/plugins/page-plugin#adaptive-width

地爪ケア専門ネイルサロン・プリナチュールへ行ってきた!

こんにちは。梅雨らしい梅雨ですねぇ。。。

最近街を歩いていてジェルネイルをしている女性も数年前よりも多く見受けますし、キャズムを超えた感じがしますね!!(意識高い風)
私も4-5年くらい前はネイルサロンに通うのが楽しくて仕方がありませんでした。1.5ヶ月に1度、施術台1万円前後かけていました。
ここ最近は経済的、時間的余裕があまりなくて、ついつい放ったらかしにしていました。 続きを読む

ナマズ釣り@○○橋(東京都日野市)

2015年6月14日忘れもしません、日曜日の夜。ふとナマズを釣りたいという気持ちが沸き上がってきたのでした。しかも、フライでナマズを釣りたいと思いました。
しかし、師匠曰く「ナマズを探しながら釣るにはルアーの方が効率がいい」んだそうです。詳しい説明は難しかったので今回は割愛します。ということで、下記のようなカエルのルアーにケミホタルという小さいサイリウムをくっつけます。 続きを読む