webデザイン

投稿

cssグリッドを使ってタイル状に並べる際に、タイトルを入れて区切りを入れる最適解

- 8月 17, 2021

レスポンシブ対応のページでcssグリッドを使ってコンテンツをタイル状に並べるといった場面はよく出てくると思います。通常ですとコンテンツをラッピングしている要素に「display: grid」を指定してやるだけでコンテンツがタイル状に並んでくれます。横３つで並べる場合「grid-template-columns: repeat(3, 1fr)」としてやれば横3つでタイル状に並んでくれます。 One Two Three Four Five レスポンシブ対応を考えた場合。PCの場合は幅180px前後で幅ぴったりに複数ならべ、スマホの場合は１つだけ表示させたい。といったような対応が迫られる事があります。レスポンシブでブラウザの幅で並べる数を変えたい場合この場合は、「grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))」幅180px指定を設定することで対応可能です。この場合は、PCが4つ、タブレットが3つ、スマホが1つ、で横幅ぴったりで収まってくれます。 One Two Three Four Five この方法は、レスポンシブを考えた場合とても有効で有用な方法だと思います。しかし、下記のように途中に小見出しを入れたい場合に、コンテンツの数が少ない場合にタイル状に並ばないような状況が出てしまいます。よくある失敗例小見出し以降のコンテンツが２個や１個の場合PCではコンテンツが広がってしまいタイル状に並んでくれない。これは上下のコンテンツが独立したグリッドなのが原因です。レスポンシブでこれを改善させるためにはメディアクエリを多用したり、空の要素を追加したりして解決するしかございません。小見出し１ One Two Three Four Five 小見出し2 One Two 小見出し3 One では、どうするか。以下のような解決策でこれが現状の最適解となります。成功例グリッドを上下で分けずに見出しも含めてグリッドに入れてしまい、タイトルのスタート位置を一番目（grid-column-start: 1）さ

Googleマテリアルデザインのripple（リップル）を本気で取り組んでみた

- 5月 03, 2021

Googleマテリアルデザインでも最も重要な部分に当たるripple（リップル）に挑戦してみました。参考にしたのはもちろんGoogle。先ずはripple（リップル）の説明ですが、マウスや指でボタン（リンク）をクリック（タップ）すると波紋（ ripple ）が発生して触った感覚を視覚的に演出する手法のことです。今回は以下のボタンをメインに製作を行ってみました。完成したのが以下になります。CodePenにてソースは実装公開しております。 See the Pen Googleマテリアルデザインripple（リップル） by yoshiaki nakao ( @woopeer ) on CodePen . Google実装例を確認してみて分かった事なのですが、さすがGoogle！といったものでした。アニメーションはすべてCSSで行われており、とてもスムーズな動きを実現させています。Javascriptでクラス名を変更する事でリップルアニメーションを実現させています。ただクラス名を変更するだけでは、リップルのスタート位置やサイズが変更できないのですが、Javascriptでスタート位置、エンド位置、サイズ、拡大サイズの４つの変数をCSS変数を指定する方法でCSSアニメーションに渡しています。実装例ですが、「ripple-radius-in」というアニメーションを「--ripple-start」「--ripple-end」「--ripple-scale」という３つの変数で用意しておきマウスイベント等で発火させマウス座標やサイズ等を「style.cssText」で自身に設定するといった方法で変数をCSSに渡しています。CSSアニメーションに変数を渡すというのが私には発想がなかったので結構衝撃的でした。とても勉強になりました。今後、活用していきたいと思います。 CSS @keyframes ripple-radius-in { from { transform: translate(var(--ripple-start, 0)) scale(1); } to { transform: translate(var(--rip

CSS（sticky）でパララックス風エフェクト

- 3月 03, 2021

CSSだけでパララックス風のコンテンツ cssのposition: sticky;の動きがすごく気に入ってしまい、何か面白い事がきないかと考えておりました。そんなときに思いついたのが今回のなんちゃってパララックスです。まず、パララックスの定義（パララックスとは？）ですが。複数のレイヤーが重なって配置されているスクロールすると各レイヤーが異なるスピードで動く前後のレイヤーが独自にスクロールし、奥行き感が出る明確な場面の変更ができ、印象的な演出ができるといったところかなと思います。パララックスが注目されるようになってずいぶん経ちますが（おそらく2012年頃？）それほど普及したとは言えない状況だと思います。最近のパララックスは当初のような前後のレイヤーのスライド量を変えるといった華美な動きは少なく、スライドと共に文字やカード、アイコンなどが浮き出たりフェードインしたりといった演出が主流のようです。パララックスの実装方法ですが、大抵の場合JavaScriptのスクロールイベント（window.onscroll）を用いてターゲットのスクロール位置を取得（sampleElement.scrollTop）し、表示位置になったらクラス追加などして、動きのある演出を行っているようです。ただ、JavaScriptを使うとなると、専門のエンジニアが必要となり、どうしても二の足を踏む事も多くございます。そこで今回のご提案ですが、JavaScriptを使わずにcssのposition: sticky;でなんとかパララックスっぽい見せ方ができないかというものになります。以下が実装サンプルHTMLとCSSになります。 See the Pen CSS（sticky）でスクロール）パララックス風エフェクト by yoshiaki nakao ( @woopeer ) on CodePen . パララックスの醍醐味として背景とコンテンツが別々にスクロールするギミックが必要になってきます。そこでposition: sticky;を使って次のコンテンツが表示されるまでタメておき、次のコンテンツが現れた時に入れ替わるよう工夫いたしました。まずコンテンツとコンテンツの間を「m

「…続きを読む」リンク

- 2月 23, 2021

よくある依頼で長い文章の際に冒頭だけ表示したい。つまり、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で作ってみた

- 2月 19, 2021

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

パタパタ時計flip clockを作ってみた

- 12月 20, 2020

パタパタ時計をページ内に表示したくて作ってみました。 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）させています。実際

このブログを検索

webデザイン

投稿

2021年svgアイコンをCSSで実装する方法を本気で考えてみた

cssグリッドを使ってタイル状に並べる際に、タイトルを入れて区切りを入れる最適解

Googleマテリアルデザインのripple（リップル）を本気で取り組んでみた

CSS（sticky）でパララックス風エフェクト

「…続きを読む」リンク

100マス計算をwebで作ってみた

パタパタ時計flip clockを作ってみた