前提

• リモートリポジトリは github
• Fork はしないで、みんな origin で作業をしている場合。
• メインのブランチは master

基本

clone

リモートのリポジトリをローカルに持ってくる。

1

$ git clone git@github.com:XXX/XXXX {ディレクトリ名}

fetch

リモートのリポジトリの全てのブランチをローカルに持ってくる。

1

$ git fetch origin

branch

ローカルにブランチを作る。

1

$ git branch {ブランチ名}

ブランチ名を変更する。

1

git branch -m {新しいブランチ名}

checkout

作ったローカルブランチに移動し、そのブランチで作業する。

1

$ git checkout {ブランチ名}

status

作業をしたがまだコミットされていないファイルを確認。

1

$ git status

add

作業をしたがまだコミットされていないファイルを追加。

1

$ git add {ファイル名}

commit

手元で行った作業内容を保存。

1

$ git commit -m"{作業内容（コミットメッセージ）}"

push

作ったローカルブランチをリモートに送る。

1

$ git push origin {ブランチ名}

masterブランチに戻る

1

$ git checkout master

削除

リモートブランチ削除

1

git push origin :XXXX

ローカルブランチ削除

1

git branch -D product

rebase

ブランチで作業をしている間にその派生元のXXXブランチが更新されたので、XXXブランチの変更を今作業しているブランチに取り込む。

1

$ git pull --rebase origin XXX

コンフリクトが起きた場合

コンフリクトが起きたファイルを開いて、コンフリクトを解消した後、そのファイルを git add して、

1

$ git rebase --continue

今回のコンフリクトが起きた分の更新は取り込まない場合。

1

$ git rebase --skip

rebase を取り止める。

1

$ git rebase --abort

なかったことにする

commit

commit をなかったことにするが、編集内容は残す。

1

$ git reset --soft HEAD^

commit をなかったことにし、編集内容も削除。

1

$ git reset --hard HEAD^

ファイルの追加忘れ。ファイルを追加した後に、

1

$ git commit --amend

コミットメッセージ修正。

1

$ git commit --amend

add

すでに git 管理されていたファイルの場合。

1

$ git reset HEAD {ファイル名}

自分で新規に追加したファイルの場合。

1

$ git rm --cached {ファイル名}

pull

1

$ git reset HEAD^ --hard

rm

1

$ git checkout HEAD -- {ファイル名}

stash pop

1

$ git reset --hard

bootstrap v3

xs （0 〜 767px）

• .visible-xs-block
• .visible-xs-inline
• .visible-xs-inline-block
• .hidden-xs

sm （768px 〜 991px）

• .visible-sm-block
• .visible-sm-inline
• .visible-sm-inline-block
• .hidden-sm

md （992px 〜 1199px）

• .visible-md-block
• .visible-md-inline
• .visible-md-inline-block
• .hidden-md

lg （1200px 〜 ∞）

• .visible-lg-block
• .visible-lg-inline
• .visible-lg-inline-block
• .hidden-lg

print

• .visible-print-block
• .visible-print-inline
• .visible-print-inline-block
• .hidden-print

bootstrap v4

xs

• .hidden-xs-down（0 〜 543px）
• .hidden-xs-up（0 〜 ∞）

sm

• .hidden-sm-down（0 〜 767px）
• .hidden-sm-up（768px 〜 ∞）

md

• .hidden-md-down（0 〜 991px）
• .hidden-md-up（768px 〜 ∞）

lg

• .hidden-lg-down（0 〜 1199px）
• .hidden-lg-up（992px 〜 ∞）

xl

• .hidden-lg-down（0 〜 ∞）
• .hidden-lg-up（1200px 〜 ∞）

print

• .visible-print-block
• .visible-print-inline
• .visible-print-inline-block
• .hidden-print

bootstrap v3

xs - phone（480px 〜 767px）

1
2
3

