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

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

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

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

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

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