今さら聞けないHTML　

[React] コンポーネントを用いたレンダリング

# 目次
– [使用するプロジェクトのフォルダ構成](#使用するプロジェクトのフォルダ構成)
– [main.jsxのソースコード](#main.jsxのソースコード)
– [main.jsxのソースコードの解説](#main.jsxのソースコードの解説)
– [index.htmlのソースコード](#index.htmlのソースコード)

# 使用するプロジェクトのフォルダ構成
~~~:fold_structure
├── node_modules/
├── public/
│ └── vite.svg
├── src/
│ ├── App.jsx
│ ├── App.css
│ ├── index.css
│ ├── lectures.js
│ ├── main.jsx
│ └── (other components)
├── index.html
├── package.json
├── README.md
└── vite.config.js
~~~

# index.htmlのソースコード

~~~html:index.html

Htmlで雛形を生成した時のlangの標準をjaにする

# 雛形とは
htmlで`html:5` か `!`と入力してEnterまたはTabを押すと、htmlの基礎構文がでてきます。

これの、``の部分が標準では`en`になっているため、いちいち`ja`に変更するのがめんどくさい…

ということで、これの設定を変えようっていう内容です！

# 設定方法
VSCodeを開いた状態で、 `command + ,`(windowsの場合は`ctrl + ,`)ショートカットを実行します。
検索欄に「variables」と入力し、検索すると以下のようなものが出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/371

【JavaScriptとは？】基礎まとめ

こんにちは、Reikaです。
私は現在、アプレンティスの5期生として日々勉強に励んでいます。

https://apprentice.jp/lp

アプレンティスの課題として**HTML/CSS/JavaScriptの学習**に取り組みました。
今回はこの経験を通じて学んだことについて、記述していきます。
※今回の記事ではHTML/CSSについては省略しています。

# 簡単に自己紹介
* 2023年12月〜独学でプログラミングの勉強を始める
* 2024年4月〜内定直結型エンジニア学習プログラム「アプレンティス」に参加
* 地方在住26歳社会人4年目。マインドミニマリスト。植物、テレビドラマ、コーヒーが好きです
* 趣味でYouTube投稿をしています。現職やなぜエンジニアを目指すようになったのか？は以下の動画をぜひご覧ください！^^

# 目次
1.JavaScriptとは？
2.関数について
3.DOM操作とは？

今回私は[JavaScript Primer
迷わないための入門書

【PHPフレームワークFlow】Fluidを用いてHTMLのテンプレートを作成する

# 初めに
Webアプリケーションを作成する際、ヘッダーやフッターなどは共通的な部品にしたいですよね。今回は、FlowのテンプレートエンジンであるFluidを用いた、HTMLのテンプレート作成方法を解説します。

# テンプレート作成してみる

プロジェクト構成は以下です。

“`
Project
└ Packages/
└ Application/
├ Neos.Welcome/
| └ Classes/
| └ Controller/
| └ LayoutTestController.php（★）
|
└ Resources/
├ Private/
| ├ Layouts/
| | └ Default.html
| └ Templates/

imgタグのサイズ指定によるレイアウトシフト防止とレスポンシブデザイン

Webページを作成する際、画像はユーザーエクスペリエンスに大きな影響を与えます。

特に、画像が読み込まれる際にページのレイアウトが急に変わる「レイアウトシフト」はユーザーにとってストレスフルな体験となります。これを防ぐためには、画像のサイズを事前に指定して表示領域を確保することが重要です。

本記事では、特にレスポンシブデザインにおける対応方法について詳しく解説します。

# 基本的な話

まず、HTMLの `` タグに `width` と `height` 属性を指定することで、ブラウザが画像の表示領域を事前に確保する方法について説明します。

## 例

“`html

“`

上記のコードでは、幅600ピクセル、高さ400ピクセルの領域が画像の読み込み前に確保されます。
これにより、画像が読み込まれる際にレイアウトシフトが発生しにくくなります。

# レスポンシブデザインでの対応

レスポンシブデザインでは、異なるデバイスや画面サ

Instagramの埋め込みを表示する方法

PCから埋め込みたい投稿にアクセスすることで、Instagramの埋め込みリンクを取得することができます（要ログイン）


しかし、このコードを直接HTMLに貼っても以下のような表示が出て、表示されません。


埋め込みコードの最終行のscriptの読み込み先URLがよくなさそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192305/7da55902-9574-8ea0-b0ff-de0fe

XMLのイメージを掴む

# はじめに

聞いたことあるけど使ったことない、詳しく知らないでおなじみ XML について
HTMLとの比較を通してイメージを掴んでいこうと思います。

# 目的の違い

https://aws.amazon.com/jp/compare/the-difference-between-html-and-xml/

> | | HTML | XML |
> | ——– | —————————————- | ——————————————————- |
> | 内容 | 主に構造化されたコンテンツをブラウザで表示するために使用されるマークアップ言語。 | 主にコンピュータシステム間で構造化データを交換するために使用されるマークアップ言語。

実は誰でも簡単にNotion のウィジェットを作れちゃう（勤怠管理ウィジェット in Notion）

# 初めに
タイトルの通りNotionのウイジェットって誰でも作れるんです！作ってみたら意外とウケが良かった！でも作り方知られてないみたいだし、ネットにも転がってなかったので記事書く！

### 背景
以前AWSの勉強も兼ねて、チームの勤怠管理を作った（[その１](https://qiita.com/waiiioss/items/6c2ca747a55d3dca9224)、[その２](https://qiita.com/waiiioss/items/f35c1729bb3d17cfbc9e)、[その３](https://qiita.com/waiiioss/items/29a51fb8b8d63bd173c3)の三段に分けて記事にしたので良かったらみてください！）

### 問題点
必要システムとして作ったけど、実際に使うようになって感じた問題点を列挙すると
1. 勤怠を登録するために勤怠管理ページを開くのがめんどくさい
1. めんどくさいが故に忘れがち
2. 可視化意外と誰もみてない

機能だけしっかり作っても**体験してほしいUX**を考えられていないとこうゆう問題点が出てきがちで

Reactで簡単なテーブルを作る

# React で Tableを作る

## シンプルな HTML Table

`HTML`で`Table`を作りたい場合、`th`を`tr`で囲み、`tr`を`table`で囲みます。
例：

“`HTML

7	8	9
7*7=49	7*8=56	7*9=63
7*8=56	8*8=64	9*8=72
7*9=63	8*9=72	9*9=81

“`

それをReact Componentに変えると

“`Typescript
function KuKuTable(){
return(

元記事を表示

要素のalt属性を画像の目的に基づいて適切に設定しよう

## はじめに
``要素は`src`属性で指定した画像が読み込まれなかったときの代替テキストを`alt`属性で指定します。

“`html

“`
代替テキストは画像の表示予定だった空間に表示され、ページの意味を変えることなく画像の代わりをしてくれます。

また、`alt`属性を指定することはアクセシビリティの観点からも重要です。
`alt`属性に指定されたテキストはスクリーンリーダー等の支援技術で画像を説明する際に使用されます。これによって何らかの事由で画像を知覚できないユーザーに対しても平等に情報を届られます。

[WCAG2.2のガイドライン1.1.1](https://www.w3.org/TR/WCAG22/#text-alternatives)によると、特定の状況で利用されることを除いて、ユーザーに表示される全ての非テキストコンテンツには同等の目的を果たすテキストの代替コンテンツを提供することがレベルA([WCAGが定める3段階のレベル](https://www.w3.org/WAI/WCAG2AAA-Con

元記事を表示

画像にグリッド線を入れるツールをHTMLを作りました

今回HTMLとJavascriptを使用して作成したのは、画像をアップロードすると、自分の好きな幅のグリッド線を追加することができるツールです。

## はじめに
このツールは、学校等の美術で模写をする際に簡単に画像にグリッド線を追加したいという場合等に使用していただけると嬉しいです！

## 作成方法
見た目を自分で作成し、JavaScriptの部分等の動作のコードは、ChatGPTに手伝ってもらいコーディングをしました。いくつか試作品を作成いたしましたので。どこが違うか考えてみてください！

# 試作品１
“`html:test1.html