今さら聞けないHTML　

selectを変更する前に一旦それでいいか確認するjs

“`








選択してください:
test1test2

【HTML】アンカーリンクの書き方

`リンク元`

　↓

`飛び先`
`

飛び先`
`

飛び先

`

【HTML】preタグの余分なインデントを削除する方法まとめ

# はじめに

:::note info
急いでいる方は[解決方法を考える](#解決方法を考える)まで飛ばしてください。
:::

この記事は、`pre`タグの余分なインデントを削除する方法について、数種類の方法を紹介しています。
また、最初の方は問題発生までの手順や、余分なインデントの正体なども書いています。

作者自身が初心者のため、間違いがある可能性があります。
もしあったらすみません。

## 環境

* OS: Mac
* エディタ: VSCode
* インデント: スペース×2（` `）
* HTMLの表示: Chrome

ついさっき知ったんですが、インデントにもタブとスペースの2種類あるんですね…
ずっとTabキーを押したらインデントできるくらいにしか思ってなかったので、まさかTabキーを押して入力されていたのがスペースだとは思いませんでした…

VSCodeのインデントの設定については、以下の記事をご覧ください。

https://qiita.com/e6nlaq/items/cbd90086f4de18cc68b6

# 問題

:::note

ついに魔法の絨毯にのって空を飛べる日が来た

## 大人になって気づいてしまった ##


私は毎日夢を見ます。

ほとんどの夢は、私が主役の物語です（笑）
脇役の夢は見たことがないと言っていいくらい
**主役に憧れ**があるんでしょうね・・・

### 私がよく見る夢 ###

・魔法の絨毯にのって空を自由に飛びながら冒険する
・ヒーローになって困っている街のみんなを救う
・ほうきにのって登下校する　
→ 大体、授業中に悪役が現れるため、
　変身して悪役の心を救いにいく

など数え切れないほど様々な物語の夢を見ます。

しかし夢が覚めると気づいてしまうのです。
**数秒前まで使えてた魔法が
現実に戻った時には使えないということを。**

## 救世主が現れた！！ ##

最近、**p5.js**というものを知りました。
p5.js：

課題（018）進捗

お疲れ様です。

今回から見本通りに幾何学模様を3つ作成する課題に取り組んでいきます。
既に2日前から始めていましたが、進捗報告をしていなかったため現状までをまとめて書きます:writing_hand:

1つ目は要素を横に並べて、中央ぞろえにするといったものです。
見本と何度も見比べましたが、親要素の20%にちゃんとなっているのでしょうか…？
見本の方はもう少し横長いような気がしましたが…

![2024-06-18 095840

親の顔より見たテーブルをHTMLで再現する

# 親の顔より見たテーブル

このデザイン見たことある!!

どう見てもExcelの標準書式のテーブル pic.twitter.com/rTABnUNn9c

— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) June 16, 2024

:::note info
なんか盛り上がりました🔥
:::

そう思ったそのデザインは、`Excel`や`PowerPoint`

OGPタグのまとめ

# OGPタグとは
OGPタグとは「Open Graph Protcol」の略です。OGPタグは、FacebookやX（旧Twitter）、Slack、LinkedInなどのSNSでシェアした際に設定したWEBページのタイトルや画像、詳細情報などを共有することができます。

# OGPタグを利用するメリット
正確な情報をユーザーに伝えることができるためです。
例えば、URLをシェアした際に、タイトルや画像が表示されないと、ユーザーがURLをクリックするかどうかを判断することが難しくなります。
そのため、OGPタグを利用することで、URLをシェアした際に、正確な情報をユーザーに伝えることができます。

# OGPタグの設定方法
OGPタグは、HTMLのheadタグ内に記述します。
以下に、OGPタグの設定方法を示します。
1. head要素に、以下のようにOGPタグを記述します。
`prefix=”og: http://ogp.me/ns#”`
2. headerタグ内のmetaタグに、以下のようにOGPタグを記述します。
“` html

JSで特定のidを持つ要素にクラスを追加・削除する方法

JavaScriptで特定のidを持つ要素にクラスを追加または削除する方法を紹介します。
### 実行環境
HTML5
CCS3
Google Chrome: 126.0.6478.62（Official Build） （64 ビット）

## 準備
[前回の記事](https://qiita.com/DreamMyHome/items/76f0b6f7c934c2ca5bcd)で作成したクラスを使います。
サイズ、色、枠線は任意のものに変更してください。

“`html

