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

shingo ｜signage/web制作/app開発/トータルプロデュース

2020年5月17日 21:27

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

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

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

ダウンロード

CSSフレームワーク adjustment.css（仮）

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

使い方

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

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

p-N  = padding:Npx
pt-N = padding-top:Npx
pr-N = padding-right:Npx
pb-N = padding-bottom:Npx
pl-N = padding-left:Npx

m-N  = margin:Npx
mt-N = margin-top:Npx
mr-N = margin-right:Npx
mb-N = margin-bottom:Npx
ml-N = margin-left:Npx

fs-N = font-size:Npx

画面サイズ991px以下に適用
p-sm-N  = padding:Npx
pt-sm-N = padding-top:Npx
pr-sm-N = padding-right:Npx
pb-sm-N = padding-bottom:Npx
pl-sm-N = padding-left:Npx

m-sm-N  = margin:Npx
mt-sm-N = margin-top:Npx
mr-sm-N = margin-right:Npx
mb-sm-N = margin-bottom:Npx
ml-sm-N = margin-left:Npx

fs-sm-N = font-size:Npx

画面サイズ767px以下に適用
p-xs-N  = padding:Npx
pt-xs-N = padding-top:Npx
pr-xs-N = padding-right:Npx
pb-xs-N = padding-bottom:Npx
pl-xs-N = padding-left:Npx
					
m-xs-N  = margin:Npx
mt-xs-N = margin-top:Npx
mr-xs-N = margin-right:Npx
mb-xs-N = margin-bottom:Npx
ml-xs-N = margin-left:Npx

fs-xs-N = font-size:Npx

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

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

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

使用例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>adjustment.css</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<link rel="stylesheet" href="css/adjustment.css">

</head>
<body>

<header>
	<h1 class="text-center mt-50">マージントップを50pxとったよ！</h1>
</header>

<main>
	<section>
		<div class="container">
			<h2 class="mt-20">マージントップを20pxとったよ！</h2>
			<p class="fs-18">（フォントサイズを18pxに設定したよ！）マージン（margin）、パディング（padding）、フォントサイズ（font-size）の3つのセレクタに絞り、レイアウトをコーディングでゴリゴリ書けるように試しにCSSフレームワークを作ってみました。</p>
		</div>
	</section>
</main>

<footer>
	<small class="fs-xs-10">（画面サイズが767px以下の時はフォントサイズを10pxに設定したよ！）Copyright © RAISEZ All rights Reserved.</small>
</footer>

</body>
</html>

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

この記事が気に入ったらサポートをしてみませんか？