写真をクリックしてモーダルでより見やすく表示!写真のギャラリーモーダルを作成しよう -改修編-

こんにちは、ユアサです。 今回は前々回作成したギャラリーモーダルを改修していきます。 ↓前回の記事はこちら tech.arms-soft.co.jp 現状の動作の流れをまとめる まず改修前のギャラリーモーダルを確認します。 See the Pen gallery_modal by felly (@felly…

写真をクリックしてモーダルでより見やすく表示!写真のギャラリーモーダルを作成しよう -改修準備編-

こんにちは、ユアサです。 今回は前回作成したギャラリーモーダルに工夫を加えるためのパーツについてまとめていきたいと思います ↓前回の記事はこちら tech.arms-soft.co.jp altを取得しよう imgタグに指定されているalt属性はgetAttribute('alt')を使って…

写真をクリックしてモーダルでより見やすく表示!写真のギャラリーモーダルを作成しよう -基礎作り編-

こんにちは、ユアサです。 今回は写真ギャラリーの特定の写真をクリックしてモーダルで表示し、更にモーダル内で他の写真も閲覧できるモーダルギャラリーの実装をしていきたいと思います。 そもそもどうして自分で作成しようとしたのか ギャラリーモーダルを…

PC・スマホでSwiperを実装・解除する判定をするJSを作ろう!

こんにちは、ユアサです。 以前業務でSwiperを使ったスライダーをスマホ表示時に解除してカラム表示にすることがあったので、今回はPC・スマホそれぞれのウィンドウ幅の可変で都度Swiperを実装・解除する方法について備忘録の意味も込めて書きまとめたいと思…

CSSだけで角が欠けたデザインを表現しよう!

こんにちは、ユアサです。 弊社の案件で要素の角が欠けている(ベベルのある)デザインをコーディングする機会がありましたので、今回はその備忘録も兼ねてまとめていきたいと思います。 どのように作成すればいいのかさっぱり分からなかったので、こちらの…

CSSだけで吹き出しデザインの尖っている部分をうまい具合に作りたい!!

こんにちは、ユアサです。 吹き出し付きのコメントがあるようなページのコーディングをすることがありますが、その度に格闘していた『吹き出しの尖っている部分どう作るか問題』に(一旦)終止符を打ちたいので、今回は備忘録も兼ねて自分が考えた方法につい…

イラストを自在に動かす!Adobe Animateを使ってアニメーションを作ってみよう -原則編-

こんにちは、ユアサです。 前回の記事ではキーフレームの話と、フレーム・キーフレームとトゥイーンを使って工夫した動作のアニメーションを作成しました。今回は予告していた通り、アニメーションを作成する上での基本原則となる『アニメーションの12の原則…

イラストを自在に動かす!Adobe Animateを使ってアニメーションを作ってみよう -実践編-

こんにちは、ユアサです。 前回の記事では新規ドキュメントの設定と3種類のトゥイーンの説明、ファイルへの書き出し方法の紹介をしました。これで新規作成から書き出しまで一通りの作業ができるようになりました。 今回は改めてキーフレームの話と、フレーム…

イラストを自在に動かす!Adobe Animateを使ってアニメーションを作ってみよう -機能紹介編(新規ドキュメント、トゥイーン)-

こんにちは、ユアサです。 今回も前回に引き続きAdobe Animateの内容の記事になります。予告していた通り、今回はトゥイーンなど機能の種類や書き出し方法についての紹介をします。(違う動作のアニメーションの内容も入れるとボリュームが大きくなってしま…

イラストを自在に動かす!Adobe Animateを使ってアニメーションを作ってみよう -基本的な動作編-

こんにちは、ユアサです。 業務内でアニメーションを使用する仕様の案件がありました。アニメーション作成については知識が全くなかったので今回は担当しなかったのですが、理想としては「作れます!」と言えるようになりたい・・・・。 そこで今回は、アニ…

最小値や最大値を指定してスタイルを制限!比較関数min()、max()、clamp()を使おう

こんにちは、ユアサです。 コーディングをする際、レスポンシブレイアウトなどにどうしても数値の有効範囲を指定したいという場面があることも多いかと思います。今回は、数値の最大値・最小値を指定できる比較関数を備忘録もかねてまとめていきます。 使う…

インライン要素の長文テキストの表示は大丈夫?box-decoration-breakを使って整えよう!

こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが(というより最近知ったのですが)、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間す…

忘れていると想定外の表示崩れが・・・長文テキスト対策について考えよう

こんにちは、ユアサです。 業務の中で、動的ページ内で長文テキストを表示した際にデザインが崩れてしまうといった見落としが何度かあったので、今回は動的ページにおける長文テキスト対策について自分の備忘録も兼ねてまとめていきます。 ①コンテンツ範囲か…

【フロントエンド初心者向け】なんでこんなところにリンク領域が?aタグの『見えないクリック領域』を暴け!

こんにちは、ユアサです。 今回は、誰でも一度は見落としてしまったことがあるかもしれないaタグの『見えないクリック領域』について、例と解決策を交えながら考えていきます。 何もないはずのところにクリック領域がある テキストや画像、あるいはhtmlタグ…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -実践後編-

新年明けましておめでとうございます!ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 前回の記事ではレーダーチャートのベース部分となる枠線の描画をしましたので、今回は実践の後編ということで動的に表示するレーダーチャ…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -実践前編-

こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…

スタイルを使いこなせ!要素の特徴やブラウザのサポート制限をくぐり抜けて使い分けるグラデーションについて考える

こんにちは、ユアサです。 前回からJSとCanvasでレーダーチャートを作成する記事を作成しましたが、弊社で取り扱った案件でグラデーションを使うことがあり自分の備忘録という意味でもまとめておきたいと思ったので、今回は少し逸れてCSSでグラデーションを…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -準備編-

こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチ…

【フロントエンド初心者向け】Node.jsとExpressでローカルサーバを起動してみよう - 実践編

こんにちは、ユアサです。 今回は前回紹介したNode.jsとExpressを使用して、実際に簡易サーバーを作成していきます。 ↓前回の記事はこちら tech.arms-soft.co.jp Node.jsとnpmの準備 まずはNode.jsをインストールします。Node.jsの公式ページから各OSのイン…

【フロントエンド初心者向け】Node.jsとExpressでサーバを起動してみよう - 紹介編

こんにちは、ユアサです。 今回からNode.jsとそのフレームワークのExpressを使って、ローカル環境で表示確認しながらコーディングしやすくなる簡易的なWebサーバを作成・起動してみようと思います。フロントエンドなら作業前にぜひ準備しておきたいですね。 …

背景の要素を自在に設定!backgroundプロパティで一括指定してみよう -後編-

こんにちは、ユアサです。 今回は前回紹介したbackgroundプロパティ(以下backgorundと表記します)で実際にコーディングしてみると同時に、スタイルが反映されなくなる例を書きまとめていきます。 ↓前回の記事はこちら tech.arms-soft.co.jp 背景に画像を設…

背景の要素を自在に設定!backgroundプロパティで一括指定してみよう -前編-

こんにちは、ユアサです。 今回は、最近やっと使い慣れてきたbackgroundプロパティ(以下backgorundと表記します)について、どのような値を指定できるのかまとめたいと思います。というのも、backgroundは色、画像、位置などを一括指定※できるプロパティな…

その使い方合ってる?z-indexで指定した筈の重なり方にならない時に気をつけたいこと

こんにちは、ユアサです。 以前業務で要素同士の重なり方について、自分ではうまく思ったようにコーディングできなかったことがありました。z-indexプロパティを使ったはいいものの、なぜかそのスタイルが反映されず一体何が原因なのやら・・・・。 個人的に…

transformを使って色んなホバーアクションを作ってみた

こんにちは、ユアサです。 CSSでホバーアクションを組む際、やりたい動作は決まっているのにうまく書けない、他のホームページとちょっと差をつけたいけど組み方が・・・と悩んでいた経験は一度はあるかと思います。僕も最近担当した案件でホバーアクション…

【フロントエンド入門者向け】コーディングでつまづいてしまうCSSの基本・解決例まとめ

新年明けましておめでとうございます!ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 今回は今までを振り返って、コーディングで自分も最初の頃はよくつまづいていたCSSの基本や解決策の例などを改めて書きまとめてみようと…

CSSでスタイル記述・調整のためのルールを定義!@から始まる「アットルール」

こんにちは、ユアサです。 アームズに入社してからCSSでのスタイル調整はだいぶ慣れてきました。ですが、以前CSSファイルを触っているときに、冒頭に「@」が付いている見慣れないものを発見し、見つけた当時は何のための記述なのか全然理解していませんでし…

JSで動作する簡単なカルーセルを作ってみる

こんにちは、ユアサです。 前回はJSのclassListプロパティについて紹介し、クリックしてONとOFFの表示を切り替えるボタンを作りました。予告していた通り、今回はこのプロパティを使って簡単なカルーセルのようなものを作成します。 前回の記事はこちらです…

イベントに応じてclass属性を切り替え!JavaScriptのclassListを使ってみる

こんにちは、ユアサです。 前回まではCSSの内容の記事が多かったですが、社内での勉強会でもJSの内容に入ってきたので、今回は勉強会でも習ったclassListについて復習の意味も込めて書きまとめていきます。 classListについて classListは、特定の要素のクラ…

スクロール時に特定位置でピタッと停止!scroll-snapプロパティについてまとめてみた

こんにちは、ユアサです。 The State of CSS 2020で比較的認知度が低かったCSSのscroll-snapプロパティについて気になったので、今回はこの内容について書きまとめていこうと思います。 scroll-snapって? scroll-snapプロパティは、画面をスクロールさせた…

画像を引き伸ばさずに表示!object-fitプロパティについてまとめてみた

こんにちは、ユアサです。 少し前の話になりますが、The State of CSS 2020でCSSプロパティがいくつか話題になっていました。 その中でも、今回はobject-fitプロパティについて紹介していこうと思います。 object-fitプロパティの認知度について The State o…