今日は、calc()について書いてみようかと思う。
私がhtmlを使うようになったのは、1994年くらいからだろうか。
もう30年近くも経つのか。
cssの登場が1994年なので、その頃からなのだが、当時のhtml環境はというと、今のようにhtmlとcssの役割分担を理解して使っている人が少なく、cssを使わずにというか、cssの存在を知らずにか、良いか悪いかは別にして、htmlのタグでゴリゴリと装飾してしまう時代でした。
ちなみに、
htmlとは、HyperText Markup Languageの略で、ハイパーテキストをマークアップする言語であり、このマークアップの意味が言語構造だけなのか、文字装飾も含むのかということだったかと思います。
cssとは、Cascading Style Sheetsの略で、カスケードとは何段も連なった滝、つまり階層構造を意味していて、スタイルシートとは見栄えのみに特化したデータやファイルということ。
当時は、
<b></b>
<i></i>
といったように、ボールド体、イタリック体にするタグが存在していました。
（今も存在はしているのか？、ブラウザによっては解釈してくれるものもあるのか？）
今は、こんなタグを使わずに、cssでfont-weight、font-styleを使って、記述することが主流ですね。
当時のインターネットの回線速度は今と比べて格段に遅くて、htmlを記述するアプリも余計なタグが入り、出来上がったhtmlファイルの中身は、人の目で読むには苦労するものでした。
私はお金の無い貧乏な社会人でしたし、書籍もあまり買わず、独学でhtmlを覚え、cssを覚え、メモ帳を使っていましたし、それは30年近く経った今も変わりません。
そのおかげでか、ブログで試行錯誤する日々でしたし、それを可能とするデータの蓄積もあったと自負しております。
さて、今回はcssのcalc()というものを説明したいと思う。
このcalc()の存在は知っていたが、昨日の記事で初めてまともに使ってみたわけです。
さて、どこで使ったか解りますか？
まぁ、どこで使ったかはおいといて、calc()とはなんぞやという説明をしましょうか。
calc()とは、計算機能を持った値です。
xxx: yyy;
xxxはプロパティ、yyyは値ですね。
calc()は値に使うのですが、()の中で簡単な計算が出来るのです。
calc()が出来る以前のcssでは、5px;とかの絶対的な値や、50%とかの相対的な値の、どちらか一方の指定しか出来ませんでした。
calc()を使うと、これらを複合的に計算して使うことが出来ます。
font-size: calc(100% + 5px);
こんな値を指定することが可能となります。
これが出来ると、私のような数学屋にとっては、cssの中での値の辻褄を合わせやすくなります。
さて、先の記事のどこでcalc()を使ったかというと、多重根号の表記です。
今までは、√のサイズは統一してきたが、昨日の記事において、最低でも四重根号を記述する必要性が出てしまった。
今までの記述では、
√1＋√2＋√3＋√4
と
position: relative; top: -2px;
といったように、上方向にマイナスして、そこにborderを使って線を描くという方法を採用していましたので、入れ子が増えると、どんどんと√記号が上に上がっていってしまいます。
二重根号程度であれば、それも目立たなかったのですが、四重根号ともなると私の美的センスが警告を鳴らしたというわけです。
calc()を使えば、√の高さ指定で、
font-size: calc(100% + 2px);
とやれば、
√1＋√2＋√3＋√4
√のサイズの調整で、記述も楽だし、辻褄も合うし、綺麗に描けるようになったということです。
そもそも論なのだが、こんなことをするためにcssが存在しているとは思わないが、htmlがmathタグを作る作らないということで、長年モヤモヤし続けた数式を記述したい数学屋としては、苦肉の策を講じてきたわけです。
画像で用意すればいいじゃないかという方も居るだろうが、そうなると文字のサイズ感とかも揃える必要が出てきて、それはそれで美しくない。
自己満足だと言われるだろうが、自分も満足出来ていないものを、他人の目に晒すのか？
ということなんです。
まぁ、このブログの読者さんがどれくらいいて、こんなことをやっている私をどうみているのかは、気にならないかというと、やはり気になってしまう。
数式は、美しく描かれるべきだろうという私の持論は持論として、読む人が読みやすいことが重要なわけで、数式がガッタガタに崩れているのはやはり読みにくいだろう。
いい格好しいなのかもしれない。
こんな風にブログで晒さなければ、気づきもしないような些細な変更であって、それを晒している意味は、みんなに気がついて欲しいという願いもあるのか、それとも自己顕示欲が強いのかもしれない。
プログラミングも、htmlも、cssも、すべてを知ってからじゃないと書けないという人がいるらしいが、それだといつまで経っても何も書けないということになる。
世の中にあるすべての単語を知らないと、書いたり、喋ったり出来ないなんてことは全然無いだろう。
つまり、知っている範囲で書いてみたり、喋ってみたりして、他の人が書いたものを読んで、他の人が喋ってるのを聞いて、その理解度を深めていくことになるという意味では、すべて同じだろう。
calc()を知った今、これを使わない手はないと思うんだよね。
新しい単語を使ってみたいという欲求って誰でもあるじゃないですか。
その使い方の良い一例を見つけて、タイミングよく使えたということなんだろう。
30年掛けて、すこしずつすこしずつだが、成長しているのだろう。
ではでは
↧
cssの使い勝手が格段に向上するcalc()
↧