CSSで幅や高さ等の指定に計算式が書けるcalcの使い方(画像)(3ページ目)

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
calc()が使えるはずの場所でもブラウザによっては効かない場合や、描画に不具合が出る場合がある

calc()が使えるはずの場所でもブラウザによっては効かない場合や、描画に不具合が出る場合がある

横幅(widthプロパティ)の値にcalc()を使って計算式を指定してみた表示例
様々なブラウザのサポート状況を調べられる"Can I use"には、「Known issues」にブラウザ別のバグ情報の記載もある
calc()が使えるはずの場所でもブラウザによっては効かない場合や、描画に不具合が出る場合がある

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。