ライセススタッフが書くブログ。

マージン、パディング、フォントサイズが簡単に設定出来る!!CSSフレームワーク adjustment.css(仮)

| Web制作のこと

マージン(margin)、パディング(padding)、フォントサイズ(font-size)の3つの主なセレクタに焦点を絞り、コーディング時にゴリゴリレイアウトを調整することが出来るCSSフレームワークを作ってみました。

用途としては、そうですね。
bootstrapベースのモックアップを作る時、レイアウトの間隔や文字サイズを調整したい時などにbootsrapと同様にクラス名を当てるだけで、ササッと調整できるようになります。

ちなみにadjustment.cssの名の由来は正直なんでも良かったり。

ダウンロード

CSSフレームワーク adjustment.css(仮)

※ファイルサイズが役割に対して大きいです、すみません。

使い方

ダウンロードしたadjustment.cssを任意のディレクトリに設置して読み込ませて下さい。

仕組みとしてはmargin、padding、font-sizeの3つしか主なセレクタがないので非常に単純です。
全てのクラス名は規則的に命名し、以下の通りになります。
(単位はpxにしましたが、今後変わるかもしれません。)

Nに1〜100までの任意の数字を入れることで機能します。100までが、1刻みが適切かはまだわからなかったのですが、最初のバージョンはひとまずこんな感じになっちゃいました。
また、bootstrapと合わせて使うことを想定したので、メディアクエリの指定はbootstrapに準拠しています。
◯◯-sm-◯◯は991px以下の時に適用、
◯◯-xs-◯◯は767px以下の時に適用するようになっています。

例えばスマートフォンで少し文字サイズを小さくしたいときはfs-xs-12のクラス名を当てるとスマートフォン時にフォントサイズが12pxで表示されるようになります。

そのほかスマートフォンだとコンテンツの間隔が狭いときにmt-xs-40やpb-xs-40などのクラス名を当てて間隔を簡単に調整することが可能です。

使用例

 

このフレームワークを作った経緯として、外国産のHTMLテンプレートなどをカスタマイズしていると、このようなCSSが設定されていることが多かった(しかも結構半端に)のと、どこかに調整用のCSS転がっていないかなと探したら、意外に無かったのでそこまで手間ではなさそうなので自分で作ってしまいました。探せば実は似たようなCSSフレームワークはあるかもしれないですけどね。




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る