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) { ... }

普段、僕はsass記法を使っています。「sass記法 vs. scss記法」の話は「Vim vs. Emacs」みたいなややこしいことになりそうなので、ここであまり多くを書かないですが、僕はsass記法派というより、なんでscss記法があるのかわからない派、ってくらい圧倒的sass記法派。だって、sass記法の方が短く書けるし、見やすいし、誰が書いてもスペースやインデントは同じになるし….。デメリットは、ネット上にあるSassのtipsなんかの例のほとんどがscss記法で書かれてるので、それを毎回脳内でsass記法に変換しなくてはいけない、という手間があるくらい？

さてさて、「sass記法 vs. scss記法」の話はどうでもいいんだけど、普段sass記法を使ってるので、.scss を .sass に変換したくなるときがたまにあります。例えば、scss記法で書かれたCSSフレームワークのコードを読むときに、sass記法の方が慣れてるから読みやすいので変換したりなど。

Sassが使える環境でコマンドラインを使って、

1

$ sass-convert {変換したいファイル "例:test.scss"} {変換して生成するファイル名 "例:test.sass"}

とやれば、.scss を .sass に変換することができるんだけど、ブラウザで見てるGithub上のコードなんかをいちいちローカルに持ってきて変換するのは面倒。

ブラウザからそれを出来るWebサービスはないかなぁ、と探していたところ、ブラウザ上でSassをCSSに変換できるサービス、SassMeisterで出来ました。SassMeister を使って .scss を .sass に変換するってのはイレギュラーな使い方なのですが、便利なのでその手順を紹介。

手順 1

Options > Syntax > SCSS を選択。

手順 2

左側に変換したい .scss のコードをコピペ。

手順 3

Options > Syntax > SASS に変更する。

変換完了！

sass記法に変換されました。

普段、僕は sass 記法を使っています。「sass 記法 vs. scss 記法」の話は「Vim vs. Emacs」みたいなややこしいことになりそうなので、ここであまり多くを書かないですが、僕は sass 記法派というより、なんで scss 記法があるのかわからない派、ってくらい圧倒的 sass 記法派。だって、sass 記法の方が短く書けるし、見やすいし、誰が書いてもスペースやインデントは同じになるし…。デメリットは、ネット上にある Sass の tips なんかの例のほとんどが scss 記法で書かれてるので、それを毎回脳内で sass 記法に変換しなくてはいけない、という手間があるくらい？

さてさて、「sass 記法 vs. scss 記法」の話はどうでもいいんだけど、普段 sass 記法を使ってるので、 .scss を .sass に変換したくなるときがたまにあります。例えば、scss 記法で書かれたCSSフレームワークのコードを読むときに、sass記法の方が慣れてるから読みやすいので変換したりなど。

Sassが使える環境でコマンドラインを使って、

1

$ sass-convert {変換したいファイル "例:test.scss"} {変換して生成するファイル名 "例:test.sass"}

とやれば、 .scss を .sass に変換することができるんだけど、ブラウザで見てる GitHub 上のコードなんかをいちいちローカルに持ってきて変換するのは面倒。

ブラウザからそれを出来るWebサービスはないかなぁ、と探していたところ、ブラウザ上でSassをCSSに変換できるサービス、SassMeister で出来ました。 SassMeister を使って .scss を .sass に変換するってのはイレギュラーな使い方なのですが、便利なのでその手順を紹介。

手順 1

Options > Syntax > SCSS を選択。

手順 2

左側に変換したい .scss のコードをコピペ。

手順 3

Options > Syntax > SASS に変更する。

変換完了！

sass記法に変換されました。
逆に .sass から .sass に変換もできます。

因果鉄道の旅―根本敬の人間紀行 (ワニの本)

posted with amazlet at 16.07.15

根本 敬
ベストセラーズ
売り上げランキング: 102,374

Amazon.co.jpで詳細を見る