20200525のCSSに関する記事は8件です。

googleに先駆け、js無効化に完璧に対応してみる

googleは未だ、js無効化に全く対応できていない。

 Microsoftを凌駕し、ITの王様となって久しいgoogle.comは、Javascript無効ブラウザに全く対応していないwebサイトの一つだ。
 例えば、検索窓に「ヤマト 集荷」と入力し、一番上に表示されたリンクをクリックすると、画面が真っ白になる。
 これを「google社の問題」とするかどうかは、閲覧者によって評価が分かれるかもしれないが、少なくとも貧乳教徒の私は、「ヤマト運輸の問題でもあり、google社の問題でもある」と思っている。
 そうではないという意見をお持ちの方には、(理論の基になるものが社会学か生物学か、はたまた憲法学か新興宗教かは分からないが、)その知見をご披露頂きたい。

js無効ブラウザに対する完璧な対応とは何か

 js無効ブラウザで自サイトを訪れた閲覧者に、自サイトを最も不自由なく使ってもらうにはどうすれば良いだろうか。何が最も親切な『神対応』だろうか。
 どんな対策を施せば、叶恭子をして「ファビュラス」と言わしめる事ができるだろうか。

Firefoxに直リンクを貼った。

 まさか、「(お使いのブラウザで)javascriptを有効にしてください」ではないだろう。こんなに傲慢で、不合理で、無配慮で、不見識でみっともない対応は他にあるまい。こんなに馬鹿ばかしい文言を堂々と掲載できるのは、かの有名なy●h●● japanぐらいだ。
(ニュースのコメント欄が"ロ●アのスパイから好評を得たいT●Y●T●従業員"で溢れかえっていて気持ち悪いので、私はy●h●● japanを閲覧するのを1年半前にやめた。)

 対して、「趣味でwebサイトをやっている者だ」な私が素人なりに、捻くれた頭を更に捻って導き出した最初の企みが、以下のコードになる。

<!doctype html>
<html lang=ja>
<meta charset="UTF-8">
<style id=i9999>
#i9998{-webkit-text-size-adjust:100%;
box-sizing:border-box;position:fixed;
width:100%;height:100%;z-index:100;
margin:0;padding:180px 0 0;
background:#fff}
#i9998>li{width:300px;margin-left:calc(50% - 150px)}
#i9998>li>a{/*display:inline;width:auto;*/background:#ffc}</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {document.getElementById('i9999').innerHTML='#i9998{display:none !important}'});
</script>
<style>
/*自由なスタイル*/
</style>
<meta name=viewport content='width=device-width,initial-scale=1,maximum-scale=1'>
<body>
<!--自由なHTML-->
<script>
//自由なスクリプト
</script>
<ul id=i9998><li>
Javascriptを有効化しても問題のない、<a href='//mozilla.org/ja/firefox/new'>安全なブラウザ</a>で example.com をご利用ください。
</ul>
</body>
</html>

やっていること

1. 無効対策専用style(id=i9999)でul(id=i9998)を縦横100%、最前面(z-index:100)のfixedとする。
2. window.onloadに先んじて発火するDOMContentLoadedにより、無効対策専用styleの内容をul#i9998{display:none}に書き換える。
3. ul#i9998の中身はjsが発火しない場合には「最前面に全表示」、発火したら「真っ先に非表示」になるので、そこにFirefoxのDLを促す文言を書き、リンクを貼る。

なぜこうしたか。

 js有効無効の判定をDOMContentLoaded、それ以外の通常のDHTMLプログラムをwindow.onloadと棲み分ける事で、互いに干渉しない。仮にwindow.onload以後のjsコードで何らかのエラーが発生したとしても、js無効ブラウザ向けのul(z-index:100)は既に非表示にされている。
 上記functionが実行できないような環境(js無効設定だけではなく、古いブラウザも当てはまるかもしれない)では自サイトを満足に使ってもらえないので、js有効の場合10に対する7の機能性を実現しようと悪戦苦闘するよりも、「使えるブラウザなんて1つじゃないんだから、さっさと2個目をDLして存分に使い倒してくださいよ。」と唐突に表明するのが最良であると判断した。

 今の時代、googleやamazonでさえ、「jsなしでも何とかなる」に固執する必然性は皆無だ。そんなものはユニバーサルデザインの必要条件ではない。それを言い出したら、3年前のガラホでも2000円の中華スマートウォッチでもYoutubeが見られなければおかしい。
 そんな悠長なタスク(あるいは強迫観念)に時間を割く暇があるなら、モバイルファーストを4分の1歩でも前進させてみろという話になるのではないか。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者に捧げるヘッダーの作り方

初めに

初心者に捧げるハンバーガーメニューの作り方
初心者に捧げるシリーズ第二弾です。jQueryを使って、スクロールした時に変化のあるヘッダーを作ります!!
ソースコードをコメントで解説しながら記述していきます。

対象読者

・上部に固定したヘッダーを作りたい
・スクロールした時に変化するヘッダーを作りたい
・自分でオリジナルの見た目を作って応用したい人
・(ちなみに筆者の自己学習のためにも記事を書いているので間違っている箇所があれば是非とも教えて頂きたい)

目次

・完成イメージ
・HTMLの記述
・CSSの記述
・jQueryの記述
・まとめ

完成イメージ

ダウンロード.gif

HTMLの記述

<div class="container">
        <header>
            <ul>
                <!-- リンク先をつけるときはliの中に<a></a>を追加してその中に記述する -->
                <li>トップ</li>
                <li>ちくわの歴史</li>
                <li>世界のちくわ</li>
                <li>ちくわ豆知識</li>
                <li>よろちくわ</li>
            </ul>
        </header>

        <!-- スクロールするためのコンテンツ -->
        <div class="content">
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
          <p>aaa</p>
        </div>
    </div>

CSSの記述

/* HTMLに元からついているpaddingとmarginを消します */
        *{
            padding: 0;
            margin: 0;
        }
        header{
            /* 高さは好み */
            height: 64px;
            /* 上に固定するためにfixedとtop:0を書く */
            position: fixed;
            top: 0px;
            /* ボーダーは好み */
           border-bottom: 2px solid black;
            /* 幅は好み */
            width: 100%;
            /* 中央に揃える */
            text-align: center;
            /* メインのコンテンツより前面に表示 */
            z-index: 2;
        }

        ul {
            /* liについた点を消す */
            list-style:none;
            /* 上下のmarginの初期値は0なので:0 auto;じゃなくてもok */
            margin: auto;
            /* ヘッダーより前面に表示 */
            z-index: 3;
        }

        ul li {
            /* 横並びにする */
            display: inline-block;
            /* paddingは好み */
            padding: 26px 10px 20px 10px;
            /* 色は好み */
            color: black;   
        }
        /* スクロールを試すためなので自由 */
        .content {
            position: absolute;
            top: 100px;
        }

jQueryの記述

// $(function(){ HTMLの読み込みが完了した時に実行される
            $(function() {
                // windowがスクロールされた時
                $(window).scroll(function() {
                    // もし画面表示のtopが0より大きくなったら
                    if ($(this).scrollTop() > 0) {
                        // cssの記述は自由
                        $('header').css( 'background-color', 'black');
                        $('li').css( 'color', 'white');
                        $('header, li').css('transition', 'all 0.5s');
                    // 0より大きくなってない時
                    } else {
                        // cssは自由
                        $('header').css( 'background-color', 'white')
                        $('li').css( 'color', 'black');
                    }
                });
            });

まとめ

前回の初心者に捧げるハンバーガーメニューの作り方と合わせることもできるので是非とも見てみてください。
この記事をみてくださったあなたの成長を応援します!!!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

マイライブラリ:レスポンシブデザイン(ブレークポイント、フレックスボックス)

Mana本

メディアクエリはCSSに記述する。

■ブレークポイント

デザインを切り替えるポイントとなる画面サイズをブレイクポイントと言う。
ブレイクポイントをいくつに設定するかとりあえず以下で!!
https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834

◎560px未満をスマホと設定

@media (max-width:560px) {}

◎960px未満をタブレットと設定

@media (min-width:561px) and (max-width:960px) {}

■フレックスボックスの並びの変更
https://qiita.com/abetack/items/6f036cdc27aa5150c28b

下のようなフレックスボックスの親要素の場合

.page-header{
  display:flex;
  justify-content: space-between;
}

それをメディアクエリで560px以下の場合は、子要素を縦並びにして中央揃えにすると

.page-header{
  flex-direction:column;
  align-items:center;
}

