レスポンシブデザインのページを作成する際に重要なのが、プロパティ値の指定方法です。
表示する画面のサイズによって、各要素の見やすい大きさや配置場所は異なるため、固定値ではなく画面サイズに応じて可変するようにするのがほとんどだと思います。
上記のように、プロパティの値を動的に変更したい場合に活用できるのが、calc関数です。
今回は、calc関数でプロパティの値を指定する方法について、解説していきたいと思います。
CSSのcalc()とは？
calcは、cssで使用可能な関数の一種です。
使用することにより、プロパティの値を計算式で指定することができます。
異なる単位同士での計算も可能なため、表示環境に合わせて柔軟にサイズ指定できるのが calc関数の特徴です。
calcの使い方
それでは早速、CSSで calc関数を使用する方法について確認していきましょう。
基本構文
calc関数を使用する際は、以下の形式で指定します。
プロパティ名: calc(計算式);例えば、heightプロパティに対して calc 関数を使用したい場合は、次のように記述します。
.sample {
height: calc(100px + 50px);
}calc関数は、以下のように長さや大きさを数値で指定するプロパティに対して有効です。
- width
- height
- margin
- padding
- transform
calcで要素のwidthを設定する
calc関数を使用した場合の実際の動きを、簡単な例を元に確認していきましょう。
まずは、画面サイズに合わせて横幅を調整する例を紹介します。
<body>
<div class="sample">
<p class="sampleText">sample</p>
</div>
</body>.sample {
margin: 0 auto;
width: calc(100% - 10px);
height: 50px;
background-color: red;
}
.sampleText {
text-align: center;
font-size: 24px;
color: white;
}【実行結果】
sample
既に解説したように、calc関数は異なる単位同士での計算も実行可能です。
そのため、%や em などの相対値と絶対値（px）を組み合わせることによって、比較対象の大きさに応じたサイズ調整を自動で行いながら、固定サイズ分の増減も同時に実行することができます。
calcでビューポートに合わせた文字サイズを指定する
calc関数は、要素ごとの縦横の幅や余白だけでなく、文字サイズの指定にも使用することができます。
続いては、ビューポートに合わせて文字の大きさを調整する方法について紹介したいと思います。
ビューポートとは？
ビューポートとは、コンテンツ表示を行う際の基準となる画面サイズのことをいいます。
具体的には、Webページのレンダリング時に適用される画面サイズ(レイアウトviewport)と、タブやメニューバーなどのブラウザのUIを除いて実際に表示されている画面サイズ(ビジュアルviewport)のことを指し、Webページを作成する上で重要な基準となります。
HTMLによって作成されるコンテンツの各要素のサイズは、レイアウトviewportの画面サイズを元に決定されていて、CSSでの画面サイズに応じたレイアウトの切り替えもこのレイアウトviewportのサイズによって判断されています。
そのため、レスポンシブデザインのページを作る際には、ビューポートの設定を適切に行う必要があります。
基本的には、以下の一行を書くことで問題なくビューポートの設定を行うことができます。
googleも推奨している設定内容です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">content部分の「width=device-width」 の記述が、先ほど解説したレイアウトviewportのサイズを指定するためのコードとなります。
レイアウトviewportの幅を表示するデバイスの幅に合わせることで、端末の画面サイズに合わせたレイアウトの切り替えを可能とします。
initial-scaleは、ページを初期表示した際の縮小倍率を設定するための項目です。
例えば、「initial-scale=2.0」 と指定した場合、ページを２倍にズームした状態で初期表示します。
文字サイズをcalcで算出する
要素のサイズ指定時に使用できる単位の中には、vwやvhといったような、ビューポートに対する割合を基準とする単位があります。
先ほどのサンプルで使用した ％などは、親要素のサイズに対する割合を基準とするため、親要素ではなく表示画面の大きさに応じたサイズ調整を行いたい時に有効です。
例えば、要素の横幅をビューポートと同じサイズに設定したい場合、以下のように指定します。
.sample {
width: 100vw;
}1vw = 1% となるため、100vwでビューポートと同等のサイズに設定することができます。
また、ビューポートの大きさに応じて文字サイズを変更したい場合も、vwを使用しての調整が可能です。
html {
font-size: 3vw;
}上記のコードでもサイズを可変させることはできますが、文字サイズの変動幅が大きくなりやすく、ページの読みづらさやレイアウト崩れなどに繋がってしまうため、この方法で調整する場合は calc関数と組み合わせて使用するようにしましょう。
html {
font-size: calc(0.5vw + 16px);
}calc関数を使用することで、より厳密に文字サイズを調整することができます。
まとめ
いかがでしたか？今回は、calc関数の使い方について解説しました。
プロパティ値を指定する方法は様々ですが、calc関数はよく使用されているやり方の１つです。
使い方をしっかりと覚えて、実際の開発に役立てていきましょう。
HTML/CSSの学習方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
