フロントエンド

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

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

JavaScriptでbodyのスクロールを禁止するハンバーガーメニューを作る

こんにちは、ナカムラです。 だいぶ前に階層の深いハンバーガーメニューの作り方をご紹介しました。 tech.arms-soft.co.jp こちらの記事では開閉の処理について書きました。 今回は、メニューを開いた時のスクロールの制御について書きたいと思います。 今回…

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

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

SVGの画像の切り抜きとsnap.svgを使ったアニメーション

こんにちは、中村です。 SVGについて、あまり勉強してこなかったので、 今回は気になっていた写真の切り抜きとアニメーションを試したいと思います。 DEMO 作ったのはこちら。 See the Pen SVGの画像の切り抜きとsnap.svgを使ったアニメーション/a> by Nakam…

IEには対応していないけれど、ゆくゆくは使っていきたいCSSプロパティ

こんにちは、中村です。 みなさん、IEはまだ標準対応をしているでしょうか。 オプション対応にされているところも増えてきたと思いますが、なかなか切り離せないのが現状です。 使いたいのに、IEのことを考えるとまだ使えない。でも、使いたい! そんなCSSプ…

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

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

YouTube IFrame Player APIの使い方 2021

こんにちは、ナカムラです。 今回はYouTubeのIFrame Player APIの使い方のご紹介です。 ご紹介といっても基本機能の使い方なので、リファレンスを読めばわかる程度のものです。 普段あまり使っていないので、いざ使うときにリファレンスを読むのがしんどくて…

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

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

Intersection Observer APIを使って、ページの最下部までスクロールしたかを判定する

こんにちは、ナカムラです。 前回はスクロール量を計測して、ページの最下部までスクロールしたかを判定する処理をご紹介しました。今回は方法を変えて、Intersection Observer APIを使った場合の処理について書いていきたいと思います。 前回の記事はこちら…

これから流行るかも?CSSの新しいデザイン手法「ニューモーフィズム」でボタンを作成してみる

こんにちは、ユアサです。 いよいよ梅雨入りしてジメジメした日が続きますね。 さて今回は、昨年にCSSのトレンドになるのではと話題になっていた「ニューモーフィズム」について紹介していきます。 ニューモーフィズムについて ニューモーフィズムは、「New…

脱jQuery!ページの最下部までスクロールしたかを判定するjavaScript

こんにちは、ナカムラです。 今回はネイティブのjavaScriptでページ最下部に到達したかどうかを判定する処理を書いていこうと思います。 この処理はボタンを固定表示したページや、記事の終わりにメッセージを表示したいなど、ユーザーの操作に合わせて表示…

すぐに使える!フレックスボックスを使って作れるパーツを紹介

こんにちは、ユアサです。 アームズでフロントエンドの見習いとして活動し始めて1ヶ月ほどが経ちます。まだまだ勉強することは多いですが、一つひとつを焦らず段階を踏んで学んでいけたらと思っています。 今回は、自分が勉強していく中で知ったCSSのフレッ…

Vue.jsでドラッグ&ドロップのソートを実装する

こんにちは。コバヤシです。 今回はVue.jsでドラッグ&ドロップでソートする方法について書きたいと思います。 Vue.Draggableをインストールする Vueでドラッグ&ドロップをするならこれっていうくらい定番のライブラリです。 github.com まずこれをインスト…

レスポンシブページでのテキストの改行はどうする?

こんにちは、ナカムラです。 レスポンシブなページではユーザーの環境によって表示される幅が様々です。 スマホのような幅の狭い画面には縦並びに、PCのような幅が広い画面では横並びにするなど、ユーザーに最適なレイアウトに調整していきます。 レイアウト…

SNSシェアボタンをオリジナルスタイルで設置する方法2021

こんにちは、ナカムラです。 今回はSNSシェアボタンの設置方法について書こうと思います。 (この記事は2021年1月27日時点での情報になります) よく設置するTwitter、Facebook、LINEについてです。 オリジナルのスタイルで設置する方法と、 シェアの際に本…

vue.jsでHTMLの流し込みを簡単に!コンポーネント化でパターン違いも簡単!

こんにちは、ナカムラです。 スタティックのHTMLページを作成している中で、商品情報など、 同じレイアウトを繰り返すコンテンツがあります。 数が少なければ手作業で書き込めば良いですが、10件、20件ともなるとなかなか大変な作業になります。 そこで今回…

JavaScriptで階層の深いハンバーガーメニューを作る

こんにちは、ナカムラです。 今回はスマホサイトではお馴染みのハンバーガーメニューの作り方をご紹介します。 タイトルに「階層の深い」と書きました。 ページ数の多いサイトでは、第2階層、第3階層とメニューが深くなっていきます。 階層が深くなるとメニ…

簡単!Vue.jsでCKEditorを使う方法

こんにちは、コバヤシです。 今回はVue.jsでCKEditorを使う方法を書いていきたいと思います。 CKEditorとは テキストエリアをWYSIWYG形式のエディタに変更するライブラリになります。 ckeditor.com CKEditor4とCKEditor5がありますが、今回はCKEditor4を導入…

脱jQuery!文字量によって表示を制限するJavaScript

こんにちは、ナカムラです。 今回は文字数などのコンテンツ量によって表示を制限するJavaScriptを解説していきます。 jQueryを使わないネイティブでの書き方になります。 ※IEにも対応したい場合は注意点があります。詳しくは解説の中で記載しています。 作り…

脱jQuery!「Shuffle.js」で絞り込み・ソートを実装する

こんにちは、ナカムラです。 今回はjavaScriptのプラグイン「Shuffle.js」を使って絞り込みとソートの実装をしてみたいと思います。jQueryは使用しません。 オプションがいろいろありすぎて読み解くのがなかなか辛かったので 一番シンプルな絞り込みとソート…

サイト品質に欠かせない!ブラウザチェック

こんにちは、ハヤマです。 今回は、ブラウザチェックについて書いていきたいと思います。 はじめに ブラウザチェックとは、コーディングしたページがブラウザ上で正常に表示されているかを確認する作業のことを指します。 より良いサイトを作るには、サイト…

Edgeのスクロールのがたつきが解消されました!

こんにちは、中村です。 少し前の話になりますが、Edgeがchromiumベースに更新されましたね。 以前のEdgeで固定表示した要素がスクロールした時にがたつく現象がありました。 javascriptを使ってブラウザのスムーススクロール機能をオフにし、 スクロールの…

動的サイトで意外と便利!擬似クラス「:only-child」

こんにちは、中村です。 今回はCSSの擬似クラス「:only-child」についてご紹介しようと思います。 擬似クラスとは? セレクタ要素の特定の状態に対してスタイルを当てるためのクラスです。 ユーザーの操作に反応したり、要素の状態によって見た目を変えるこ…

vue.jsでレコメンドを作ってみた

こんにちは、中村です。 今日はvue.jsを使って簡単なレコメンドを行うコンテンツを作ってみました。 概要 質問の答えに対して、おすすめしたい情報を表示します。 今回はシンプルに質問は2つ用意しました。 2つの答えの組み合わせにより、表示結果が変わりま…

ネイティブJavaScriptでタブを作ろう

こんにちは、中村です。 今回はjQueryなどを使わないネイティブJavaScriptでのタブの作り方をご紹介します。 デモ See the Pen ネイティブJavaScriptでタブを作ろう by Nakamura (@takayo-nakamura) on CodePen. 動作の解説 (1)タブメニューをクリックされ…

Laravel Mixでフロントエンド開発環境を手軽に構築 2020年版 作業環境を晒します〜フロントエンド開発環境編〜

前回の記事でビルドツール遍歴をご紹介しましたが、今回は現在使用しているLaravel Mixの設定についてご紹介します。 tech.arms-soft.co.jp Webpackを使用するとなると設定が複雑で行数も結構な数になってしまいますが、Laravel Mixを使うことで少ない行数で…

svgoでのSVG圧縮時にviewBoxが消えてしまう問題を検証してみた

こんにちは、中村です。 SVGの圧縮時にviewBoxが消えてしまうことがあったので検証してみました。 起こったこと アームズの作業環境については別の記事で紹介されています。 この仕様の中で、SVGの圧縮でつまずいたところがありました。 tech.arms-soft.co.j…

様々なビルドツールを渡り歩いた末にLaravel Mixを選択した理由 2020年版 作業環境を晒します〜フロントエンド開発環境編〜

以前の記事で、「次回はさらにフロントエンド開発に寄せて、モジュールバンドラやタスクランナーについてご紹介できたら」と予告していましたが脱線してしまいましたので、今回はビルドツールにスポットを当てたいと思います。 tech.arms-soft.co.jp ビルド…

アンカーリンクのズレをscroll-snapを使って直せるか試してみた

こんにちは、中村です。 以前コリスさんの記事で紹介されていたscroll-snapのscroll-paddingを使った「ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック」が気になっていたので、今どうなっているのか確認してみました。 記事の時…

canvasを使って行ったり来たりするアニメーションを作ってみた

遅ればせながらcanvasを勉強し始めました。 「ちょっと動きが欲しいんだけど」にサクッと応えたい。 そもそもcanvasってなんなんだ?というところからのスタートです。 単純なアニメーションならtransitionやanimationなど、CSSだけである程度は動かせますが…