フロントエンド

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

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

文字の下線をスタイル調整するCSSプロパティの注意点

こんにちは、中村です。 前回書いた文字の下線に関するCSSプロパティについて、そのままでは困ったところがあったので補足として記事にしました。 と言っても解決方法はプロパティを一つ追加するだけです。 前回の記事はこちら tech.arms-soft.co.jp 問題点…

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

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

文字の下線をスタイル調整するCSSプロパティ

こんにちは、ナカムラです。 最近関わった案件で文字に下線が引かれたデザインが多かったので、今回は下線のスタイルを調整するときに使うCSSプロパティをご紹介したいと思います。 DEMO See the Pen CSSで文字の下線をスタイル調整する by Nakamura (@takay…

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

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

CSSだけでグラフ上に文字を表示する円グラフを作る

こんにちは、ナカムラです。 今回はCSSだけで円グラフを作ってみたいと思います。 文字を配置するにあたり、CSSの三角関数cos()・sin()を使用します。 グラフを作るというよりまだ使ったことがなかったので、三角関数を使うというのが今回のテーマになります…

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

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

SEO対策にも!画像ファイルフォーマット「WebP(ウェッピー)」

こんにちは、ハヤマです。 今回は、比較的新しい画像ファイルのフォーマット「WebP(ウェッピー)」について紹介したいと思います。 WebP(ウェッピー)とは 2010年に米Googleが開発した画像ファイルのフォーマットのことで、ファイルの拡張子は「.webp」で…

GSAPのtimelineアニメーションを逆再生する

こんにちは、ナカムラです。 以前の記事でtimelineをスキップするメソッドをご紹介しました。 tech.arms-soft.co.jp 今回は逆再生をしてみたいと思います。 DEMO See the Pen GSAPのtimelineアニメーションを逆再生する by Nakamura (@takayo-nakamura) on C…

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

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

アクセシビリティカンファレンス福岡に参加しました

こんにちは、ナカムラです。 先日11月11日に開催された「アクセシビリティカンファレンス福岡」に参加しました。 Youtube配信を見ていただけですが参加と言う。見るだけでも大事です。 アクセシビリティの向上は障害者のためだけではなく、みんなが使いやす…

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

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

チェックボックスとラジオボタンのタグ自体を装飾するCSS

こんにちは、ナカムラです。 先日、inputタグのチェックボックスとラジオボタン自体をCSSで装飾できないか? という質問をいただいたのでこの記事で紹介したいと思います。 フォームでよく使われるチェックボックスやラジオボタンの装飾方法は、labelやspan…

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

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

CSSだけでヘッダー固定時のスクロールのずれを解消する方法【scroll-padding-top】

こんにちは、ナカムラです。 スクロールしてもヘッダーが追従するようにposition: fixed;などで固定配置することがよくあります。 その際、ページ内リンクで該当箇所へスクロールすると、そのままではヘッダーが重なってしまいます。 この問題について、だい…

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

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

ビューポート単位で100vwのスクロールバーを含めてしまう問題を解決できるのか?

こんにちは、ナカムラです。 今回はCSSでよく使われるビューポート単位について、検証したいことがあったので書きたいと思います。 100vhを使った時にアドレスバーの分、意図した高さにならない問題がiOS safariであります。 その対応に使えそうなビューポー…

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

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

ページ内スクロールのナビゲーションにカレントを付与するJavaScript(GSAP)

こんにちは、ナカムラです。 今回はページ内リンクのナビゲーションに、カレントのスタイルをつける方法のご紹介をします。 GSAPのscrollTriggerを使用します。 GSAPのscrollTriggerについてはこちら https://greensock.com/docs/v3/Plugins/ScrollTrigger D…

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

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

角度が変わらない斜めの背景の作り方(CSS)

こんにちは、ナカムラです。 今回はCSSで角度が変わらない斜めの背景の作り方をご紹介します。 ウィンドウ幅いっぱいに、なおかつ斜めになっているデザインはよく使われます。 やり方はいろいろあると思いますが、今回はclip-pathを使ってみたいと思います。…

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

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

HTMLタグ<details>でアコーディオンを作る(簡易版)

こんにちは、ナカムラです。 今回はdetailsについて試してみたものをご紹介したいと思います。 よくある質問などでよくアコーディオンを使うと思います。 たくさんある中でユーザーが求めている物・そうでないものがあるので、必要な時だけ開くようにするの…

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

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

iPhone Safariで入力エラーが起きた時に該当箇所へスクロールする

こんにちは、ナカムラです。 今回はフォームの機能で困ったことがあったので、備忘録として書きたいと思います。 HTML5のフォームバリデーションでは必須項目が未入力の場合や、入力形式が異なる場合にエラーメッセージを表示しユーザーへ伝える機能が備わっ…

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

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

GSAPのタイムラインを必要なタイミングで動かす

こんにちは、ナカムラです。 GSAPのtimelineアニメーションをスキップしたり、リプレイする処理は前回行いました。 tech.arms-soft.co.jp scrollTriggerによって、特定の要素が表示されたタイミングでアニメーションする処理も書きましたね。 tech.arms-soft…

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

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

CSSで作る片側だけ可変する背景

こんにちは、中村です。 今回はCSSの話です。 フロントエンドの作業はデザインを下にマークアップとスタイルを作っていくところから始まります。 そこで、最近よく作るレイアウトの組み方をご紹介したいと思います。 片側だけ可変する背景 記事のタイトルに…

まるでWordpress? Editor.jsを試してみる インラインツール作成編

こんにちは コバヤシです。 今回は以前ブログで記事にしたEditor.jsでインラインツールを作成してみました。 tech.arms-soft.co.jp インラインツールとは インラインツールとは、テキストのブロックで文字を選択した時に出るツールのことです。 標準で太字に…