Frencel Tech Blog

CSSのカスタムプロパティ（CSS変数）を活用しよう！

アクセシビリティ向上のためにいつものコーディングにプラスワンしよう

今回は、私が最近意識しているアクセシビリティ対応のコーディング方法について解説します。

Astroでsrc内のJavaScriptを使うように変更してみた

以前作成したAstroプロジェクトを改修し、src内のjsファイルを参照するように変更してみました。

【Astro × Mdx】mdxで構成されたページに独自のCSS、JavaScriptを適用する

mdxで構成されたページに対してそのページ固有のCSS、JavaScriptを適用する方法を考察しました。

【JavaScript】進捗率の基本計算について

今回はJavaScriptで進捗率を計算する方法を解説していきます。

FlexboxとGridを使い分けよう！基礎編

横並びレイアウトの実装におけるFlexboxとGridの選定基準とその解説を行います。

アクセシビリティにおける強調要素（strong・em）の使い分け

アクセシビリティにおける強調要素（strong・em）の使い分けを解説します。

ぽめをとわたし

毎日Xで描いている≪ぽめを≫というキャラクターについてご紹介させていただきます！(実は語りたかった)

【スマホ対応】ドラムロール風の選択肢を作る

Javascriptを使用してドラムロール風の選択肢を作成してみます。

SVGタグで円グラフを描画する

SVGタグを利用してcssで色変更やアニメーションが可能な円グラフを作成する方法を解説します

スライドプラグイン「Splide」「Swiper」のアクセシビリティ対応の検証

スライドプラグイン「Splide」「Swiper」のアクセシビリティ対応の検証を解説します。

デザイン成果物に説明書を付けるべき理由

デザイン成果物には説明書を付けると、クライアントにも自分にも多くのメリットがあります。私もデザイナーとして、最近では成果物を提出する際に必ず簡単な説明書を付けるようにしています。その経験から、説明書を付けることで得られる効果についてお話ししたいと思います。

【2024年9-10月】Xに投稿したキャラクターデザインまとめ

2024年9月から10月Xに投稿したキャラクターデザインをまとめてご紹介します。

【Pagefind】静的HTMLで検索機能を追加する

静的検索ライブラリである「Pagefind」を使って検索機能を実装してみました。

古典に学ぶWebディレクション

ふと、高校時代に知った言葉が頭をよぎり、それについて書きたい衝動に駆られました。

スマートフォンのスクリーンリーダーについて

スマートフォンのスクリーンリーダーについて解説します。

【Photoshop】スマートオブジェクトで仕上げをおこなおう

スマートオブジェクトを使用して顔のパーツバランス補正や全体のトーン補正をおこない、更に魅力的な画像へ仕上げる方法をご紹介します。

Astroで静的HTML納品データを作る

Astroからクライアントに納品する想定の静的HTMLセットをビルドする環境をご紹介します。

【Sass(SCSS)】PC版とSP版のCSSファイルを分ける方法

SASSでPC版とSP版のCSSファイルを分ける方法を解説します。

おすすめのスクリーンリーダー「NVDA」について

おすすめのスクリーンリーダー「NVDA」について解説します。

【Photoshop】人物レタッチの手順と便利なツールをご紹介

人物レタッチの最初から完成までの作業手順を、私がよく使用するツールとともにご紹介します。

Googleスプレッドシートの2024/7新機能のプルダウンの複数選択

Googleスプレッドシートの新機能プルダウン複数選択機能。気を付けることについて。

【2024年8月】Xに投稿したキャラクターデザインまとめ

2024年8月Xに投稿したキャラクターデザインをまとめてご紹介します。

新人レタッチャー必見！「肌レタッチ」の壁を乗り越えよう

新人レタッチャーにとって最初の大きな壁となる「肌レタッチ」について、私がこれまでに学んできたコツをご紹介します

Astroから記事一覧のJSONを出力する Astroを使ってオウンドメディアを作る-5

Astroから全記事のJSONデータを作成し、JSONから記事一覧を出力する方法を解説します。

build時にpublicフォルダ内の画像も軽量化する Astroを使ってオウンドメディアを作る-4

Astroのビルドタスクにpublicフォルダ内の画像を軽量化するスクリプトを追加しましたので解説します。

ウェブアクセシビリティとは

ウェブアクセシビリティについて概要を解説します。

mdxファイルから記事ページを自動で出力する Astroを使ってオウンドメディアを作る-3

第3回目では、Astroのコンテンツコレクションを使用して.mdxファイルから動的に記事ページを作成する方法を解説します。

【WordPress】追加CSSクラスをボタン化して使いやすくしてみた

WordPressのブロックエディタにワンクリックで任意のクラスを追加する方法を解説します。

Googleスプレッドシートの2024/5新機能のテーブルを触ってみた

Googleスプレッドシートの新機能テーブル。機能と操作感について。

Astroを使ってオウンドメディアを作る-2

第2回目では、パンくずの出力と.mdxファイルの設定について解説します。

Astroを使ってオウンドメディアを作る-1

フレームワーク「Astro」を使って社外公開用のオウンドメディアを作りました。設定など解説していきます。