skillup

技術ブログ

デザイン

共通CSSに必要な要素

投稿日:2020年2月29日 更新日:

簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。

https://github.com/umanari145/css/tree/master/css_framework

これからも随時増やしていきますが、主に下記のような要素を入れております。

既存の処理の簡略化

margin-top:10pxmt10 など省略して書くことにより頻出処理を簡略化。

ちなみにtailwindというCSSのライブラリでも上記のような頻出処理を簡便なクラスで書くことができます。
https://tailwindcss.com/

他によくあるのがflex系ですかね。

メディアクエリ用

レスポンシブ対策用に手軽にスマホの時はdisplay:noneにするなど。

display:〜を変更したり、blockとflexinlin-blockの変更など。

頻出タイプのCSS

主にモーダルウィンドウ、スクロールテーブル、ローディングなどです。

ライブラリを使ってもいいですが、手軽なものを実装しておき、クラス一発でこれらを実装できるようにすると便利です。

PHPなどでもそうなのですが、難しいことを知っていることもそうですが、普段やっていることをより簡略化して、短時間でできるようにすることの方が費用対効果は高い気がします。

-デザイン
-,

執筆者:


comment

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

関連記事

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-6012c …

no image

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

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

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

ドロップダウンリスト

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

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …