今さら聞けないHTML　2022年09月19日

高専Wordleを作ってみた

こんちは現役JK[^1]のTrimsCashですだいぶん前に作ったやつ現実逃避のために書く
これはほぼ自分語りだと思ふ

https://github.com/trimscash/KosenWordle

https://trimscash.github.io/KosenWordle/



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730711/f9894590-19cb-3efa-7359-4

html フォームタグ備忘録

# テキスト入力
“`html

お名前

パスワード

数量

日付

“`
# 複数行のテキスト入力
“`html
内容
“`
![スクリーンショット 2022-09-18 22.59.25.png](https://qiit

戻るボタンを押した時に、ページトップではなく元の位置に戻るようにしたい

CMSなど何らかの記事一覧ページがあったとして、
詳細ページに遷移後、また一覧に戻ったときも遷移前のスクロール位置を保持したい。

## 実装したこと
当初、以下の想定をしていました。
1) ローカルストレージに遷移前のスクロール位置を保存する。
2) 戻ったときにそこに移動する。

しかし、History APIが既にその仕様を取り扱っている模様。
history.back()を組み込んであげることで、ブラウザの[←戻る]ボタンを押したときと同じ動作を実現できます。

“`html:index.html
前のページに戻る
“`

## 最後に
[Twitter](https://twitter.com/ken___4010)も始めたので、良かったらお願いします〜！

## 参考サイト
・[History.back()](https://developer.mozilla.org/ja/docs/Web/API/History/back)
・[History.scr

納品ドキュメントの作成にMarkdown+Vivliostyleを採用した話

こんにちは、製造業でソフト開発エンジニアをやっているとみー(@tommyecguitar)です。

会社で納品物の説明ドキュメントを作ることがあり、その時にMarkdownでの組版をやってみたので、どう運用したか、困ったところ、いい点、悪い点をまとめてみようと思います。

Vivliostyleで組版したブログはたくさんあるので、見た目がどんな感じにできるかなどはそちらを見ていただくか、[Vivliostyleのサイト](https://vivliostyle.org/ja/)をご覧ください。

# Wordじゃだめなのか。

製造業で何かしら長大なドキュメントを作るとなったら、大抵はWordを複数人数で編集するという運用をしているところが多いと思います。
しかし、Wordにはいろいろと悪いところがあります。

1. チーム内で共同編集すると、編集したところが消えたり、フォントやデザインがなぜか統一されなかったりする。
1. セクションごとに担当を分けても、マージが手作業になってしまう。

前者ですが、まずWordを共有設定をしてチーム内で同時編集を試みると、保存のタイミングとかのせい

単一のHTMLファイルで簡単にOpenAPI定義を表示する方法(Dockerなし、ES Modules使用)

# はじめに(この記事でできること)

– Dockerを使用することなく、無料かつローカル環境でOpenAPI 3.0定義を表示する
– 単一のHTMLファイルもしくはJavaScriptファイルで機能する
– openapi定義の場所がローカル(相対パス)かリモートURLかにかかわらず、機能する

## 結果


# 必要な環境

– [Visual Studio Code](https://code.visualstudio.com/)
– [Live Preview拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)

## 操作手順

– ソースコードのhtmlファイルを任意のフォルダに配置する
– Visual St

アイウエオ

# サンプルの記事です〜〜〜

Chakra UIでオートコンプリートを無効にする（フレームワーク関係ないかも）

パスワード新規登録時、あるいは変更時など自動保管を無効にしたい瞬間があります。
基本的に以下のようにautocompleteをオフにすることで足りると思います。

““sample-off.html

““
しかし、利用していたChakra UIではオフにできなかったのでやり方をメモしておきます

すべては[これ](https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#autocomplete_%E5%B1%9E%E6%80%A7%E3%81%A8%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E6%AC%84)を見ていただければ解決するのですが…
（読んだらもしかしてフレームワーク関係なくブラウザ共通で効かないんです？）
““sample-new-passw

ブラウザのパスワードマネージャーに任意のIDを覚えさせる

# ブラウザのパスワードマネージャーに任意の値を覚えさせたい

ブラウザがID（ユーザー名）とパスワードを保存してくれる機能があります。
ユーザー登録フォームを作っていた時に、その機能が覚えてほしいIDを覚えてくれなかったので、任意のものに変更できないかと探った時の備忘録です。

## よくあるNG例

““ng-form.html

““
たぶんよくあると思うんですけど、ユーザーにIDを登録させて、それとは別に氏名を登録させるタイプのフォームです。
でもログインにはIDとパスワードを用いてほしい。
この場合、私がそうだったのですが、氏名の方がブラウザのパスワード管理機能に登録されてしまうんですよね。

## OK例

““ok-form.html

Rails フォームヘルパー Cheat Sheet !

フォーム作成時に構文を毎回調べているので備忘録兼ねてまとめました。

### バージョン

下記のバージョンで確認
Rails version: 7.0.2.2

## ActionView::Helpers::FormHelper

“`erb
<%= form.color_field :favorite_color %>
<%= form.date_field :born_on %>
<%= form.datetime_field :user, :born_on, min: Date.today %>
<%= form.datetime_local_field :graduation_day %>
<%= form.email_field :address %>
<%= form.file_field :post, :image, multiple: true %>
<%= form.hidden_field :parent_id, value: "foo" %>
<%= form.month_field :birthday_month %>
<%= form.number_fi

for文で生成するFont AwesomeのSVG描画が遅い問題

Font AwesomeのKitではTechnology(描画方式)として、Web FontかSVGか好きな方を選べるのですが、うっかりSVGを選んでしまうと描画がかなり遅くなります。10倍くらい時間がかかると思ってください。

これはFont Awesomeに限らず、そもそもSVGの中身はXMLであり、余分な情報がたくさん盛り込まれているためです。

そのため、データ数が増えれば増えるほど指数関数的に遅くなるので、AngularやReactなどでFont Awesomeのアイコンをループ生成する際は、Web Fontを選んでおくほうが懸命です。

作成していたWebアプリで「最近非同期データの読み込みが遅いなぁ」「データ量増えたからかなぁ」と思っていたら、アルゴリズム起因ではなくビュー描画起因だったというオチでした。確かにビューの描画処理って重いんですよね。

HTMLのTableのタグを簡単に生成する

# Table Tag Generator
直感的な操作で複雑なテーブル構造も簡単に作成できます。
https://tabletag.net/ja/

## HTML tableタグ　仕様
\タグの内側に含められるのは以下になります。

– caption
– colgroup
– thead
– tbody
– tr（必須）
– tfoot
– scriptタグ等

“`html:example

thは見出しです。

thは見出しです。

t 元記事を表示 【初心者向け】Javascriptで簡単なTodoアプリの作成【addEventListener】 # 本記事の内容 javascriptで簡単なTodoアプリを作ります。 実装手順は以下の通りです。 ①Todoを表示・保存 ②Todoを削除 ③Todoを完了 # 環境 HTML、CSS部分は今回は範囲外とします。 以下の内容は実装済みの前提で記載していきますので、お使いのテキストエディタへのコピペをお願いします。  コードは以下です。 “`html:index.html Bootstrapのナビバーのカラースキームについて ## 環境 Bootstrap5 HTML ## はじめに Bootstrapのナビバー（ナビゲーションバー）のカラースキームの設定は、何色にするべきか悩むところです。服を買うときに、試着室に入って、「うーん、この柄は違うな」とか、別の服を選んできて、「うーん、この柄はどうかな」とか言っているようなものでしょうか。カラースキームにはどのような設定があるのか、色々と試してみます。 ## 内容 ダーク系の色にしたい場合の設定です。 “`sample.html 元記事を表示 3.2 HTMLだけでWebページを作ってみよう # 完成イメージ CSSを使用していないため、文字の大きさや、色は再現できていない。また、レスポンシブなページにもなっていない。 後々CSSも追加して参考Webページと同じようにする予定  参考Webページ https://www.au-okinawa.com/a/j3/ # 事前準備 必要な画像ファイルを参考Webページから取得する（6ファイル） #### 取得方法 対象の画像にカーソルを当て右クリックし、「名前を付けて画像を保存」を選択。 ファイルはリサイズしているのでこのページから取得しないこと ただし、6つ目のタイトルのアイコンは取得方法が異なるためこのページから取得しても良い。 1. ヘッダー  GitHubにソースコードをアップしNetlifyに静的サイトとしてアップロードしました。 ## GitHubとは Gitの仕組みを利用して、世界中の人々が自分の作品(プログラムコードやデザインデータなど)を保存、公開できるようにしたウェブサービス ## Netlifyとは 似たようなサービスにVercel、Github Pages、Firebase Hostingがあります。 違いは無料枠での制限などいろいろあるかと思います。 データ容量、データベースが使用可能か、ソースからの自動デプロイがあるかなど 私は、簡単に利用できるということとソースからの自動デプロイがあるということで 勉強用にはNetlifyが使いやすいと思い選びました。 # デザインカンプ（Adobe XD）からのコーディング練習サイト 元記事を表示 実習（ポートフォリオサイト作成） # 初級編 まずは初級編として以下を作成していきます。 https://code-step.com/demo/html/portfolio1/ ## ステップ１ すぐにコーディングせずに一度全体を見て、どの部分にどのタグを使用していくかを考えます。 まず、大きく３つに分けることができます。 – ヘッダー – メイン – フッター また、レスポンシブを考慮して、デスクトップ版、モバイル版両方のレイアウトを作成する必要があります。今回はデスクトップ版のレイアウトを基準にページを作成していきます。 ※最近はモバイルファーストという言葉もあり、モバイル版のレイアウトを基準にページを作成していくことが推奨されているそうです。⇦Udemyの某e-ラーニング講師が言っていました。 ### ヘッダー  – ヘッダー – モバイル版ではMy W 元記事を表示 8.2 基本構文（変数とは、if文, switch文, for文, while文について）補足 # 基本構文を使用して表示を制御してみよう ## if文、for文 if文やfor文を使用して、ボタンを押下することで表示、非表示の切り替わる文字列を実装していきます。 index.html “`html visibilityプロパティを使用して表示を切り替える あいう 元記事を表示 8.3 関数とは # 関数とは 複数の処理をひとまとまりにしたものです。メソッドと呼ばれることもあります。 また、前述の通り、JavaScriptにおける基本的な構成要素のひとつであり、Function型のオブジェクトとして扱われます。関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴です。 ## 定義方法 関数定義の方法として「関数宣言」があります。 記法　`function 関数名(引数) { 処理 }` “`js /** 引数で指定した名前に挨拶をする文字列を返す関数 */ function hello1(name) { var message = “Hello, ” + name return message } “` 宣言の中にある「引数」という言葉についてですが、「引数」とは関数に渡して処理の中でその値を使うことができるものです。 #### アロー関数 上記の方法で関数は定義できますが、別の方法としてアロー関数というものがあります。最近できた記法で（2015年）私は基本こちらを使用しています 記法　`関数名 = (引数) => { 処理 } 元記事を表示 Bootstrap # Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」[^1]です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 # Bootstrapでできること – **レスポンシブWebデザインに対応している** 通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。 – **デザイン部品が使える** [フォーム](https://getbootstrap.jp/docs/4.2/components/forms/)・[ボタン](https://getbootstrap.jp/docs/4.2/components/buttons/)・[ナビゲーション](https://getbootstra 元記事を表示 4-3.3 CSS演習3 ## ボタンにホバーを付けてみよう ホバーとはカーソルを当てた時の動作 ### 完成イメージ  （gif作ってみたのでが、見づらいですね、、、） 通常  ホバー時  #### 要件 ・ボタンの位置：`中央` ・ボタンの詳細（通常） 　・背景色：`白` 元記事を表示 OTHERカテゴリの最新記事 2024.09.19 JavaScript関連のことを調べてみた 2024.09.19 JAVA関連のことを調べてみた 2024.09.19 iOS関連のことを調べてみた 2024.09.19 Rails関連のことを調べてみた 2024.09.19 Lambda関連のことを調べてみた 2024.09.19 Python関連のことを調べてみた