$screen-xs: 480px
$screen-xs-min: 480px
$screen-xs-max: 767px

up（480px 〜）

1
2

@media (min-width: $screen-xs-min)
  ...

down（〜 767px）

1
2

@media (max-width: $screen-xs-max)
  ...

only（480px 〜 767px）

1
2

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max)
  ...

sm - tablet（768px 〜 991px）

1
2
3

$screen-sm: 768px
$screen-sm-min: 768px
$screen-sm-max: 991px

up（767px 〜）

1
2

@media (min-width: $screen-sm-min)
  ...

down（〜 991px）

1
2

@media (max-width: $screen-sm-max)
  ...

only（767px 〜 991px）

1
2

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
  ...

md - desktop（992px 〜 1199px）

1
2
3

$screen-md: 992px
$screen-md-min: 992px
$screen-md-max: 1199px

up（992px 〜）

1
2

@media (min-width: $screen-md-min)
  ...

down（〜 1199px）

1
2

@media (max-width: $screen-md-max)
  ...

only（992px 〜 1199px）

1
2

@media (min-width: $screen-md-min) and (max-width: $screen-md-max)
  ...

lg - wide desktop（1200px 〜 ∞）

1
2

$screen-lg: 1200px
$screen-lg-min: 1200px

up（1200px 〜）

1
2

@media (min-width: $screen-lg-min)
  ...

down（〜 ∞）

1

//メディアクエリの指定無し

only（1200px 〜 ∞）

1
2

@media (min-width: $screen-lg-min)
  ...

bootstrap v4

xs - portrait phones（0 〜 543px）

up（0 〜）

1

//メディアクエリの指定無し

1
2

+media-breakpoint-up(xs)
  ...

down（0 〜 543px）

1
2

@media (max-width: 543px)
  ...

1
2

+media-breakpoint-down(xs)
  ...

only（0 〜 543px）

1
2

@media (max-width: 543px)
  ...

1
2

+media-breakpoint-only(xs)
  ...

sm - landscape phones（544px 〜 767px）

up（544px 〜）

1
2

@media (min-width: 544px)
  ...

1
2

+media-breakpoint-up(sm)
  ...

down（0 〜 767px）

1
2

@media (max-width: 767px)
  ...

1
2

+media-breakpoint-down(sm)
  ...

only（544px 〜 767px）

1
2

@media (min-width: 544px) and (max-width: 767px)
  ...

1
2

+media-breakpoint-only(sm)
  ...

md - tablets（768px 〜 991px）

up（768px 〜）

1
2

@media (min-width: 768px)
  ...

1
2

+media-breakpoint-up(md)
  ...

down（0 〜 991px）

1
2

@media (max-width: 991px)
  ...

1
2

+media-breakpoint-down(md)
  ...

only（768px 〜 991px）

1
2

@media (min-width: 768px) and (max-width: 991px)
  ...

1
2

+media-breakpoint-only(md)
  ...

lg - desktops（992px 〜 1199px）

up（992px 〜）

1
2

@media (min-width: 992px)
  ...

1
2

+media-breakpoint-up(lg)
  ...

down（0 〜 1199px）

1
2

@media (max-width: 1199px)
  ...

1
2

+media-breakpoint-up(lg)
  ...

only（992px 〜 1199px）

1
2

@media (min-width: 992px) and (max-width: 1199px)
  ...

1
2

+media-breakpoint-only(lg)
  ...

xl - large desktops（1200px 〜 ∞）

up（1200px 〜）

1
2

@media (min-width: 1200px)
  ...

1
2

+media-breakpoint-up(xl)
  ...

down（0 〜 ∞）

1

//メディアクエリの指定無し

1
2

+media-breakpoint-down(xl)
  ...

only（1200px 〜 ∞）

1
2

@media (min-width: 1200px)
  ...

1
2

+media-breakpoint-only(xl)
  ...

between

between md and lg（768px 〜 1199px）

