どうも、チャーさんです。
あなたはブートストラップの、
pullとpushってなに？
と思っていませんか？
この記事では、ブートストラップの、
pushとpullを具体例と一緒に説明します。
またレスポンシブでも役にたつ、
pushとpullの使い方も紹介してます。
なので、あなたがこの記事を読めば、
ブートストラップのpushとpullが理解でき、
自分で使えるようになります。
そのためあなたが、ブートストラップの、
pushとpullに興味があり、使い方も知りたい場合、
ぜひこのまま下にスクロールして読んでください。
*この記事で紹介するブートストラップの、
バージョンは、バージョン３です。
バージョン４を使うと、pushとpull使えないので注意です。
スポンサードサーチ
ブートストラップのpushとpullとはなに？
で、まず結論ですが、
ブートストラップのpushとpullですが、
これは要素の表示位置を入れ替えるクラスです。
具体的には、
pushのクラス名をつけた要素が、
画面上で右に配置され、
pullのクラス名をつけた要素は左に配置されます。
とはいえ文字の説明だけだとイメージしづらいので、
早速具体例をみてみましょう。
まずブートストラップで、
カラムを作って普通にかくと、
先に書いたタグが左に配置されますよね。
（以下の画像のように）
ですが、ここにブートストラップの、
pushとpullというクラスをつけると、
以下の画像のように表示が左右逆になります。
というわけで、
ブートストラップのpushとpullと言うのは、
見た目上の左右を逆にする機能というわけです。
また、左右の配置についてですが、
pushをつけた要素が画面上で右にいき、
pullをつけた要素が画面上で左に配置されます。
なので、pushが右、pullが左と、
覚えればいいですね。
スポンサードサーチ
ブートストラップのpushとpullの使い道は？
またこれなんの役にたつの？と、
思うかもしれませんが、
レスポンシブで役に立ちます。
例えば、デザイン上、
文章を左、画像を右に置きたいとします。
そしてスマホサイズになった時には、
画像が上、文章が下になるように配置したいとします。
するとコードを普通こう書くと思います。
しかし、この書き方をすると、
スマホサイズにした時に、
画像が下になってしまいます。
これでは意図していたようになりません。
で、そんな時に、
pushとpullの出番です。
でpushとpullをつけると、
スマホサイズでは、ちゃんと上が画像、
下が文章になってくれて、
かつ、パソコンサイズでは、
画像が右で、文章が左になってくれました。
このように、ブートストラップのpushとpullを、
使うことで、パソコンサイズでは画像が右、
スマホサイズでは画像が上になる。
というようなデザインが可能になるわけです。
なので、ブートストラップのpushとpullを、
使えるとwebページの制作の幅が、
広がるので、参考にしてみてください。
スポンサードサーチ
ブートストラップのpushとpullを使う手順
ではどうやってブートストラップのpushと、
pullが使えるか手順を説明します。
まずは、ブートストラップの環境設定をしましょう。
次に、クラスをつけましょう。
右に配置したいものはpush、
左に配置したいものにはpullのクラス名をつけましょう。
例
<div class=”container”>
<div class=”row”>
<div class=”col-sm-6 col-sm-push-6″>
</div> <!–この要素が右に配置されます–>
<div class=”col-sm-6 col-sm-pull-6″>
</div> <!–この要素が左に配置されます–>
</div>
</div>
すると、要素が左右逆になって配置されますよ。
スポンサードサーチ
注意
またブートストラップのpushとpullですが、
新しくなったブートストラップ４では、
名前が変わりました。
ブートストラップのバージョン４では、
pushとpullの代わりに、order-1 order-2 、
といったようなクラス名で要素の配置順を動かします。
なのでpushやpullを使う場合、
バージョンに注意しましょう。
バージョン変わるとクラス書いても動かないので。
スポンサードサーチ
まとめ
それではまとめに入ります。
ブートストラップのpushとpullとは、
要素の表示位置を変える機能のことです。
pushとつけた要素は画面上で右に配置され、
pullとつけた要素は画面上で左に配置されるので、
そのように覚えておきましょう。
それでは早速ブートストラップの環境を準備し、
pushやpullを試しましょう。
その際はブートストラップのバージョンに気をつけましょう。
バージョン３ではpushとpull使えますよ。
それでは読んでもらってありがとうございました。
チャーさん