add

remove

target

“`

“`css
.main-content {
display: flex;
justify-content: space-evenly;
}

.but

CSSでボタンの枠を点滅させて強調表示する方法

CSSを使ってボタンの枠を点滅させて強調表示する方法を紹介します。
### 実行環境
HTML5
CCS3
Google Chrome: 126.0.6478.62（Official Build） （64 ビット）

## 準備
CSSで作成した以下のボタンを使います。
サイズ、色、枠線は任意のものに変更してください。
“`html

ボタン

“`
“`css
.button {
width: 100px;
height: 50px;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
background: palegreen;
}
“`
![スクリーンショット 2024-06-10 090047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810489/4956a1

初めてのチーム開発

## はじめに
今回、プログラミング初心者4人で行った初めてのチーム開発プロジェクトについての記事です。
テーマは『自分たちの役に立つものを開発する』

## チーム開発の流れ
1. アイデア決め
1. スライド作成、要件定義
1. 設計、タスク出し
1. 環境構築
1. 実装、プレゼン準備
1. プレゼン

## アイデア決め
まず、それぞれ一人が一つ抱えている課題のアイデアを出すことにしました。

私はFigmaを使うことを提案し、付箋を使ってアイデアを書き留め、その中から一つを選ぶことで決める流れになりました。
アイデアの課題、目新しさ、難易度で決めていく中で良い点、そうではない点がそれぞれにあり、賛同や衝突もありながら一つに決めるのが困難になりました。
そこで他のチーム開発ではどのようなアイデアがあったのかを見て、課題、目新しさ、実装難易度を改めました。
その後、4人の共通な新たな課題として「日々つけている日報をわかりやすく一目で振り返りたい。」ということが上げられました。
そこからはその課題を解決するためのアイデアがどんどん出てき方向性が決まっていきました。

ここで方向が

【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？

## はじめに

みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに `disabled` をつけて押せないようにしていませんか？

この記事では、ボタンに`disabled`属性をつけない方がいい理由と`disabled`をつけない方法を紹介します。

## disabled属性をつけない方がいい理由

`disabled` 属性をつけると、ユーザーがボタンを操作することを防ぎます。
そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。

disableがない時 | disableがある時
:-:|:-:
|![3つのボタンの中に1つdisabledのボタンがあり、2つのボタンにフォーカスが当たっているgif動画](https://qi

プログラマーが落ち着かなくなるコードを書いてみた #3

こんにちはAtsu1209です。
今回はエンジニアが落ち着かなくなるコードを書いてみた 第三回です

**第一回**

https://qiita.com/Atsu1209jp/items/d4273320d5ce5f690e9a

**第二回**

https://qiita.com/Atsu1209jp/items/a1b051107bca65e87ceb

**番外編**

https://qiita.com/Atsu1209jp/items/b88c5e5ccbf037e76565

# 今回作るもの
今回は作るもの自体はまともですが、コメントアウトを大量に入れて
恐怖を覚えさせたいと思います。

今回はブログのHTML部分をかいて行きます。
ブログのHTML部分のコードは以前の記事から流用します。

記事↓

https://qiita.com/Atsu1209jp/items/75a0acb5c4410aa2754e

# HTML
前回ChatGPTが書いたHTMLがこちらです。

“`html

iPhone / iPad で日本語入力の確定キー押下を keydown / up イベントで検知できなかった話

ちょっとハマったのでメモしておきます。

## バージョン

– iPad 17.4.1
– iPhone 15.8.2

## やりたいこと

やりたいことは以下の２つです。
1. iPhone / iPad で、日本語入力時（ローマ字入力モード）の確定キー押下を検知したい
1. iPhone / iPad で、日本語入力時（ローマ字入力モード）の変換候補の中から何か１つが選択されたことを検知したい

以下、 iPhone のスクリーンショットになります。

ちょっと分かりづらいと思いますが、日本語ローマ字入力モードで「くま」の２文字を入力した直後の、まだ未確定のときのスクリーンショットになります。

このまま「くま」で入力を確定させたい場合は赤枠内の**確定**ボタンを押下すると思いますが、これがやりたいことの 1 になります。
「熊本」で確定させたい場合は黄色枠内の**変換候補**の中から「熊本」を選択すると思いますが、これがやりたいことの 2 になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.am

課題（014）ー3

お疲れ様です。

先日提出してきた課題ですが、Googleフォントの指定や、ルート要素の指定に誤りがあったため再提出し、合格をいただいてきました:sweat:



font-family で指定するだけかと思いきや、ちゃんとGoogleのフォントサイトへ行って、コードなど入手しないといけなかったのですね…
この方法は知らなかったため、調べながら必要なコードを加筆:writing_hand:

また、ルート要素の指定で、 bodyタグにfont-s

CSSを素早く書く方法 (Emmet)

## はじめに
この記事は先日投稿した記事のCSS版です。
Emmetについてご存知ない方や、HTMLでの使用例にご興味のある方は、
以下の記事も併せて参照していただけると嬉しいです。

https://qiita.com/ameRese/items/b62a80dc03673a44ec5d

今回も私がよく使うものに絞って紹介します。
詳しく知りたい方は以下のチートシートを参照してください。

https://docs.emmet.io/cheat-sheet/

## 使い方
HTMLと同様、キーワードを入力してTabキーまたはEnterキーを押すだけです

## よく使うキーワード

:::note
### () 付きのプロパティ値に付いて
コードブロックで () を付けているものは初期値で、変換後に続けて値を入力することで変更可能です。
複数ある場合はTabキーで次の入力欄に飛びます。
↓こんな感じです↓
![Emmet Sample](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362317/41d

WijmoのリンクをBootstrapのモーダルから変更する手順について

# この記事を書こうと思った背景
Meceus社の国産Javascriptフレームワーク「Wijmo」のGridを使った情報があまりにも少ないため困っている人たちへ、そして自分への備忘録として書いてます。

# 完成イメージ図はこちら
【解説】
グリッドの変更したいリンクを選択すると、Bootstrapのモーダルウィンドウがふわっと出てきて、モーダル画面でリンク名を変更すると呼び出し元のリンク名が変更されているというサンプル。

１．変更したいリンクの選択する

２．モーダルの表示する

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/fc9fae78-d969-31e3-a4fa-6040aef

markdown AIで小説を連載する

# 前置き
もう本当、ビビりましたよ。

https://qiita.com/official-events/142fdd0d69ff6bb2d547

上のキャンペーンのタイトルを最初に見たとき、筆者は素直に「ええやん」と思いました。なぜなら、タイトルに
– **`markdown`**
– **`AI`**

という2つの言葉が含まれるからです。
筆者はいうなれば**パブロフの犬**のようなもので、これらの要素を含む存在に無条件で靡いてしまう。`markdown`という言葉が目に入るととりあえず安心感を覚えますし、`AI`については……場合によりますが。`markdown`の隣にいる場合は、コイツに任せてもいいかな、という気になれるのです。
そういうわけで……`markdown AI`というプロダクト名は大変気に入りました。何せ**安心感**というか、喉越しのさわやかさがあります。炭酸水というよりはいろはすに近い、そんな感じ。エコロジーに配慮したラベルを剥がしてリサイクルしつつ、プロダクトの詳細を見ていきましょう。

> # 概要
> 弊社開発のmarkdown AIを使用した感想

課題（014）ー2

お疲れ様です。

先日の続きを進め、先ほど課題提出をして参りました:raised_hand:
htmlは指定通りに完了しておりましたが、cssが最後までできていませんでしたが、残りも数項目であったため、30分ほどでできました。



![2024-06-15 225213.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/01b1fd09-df85-0a

HTMLとCSSを使った横スライドアニメーションの実装

# はじめに
本記事ではHTML、CSSを使用しテキストに横スライドアニメーションをつける方法について記載します。

# ゴール
次のような横スライドアニメーションを作成する事を本記事のゴールとする。


# ソース

## HTML
htmlファイルを準備します。今回は`横からテキストをスライド表示`という`ht`タグのテキストをスライド表示させます。

“`html:index.html