フロントエンド

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だけである程度は動かせますが…

ちょっとの意識でふぉんとに違う!〜 行送り・トラッキング数値の計算編 〜

先日の台風、凄まじかったですね。 被害に遭われた皆様に、謹んで心よりお見舞い申し上げます。 『備え』について、改めて考えさせられたハヤマです、こんにちは。 今回はデザインデータで設定されている「行送り」「トラッキング」をCSSで指定する際の計算…

HTML・CSSを組む時の工夫〜動的なページ編〜

こんにちは、ナカムラです。 前回はレスポンシブページを作る時の工夫していることをご紹介しました。 今回は動的なページを組む時の工夫についてご紹介します。 動的なページとは、プログラムによってテキストなどの要素が出力されるページです。 このブロ…

gitでも効率化。手間のかかる処理はhuskyとlint-stagedに任せよう! 2019年版 作業環境を晒します〜バージョン管理編〜

今回は、昨今のウェブ制作には欠かせないバージョン管理について、さらにそこで導入できる効率化についてご紹介したいと思います。 弊社ではバージョン管理にはGitHubを使用しています。プルリクエストやwiki、Protected Branches を使用しているため、Team…

ちょっとの意識でふぉんとに違う!〜 段落間余白のデザイン編 〜

突然ですが、先週スマホアプリ「DQウォーク」がリリースされましたね。 通勤時や帰宅後にゆるく遊んでいますが、位置情報の揺れのおかげ(?)で、ほぼウォークをせずにモンスターを150匹ほどやっつけていました。そんな自分に引き気味のハヤマです、こんに…

HTML・CSSを組む時の工夫 〜レスポンシブ編〜

こんにちは、ナカムラです。 今回はHTML・CSSを組む際に工夫しているところを紹介しようと思います。 コンテンツ幅を一定にするならデザインと同じようにできていれば問題ありません。 レスポンシブの場合はウィンドウサイズの異なるデバイスに対応するため…

2019年版 作業環境を晒します〜エディタ編〜

みなさまこんにちは。連休は子供とベッタリ過ごしたコジマです。 さて。今回からはそれぞれのツールを詳しく紹介していくということで、まずはウェブ制作に欠かせないツール、エディタを紹介していきたいと思います。 まずは前提としてエディタに求めること…

ちょっとの意識でふぉんとに違う!〜 文字・段落のスタイル編 〜

ついに梅雨が明けました! とともに、いよいよ本格的な夏のはじまりですね。 先日、会社からほど近くの薬局でガリガリ君が1本48円で販売していてひっそりテンションが上がったハヤマです、こんにちは。 今回は、デザインデータを参照してテキストを実装する…

vue.jsで簡単なゲームを作ってみた Part2

こんにちは、ナカムラです。 前回の記事でVue.jsを使った簡単なゲームを作ってみました。 今回はそのゲームに一つ機能を付け加えたいと思います。 ※ゲームの概要は前回の記事をご覧ください。 tech.arms-soft.co.jp 追加する機能 【 スコアを保存して表示す…

Vue.jsで簡単なゲームを作ってみた

こんにちは、ナカムラです。 今日はVue.jsを使って簡単なゲームを作ってみたのでご紹介します。 ゲームの概要 作ったのは運試しゲーム。 1・2・3と3つあるボタンのどれかをクリックするとランダムで1〜3の数字が出ます。 押したボタンの数字とランダム…

フロントエンドの視点でチェック!そのデータは大丈夫?

毎週、アームズスタッフが様々な視点でお届けしている「Engineers' Blog」。 今回が初投稿となります、ハヤマです。どうぞ宜しくお願いいたします。 私はもともと紙媒体を中心としたグラフィックデザイナーでしたが、様々なお仕事に携わる中でWeb案件の需要…

まずは3つ覚えよう!CSSのGrid Layout

今年からアームズに入りました。ナカムラです。 フロントエンドを担当しています、よろしくお願いします。 今回はCSSのお話をしようと思います。 レイアウトの組み方はテーブルレイアウトから始まり、float、inline-blockなど様々なテクニックが使われてきま…

カレンダーの実装ならこれ!jQueryプラグイン「FullCalendar」を使ってみた!!

こんにちは!コバヤシです。 仕事でカレンダーを実装するにあたり「FullCalendar」を使う機会があったのでメモ的にまとめてみました。 まずはダウンロード https://fullcalendar.io/download/ に行ってzipをダウンロードして解凍します。 カレンダーを表示し…