フロントエンド
こんにちは、ユアサです。 今回は写真ギャラリーの特定の写真をクリックしてモーダルで表示し、更にモーダル内で他の写真も閲覧できるモーダルギャラリーの実装をしていきたいと思います。 そもそもどうして自分で作成しようとしたのか ギャラリーモーダルを…
こんにちは、ナカムラです。 最近関わった案件で文字に下線が引かれたデザインが多かったので、今回は下線のスタイルを調整するときに使うCSSプロパティをご紹介したいと思います。 DEMO See the Pen CSSで文字の下線をスタイル調整する by Nakamura (@takay…
こんにちは、ユアサです。 以前業務でSwiperを使ったスライダーをスマホ表示時に解除してカラム表示にすることがあったので、今回はPC・スマホそれぞれのウィンドウ幅の可変で都度Swiperを実装・解除する方法について備忘録の意味も込めて書きまとめたいと思…
こんにちは、ナカムラです。 今回はCSSだけで円グラフを作ってみたいと思います。 文字を配置するにあたり、CSSの三角関数cos()・sin()を使用します。 グラフを作るというよりまだ使ったことがなかったので、三角関数を使うというのが今回のテーマになります…
こんにちは、ユアサです。 弊社の案件で要素の角が欠けている（ベベルのある）デザインをコーディングする機会がありましたので、今回はその備忘録も兼ねてまとめていきたいと思います。 どのように作成すればいいのかさっぱり分からなかったので、こちらの…
こんにちは、ハヤマです。 今回は、比較的新しい画像ファイルのフォーマット「WebP（ウェッピー）」について紹介したいと思います。 WebP（ウェッピー）とは 2010年に米Googleが開発した画像ファイルのフォーマットのことで、ファイルの拡張子は「.webp」で…
こんにちは、ナカムラです。 以前の記事でtimelineをスキップするメソッドをご紹介しました。 tech.arms-soft.co.jp 今回は逆再生をしてみたいと思います。 DEMO See the Pen GSAPのtimelineアニメーションを逆再生する by Nakamura (@takayo-nakamura) on C…
こんにちは、ユアサです。 吹き出し付きのコメントがあるようなページのコーディングをすることがありますが、その度に格闘していた『吹き出しの尖っている部分どう作るか問題』に（一旦）終止符を打ちたいので、今回は備忘録も兼ねて自分が考えた方法につい…
こんにちは、ナカムラです。 先日11月11日に開催された「アクセシビリティカンファレンス福岡」に参加しました。 Youtube配信を見ていただけですが参加と言う。見るだけでも大事です。 アクセシビリティの向上は障害者のためだけではなく、みんなが使いやす…
こんにちは、ユアサです。 前回の記事ではキーフレームの話と、フレーム・キーフレームとトゥイーンを使って工夫した動作のアニメーションを作成しました。今回は予告していた通り、アニメーションを作成する上での基本原則となる『アニメーションの12の原則…
こんにちは、ナカムラです。 先日、inputタグのチェックボックスとラジオボタン自体をCSSで装飾できないか？ という質問をいただいたのでこの記事で紹介したいと思います。 フォームでよく使われるチェックボックスやラジオボタンの装飾方法は、labelやspan…
こんにちは、ユアサです。 前回の記事では新規ドキュメントの設定と3種類のトゥイーンの説明、ファイルへの書き出し方法の紹介をしました。これで新規作成から書き出しまで一通りの作業ができるようになりました。 今回は改めてキーフレームの話と、フレーム…
こんにちは、ナカムラです。 スクロールしてもヘッダーが追従するようにposition: fixed;などで固定配置することがよくあります。 その際、ページ内リンクで該当箇所へスクロールすると、そのままではヘッダーが重なってしまいます。 この問題について、だい…
こんにちは、ユアサです。 今回も前回に引き続きAdobe Animateの内容の記事になります。予告していた通り、今回はトゥイーンなど機能の種類や書き出し方法についての紹介をします。（違う動作のアニメーションの内容も入れるとボリュームが大きくなってしま…
こんにちは、ナカムラです。 今回はCSSでよく使われるビューポート単位について、検証したいことがあったので書きたいと思います。 100vhを使った時にアドレスバーの分、意図した高さにならない問題がiOS safariであります。 その対応に使えそうなビューポー…
こんにちは、ユアサです。 業務内でアニメーションを使用する仕様の案件がありました。アニメーション作成については知識が全くなかったので今回は担当しなかったのですが、理想としては「作れます！」と言えるようになりたい・・・・。 そこで今回は、アニ…
こんにちは、ナカムラです。 今回はページ内リンクのナビゲーションに、カレントのスタイルをつける方法のご紹介をします。 GSAPのscrollTriggerを使用します。 GSAPのscrollTriggerについてはこちら https://greensock.com/docs/v3/Plugins/ScrollTrigger D…
こんにちは、ユアサです。 コーディングをする際、レスポンシブレイアウトなどにどうしても数値の有効範囲を指定したいという場面があることも多いかと思います。今回は、数値の最大値・最小値を指定できる比較関数を備忘録もかねてまとめていきます。 使う…
こんにちは、ナカムラです。 今回はCSSで角度が変わらない斜めの背景の作り方をご紹介します。 ウィンドウ幅いっぱいに、なおかつ斜めになっているデザインはよく使われます。 やり方はいろいろあると思いますが、今回はclip-pathを使ってみたいと思います。…
こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが（というより最近知ったのですが）、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間す…
こんにちは、ナカムラです。 今回はdetailsについて試してみたものをご紹介したいと思います。 よくある質問などでよくアコーディオンを使うと思います。 たくさんある中でユーザーが求めている物・そうでないものがあるので、必要な時だけ開くようにするの…
こんにちは、ユアサです。 業務の中で、動的ページ内で長文テキストを表示した際にデザインが崩れてしまうといった見落としが何度かあったので、今回は動的ページにおける長文テキスト対策について自分の備忘録も兼ねてまとめていきます。 ①コンテンツ範囲か…
こんにちは、ナカムラです。 今回はフォームの機能で困ったことがあったので、備忘録として書きたいと思います。 HTML5のフォームバリデーションでは必須項目が未入力の場合や、入力形式が異なる場合にエラーメッセージを表示しユーザーへ伝える機能が備わっ…
こんにちは、ユアサです。 今回は、誰でも一度は見落としてしまったことがあるかもしれないaタグの『見えないクリック領域』について、例と解決策を交えながら考えていきます。 何もないはずのところにクリック領域がある テキストや画像、あるいはhtmlタグ…
こんにちは、ナカムラです。 GSAPのtimelineアニメーションをスキップしたり、リプレイする処理は前回行いました。 tech.arms-soft.co.jp scrollTriggerによって、特定の要素が表示されたタイミングでアニメーションする処理も書きましたね。 tech.arms-soft…
新年明けましておめでとうございます！ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 前回の記事ではレーダーチャートのベース部分となる枠線の描画をしましたので、今回は実践の後編ということで動的に表示するレーダーチャ…
こんにちは、中村です。 今回はCSSの話です。 フロントエンドの作業はデザインを下にマークアップとスタイルを作っていくところから始まります。 そこで、最近よく作るレイアウトの組み方をご紹介したいと思います。 片側だけ可変する背景 記事のタイトルに…
こんにちは コバヤシです。 今回は以前ブログで記事にしたEditor.jsでインラインツールを作成してみました。 tech.arms-soft.co.jp インラインツールとは インラインツールとは、テキストのブロックで文字を選択した時に出るツールのことです。 標準で太字に…
こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…
こんにちは、ナカムラです。 今回もGSAPの使い方についてご紹介します。 前回の記事でtimelineの使い方をご説明しました。 tech.arms-soft.co.jp このtimelineを使うと、一連のアニメーションを作ることができます。 サイトのオープニングアニメーションなど…
