今さら聞けないHTML　2023年09月14日

Qiitaの記事の画像のサイズを変更する方法

– Qiitaで記事投稿を執筆する際、画像を挿入したのですが、サイズが大きすぎてみづらいと感じました。
– htmlタグがそのままQiitaの投稿編集に使えるということを知った。
– 画像アップ時の表示サイズを変更する方法について、備忘録としてここに記録します。

## Qiita投稿記事にて、画像をアップする際、表示サイズがデカすぎる

– 以下のようにやればOK

“`

“`
– 以上。
– サイズは50%だけでなく、任意のパーセンテージ表示に変えてOK

## 参考サイト

https://qiita.com/soratyan/items/6c47abaf92dded703d0c

オーダーメイドリングのシミュレーターをJavaScriptでオブジェクト指向型に作ってみた


実際のオーダーメイドリングのページ
https://www.rakuten.ne.jp/gold/million-bell/ordermade_ring.html

# こんな方におすすめ
JavaScriptのclassを用いたメソッドの再利用方法の学習・復習をしたい方

楽天Gold等のHTML・CSS・JavaScriptしか使えず、FTPでデータをアップロードする環境の中で動的なページを作りたい方

# 初めに
以前のオーダーメイドリングシミュレーターは静的なページを数十個用意して運用していたのですが、以下の理由で作り直そうと思いました。

・価格改定や商品仕様の変更があった際の編集作業が大変

・オーダーメイドリングの項目を選択度にページ遷移があるためスマホでのユーザビリティがあまり良くない

・UIが古臭くブランディング

Vueで生成されるHTMLタグを任意に変更できるButtonコンポーネントをつくる

