こんにちは、ユアサです。 今回は写真ギャラリーの特定の写真をクリックしてモーダルで表示し、更にモーダル内で他の写真も閲覧できるモーダルギャラリーの実装をしていきたいと思います。 そもそもどうして自分で作成しようとしたのか ギャラリーモーダルを…
こんにちは、ユアサです。 以前業務でSwiperを使ったスライダーをスマホ表示時に解除してカラム表示にすることがあったので、今回はPC・スマホそれぞれのウィンドウ幅の可変で都度Swiperを実装・解除する方法について備忘録の意味も込めて書きまとめたいと思…
こんにちは、ユアサです。 弊社の案件で要素の角が欠けている（ベベルのある）デザインをコーディングする機会がありましたので、今回はその備忘録も兼ねてまとめていきたいと思います。 どのように作成すればいいのかさっぱり分からなかったので、こちらの…
こんにちは、ユアサです。 吹き出し付きのコメントがあるようなページのコーディングをすることがありますが、その度に格闘していた『吹き出しの尖っている部分どう作るか問題』に（一旦）終止符を打ちたいので、今回は備忘録も兼ねて自分が考えた方法につい…
こんにちは、ユアサです。 前回の記事ではキーフレームの話と、フレーム・キーフレームとトゥイーンを使って工夫した動作のアニメーションを作成しました。今回は予告していた通り、アニメーションを作成する上での基本原則となる『アニメーションの12の原則…
こんにちは、ユアサです。 前回の記事では新規ドキュメントの設定と3種類のトゥイーンの説明、ファイルへの書き出し方法の紹介をしました。これで新規作成から書き出しまで一通りの作業ができるようになりました。 今回は改めてキーフレームの話と、フレーム…
こんにちは、ユアサです。 今回も前回に引き続きAdobe Animateの内容の記事になります。予告していた通り、今回はトゥイーンなど機能の種類や書き出し方法についての紹介をします。（違う動作のアニメーションの内容も入れるとボリュームが大きくなってしま…
こんにちは、ユアサです。 業務内でアニメーションを使用する仕様の案件がありました。アニメーション作成については知識が全くなかったので今回は担当しなかったのですが、理想としては「作れます！」と言えるようになりたい・・・・。 そこで今回は、アニ…
こんにちは、ユアサです。 コーディングをする際、レスポンシブレイアウトなどにどうしても数値の有効範囲を指定したいという場面があることも多いかと思います。今回は、数値の最大値・最小値を指定できる比較関数を備忘録もかねてまとめていきます。 使う…
こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが（というより最近知ったのですが）、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間す…
こんにちは、ユアサです。 業務の中で、動的ページ内で長文テキストを表示した際にデザインが崩れてしまうといった見落としが何度かあったので、今回は動的ページにおける長文テキスト対策について自分の備忘録も兼ねてまとめていきます。 ①コンテンツ範囲か…
こんにちは、ユアサです。 今回は、誰でも一度は見落としてしまったことがあるかもしれないaタグの『見えないクリック領域』について、例と解決策を交えながら考えていきます。 何もないはずのところにクリック領域がある テキストや画像、あるいはhtmlタグ…
新年明けましておめでとうございます！ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 前回の記事ではレーダーチャートのベース部分となる枠線の描画をしましたので、今回は実践の後編ということで動的に表示するレーダーチャ…
こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…
こんにちは、ユアサです。 前回からJSとCanvasでレーダーチャートを作成する記事を作成しましたが、弊社で取り扱った案件でグラデーションを使うことがあり自分の備忘録という意味でもまとめておきたいと思ったので、今回は少し逸れてCSSでグラデーションを…
こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチ…
こんにちは、ユアサです。 今回は前回紹介したNode.jsとExpressを使用して、実際に簡易サーバーを作成していきます。 ↓前回の記事はこちら tech.arms-soft.co.jp Node.jsとnpmの準備 まずはNode.jsをインストールします。Node.jsの公式ページから各OSのイン…
こんにちは、ユアサです。 今回からNode.jsとそのフレームワークのExpressを使って、ローカル環境で表示確認しながらコーディングしやすくなる簡易的なWebサーバを作成・起動してみようと思います。フロントエンドなら作業前にぜひ準備しておきたいですね。 …
こんにちは、ユアサです。 今回は前回紹介したbackgroundプロパティ（以下backgorundと表記します）で実際にコーディングしてみると同時に、スタイルが反映されなくなる例を書きまとめていきます。 ↓前回の記事はこちら tech.arms-soft.co.jp 背景に画像を設…
こんにちは、ユアサです。 今回は、最近やっと使い慣れてきたbackgroundプロパティ（以下backgorundと表記します）について、どのような値を指定できるのかまとめたいと思います。というのも、backgroundは色、画像、位置などを一括指定※できるプロパティな…
こんにちは、ユアサです。 以前業務で要素同士の重なり方について、自分ではうまく思ったようにコーディングできなかったことがありました。z-indexプロパティを使ったはいいものの、なぜかそのスタイルが反映されず一体何が原因なのやら・・・・。 個人的に…
こんにちは、ユアサです。 CSSでホバーアクションを組む際、やりたい動作は決まっているのにうまく書けない、他のホームページとちょっと差をつけたいけど組み方が・・・と悩んでいた経験は一度はあるかと思います。僕も最近担当した案件でホバーアクション…
新年明けましておめでとうございます！ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 今回は今までを振り返って、コーディングで自分も最初の頃はよくつまづいていたCSSの基本や解決策の例などを改めて書きまとめてみようと…
こんにちは、ユアサです。 アームズに入社してからCSSでのスタイル調整はだいぶ慣れてきました。ですが、以前CSSファイルを触っているときに、冒頭に「@」が付いている見慣れないものを発見し、見つけた当時は何のための記述なのか全然理解していませんでし…
こんにちは、ユアサです。 前回はJSのclassListプロパティについて紹介し、クリックしてONとOFFの表示を切り替えるボタンを作りました。予告していた通り、今回はこのプロパティを使って簡単なカルーセルのようなものを作成します。 前回の記事はこちらです…
こんにちは、ユアサです。 前回まではCSSの内容の記事が多かったですが、社内での勉強会でもJSの内容に入ってきたので、今回は勉強会でも習ったclassListについて復習の意味も込めて書きまとめていきます。 classListについて classListは、特定の要素のクラ…
こんにちは、ユアサです。 The State of CSS 2020で比較的認知度が低かったCSSのscroll-snapプロパティについて気になったので、今回はこの内容について書きまとめていこうと思います。 scroll-snapって？ scroll-snapプロパティは、画面をスクロールさせた…
こんにちは、ユアサです。 少し前の話になりますが、The State of CSS 2020でCSSプロパティがいくつか話題になっていました。 その中でも、今回はobject-fitプロパティについて紹介していこうと思います。 object-fitプロパティの認知度について The State o…
こんにちは、ユアサです。 いよいよ梅雨入りしてジメジメした日が続きますね。 さて今回は、昨年にCSSのトレンドになるのではと話題になっていた「ニューモーフィズム」について紹介していきます。 ニューモーフィズムについて ニューモーフィズムは、「New…
こんにちは、ユアサです。 アームズでフロントエンドの見習いとして活動し始めて1ヶ月ほどが経ちます。まだまだ勉強することは多いですが、一つひとつを焦らず段階を踏んで学んでいけたらと思っています。 今回は、自分が勉強していく中で知ったCSSのフレッ…
