CSSで高さを可変にして縦横比(アスペクト比)を維持する

CSS HTML

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法です。
縦横比(アスペクト比)1:1のサイズで幅に合わせて高さを可変にしたい時などに使えます。 paddingの特性を使って実現しています。さっそく使い方から。

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法

まずはhtmlから

<div class="box">
  <div class="box__content">
    text text
  </div>
</div>

cssはこう

.box {
  height: auto;
  position: relative;
  width: 100%;
}

.box::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.box__content {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法の解説

キーになるのは before の padding です。
paddingは%(パーセント)で指定した場合、親要素のwidthを基準に計算されます。
これを利用することで上記サンプルの padding-top の値を調整することでアスペクト比を指定して高さ可変のブロックを作ることができます。 https://www.w3.org/TR/CSS2/box.html#padding-properties

余談

アスペクト比とは

ウィキペディア様によると

アスペクト比（アスペクトひ、 英語: aspect ratio）は、矩形における長辺と短辺の比率 長辺:短辺（横縦比）または短辺:長辺（縦横比）で表されるが、ここでは長辺:短辺で統一する。なお、テレビやデジタルビデオ関係では長辺:短辺（横縦比）で表されることが多いが、映画界では伝統的に短辺:長辺（縦横比）で表されることが多い。

とのこと
縦横比だけじゃなくて横縦比もあるらしい。
テレビも映画も業界似たようなものだと思うんですけどね…
なんでアスペクト比の認識が違うんだろう？

Your Gemfile has no gem server sources. If you need gems that are not already on your machine, add a line like this to your Gemfile:

Ruby 
Your Gemfile has no gem server sources. If you need gems that are not already on your machine, add a line like this to your Gemfile:
source 'https://rubygems.org'

と怒られた時の対処法

英文読めば分かるですが自分が読まずに調べてしまったので…

Gemfileの先頭に以下を追加すればOK

source 'https://rubygems.org'

Rubyのeach_with_indexでeach中のindexを取得する

Ruby

each_with_index

Rubyの each でインデックスを取得したい場合 each_with_index を使う。

%w(a b c).each_with_index do |n, index|
  puts "#{index} #{n}"
end

# 0 a
# 1 b
# 2 c

インデックスを任意の数字から始める with_index

indexを1から始めたい場合などは with_index を使う

%w(a b c).each.with_index(1) do |n, index|
  puts "#{index} #{n}"
end

# 1 a
# 2 b
# 3 c

株式会社サックルに行ってきました

エンジニア オフィス訪問 Ruby on Rails

f:id:kuronekopunk:20160315201530p:plain

鬼丸さんにご招待していただき株式会社サックルにおじゃましてきました！
打ち合わせスペースなどめちゃくちゃオシャレ！！
Pepper君がいる！！Pepperめっちゃ話に割り込んでくる！！
（残念ながら写真撮ってないのでWantedlyでご確認くださいまし…）

お伺いしてサックルのエンジニア2名とフリーランスのエンジニア1名と軽い座談会のような形でお話させていただきました。
内容としてはRailsの基本的な使い方から開発手法など。
サックルさんでは現在テスト駆動開発でプロジェクトを進めているそう。
弊社ではやったことがないのでとても参考になりました。
一部機能の開発で試してみようかと思います。

実際、Railsについて話していると自分の知識が曖昧ということをすごく実感しました。
「これは◯◯みたいな感じで〜」のような曖昧な表現になることが多い…
話している中でも知らなかったことが沢山出てきました。
その中でも一番感動したのがこちら

rails c -s

rails c にsandboxモードというものがあるのを知りませんでした。
exit するとDBがロールバックする！（便利！！）

今回ので自分の知識不足を改めて認識できたのでRailsマスター目指して勉強していきます。

また、こういったエンジニアさんとの交流も増やしていきたいのでオフィス遊び行かせてください！
ランチ行きましょう！
飲み行きましょう！
FacebookかTwitterで連絡ください！！

RailsのTimeクラスChangeメソッドについて

Ruby on Rails

TimeクラスChangeメソッドの挙動について
まずは年月日を変更してみる。

Time.new(2016, 3, 15, 10, 10, 10).change(year: 2015)
# => 2015-03-15 10:10:10 +0000

Time.new(2016, 3, 15, 10, 10, 10).change(month: 1)
# => 2016-01-15 10:10:10 +0000

Time.new(2016, 3, 15, 10, 10, 10).change(day: 1)
# => 2016-03-01 10:10:10 +0000

指定した年月日に変更できて便利！
時間を変更してみる。

Time.new(2016, 3, 15, 10, 10, 10).change(hour: 1)
# => 2016-03-15 01:00:00 +0000

分、秒まで変わった…
分、秒を変更してみると

Time.new(2016, 3, 15, 10, 10, 10).change(min: 1)
# => 2016-03-15 10:01:00 +0000

Time.new(2016, 3, 15, 10, 10, 10).change(sec: 1)
# => 2016-03-15 10:10:01 +0000

hour,minを変更するとそれ以下の値が0になる。
apidockを確認
change (Time) - APIdock

Returns a new Time where one or more of the elements have been changed according to the options parameter. The time options (:hour, :min, :sec, :usec, :nsec) reset cascadingly, so if only the hour is passed, then minute, sec, usec and nsec is set to 0. If the hour and minute is passed, then sec, usec and nsec is set to 0. The options parameter takes a hash with any of these keys: :year, :month, :day, :hour, :min, :sec, :usec :nsec. Path either :usec or :nsec, not both.

時間のオプションを指定した場合、それ以下は0に設定するぞオラァ（意訳）
とのこと。
つまり時間変更する際に0分0秒が良ければ :min, :sec の指定はいらいなってことなんですね。