「CSS」の版間の差分
削除された内容 追加された内容
CSS関数。手元のパソコンが不安定なので、いったん投稿。 |
|||
141 行
あなたが今読んでいる「なお、この左右2段組のレイアウトのことを「2カラム」と言います。」という文章から「通常のなんの左右分割もしてない状態なら、「シングルカラム」と言います。」の文章までは、パソコン画面では、シングルカラムで表示されているだろうと思います。
== CSS関数 ==
マイナーな機能だが、CSS では実は数値計算が可能である。
ただし calc()関数を呼び出すなどして、そのカッコ内で数値計算をする必要がある。
calc()関数では、加減乗除をできる。
CSSのプロパティ指定の中で
width: calc(20% + 40%);
のように、calcの中で指定する。（なお、上記の場合、60%になる）
CSS関数による数値計算の際、演算子 + や - の前後には半角スペースの空白を入れる必要がある。（そうしないと、ブラウザが演算子として認識せず、エラーになる。）
;コード例
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSS関数のテスト</title>
<style type="text/css">
.left {
width: calc(20% + 40%);
float: left;
background-color: #ccccff
}
.kaigyo1 {
word-break: break-all;
overflow-wrap: anywhere;
}
</style>
</head>
<body>
<div class="left">
<div class="kaigyo1">
5555555555555555555555555555555555555555555555555555555555555555555555555555555
5555555555555555555555555555555555555555555555555555555555555555
</div>
</div>
</body>
</html>
</syntaxhighlight>
;結果
::ページの左端から、60%の幅までに「5555・・・」の記述が続く。
;その他のCSS関数
CSS関数はいくつもあるが、比較的によく紹介されるものとして、
:回数などをカウントできる counter()
:minmax
:attr()
:色において透過度を含めた色指定 rgba()
:変数を参照できる var()
などがある。
なお、CSS関数の知名度はマイナーであり、一般の書籍では、CSS関数を紹介していない書籍も多い。
そもそも、本来、関数などの動的処理の構築は JavaScript の担当なので、あまりCSS関数で複雑な機能の実装を行うのは好ましくないだろう。
また、マイナーな機能は、将来的に仕様変更などもされやすく、もしかしたら機能が削減などをする可能性も高い。
こういった事情があるので、CSS関数を使うなら、なるべく最低限だけ、レイアウトや簡単な画像の表示といった映像的なことがらに関係ありそうな処理にだけ、CSS関数を使うべきだろう。
画像とあまり関係なさそうな処理や、複雑な処理は JavaScript 側で行うべきだろう。
{{-}}
| |||