2017-07-20

Git 過去の特定のコミット位置からブランチを切りたい

git

今のブランチの途中に戻って先に別の開発をしないといけないとか、特定のコミット位置から別のブランチを作成したい時のアレ。

例えば

$ git log --all --decorate --graph --oneline
* ab7b929 (HEAD -> develop) 図書館にレシピの本を置いたよ。たーのしー
* 7cb8ef3 図書館をつくったよ。わーい
* 9f0e540 服がぬげたよ。
* 85767d5 カレーはからい。たーのしー
* 175658e 温泉がみつかったよ。
* a9b3d53 ボスがふえたよ。たーのしー
* e0e054e じゃぱりまんを作ったよ。わーい
* 94b8397 でんち
* 6fe1920 バスてきなもの。たーのしー
* 98f5f9b ジャパリパークの敷地をつくったよ。わーい。

94b8397 でんち から別のブランチを切ってジャパリバスを作りたいような場合、
今のリポジトリをリモートにpushしているならgit reset --hard HEAD^ で必要なところまで戻してブランチを切った後、git pull origin でもとに戻しても良いのだけれどチョットめんどーです。

結論

$ git checkout -b <new_branch> <commit_hash>

で、特定のコミット位置からブランチを切ることができる。 (∩´∀｀)∩わーい

起点となる位置を指定してブランチを切っている

リモートのブランチをローカルにチェックアウトして持ってくるような時、次のようなコマンドを使います。

$ git checkout -b <ローカルに作成するブランチ名> origin/<リモートのブランチ名>

これは origin/<リモートのブランチ名> の部分が「どこを基点にするか」という意味なようでコミットハッシュを指定すれば、そのコミット位置を基点にブランチを作成することができます。

先の例の 94b8397 でんち から create-bus ブランチを切る場合は下記のような感じ。

$ git checkout -b create-bus 94b8397

これで新しいcreate-busブランチが作成されそこにチェックアウトされます

$ git log --all --decorate --graph --oneline
* ab7b929 (develop) 図書館にレシピの本を置いたよ。たーのしー
* 7cb8ef3 図書館をつくったよ。わーい
* 9f0e540 服がぬげたよ。
* 85767d5 カレーはからい。たーのしー
* 175658e 温泉がみつかったよ。
* a9b3d53 ボスがふえたよ。たーのしー
* e0e054e じゃぱりまんを作ったよ。わーい
* 94b8397 でんち (HEAD -> create-bus)
* 6fe1920 バスてきなもの。たーのしー
* 98f5f9b ジャパリパークの敷地をつくったよ。わーい。

わーい

基点の指定は checkout の直後でもOK

$ git checkout <基点となる場所> -b <作成するブランチ名>

基点となる場所をcheckout と -b の間に書いてもOKみたいです。
　

ちょっとした事だけれど、覚えてると必要になった時 reset の力技しなくていいから幸せになれそう。

バック・トゥ・ザ・フューチャー (字幕版)

発売日: 2013/11/26
メディア: Amazonビデオ
この商品を含むブログを見る

2017-07-07

IE11バグ display table, table-cell 内で max-width が効かない

CSS HTML Design IE-bug

IE11… またお前か！
max-widthのバグが多いですねw

display: table, display: table-cell の中にある img タグのmax-width: 100% が無視されて、要素からはみ出したりしてしまう問題。

<div class="table">
  <div class="table-cell">
    <img class="max-width-100per">
  </div>
</div>

table-layout: fixed を使うと max-width が効く

display: table を持っている要素に table-layout: fixed を設定すると、table-cell 中にある画像の max-width が有効になる。

‘table-cell’ 内に inner のdiv 要素などを置いても画像の max-width は無視されてしました…

サンプル

See the Pen IE11 max-width un available in display: table, table-cell by KIKIKI (@chaika-design) on CodePen.

IE 滅ぶべし！

[参考]

IE11でimg要素にmax-width: 100%;が効かない場合の対処法 - E-riverstyle Vanguard

セントールの悩み(1)【特典ペーパー付き】 (RYU COMICS)

作者: 村山慶
出版社/メーカー: 徳間書店（リュウ・コミックス）
発売日: 2014/02/21
メディア: Kindle版
この商品を含むブログを見る

2017-07-07

IEバグ inline-block 内の要素に max-width が効かないにハマる

CSS HTML IE-BUG Design

コーディングをしていて IE で崩れていると連絡を受けてしまいました。
IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。
マイクロソフトを信じたのが間違いだった...

発生していたバグ: inline-blockが親要素を突き破ってしまう例

inline-blockで横並びにした要素内の画像が親要素の幅を無視して表示されてしまっていた。
f:id:kikiki-kiki:20170707021555p:plain

HTML

div(class="inline-block width200px")
  div(class="inline-block")
    img(src="width 300px の画像")

div(class="block width200px")
  div(class="inline-block")
    img(src="width 300px の画像")

CSS

.block
  display: block
.inline-block
  display: inline-block
.width200px
  width: 200px
img
  max-width: 100% // width: 100% か max-width: 100% が無いと要素を突き破る
  height: auto

このようにwidthが200pxに指定された要素の中に、inline-block要素が入り、その中に200pxより大きな300px幅の画像が入るような構成の場合、Chrome, Safari, Firefoxではmax-widthが効き囲っている要素のwidthに画像が縮小されますがが、IE11はボックスは200pxのまま、inline-blockは画像幅の300pxになり親要素を突き破ってしまいます。

これは、画像のwidth、max-widthを指定してない時の表示と同じ感じでした。

IE 11 inline-block が中の要素の max-width: 100% が効かず親要素のwidth指定を無視してしまうっぽい

どうやらIE11ではmax-widthが指定された要素の親にinline-blockが指定されている時、親であるinline-block要素にwidthの指定がないと、例えinline-block要素の親要素にwidthが指定されていてもmax-widthが効かずこの幅を無視して突き破ってしまう問題があるようです。

解決方法 1. 画像の max-width:100% を辞めて、width: 100% にする

例えばレスポンシブなものとかで画像が拡大されてしまってもOKなら画像の max-width:100% を width:100% に変更するのが簡単です。

div(class="inline-block width200px")
  div(class="inline-block")
    img(src="width 300px の画像") ← width: 100% にする

div(class="block width200px")
  div(class="inline-block")
    img(src="width 300px の画像") ← width: 100% にする

解決方法 2. inline-block に width の指定をする

表示幅が決まっているなら画像の親のinline-block要素にwidthの指定をするのが簡単です。

div(class="inline-block")  ← width 指定無くてもOK
  div(class="inline-block") ← この要素にwidthを指定
    img(src="width 300px の画像")

div(class="block")   ← width 指定無くてもOK
  div(class="inline-block") ← この要素にwidthを指定
    img(src="width 300px の画像")

※ widthの指定は 100% でもOKでした。

解決方法 2. 親要素を display: inline-block でないものにする

画像を囲っている要素の display: inline-block を display: block、display: inline にした場合も画像のmax-widthは親の親要素の指定に準拠して表示されました

div(class="inline-block width200px") 
  div(class="block") ← この要素のdisplayを block か inline に変更
    img(src="width 300px の画像")

div(class="block width200px")
  div(class="block")  ← この要素のdisplayを block か inline に変更
    img(src="width 300px の画像")