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

bulmaフレームワークに関して form編

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …