skillup

技術ブログ

デザイン

頻出CSSのまとめ

投稿日:

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作)

で、CSSでもよく出るクラスなどはまとめておいたほうが便利だなぁ・・・と思い、使えそうなものをまとめて見ました。

ちなみにレスポンシブを前提にしてます。

mobileとそれ以外をすぐに判定できる関数

いちいちメディアクエリを書くのはめんどいので上記のような処理でmobile or PCのCSSをすぐに制御できるように。

ちなみにbreakpointも変数でセットしておきましょう。

is-hidden-mobile

携帯の時は自動的にdisplay:noneになる設定です。

is-横幅判定-flex-横-縦

例えばis-tablet-flex-end-centerみたいな。

このクラスを書けばmobileの時に

のCSSが追加されます。よく使うパターンは登録しておくと非常に便利です。単独のis-tablet-flexなども書いておくと便利かも。

ラベル+入力欄系

業務管理システムだと入力欄が非常に多く、ラベル+入力欄が非常に多いため

などのクラスを作っておくと大量に書く時に便利かもしれません。クラス名にlabel_maring10などとしておき、5刻みあるいは10刻みで作っておくと便利かも・・・

widthを使うパターンも用意しておきましょう。

他margin-bottomを入れるパターンなども用意しておくと良いですね。

あとは画面をみて共通にパーツ化できる場面をできるだけたくさん見つけることでしょうか。そうしておくと作業が早くなるかと思います・・・

ちなみに上記のようなクラスはBulmaというCSSのフレームワークを使っていて着想を得ることが多かったです。他のCSSフレームワークを使っても同じかと思いますが・・・

https://bulma.io/

 

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …