こんにちはナカムラです。 今回はYoutubeの動画を使って、背景に動画を敷いてみたいと思います。 実装する機能としては以下の2点になります。 自動再生 ループ レスポンシブを想定して、スマホにも対応するように作ります。 その場合は、YouTubeの「埋め込み…

こんにちは、ナカムラです。 今回は横スクロールが発生する状態で、pisition:fixed（もしくはabsolute）で位置を固定した要素を追従させるJavaScriptのご紹介をします。 レスポンシブ対応のサイトとはいえ、スマホのサイズから一般的なPCのサイズまで全ての…

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

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

こんにちは、ナカムラです。 今回は、setTimeOutのクリアの仕方を紹介しようと思います。 setTimeOutは一定の時間が経ったら処理を開始するメソッドです。 ロード後に少し時間を置いてからアニメーションを実行するなどの使い方ができます。 さて、設定した…

こんにちは、コバヤシです。 今回は簡単にブロックエディタを導入できるEditor.jsについて書きたいと思います。 ブロックエディタとは WordpressのGutenbergで使われている、コンテンツをブロック単位で管理して記事を作成していくタイプのエディタです。 Gu…

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

こんにちは、中村です。 コーディングをしていて、どうも画像がぼけるなぁ、ということはないでしょうか。 単純に画像サイズが足らないのが原因なら書き出しサイズを直せば良いです。 問題は、適正サイズに書き出しているのにぼけてしまう時です。 スマホや…

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

こんにちは、ナカムラです。 前回の記事で、少しだけスクロールの操作を行いました。 今回は、スクロールに関するプロパティとメソッドについて、より詳しく整理していきたいと思います。 tech.arms-soft.co.jp DEMO プロパティやメソッドを実際に動作させた…

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

こんにちは、ナカムラです。 新人研修用に要素のサイズ取得について書きたいと思います。 今回は要素の高さを取得し、その要素の半分の高さにスクロールするボタンを作りました。 50%の位置がわかりやすいように、CSSで背景の色を変えています。 アンカーリ…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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