Webサイトの横幅サイズをきれいに分割したい

10月に入って1週間がたちますね。

朝の5時ぐらいに起きると、外の景色はまだまだ日が上がるころの景色に変化してきましたね。

朝、窓を開けて外の空気を吸うと、なんかすがすがしい冷たさを感じるこのころ…

昼間は残暑が続く中、水分を補給しながら、体調管理には気を付けてください。

日没が早くなってきてる頃、夜はちょうどいい気温になってきました。

気温の変化がどんどん一定していく季節になっていきますね。

漢字健忘にならないようにしっかりと「スキマ時間」を使って漢字の復習(復讐)をしております。

また、資格取得に向けて、何しようかと考えています。

さてと、話題を取り戻して…

Webサイトの横幅サイズをきれいに分割したい

Webページの横幅サイズが1200px、フルスクリーンの時代になっていく中、横幅サイズをきれいに分割したいときに計算してサイズを設定していますよね。

例えば、横幅サイズが、1200pxで4等分するなら、計算はらくらくですが…

横幅のマージン(空き)が必要な時、レイアウトがおかしくなったり、また計算したりめんどくさくなったりしますよね。

その時は、「calc( X / Y – Z )」を入れるだけで解消します。

content{
	width: calc( 100% / 4 - 10px );
}

解釈
X横幅のサイズ

例)1200px100%に変換しておいてください。

px」単位にするとなぜかエラーが返ってくるそうです…

Y分割したい数を入力

分数」をお試しに入れたらエラーが返ってきました(笑)ルート(√)の単位でも不可能でした(笑)

Zマージン(空き)の幅を入力

小数点以下でも聞いてくれませんでした(笑)

こんな感じでしょうか。

技術の忘備録でした。

では、また!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください