ミニチュアハウスをつくる!

プロによるミニチュアハウス製作ブログ-1/87-1/160サイズ-

へぇ~css3

本日も晴れている。蒸し暑さは多少あり。 昨日は、菓子パン系を食いすぎて、太った。。。

cssに計算関数あり。。。

今回、幅をセットしたいんだが、ある幅からある幅の差分をセットしたかったのだが、cssに計算機能はあるのか?

ネット調べしてみたら、出てくるでて来る。。。やはり、そういうことは多くの人が疑問になるみたいだ。。。

ネットに出してくれている人々に感謝です。本でも買えばでているのだろうけどなるべく¥は使いたくない。。。

100%から450pxを引いた幅にセットする場合、calc()という関数がcssにあるそうだ。。。

width:calc(100% - 450px);

%とかpxとかemとか単位関係なくうまいこと引き算してくれるみたい。

+-*/の四則計算が可能なようである。

スゴイ便利!css3からの機能らしいが、スゴクいい。

f:id:lis2016zz:20170624132745p:plain

 

ブラウザの幅/高をリアルタイム表示

レスポンシブなWebを作っているときにメディアクエリでブラウザの幅を取得してその幅に対するコードをつらつら・・・と書くわけですが

ブラウザの幅は単にブラウザをドラックして動かせば変化しますが、今どのくらいの幅になっているのか?分からない。

そこで幅を取得するJAVAスクリプトを突っ込んでみた。チェック用なので一時的に使ったら、コードは削除する訳ですが

そのあたりは、emacslispでボタン一発でいけるようにしてみた。EmacsLispはホントイイです。このコマンドはいつも使う訳ではないけど、ちょっとおもろい系として。。。

<SCRIPT LANGUAGE="JavaScript">
<!--
if(document.all){
document.write('Width:' + document.body.clientWidth + " px<br>");
document.write('Hight:' + document.body.clientHeight + " px");}
else{
document.write('Width:' + innerWidth + " px<br>");
document.write('Hight :' + innerHeight + " px");}
//-->
</SCRIPT>

ブラウザを動かしてF5などで更新しないと動いた後の寸法は表示されないので、

下記のようなコードを(0.1秒刻みで自動更新させる。。。)上記のコードの後に入れればブラウザを引っ張ると即寸法も変更表示される。。。

これをサーバーにアップするのは激負荷を掛けそうなのでマズイですが、自分のPC上でやるなら関係ない。

いずれにしても、このページで表示したコードをもし使ってみる場合は自己責任でどうぞ。

setTimeout("location.reload()",100*1);

 

しっかし、css3いろいろできるし。。。何だか面白すぎてなかなか勉強が進まんよ。

 

ペンケム模型作品(Instagram)
PenkeM作品集

 

にほんブログ村 ハンドメイドブログ ミニチュアドールハウスへ にほんブログ村 鉄道ブログ 鉄道模型へ にほんブログ村 鉄道ブログ 鉄道模型 レイアウト製作(ストラクチャー)へ