backINDEX今ではすっかり当たり前になったレスポンシブなサイトのコーディング、結構やってるつもりなのですが、まだまだ頭を悩ませる状況があります。その中でも「リキッドレイアウト」で作るサイトなんかだと各divなどの要素に幅を指定する時、ピクセルではなくパーセントで指定しなければならない時があります。この間複数の要素をポジションで組んだレイアウトを横幅を縮ませてもポジションを保ちつつ縮小をしないといけないという案件があり「うわ〜、これ全部パーセント計算しないといけないのかぁ〜...」と思ってテンション下がっておりました。前置き長くなりましたが、今回はパーセントの割り出し方をおさらいしていこうと思います。CSSで使うパーセントを計算で割り出す通常はピクセルでサイズを指定してレイアウトを組み上げていきますがこのピクセルを元にパーセントを計算で割り出す方法です。計算方法は以下の通り。33.3333%calc()を使用してパーセントを割り出す「calc()」とは、プロパティの値を計算式で実行してくれる便利なファンクションです。対応状況は以下の通り。横幅100%の要素から50px引き算したい場合、calc()を使用するとこんな感じで求められます。100px引きたい」と行った計算が面倒な時に便利です。100%);}上記の計算で割り出す方法と同じで、親要素と子要素を割り算してから100%を掛け算してサイズに応じた数値を割り出すことができます。sass(@mixin)でパーセントを割り出すsassの@mixinを使えばさらにパーセントを割り出すのが楽になります。以下親要素のサイズを変数にします。$parent_width:960;@mixinで計算式を用意するサイズを割り出す計算式を@mixinで用意します。padding、margin、width、heightと各種用意できますがここではmarginとwidthを例に書きます。100%;}@includeを使って@mixinを呼び出す@includeを使い計算式を読み込みます。width(200);}カッコの中に数値(ピクセル数)を入力してコンパイルすると以下の結果がcssで出力されます。以上のように自分で計算したりcalc()を使ったりもできますが、今はパーセントを求められる便利なサイトがあります。px」親要素のピクセル数を入力すると以下のように瞬時で答えが表示されます、ご参考まで。backNEXTRECOMMENDBLOG2017/10/25サイト作成時の確認事項(2017/10/25時点)EVOWORXテクニカルディレクターのオオコシです。設立10周年のタイミングで...BLOG2018/03/06Lodashで配列処理だんだんと春めいてきましたね🌸こんばんは、エンジニアのシマです。CPIサーバー(シェアードプラン)にWP-CLIで...CONTACTお仕事のご相談や、弊社についてのご質問やご要望など、お気軽にお問い合わせください。PolicyRECRUITEVOWORXでは、一緒に良いものづくりをしてくれる仲間を募集しています。詳しくは採用サイトをご覧ください。