Google Fonts を使ってみて〜エンジニア初学者の備忘録〜

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。今回はHTML,CSSでウェブサイトを模倣してみた時、Google Fontsを使用時に感じた内容をまとめました。

## Google Fontsとは？
Googleが提供する無料のウェブフォントライブラリです。無料で利用可能で多様なフォントスタイルを簡単に導入できます。

## Font Familyとは？
CSSのプロパティで、テキストにしようするフォントを指定するために使います。複数のフォント名を指定することができ、ブラウザが最初のフォントが表示できない場合、次のフォントを順に試します。

### 使用例
“`html
body{
font-family:’Noto Sans JP’, ‘Arial’, sans-serif;
}
“`
この例では、もしNoto Sans JPが利用できなければ、Arialが適用され、それもなければブラウザに内蔵さ

「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません

最近、「アクセシビリティのために、HTMLの `disabled` 属性ではなく、`aria-disabled` 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？

## disabled属性を使っていても、スクリーンリーダーで要素を知覚できる

そのような主張をしている人、それを受け止めた人の中には「 `disabled` 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。

たしかに、`disabled`属性を付加している `button` 要素や `input` 要素、 `select` 要素、 `textarea` 要素は、Tabキーによるフォーカスはできなくなります。

しかし、スクリーンリーダーはTabキーによるフォーカスとは独立した、スクリーンリーダー自身のカーソルを持ちます。スクリーンリーダーを起動しているときにTabキーを押すと、通常時と同じようにフォーカスが移動し、スクリーンリーダーのカーソルも追従して移動します。それとは別に、スクリーンリーダーはスクリー

第九回: Webサイトを作ってみよう その1

こんにちは、[株式会社カスタマトリックス](https://www.customatrix.co.jp/)の寺尾です。

こちらは **新卒社員と学ぶWEBプログラミング** 企画になります。
可能な限り毎日更新していくのでご期待ください。

本日は第九回、ついに「**Webサイトを作ってみよう**」です。

前回はこちら
https://qiita.com/r-terao/items/f3c8f81897cdace152c6

第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6

# 準備
### コード管理
複数人で作業を行う際、現場ではGitHubなどのバージョン管理ツールを使う事が多いですが、今回はその辺の学習は後回しにしたいため、VSCodeの**LiveShare**という拡張機能を使いたいと思います。

これは誰かのPCにあるファイルを複数人で同時にシェア開発できる便利な拡張機能です。

1. VSCodeの拡張機能からインストールする
1. ホストになる人が開発先フォルダをVSCodeで開く
1. ホ

【Publisher】KENDO Template can be prepared with Sharperlight expression

# Introduction #
This is a simple KENDO Grid example with using its template attribute to define the columns.

I wanted to mention we can define the template for the columns with Sharperlight expression and pass it to the KENDO Grid definition as a part of the datasource.

When KENDO Grid is defined, we have to configure the columns and we give special format such as displaying an icon etc to them sometimes.
In that case, we basically use a template and define it in the code directly like this .

はじめて React で作った画像ジェネレーター (超バズった) の裏側の話

## React でネタ画像ジェネレーターを作った話

Twitter でこのツイートを見たこと、ありませんか？

https://x.com/aioilight/status/1828519220688363905

今回、僕が作ったネタ画像ジェネレーターの宣伝ツイートなのですが、たまたまたくさんの人に見てもらうことができて、その結果 **10 万回以上このジェネレーターで画像を作られてしまいました** (これはボタンに GA4 イベントを設置して計測した値なので、もっと多いかもしれません)。この Qiita の記事では、技術的な面から「**どのように作ったのか**」「**どんな課題があったのか**」「**どんな工夫をしたのか**」について書きます。

## どのように作ったのか

使用している技術は、以下の通りです。

– Astro (ウェブサイトのフレームワーク)
– React (ジェネレーター部分)
– Canvas API (画像生成部分)

### Astro

Astro である理由は全くないのですが (笑) ウェブサイト用フレームワークとしてトレンドなものです。静的

script

“`

動的タイトル設定のテスト

URLパラメータを確認中…