HTML: textareaをフカボリック症候群

# textarea
この要素の中心となるのはtagで囲まれた文字列。通常は`value属性`でそれを読み書きしますが、他にも`innerHTML`、`textContent`、`childNodes[0].data`などといったもので**ほぼ**代用できます。`innerText`は常に空文字を返すようです。

## 空要素
“`html

“`

property	文字列	length
value		0
innerHTML		0
textContent		0
childNodes[0].data	参照不可	参照不可

当然ですが`childNodes[0]`は`undefined`なので、`data`も不在なり

## 改行1個
“`html
<br />
“`
**なんと空要素の場合と同じ**振る舞いです。直観に反する信じがたい結

R Markdownで作成する資料にカスタムボックスを入れる

# これを読んでできるようになること
## 1. R Markdownファイルでカスタムボックスが含まれたHTMLファイルを作成


## 2. R Markdownファイルでアイコン入りのカスタムボックスが含まれたHTMLファイルを作成


# Rのバージョン等
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/ca9d2910-ce1f-0f97-24b3-60e679a9b6a1.png

＜初学者向け＞HTNLについてまとめてみた①

## HTMLとは
HTML（HyperText Markup Language）とは、ウェブページを作成するための基本的な言語です。HTMLを使うことで、テキストや画像、リンクなどをウェブページに表示することができます。[(wiki)](https://ja.wikipedia.org/wiki/HyperText_Markup_Language)

皆さんが、普段PCやスマホで目にしているウェブ画面はHTMLで作成されています。
.htmlファイルを作成すれば自分のPCでも開くことが可能です。

###

コード種類(必須)
| No | タグ | 属性 |
| :-: | :-: | :-:|
| 1 | \

~\

| |
| 2 | \

| |
| 3 | \ |href, target |
| 4 | \

,\
,\

HTML CSSのみ使用のポップアップ表示テンプレート

# モチベーション
HTMLとCSSの練習として，各画面の共通機能であるポップアップをある程度テンプレート化してみたいと感じた．
ついでに，ポップアップ表示用のボタンのデザインも少し遊んでみた．

# 実際の動作
各ボタンごとに異なるデザインのポップアップが適応されています．ポップアップ右上の×ボタンまたはポップアップ外の領域をクリックで閉じることができます．

See th

【HTML / CSS】classとidについて

## はじめに
学習したことを自分用の参考書のようにまとめていきます。

## classとは
– classは複数の要素に共通のスタイルや振る舞いを与えるために使います。
– 同じクラス名を複数の要素に付けることができ、再利用性が高いです。
– CSSではクラスを指定するために、ドット（.）を使います。

下記の例では、**class=”test”** を持つ2つの要素にスタイルが適用されます。

“`haml:html

スタイルあり

スタイルなし

スタイルあり

“`

“`css:css
.test {
background-color: yellow;
color: red;
}
“`

## idとは
– idはページ内で一意である必要があり、同じidを持つ要素は一つしか存在できません。
– 特定の1つの要素に対してユニークなスタイルやスクリプトを適用するために使用します。
– CSSではIDを指定するため

HTMLとJavaScriptで自作スロットマシンに挑戦！

## はじめに

今回は、HTMLとJavaScriptを使って、簡単なスロットマシンを作ってみたいと思います。自宅でカジノ気分を味わいたい方や、プログラミングの練習としてもおすすめです！コードの構成はシンプルですが、少しおしゃれな見た目に仕上げていますので、楽しく挑戦してみてください。

### 完成品イメージ

3つのリールが回転し、それぞれに「ストップ」ボタンが付いています。リールを停止させ、3つのリールに同じ絵柄が揃えば「大当たり！」が表示されます。違う絵柄だと「残念！」という結果になります。コードを一部変更するだけで、見た目や挙動を簡単にカスタマイズすることも可能です！

—

## スロットマシンを作る手順

### 1. 必要なファイル
今回のスロットマシンは、次の3つのファイルで構

OpenAI o1 previewにデモ用のコードを書いてもらったらすごかった #blueprism

# o1 preview
何が得意とか、回数制限があるとか、そういうのは賢い先人の皆様が既にまとめてくださっているのでそっちをご覧ください。

新しいものが出たらとりあえず触ってみたい。
博士課程レベルの賢さでしたっけ。どう考えてもそんな賢い子が私レベルとお話しても能力が開花する感じにはできないけど、o1先生にどのくらいご指導いただけるか、他力本願全開の私が全力で頼ってみます。

# 質問文
ブラウザを表示している状態でTABを押すと、要素を順々にフォーカスしていくのですが、そのときに絶対にTABでフォーカスしないボタンがあります。このボタンはどのような構造になっていると思われますか？
「絶対にTABでフォーカスしないボタンをBlue Prismで操作する」操作をデモしたいので、考えられるケースを列挙し、デモ用のサンプルページHTMLをケース別に作成してください。なお、原因として「disabled 属性が設定されている」と「要素が非表示または表示外」は無いことを確認しています。また、ページを操作するためのショートカットはありません。

# o1先生が出してくれたもの
承知しました。以下

input[type=”file”]の「ファイルを選択する」ボタンだけ非表示にするCSS

`input[type=”file”]`にスタイルをつける方法は色々と紹介されていますが、「ファイルを選択する」ボタンだけを非表示にする方法です。
未選択時のテキストと選択後のファイル名のテキストは残ります。

“`css
input[type=”file”]::file-selector-button {
appearance: none;
visibility: hidden;
margin: 0;
padding: 0;
border: 0 none;
width: 0;
height: 0;
font-size: 100%;
line-height: inherit;
}
“`

`display: none;`で済ませられるかと思いましたが、Safariだけファイル名のテキストを巻き込んで消えてしまったため、個別のプロパティで片っ端からサイズを0にしています。

また、font-sizeやline-heightがファイル名のテキストの位置に影響するため、それぞれを親（`input[type=”file

Safariの新機能「気をそらす項目を非表示」の仕組みを調べた

「気をそらす項目を非表示」機能はiOS18などで新しく追加された、webページ上の広告など非表示にするための機能です。

# 使い方

Safariの新機能、スゲェなｗ これはいかつい。
「気をそらす項目を非表示」#iOS18 pic.twitter.com/7SUwIgnWmJ

— ひで (@hidet

初めてのHTMLとCSS　Part.1

おはこんばんにちは。
ぽぽのたんです。

今回はHTMLとCSSについて学んだので、それをまとめていこうと思います。

# HTML,CSSとは

Webページを作成するために用いられるマークアップ言語のことです。
具体的に言うと、文章や写真、WebページのリンクををWebページ上に表示されている情報のことです。


画像を見てもらうとわかりますが、文字の大きさや太さなどは調整できますが、装飾があまりできず味気のないものになっています。
そこでWebページに装飾を施すのがCSSです。

![e819537e79370d735b18fd438713c9be.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386

CSS: 属性selectorを無視

htmlの各要素には属性値があります。これらには規定値が設定されている場合があり、CSSの属性selectorと組み合わせるとどうなるのでしょうか…。結論から申し上げますと、CSSでは無視されるようです。

## input
type属性の規定値のtextです。cssで文字色を赤に設定。ド突くと規定値表示
“`html

“`
`type=text`等のinput要素の`value`の規定値は空文字。しかしtagに記述しておかないとやはり適用されず、なんと動的に設定しても適用されません(最後のinput要素)
“`html

v-htmlの使い方

# Vueでリストを表示させたかった時に、htmlタグで改行を入れたかった
通常はマスタッシュ構文を使うが、それだとhtmlタグを入れてもただの文字列として認識されてしまう。そこで、`v-html`属性を用いる。

### マスタッシュ構文
“`html:index.html
{{ hoge.name }}
“`
### v-html属性
“`html:index.html

“`

備忘録として残させてください。アウトプットです。hogehoge

GoogleアカウントでログインできるWebサービスを作ろう！

## はじめに
今回は、GoogleのOAuth 2.0を使ってGoogleアカウントでログインできるWebサービスを、HTML、JavaScript、Python（Flask）を使って作成する方法をご紹介します。

初心者でも安心して進められるように、Google API Consoleの設定から、実際のプログラム作成までの手順を丁寧に解説していきます。

## 画面イメージ


![スクリーンショット 2024-

JavaScriptで作るシンプルなTODOアプリ

今回は、JavaScriptを使ってシンプルなTODOアプリを作成する方法を紹介します。HTML、Bootstrap、JavaScriptを使い、ユーザーがタスクを追加、削除、完了できる機能を実装します。
## 準備
まずは、必要なツールを準備しましょう。
## 使用するツール
* Visual Studio Code (VScode): コードエディタ
* Live Server: ローカル環境でWebページを簡単にプレビューするための拡張機能

VScodeのLive Serverを使えば、コードを編集するたびにリアルタイムでブラウザ上に反映されます。まず、VScodeで新しいプロジェクトを作成し、Live Serverを有効にしましょう。
## HTMLファイルを作成
まず、基本となるHTMLファイルを作成します。TODOの入力フォームと、タスクの表示用エリアを用意します。

サンプルコード（open）

“`

GPT-5とStrawberryが切り開くAIの未来

# Open AI社最新AIモデルとは？

**Open AI社**からStrawberry技術を基盤とした新しいAIモデルがリリースされると発表されました。
これまでもAI業界にかなり大きな影響を呼んでいますよね。
まず初めにこれまでOpen AI社が出してきたモデルを軽くまとめました。
|||
|:-:|:-:|
|年数 |モデル名|
|2022年 11月 30日|GPT-3.5 無料公開|
|2023年 3月 15日 | GPT-4 有料版として公開 |
|2023年 7月 10日 |Code Interpreter 有料ベータ版提供開始|
|2023年 9月 20日 |Dall-E3 発表　 |
|2023年 9月 25日 |GPT-4V 同年10月26日に公開 |
|2024年 2月 15日 |Soraを発表 |
|2024年 5月 13日 |GPT-4o発表、リリース |
|2024年 7月 18日 |GPT-4o mini を発表、リリース|

これを見る限りOpen AI社は**約一年間隔**で新モデル

HTMLファイルのJavaScriptを外部ファイルに切り分ける方法

## アジェンダ
Web開発では、コードの管理や読みやすさを向上させるために、HTMLファイル内に書かれているJavaScriptコードを外部ファイルに切り分けることが推奨されています。この記事では、HTML内の`script`タグに直接書かれたJavaScriptを、外部ファイルとして切り分ける方法を簡単に解説します。

## 1. インラインJavaScriptの問題点

例えば、以下のようにHTML内に直接JavaScriptコードが書かれているとします。

“`html

ようこそ！

クリックしてね