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

破綻しないCSSについて

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

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

tableのレイアウトに関して

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

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …