こんにちは、ユアサです。 先日初めてmicroCMSを触り、APIで内容を取得してお知らせ記事を作成しました。今回の記事ではその自習の内容の応用として、管理画面でお知らせ記事を作成した後、その内容を一覧表示するページを作成していこうと思います。 今回は…

こんにちは、ナカムラです。 今回はCSSだけで行う子要素の件数判定の方法について書きたいと思います。 グリッドを使った一覧などは子要素の件数が変わっても自動的に折り返して行が増えます。 通常はこのままで十分ですが「件数が少ない時は列数を変更した…

こんにちは、ユアサです。 今回は自分が業務内や自習する際によく使っているフロントエンドの便利なツール・サイトなどについて紹介しようかと思います。 （そういえばこういったものは書いたことがなかったなぁ・・・と思い書くに至りました） 「そんなの知…

こんにちは、ナカムラです。 フロントエンドの仕事の中でパフォーマンスの改善というのは常に求められるものになります。 （PageSpeed Insightsによる計測を中心に確認しています） 読み込むファイルの容量を小さくする、というのも大切なことですが、コーデ…

こんにちは、ユアサです。 今回は、Vue.jsよりも軽量で簡単に実装できるAlpine.jsを使ってみます。 Alpine.jsについて Vue.jsに比べかなり軽量なJSフレームワークです。HTMLタグに直接記述して動的な動きを付与できる、誰でも簡単に触れるフレームワークとな…

こんにちは、ナカムラです。 今回は方眼紙風の背景を作ります。 ただ格子状に線を引くだけなら難しくないですが、「要素の幅や高さが変わっても背景がぶつ切りにならないように作りたい」となると少々工夫が必要になります。 そこで、CSSのmod()を使ってみた…

こんにちは、ユアサです。 少し前のChromeのバージョン更新でルビ関連のCSSプロパティが対応開始となりました。すぐに使う機会はないかと思いますが、地味〜に便利そうなものがあるので、これらの使用感を確かめる意味も含めて今まで出てきたルビ関連の主なC…

こんにちは、ナカムラです。 今日はposition:stickyを使った時のちょっとしたお助けプロパティをご紹介します。 課題点 ECサイトやポータルサイトの検索結果ページなどでよく使われるレイアウトに、検索結果一覧の横に絞り込み検索が表示されているものがあ…

こんにちは、ユアサです。 今回は画像の取得優先度を調整できるプロパティfetchpriorityについてまとめていきます。 （linkやscriptなどにも付与できますが、今回は画像における効果についてまとめます） プロパティについて fetchpriority属性はHTMLのimg要…

こんにちは、ナカムラです。 今回はCSSの色の指定について書きたいと思います。 CSSのcolor-mix()という関数を使ってみようと思います。 color-mix()とは 簡単にいうと2色を混合させる関数です。 MDNからの引用 color-mix() 関数記法は 2 つの 値を採り、指…

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

こんにちは、ナカムラです。 今回はwebフォントの文字詰めについてです。 デザイナーから基本的に文字詰めはしたいという要望もあったので一度整理しておこうかと思います。 普段Googleフォントから提供されているNoto Sans JPを使用することが多いので文字…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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