webデザイン

 よくある依頼で長い文章の際に冒頭だけ表示したい。つまり、n行以上の場合に折りたたんで「…続きを読む」リンクを付けたいということがあります。その場合、たいていJavascriptの制御で実現させるというのが定石となります。ただ、よくあるということもあり汎用的に使えるJavascriptを作ってみましたのでご紹介いたします。 See the Pen 「…続きを読む」リンク by yoshiaki nakao ( @woopeer ) on CodePen . 設置準備 今回はjQueryを使わせていただきましたので、GoogleのCDNライブラリを読み込んでおきます。※ヘッダー等ですでに読み込み済みの場合は不要です。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 今回作成したJavascriptは以下になりまして、body内に記述する場合は、本文の邪魔にならないようbody内のできるだけ下部に設置すると（SEO的に）よいかもしれません。また、外部に設置したり、設置済みのものに追加する場合は、jQueryの後に読み込ませてください。 <script> $(function(){ $(function () { $(".more-link").each(function (v_n) { $(this).after('<div class="more-link-after"></div>'); f_lessText(v_n); }); }); function f_moreText(v_n) { var e_text = $(".more-link").eq(v_n); var v_closeHeight = e_text.height(); var v_poenHeight = e_text.css("height", "aut...

小学生の算数の基礎学力向上のため、100マス計算を手軽にどこでもできる様にと、webアプリを作ってみました。 https://woopeer.com/100cells_calculation/ 小学生の算数は結局のところ四則計算（＋ー×÷）ができなくては話になりません。また、高学年になればなるほど 計算のスピード も重要な要素になってきます。 特に中学受験をお考えの方は、２桁の掛け算の暗算が必須と言われております。２桁の掛け算が暗算で、できるできないで問題を解くスピードが大きく変わってきます。受験時の算数に関してですが、普通にやっていては試験時間内に最後まで問題を解くことはできません。特に冒頭に出てくる計算問題がポイントで、正確に素早く解くことが求められます。 ここができるかが合否の分かれ目だといっても過言ではないでしょう。 ２桁の計算スピードのアドバンテージは必ず受験に役立つ物であるとお約束いたします。また受験でなくても１桁等の計算はもとより２桁の四則計算が暗算でできる様になれば一生の宝となり得ます。 操作方法 操作方法はとても簡単です。直感的な操作ができるようになっておりまして「＋」「ー」「X」のボタンのどれかを押せばスタートするようになっております。 全問回答した後、間違っている箇所は赤くエラー表示されますので間違ったところをすぐ訂正できます。 また、それぞれレベル設定ができるようになっております。レベルを上げていくと1～１０以上の数字となりまして例えばレベル10の足し算ですと横の列が20～29となり小学校低学年のお子様にちょうどよいかと思います。 おすすめはレベル10からの掛け算で横の列が10～19の掛け算です。この計算がすらすらとできるようになると小学生での算数はマスターしたも同然です。 ゲーム要素も多少取り入れておりまして、解いた時間によって🌻マークを表示させるようになっております。時間内に解いて🌻🌻🌻を目指してみては？。

パタパタ時計をページ内に表示したくて作ってみました。  CSS等で３D表現しようとしたのですが、環境によって表示が重くなる場合があり、思ったよりカクカクした表示になってしまう場合がございました。またプラスチックのざらっとしたテクスチャも入れてみたかったので思い切って画像で対応することにしました。 そこで、下記の様な画像を制作いたしました。  ０から９までの数字毎に縦10列の構成になっていて、４コマで動く様に動かして行きます。 列の上から下に１列目が１コマ目、２列目が２コマ目、３列目が３コマ目、４列目が最終的に表示させたい数字になります。150ミリ秒ごとに列を動かして動いている様に見せています。 See the Pen flip clock by yoshiaki nakao ( @woopeer ) on CodePen . html、css、javascriptをうまく連携させて行います。 今回動かしたいパーツは、「時（十の位）」「時（一の位）」「分（十の位）」「分（一の位）」「秒（十の位）」「秒（一の位）」の６パーツになります。それぞれ <div id="hour10"></div><div id="hour1"></div><div id="min10"></div><div id="min1"></div><div id="sec10"></div><div id="sec1"></div>というブロックで構成いたしました。 先ずは、css。予め各パーツの背景に画像を貼り付けておきます（background-image）。 位置（background-position）はJSで設定するので設定を省きます。画像を１コマサイズ　横60px　縦100pxで制作してますが余白が下2px横4pxですのでそれぞれのパーツを　横56px　縦98px　で固定しました。秒に関しては時分より少し小さく表示させたかったので、cssで縮小（transform: scale3d）させています。 実際...

背景に◯×を入れるという案件がございました。 「良いですよ」という内容の文章の背景に◯を表示し、「良くないですよ」という内容の文章の背景に×を入れるというものでございました。 やり方はいろいろあると思います。画像やSVGで背景に入れてもいいですし、CSSで整形したものを重ねても良いでしょう。 今回はCSSのグラデーションを使って実現する方法を選択いたしました。特に理由はないのですが、昨今ブラウザの対応が進んでますので、そろそろ「radial-gradient」も使って良いと判断したのとSVGで作るほど複雑なものでもないかなと思い、今回はCSSグラデーションを使っての制作となりました。 以下が実際のHTML、CSSになります。 See the Pen CSSで背景に○× by yoshiaki nakao ( @woopeer ) on CodePen . ◯は結構単純で外側から30px部分だけグラデーションでカラーを入れて、それより内側は透明にすれば完成です。 ×は多少テクニックが必要で、まず斜め45度と－45度の帯をクロスさせるのですが、普通にやってもうまくいきません。 センターでちょうどクロスさせるには、50%を基準に－15pxと＋15pxで帯をグラデーションさせることで30pxの帯をセンターでクロスさせることができます。（作りたい帯の幅を半分にして＋－させてセンターにしている。） ただ、これだけですとボックスの端まで帯が続いてしまうので×に見えません。 これを解決するために、外側にボックスと同じ背景のカラー（例では白）の円でマスクする形のグラデーションを重ねています。 ですので×の端っこは実は円です。でも幅30px程度の厚みでは見た目上、円に見えないというのが今回のポイントです。 ×に関しておさらいすると ①円グラデーション「中心から99.9%透明→100%背景カラー」 ②斜め45度グラデーション「中心から50%－15px透明→中心から50%－15px薄赤→中心から50%＋15px薄赤→中心から50%＋15px透明→100%透明」 ③斜めー45度グラデーション「中心から50%－15px透明→中心から50%－15px薄赤→中心から50%＋15px薄赤→中心から50%＋15px透明→100%透明」 の４つのグラデーションを重ねて×を...