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

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

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

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

no image

laravel Mix

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

no image

頻出CSSのまとめ

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作) で、CSSでもよく出る …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …