サンプル

サンプル

2020夏版】算数記事新デザイン

htmlプリントをデザインしていて、従来のボックススタイルは縦線の左右に無駄なスペースができるのを痛感した。 そこで、できるだけ縦線を極力排除するコンセプトでデザインして出来上がったのが今回の「ストライプスタイル」。 さらに、擬...
サンプル

筆算ボックス用に小数点をbefore要素にするテスト

従前の表示 従来の表示。標準コンテナ(枠なし)内の標準ボックス内に配置した筆算ボックス(枠なし) 筆算(1) 3.2 14)45.5 42.5 43.5 2.8 0.7 終了~♪ 問題の割られる数...
サンプル

[最新]2020コンテナ&ボックス作成中

2020年のボックスデザイン コンセプトの刷新 大型のボタンデザインをしていて気づいた。 従来はボックスを「むき出し」で入れていたのをコンテナ(クラス名「box-ctr」のflexのdiv)に入れた二重構造で配置したほうが...
サンプル

[最新]文字修飾サンプル(マーカー,丸数字,四角数字)

マーカー風の下線(削除済み) 「class="markerY"」 「class="markerO"」 「class="markerP」 「class="markerG"」 「class="markerB"」 下線と背景色のセット...
サンプル

htmlとCSSで作る線分図のサンプル

「分数まとめ」から派生系(2019.10.18) 比の線分図(border-bottomで表現) (例)約分すると23になる分数は… ●×2●×3 → 分子●● 分母●●● → 分子➁ 分母...
サンプル

箇条書き(リスト)サンプル

番号なしリスト 丸印の基本形round1 ulの追加クラス「.round1」。ulタグに「class="round1"」を付け加える。 番号ありリストolと同じ名前にしたのは、ulとolを変えた時にクラス名も変えるのが面倒だから ...
サンプル

分数表現のサンプル

分数表現 クラス名「frac」のspanで全体を囲み、分子はクラス名「si」分母は「bo」のspanで囲むだけ! (使用例) 12 .frac{display: inline-block; vertical-alig...
サンプル

[旧]boxサンプル(2019/6)

旧S-box(シンプルボックス) は廃止して、N-boxの追加クラスで表現。 2019/6/25にサンプル以外の全記事からS-boxを消去・置き換え済み N-box(汎用ボックスに) モバイル表示を管理しやすくするために、201...
サンプル

循環小数の記号の表示サンプル

分数関連って、本当に面倒くさいわ~とぼやきながら、表示テスト 無加工 3.3333… は「3.3」と表します。 記号表示(class="junkan0") 半角ピリオドを使ったタイプ 3.3333… は「3.3」と表します。 ...
サンプル

算数記事サンプル(2019年2月)

2019年2月に作成した 完全内包スタイル 例題1(完全内包) 以下の問いに答えなさい。 これは例題大問用ボックス「Q-box4La」です。 タブ(問題番号)はh3に従前と同様のクラス「QT30a」を適用し...
タイトルとURLをコピーしました