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のレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

cakePHP+bootstrapでのページャー

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

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素2 レイアウトに関して2.1 …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

アーカイブ