通常はjustify-contentで横並びの均等配置
560px以下の場合はalign-itemsで縦並びの中央揃い

■グリッドレイアウトの場合

grid-template-columnsプロパティの値で、自動の列数を変えたり、画像1枚の最低値をセットできる。
下は、自動整列で、最低画像サイズ240px。

.gird{
 display:grid;
 gap:26px;
 gird-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

マイライブラリ:メディアクエリのブレークポイント

Mana本

メディアクエリはCSSに記述する。

■ブレークポイント

デザインを切り替えるポイントとなる画面サイズをブレイクポイントと言う。
ブレイクポイントをいくつに設定するかとりあえず以下で!!
https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834

◎560px未満をスマホと設定

@media (max-width:560px) {}

◎960px未満をタブレットと設定

@media (min-width:561px) and (max-width:960px) {}

■フレックスボックスの並びの変更
https://qiita.com/abetack/items/6f036cdc27aa5150c28b

下のようなフレックスボックスの親要素の場合

.page-header{
  display:flex;
  justify-content: space-between;
}

それをメディアクエリで560px以下の場合は、子要素を縦並びにして中央揃えにすると

.page-header{
  flex-direction:column;
  align-items:center;
}

通常はjustify-contentで横並びの均等配置
560px以下の場合はalign-itemsで縦並びの中央揃い

■グリッドレイアウトの場合

grid-template-columnsプロパティの値で、自動の列数を変えたり、画像1枚の最低値をセットできる。
下は、自動整列で、最低画像サイズ240px。

.gird{
 display:grid;
 gap:26px;
 gird-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

webサイトを作るにはまずは「見えない力線」に注目して作ろう

デザインというものは見え方は人によって様々で一概にこれがいいというものは特にありません。
しかし見やすいとか、理解しやすいサイトというのは誰もが同じように感じるものではないでしょうか?
そこで基本的なことですが、改めて意識しておくといいことでもあるのでここに書かせていただきます。
今回は「見えない力線」について紹介したいと思います。
この見えない力線に意識してサイトを作成していくと自ずとユーザにとって見やすい。理解しやすいサイトになるでしょう。

「見えない力線」とは

要はガイドのことなんですが、サイトに見えないガイドを引き、それに沿っても文字や画像を配置することによって関連付けされた情報はただ単に見栄えがよくなるだけでなく、各要素に対する秩序をもたらし、そのページにきたユーザに情報を素早く理解できるようなサイトを作ることができます。

名称未設定-2.jpg

ダブルチェック以上のチェックをする

ただこの「見えない力線」に気をつけていても色々と修正していくと自分が気づかないうちにずれてしまうことがあります。
結構自分では気づかないところは他の人は気づくものです。私自身も他の人が作成したものはすぐに気づくのですが自分の作成したものを気づくのはなかなか難しくずれていたまま先に進めてしまうこともあります。
最近新しくLPを1人でコーディングして作成したのですが至る所にズレなどがあり自分の甘さに痛感しました。
1人でやり切らずダブルチェックなどは必ずやるべき項目ですね

まとめ

お洒落なサイトというものは流行などもあっていずれは古臭いデザインとなり廃れてきますが(全てがそうとも言い切れないが)、ユーザが見やすい、理解しやすいサイトというのはずっと愛されるものではないかと思っています。
初めてサイトを作ってみようという人はまずはオシャレなものというより、ユーザが使いやすい見やすいサイトを作ってみてはどうでしょうか?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML CSS参考サイト一覧

TechFeed

HTML,CSSだけでなくテクノロジーに興味のある人には、面白いと思います。
https://techfeed.io/

HPCode,サルワカ,taneppa

基本的なこと(displayって何だっけ?)に詰まった時に参考にしています。とても丁寧に書かれているので、理解しやすいです。
https://haniwaman.com/
https://saruwakakun.com/
https://taneppa.net/display-inline-block/

Headers

ヘッダーを作るときに苦労することが多かったのですが、このサイトには様々な種類のヘッダーが集められていて助けられました。
https://headers.netlify.app/

Web Design Search

Web Design、制作に役立つ情報がまとめられています。時間に余裕のある時に見てみてください。
https://webdesign-s.com/

shibajuku

アクセシビリティについて詳しく書かれているので、HTML,CSSを勉強し始めた初期段階で確認しておきたい。
https://shibajuku.net/category/accessibility/

ネコメシ

ここの記事を読んで勉強記録をQiitaに投稿しようと思いました。
良かったらお昼休みに読んでみてください。
https://necomesi.jp/blog/tsmd/posts/278#more-278

番外編

マーケティングについてまとめられているのですが、面白い。
https://ferret-plus.com/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 325日目

100日チャレンジの325日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
325日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSだけで幻想的な光を放つニキシー管を作れるのか?

はじめに

htmlとCSSでニキシー管を作ってみました。(デモのページ
動的な数字の切り替えに対応しているので、いろいろな用途で使えると思います。

ニキシー管とは

ニキシー管は文字や数字を表示させる発光装置です。ガラス管の中にネオンガスが入っていて、電圧を印加するとワイヤーが幻想的なオレンジ色の光を放ちます。今は数字を表示するデバイスは6セグのLEDにとって代わられてしまっていますが、そのスチームパンクな外観に加えて、デジタルな制御なのに表示される数字がアナログという良さから愛好家が多いデバイスです。STEINS;GATEのダイバージェンスメーターに使われているのはあまりにも有名です。
NixieClock

なぜ作ろうと思ったのか

ニキシー管は今は量産されておらず、手に入れようと思うと基本的にはソ連製のデッドストックを探してきて買うしかありません。供給がほとんどないので、1個あたりの値段は結構高いです。例えばこれとかは6個で1万円します。

勢いあまって購入したはいいのですが、ちゃんと制御しようとすると、140Vの電圧を作る昇圧回路、印加するピンを切り替える回路、複数本使う場合にはダイナミック点灯するための同期回路、そしてなんといっても1本あたり10本のピンが出ているのでそれの配線などなどが必要になりとても大変です。そこまでの覚悟がなかったので、手動で数字を点灯するところまでやって投げることになってしまいました...

リアルでは挫折してしまったのですが、web上なら回路を作る必要もないし制御もjavascriptとかで簡単にできるし、いいことづくめなのではと思って作り始めました。

できたもの

nixie_sample.gif

いろいろと試行錯誤を繰り返した結果、こんな感じになりました。
もっといい感じのニキシー管を作り上げてくれる人が現れることを願って、これ以降は制作工程を1から書いていきます。

ニキシー管の作り方

フォントを選ぶ

ニキシー管の独特な数字を再現するために、適切なフォントを探す必要があります。
ニキシー管で表示される数字は、ワイヤーで作られているものなので、次のような特徴があります。

  • 一筆書きで数字が表されている
    • 4の上がくっついている
    • 1の下の線はない
  • 線が細い
  • 構成している線が少ない

これに加えて、管を使っているので少し縦長という特徴もありますが、フォントの縦横比は後で変えられるので、フォント選定の際は考えなくても良さそうです。

この辺の特徴を満たすいい感じのフォントをGoogleFontsで頑張って探しました。線の細さでフィルターすると数が減って探しやすかったです。最終的には下記のフォントを使うことにしました。

Quicksand
font.PNG

光るワイヤーを作る

上で選んだ文字を光らせます。
CSSでネオンっぽく文字を表示する方法は下記のcodepenを参考にさせてもらいました。
CSS animated neon sign

ニキシー管の光は、

  1. ワイヤー部分の黄色く光る部分
  2. その周囲の蛍光物質が放電してできたオレンジ色に光る部分
  3. 光で照らされて淡くオレンジ色に光る部分

の3つの光があるとして、それぞれCSSに書いていきました。
1はテキストのcolorで設定し、2、3はtext-shadowを使って設定しています。text-shadowの色が薄い部分は複数回かけることでいい感じの濃さにしています。

また、元のフォントよりも横長にしたかったので
CSSは以下の通りです。

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

.nixie_tube {
  font-size: 200px;
  font-family: 'Quicksand', sans-serif;
  color: #fff256;
  text-shadow: 0 0 0.05em #d45424, 0 0 0.05em #d45424, 0 0 0.05em #d45524,  /* 導線の輪郭 */
               0 0 0.1em #d45424, 0 0 0.1em #d45424, 0 0 0.1em #d45524,  /* 導線の輪郭 */
               0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524,  /* 導線の輪郭 */
               0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524,  /* 導線の輪郭 */
               0 0.05em 0.01em #000;
  position: relative;
}

.light_up_wire{
  position: absolute;
  top: 0.2em;
  left: -0.3em;
  top: -0.15em;
  transform: scale(0.8, 1.0);
}
  <span class="nixie_tube">
    <span class="light_up_wire">{{show_num}}</span>
  </span>

ここまでやると↓のような感じになります。
font_color.PNG

光っていないワイヤーを作る

ニキシー管の中を見ると、数字の形をしたワイヤーが中に入っていることがわかります。
このごちゃっとした感じもニキシー管の良さですよね。というわけで、光っていない部分の数字も作ります。

先ほど作ったCSSのcolorを暗くして、text-shadowを消します。
また、positionをabsoluteにすることで、何個表示しても同じ場所に重なるように表示されるようにします。

.nixie_wire {
  color: #34241c;
  text-shadow: none;
  position: absolute;
  transform   : scale(0.8, 1.0);
}

htmlの方は0~9まで全ての数字を書いてしまうと、あまりに重なりすぎてなんだかわからなくなってしまうので、特徴的な数字だけ間引いて入れています。フォントの線も細く出来たら良かったのですが...

  <span class="nixie_tube">
    <span class="nixie_wire">0</span>
    <span class="nixie_wire">2</span>
    <span class="nixie_wire">7</span>
    <span class="nixie_wire">8</span>
    <span class="light_up_wire">{{show_num}}</span>
  </span>

できあがったワイヤーは↓のような感じです。
wire.PNG

ガラス管を作る

ニキシー管は試験管みたいな容器の中に入っているところがかっこいいです。
なので、いい感じの管もCSSで作ります。

ニキシー管のガラスの部分と上下のキャップを、指定した範囲の背景にグラデーションを設定し、枠を丸めることで作っています。ガラスの方は基本透明ながらも、オレンジの光が当たって側面が光っているようにしています。キャップの方は金属っぽくなるように上の方から光が当たって白くなるような感じで斜めのグラデーションをかけています。

.nixie_glass {
  width : 0.55em;
  height : 1.2em;
  position: relative;
  top: 0.18em;
  opacity: 0.5;
  background: radial-gradient(transparent 60%, #aa3315);
  border-radius: 0.15em;
  display: inline-block;
}

.nixie_cap {
  width : 0.6em;
  height : 0.2em;
  position: absolute;
  top: -0.08em;
  left: -0.025em;
    background: linear-gradient( transparent 40%, #aa5d31 70%,#111 80%),
                    linear-gradient(to top left, #111 60%, #444 80%);
  border-radius: 0.08em 0.08em 0.02em 0.02em;
  display: inline-block;
}

.nixie_buttom {
  width : 0.6em;
  height : 0.2em;
  position: absolute;
  top: 0.98em;
  left: -0.025em;
    background: linear-gradient(to top, transparent 40%, #aa5d31 70%,#111 80%),
                    linear-gradient(to top left, #111 60%, #444 80%);
  border-radius: 0.02em 0.02em 0.08em 0.08em;
  display: inline-block;
}

ここまで設定すると以下のようになります。

nixie.PNG

切り替え時の残像を再現する

ここまでで一応数字を表示するところまでできるようになったのですが、まだニキシー管のかっこいいところを再現しきれているとは言えません。ニキシー管はただ数字を表示しているだけでも素敵なのですが、時計などで数字が切り替わるとき、前に表示していた数字がすぐには消えずに残像となって残り、その間に新しい数字が出てくるような挙動をします。
参考動画
このふわっと感をCSSで再現したい...と思ったのですが、CSSで切り替わりのタイミングを制御する方法がわからなかったので、諦めてjavascriptを使いました。

フェードインとフェードアウトのアニメーションはCSSのアニメーション機能を使いました。text-shdowとcolorを徐々に変化させるようにしています。これを表示させる数値が切り替わるたびに実行するようにします。
また、フェードインさせる数字とフェードアウトさせる数字の二種類を作り、それぞれ同時にアニメーションさせることで切り替わりを再現しています。

.fadein {
  animation: fadein linear 0.2s;
}

.fadeout {
  animation: fadeout linear 0.2s forwards;
}

@keyframes fadein {
  0% {
    color: #34241c;
    text-shadow: none;
  }
  100% {
    color: inherit;
    text-shadow: inherit;
  }
}

@keyframes fadeout {
  0% {
    color: inherit;
    text-shadow: inherit;
  }
  100% {
    color: #000;
    text-shadow: none;
  }
}

これでふわっと数字が切り替わる様子が再現できました!
↓ではわかりやすいように実際よりゆっくりと切り替えています。
nixie_sample2.gif

完成

Vueのコンポーネントとして一つのファイルにまとめました。
これで好きな数字をpropから渡してあげることで、時計やカウンターのような使い方をすることができます。
デモのページでは、このコンポーネントを使ったデモを表示しています。

<template>
  <span class="nixie_tube">
    <span class="nixie_wire">0</span>
    <span class="nixie_wire">2</span>
    <span class="nixie_wire">7</span>
    <span class="nixie_wire">8</span>
    <span v-bind:class="{ fadeout: on_change }" class="nixie_wire">{{previous_num}}</span>
    <span v-bind:class="{ fadein: on_change }" class="light_up_wire">{{show_num}}</span>
    <span class="nixie_glass"></span>
    <span class="nixie_cap"></span>
    <span class="nixie_buttom"></span>
  </span>
</template>

<script>
export default {
  props: {
    show_num: [String, Number]  // ニキシー管に表示する数字
  },
  data: () => {
    return{
      on_change: false,
      previous_num: 8
    }
  },
  methods:{
    change_num: function() {
      if(this.show_num == this.previous_num){
        return
      }
      this.on_change = true
      setTimeout(()=>{
        this.on_change = false
        this.previous_num = this.show_num
      }, 200)
    }
  },
  watch:{
    show_num: function() {
      this.change_num()
    }
  },
  mounted() {
    this.change_num()
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

.nixie_tube {
  font-size: 200px;
  font-family: 'Quicksand', sans-serif;
  color: #fff256;
  text-shadow: 0 0 0.05em #d45424, 0 0 0.05em #d45424, 0 0 0.05em #d45524,  /* 導線の輪郭 */
               0 0 0.1em #d45424, 0 0 0.1em #d45424, 0 0 0.1em #d45524,  /* 導線の輪郭 */
               0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524,  /* 導線の輪郭 */
               0 0 0.5em #d45424, 0 0 0.5em #d45424, 0 0 0.5em #d45524,  /* 導線の輪郭 */
               0 0.05em 0.01em #000;
  position: relative;
}

.light_up_wire{
  position: absolute;
  transform: scale(0.8, 1.0);
}

.nixie_wire {
  color: #34241c;
  text-shadow: none;
  position: absolute;
  transform   : scale(0.8, 1.0);
}

.nixie_glass {
  width : 0.55em;
  height : 1.2em;
  position: relative;
  top: 0.18em;
  opacity: 0.5;
  background: radial-gradient(transparent 60%, #aa3315);
  border-radius: 0.15em;
  display: inline-block;
}

.nixie_cap {
  width : 0.6em;
  height : 0.2em;
  position: absolute;
  top: -0.08em;
  left: -0.025em;
    background: linear-gradient( transparent 40%, #aa5d31 70%,#111 80%),
                    linear-gradient(to top left, #111 60%, #444 80%);
  border-radius: 0.08em 0.08em 0.02em 0.02em;
  display: inline-block;
}

.nixie_buttom {
  width : 0.6em;
  height : 0.2em;
  position: absolute;
  top: 0.98em;
  left: -0.025em;
    background: linear-gradient(to top, transparent 40%, #aa5d31 70%,#111 80%),
                    linear-gradient(to top left, #111 60%, #444 80%);
  border-radius: 0.02em 0.02em 0.08em 0.08em;
  display: inline-block;
}

.fadein {
  animation: fadein linear 0.2s;
}

.fadeout {
  animation: fadeout linear 0.2s forwards;
}

@keyframes fadein {
  0% {
    color: #34241c;
    text-shadow: none;
  }
  100% {
    color: inherit;
    text-shadow: inherit;
  }
}

@keyframes fadeout {
  0% {
    color: inherit;
    text-shadow: inherit;
  }
  100% {
    color: #000;
    text-shadow: none;
  }
}
</style>

おまけ1

ニキシー管で好きな数字を表示できるようにして何をするかって?
それはもちろん...
raihousya.PNG

おまけ2

propには数値だけではなく文字を指定することもできます。
試しにやってみたところ、フォント側からしたらガラス管の幅なんて知ったことではないので容赦なくはみ出してきました。
hello.gif

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む