ホームページ制作 WEBシステム開発 サーバ構築・運用保守はサンアットマークへ

最近はレスポンシブコーディングも多くなり、コーディングする度にデザインに合わせて
毎度ちまちまコードを書いていくのも面倒なので、コピペして使えるパーツを載せていこうと思います。
bootstrapなど便利なフレームワークも沢山ありますが、100％使用するとカスタマイズが面倒なので、
その辺は、使えそうな部分のみ抜粋して組み込んであります。

まずは、よく使うボタン。

レスポンシブのブレイクポイントは、Bootstrap のグリッドシステムに倣っています。
0 ～ [xs] ～ 768 ～ [sm] ～ 992 ～ [md] ～ 1200 ～ [lg]

inlineボタン（.button）

button

 
button

画面幅768px 以下でブロックボタン（.xs-block）

button

 
button

画面幅992px 以下でブロックボタン（.sm-block）

button

 
button

画面幅1200px 以下でブロックボタン（.md-block）

button

 
button

画面幅1200px 以上でブロックボタン（.lg-block）

button

 
button