こんにちは。齋藤（[@wtoddev](https://x.com/wtoddev))です。
久しぶりのQiita投稿になります。（最近、あまり明文化されたアウトプットができていない気がする。気をつけなければ。）

今回は、Vue.js（Nuxt）な環境でデザインシステムやコンポーネントライブラリを実装する上で、レンダリングされて吐き出されるHTMLのタグを任意に変更できるような再利用性の高いButtonコンポーネントの作り方について記したいと思います。

## 実現したいこと
– UI的に原子的なButtonコンポーネントを作る
– そのコンポーネントを利用する場合に、最終的に吐き出されるHTMLのタグが任意に指定できるようにする（`aタグ`や`buttonタグ`などを選べるようにする）

### 実証環境
今回の実証環境は以下の通りになります。
“`
├── @nuxt/devtools@0.8.2
├── @nuxt/image@1.0.0-rc.1
├── nuxt@3.7.0
└── sass@1.66.1
“`

## 実装してみる
Vueの`component`要素と

section, article, asideタグの使い分け

?セクショニング系タグ使い分け

?section：
　　章や区切りなど。汎用的に使える

?article：ひとつの記事。
　　記事一覧では記事タイトル毎で囲う。
　　(冒頭の本文テキストなどがあればそれも)

?aside：補足情報。
　　サイドバーや広告など関連する情報を囲う

（画像は使用例です）



お手軽に電子ドラッグ

## コード

以下をブラウザのコンソールに貼り付けて実行してください。

“`js
function getAllElements(currentWindow = window) {
let elements = [];
try {
elements = […currentWindow.document.querySelectorAll(“*”)];
const iframes = currentWindow.document.querySelectorAll(“iframe”);
for (const iframe of iframes) {
elements = elements.concat(getAllElements(iframe.contentWindow));
}
}
catch (e) {
// DOMException: Blocked a frame with origin XXX from accessing a cros

JSでgithubの草を作る（Cal-Heatmap）

# Cal-Heatmap
githubの草（ヒートマップカレンダーと言います）のようなグラフをwebアプリで実装しようと調べまくってた時に、結構良いライブラリを発見したので、書いていきたいと思います。
jsonのようなデータを入れるだけで、カレンダーを一発で生成でき、かつ細かい設定もいじることができる優れものです。cssの羅列を書くよりはよっぽどマシだと思いました。

https://cal-heatmap.com/

めっちゃがんばると、こんなのができたりします。そっくりですね

# インストールとか
CDNとNPMに対応しています。

### CDN
“`html:index.html


この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。
同様のことを実現するものには、有名どころの 1つに「[ngrok（エングロック）](https://ngrok.com/)」があったり、[その他にもたくさんの類似サービスがあります](https://github.com/anderspitman/awesome-tunneling)。

## 実際に VSCode の built-in port forwarding を試してみ

【非推奨】GoogleフォームをカスタマイズしてWebサイトに組み込む

Webサイトにカスタムのフォームを用意してあげたいけど、バックエンドを開発する予算と余裕がないよ、という場面で、絶対推奨できるものではないけれどもなんとかやりくりする方法です。
Googleフォームをカスタマイズして埋め込みます。

## 実現したいこと
- Webページにフォームを設置する
- 回答を収集する
- 回答を受け取ったらメール通知する

## 使用するもの
- Googleアカウント（無料版でOK）
- Googleフォーム

## 制作手順
### Googleフォームの作成
普通に要件に沿ってGoogleフォームを作成します。
https://www.google.com/intl/ja_jp/forms/about/

### 作成したフォームの情報を取得
1. actionに指定されたURL

2. 各input項目のna

変なところで折り返されて文章が読みにくいときは、spanとdisplay: inline-blockの出番！

?変なところで折り返されて文章が読みにくい！！
　?spanとdisplay: inline-blockの出番！

①折り返したく無い分のかたまりをspanタグで囲む
②↑のspanタグに、display: inline-blockを指定する

こんなに読みやすくなります✨
（HTMLが少し汚くなるのが難点）



~~~html:index.html

お客様にとって、不動産に関する情報が入手しにくい、

CSSとHTML

時計やストップウォッチはプログラミングではなくjavascriptでもできそうだと分かりました。
色んな色やデザイン違いを作りたいと思うとjavascriptのほうがよさそうですね。

とは言え、CSSとHTMLにも全く触れたことがないので、ドットインストールで一番最初の学習を進めました。

9/7paizaラーニングでJavaScript体験編というのがあり受講。ぼんやりとjavascriptのさわりは分かったかも。

複数チェックボックスで要素の表示非表示を切り替える

備忘録と勉強のために残しておくだけ。

# 要件

1. 以下の項目を記載したチェックボックスを作成
・りんご(value = apple)
・バナナ(value = banana)
・みかん(value = orange)

2. 各項目のvalueと同じクラス名をもつdivを作成

```

りんご

バナナ

...
```

3. 2で作成したdivの初期状態は非表示

4. 1で作成したチェックボックスをオンにしたら、valueに対応したdivに.selectedクラスをつける

5. .selectedがついたdivを表示する

6. チェックボックスはオフになったら、対応しているdivの.selectedクラスを削除する

## コードとデモ
JSに関してはコードの中にコメントあり。

labelのforとinputのidの関係性の備忘録

毎度忘れるので記事にします。

# そもそも``ってなんやねん
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)によると、「UIのアイテムにキャプションをつけるためのもの」だそうです。

キャプションをつけることができるものは labelableな要素と呼ばれ、以下だそうです。
- button
- input
- meter
- output
- progress
- select
- textarea

## じゃあfor属性とは？
labelが「キャプション」である以上、その対象となるアイテムがあります。そのアイテムと、labelを紐づけるための属性です。

## labelとlabelableな要素を明示的に結びつける方法
まず、labelableな要素に`id`を設定します。
これに対して`for`属性を持つlabelは、ドキュメントの最初に出てきた`for`と同じ値の`id`をもつlabelableな要素に関連づけられます。

従って、同じ`id`をもつlabelab

【Angular】サバイバルTypeScriptの猫画像ジェネレータを実装するよ

Angular CLI: 16.1.5

Angular: 16.1.6

[前回](https://qiita.com/SZR/items/a7a5145fea474663dce8)
の続きです。
業務で人生初のフロントエンド開発をAngularで行うことになりAngularのチュートリアルを一通り実施後、TypeScript未経験なこともありそちらの学習も兼ねて、サバイバルTypeScriptを敢えてAngularで実施しました

フォルダ構成

```TypeScript:app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutin

【自作サイト紹介】Tailwind CSS入門ついでに自作アプリをまとめてみた

# Introduction

群雄割拠の CSS フレームワーク界隈、ML エンジニアの私にはついていけておりませんが、`Tailwind CSS`が簡単に扱えそうだったので試してみました。

https://tailwindcss.com/

ちょうどペンギンの教師データ作成中でペンギン画像が溜まったことも重なり、折角なのでペンギンに溢れたポートフォリオまとめサイトを作りました。
本記事はこのサイト紹介記事です。

**本記事が少しでも読者様の学びに繋がれば幸いです！**
**「いいね」をしていただけると今後の励みになるので、是非お願いします！**

## 環境

Ubuntu22.04

## Tailwind CSS の使用感

数日しか触っていないので恐縮ですが、ざっくり使用感をまとめます。[^1]
[^1]: Web 開発はほぼ経験ない私なのであくまで参考程度に。実務で CSS 実装する際は Google 先生と二人三脚しています。

※アプリを先に見たい方向けに折り畳んでおきます。

======================