1
2

+media-breakpoint-between(md, lg)
  ...

bootstrap v3

xs - phone（480px 〜 767px）

1
2
3

$screen-xs: 480px
$screen-xs-min: 480px
$screen-xs-max: 767px

up（480px 〜）

1

@media (min-width: $screen-xs-min) { ... }

down（〜 767px）

1

@media (max-width: $screen-xs-max) { ... }

only（480px 〜 767px）

1

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) { ... }

sm - tablet（768px 〜 991px）

1
2
3

$screen-sm: 768px
$screen-sm-min: 768px
$screen-sm-max: 991px

up（767px 〜）

1

@media (min-width: $screen-sm-min) { ... }

down（〜 991px）

1

@media (max-width: $screen-sm-max) { ... }

only（767px 〜 991px）

1

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }

md - desktop（992px 〜 1199px）

1
2
3

$screen-md: 992px
$screen-md-min: 992px
$screen-md-max: 1199px

up（992px 〜）

1

@media (min-width: $screen-md-min) { ... }

down（〜 1199px）

1

@media (max-width: $screen-md-max) { ... }

only（992px 〜 1199px）

1

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { ... }

lg - wide desktop（1200px 〜 ∞）

1
2

$screen-lg: 1200px
$screen-lg-min: 1200px

up（1200px 〜）

1

@media (min-width: $screen-lg-min) { ... }

down（〜 ∞）

1

//メディアクエリの指定無し

only（1200px 〜 ∞）

1

@media (min-width: $screen-lg-min) { ... }

bootstrap v4

xs - portrait phones（0 〜 543px）

up（0 〜）

1

//メディアクエリの指定無し

1

@include media-breakpoint-up(xs) { ... }

down（0 〜 543px）

1

@media (max-width: 543px) { ... }

1

@include media-breakpoint-down(xs) { ... }

only（0 〜 543px）

1

@media (max-width: 543px) { ... }

1

@include media-breakpoint-only(xs) { ... }

sm - landscape phones（544px 〜 767px）

up（544px 〜）

1

@media (min-width: 544px) { ... }

1

@include media-breakpoint-up(sm) { ... }

down（0 〜 767px）

1

@media (max-width: 767px) { ... }

1

@include media-breakpoint-down(sm) { ... }

only（544px 〜 767px）

1

@media (min-width: 544px) and (max-width: 767px) { ... }

1

@include media-breakpoint-only(sm) { ... }

md - tablets（768px 〜 991px）

up（768px 〜）

1

@media (min-width: 768px) { ... }

1

@include media-breakpoint-up(md) { ... }

down（0 〜 991px）

1

@media (max-width: 991px) { ... }

1

@include media-breakpoint-down(md) { ... }

only（768px 〜 991px）

1

@media (min-width: 768px) and (max-width: 991px) { ... }

1

@include media-breakpoint-only(md) { ... }

lg - desktops（992px 〜 1199px）

up（992px 〜）

1

@media (min-width: 992px) { ... }

1

@include media-breakpoint-up(lg) { ... }

down（0 〜 1199px）

1

@media (max-width: 1199px) { ... }

1

@include media-breakpoint-up(lg) { ... }

only（992px 〜 1199px）

1

@media (min-width: 992px) and (max-width: 1199px) { ... }

1

@include media-breakpoint-only(lg) { ... }

xl - large desktops（1200px 〜 ∞）

up（1200px 〜）

1

@media (min-width: 1200px) { ... }

1

@include media-breakpoint-up(xl) { ... }

down（0 〜 ∞）

1

//メディアクエリの指定無し

1

@include media-breakpoint-down(xl) { ... }

only（1200px 〜 ∞）

1

@media (min-width: 1200px) { ... }

1

@include media-breakpoint-only(xl) { ... }

between

between md and lg（768px 〜 1199px）

1

@include media-breakpoint-between(md, lg) { ... }