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

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …