widthやheightのアニメーション化は最悪の行為

# widthやheightをアニメーション化してはいけない

width,heightのアニメーションについて、以下のように記述しているサイトがありました。

> Web上でアニメーション化する最初のルール：height,widthをアニメーション化しないでください。
>https://css-tricks.com/animating-css-width-and-height-without-the-squish-effect/

> CSSwidthとheightプロパティをアニメーション化できると非常に便利です。残念ながら、現時点では、ブラウザを苦痛で悲鳴を上げるための確実な方法です。
>https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/

英語らしいユニークな言い回しで最悪の手段だということが十分に伝わります。

## なぜいけないのか
結論から言うと、 **リフローを発生させてしまい、処理を重くしてしまう** からwidthやheightをアニメーション化はしてはいけないそう

駆け出しエンジニアのHTMLをレビューした際の指摘点

WEB開発やWEBデザインの情報の収集、発信を目的としてTwitterのアカウントを作ってから、駆け出しの方のコーディングに対してレビューを何件かさせていただきました。
何度かやっていると同じ指摘もあったので、今後のレビュー前にチェックしてもらいたい項目をここにまとめたいと思います。

## インデントは揃えましょう
HTMLはコードのインデントによるブラウザ表示への影響はありませんが、不規則になっていると可読性が損なわれ、ミスの記述ミスの原因となります。実際にインデントが揃っていないコードには閉じタグの記述漏れや、タグの入れ子の間違いなどがありました。
インデントは自分で揃えようとせずともコードエディターが自動で揃えてくれる機能や、コピペをすると自動で整形してくれるサービスもありますので、利用するといいでしょう。

**Visual Studio Codeの拡張機能 「Beautify」**
インストール：左メニューの「拡張機能」から「Beautify」を検索してインストール。
使い方：https://programming-engineer.com/vscode-beautify/

100日後くらいに個人開発するぞ！day018

## 今日もHTML＆CSS初級編を復習してみた！



## 今日の備忘録

### HTMLの全体構造
– HTMLファイルには決められた型を書いていく必要がある
– ``要素の中に``要素と``要素が必要です。
– ``要素にはページに関する情報を記述
– ``要素には実際に表示したい内容を記述
– HTMLバージョンを指定する
– HTMLのファイルではHTMLのバージョンを宣言する必要

【Ruby on Rails】railsでスタディープラスっぽいもの作ろうとしてみた（グラフ表示）

# はじめに
自分のスキルアップのために人気アプリ、スタディープラスのトレースをしていてその過程でちょっと悩んだところがあったので備忘録として記事として残します。もし、もっとスマートな書き方があったらご教示ください。

# 実装
実装に際して前提として①基本となる投稿機能(Tweetモデル)　②deviseを用いたユーザー機能　の２つが実装されているという前提で作成を進めていきます。
また、tweetsテーブルにstrig型でtagという名前のカラムを事前に追加しておくようにお願いします。

## カテゴリの選択と追加
### 1.モデルの作成とアソシエーション
勉強した科目などのカテゴリを追加・保存するためのテーブル(tagsテーブル）の作成を行います。
コマンドプロンプトで以下のコマンドを実行してください
“`
rails g model Tag name:string
“`

“`
rails db:migrate
“`

また、アソシエーションの設定もしておきましょう！

“`ruby:tweet.rb
has_many :tags
“`

“`ruby:

Googleフォームをカスタマイズする – フォームに管理用のパラメータを自動挿入する

# Googleフォームは超有能
[「Googleフォーム」](https://docs.google.com/forms/)は、チェックボックスは普通に必須にできるし、最近は項目に画像の追加もできるので、使い勝手としては悪くない。むしろ十分。めちゃくちゃ有能。

しかし、「Googleフォーム」の使用が前提で **「Googleフォーム」にはない機能要求**がある場合は、どんな工夫ができるのか。

# Googleフォームでやりたいこと
商品の問い合わせと仮定した場合、回答側としては、商品名が入っていた方がスムーズなやり取りができる。
商品詳細ページから遷移した時は、商品名やIDが自動挿入されていると便利だなあ…。

ということで、Googleフォームに対してやりたいこと。

1. 商品IDを**自動挿入**したい
1. 商品IDは**URLから取得**したい
1. 商品IDは**編集不可**にしたい

### あらかじめ入力済みにしておくことはできる
『1』については、下記の方法を使ってもいける。
参考：[GoogleフォームにURLパラメータ使って初期値を指定する方法](http

WinMergeのHTML形式レポートファイルから差分をプログラム上で取得する方法(Javaによる例あり)

　エビデンスとしてWinMergeでHTML形式のレポートファイルを作成することがあると思います。
　この記事では出力したHTMLファイルから差分となった行をプログラム上で取得する方法について説明します。
WinMergeによるHTML形式のレポートファイル出力
　レポートファイルの差分を比較する部分は4列のtable要素で構成されてます。
WinMergeにより出力されたHTMLレポートファイル
　1-2列目はWinMergeの左側、3-4列目は右側です。それぞれ行番号の列と比

【JS無し】Spearly CMSで、完全な静的サイトに画像ギャラリーを導入してみた

# HTMLとCSSだけで作られたサイトに動的コンテンツを追加したい
LPや、企業サイトなどで、今は全て静的なコンテンツだけど、後からお知らせや、ギャラリーなどの動的なコンテンツを追加したくなること、ありますよね。
エンジニアはともかく、HTMLやCSSの知識のないクライアントにコンテンツを管理してもらう場合、何かしらのシステムを導入する必要があります。

パッと思いつく解決策だと「Wordpress化して、動的なコンテンツを作成できるようにする」ことだと思います。（シェア6割超えてるしね。）

しかし、Wordpress化する場合、以下のような問題があります。

– WordPress化するために**工数**が発生
– PHP、MySQLが動く**サーバを準備・メンテナンス**する必要がある
– **サーバのお引越し**が必要
– （ちゃんとした対策をしないと）**大量のアクセスに弱い**

しかも「できるだけ安くしてほしい」なんて言われたら、エンジニア的には辛いです…

そこで、**JSを使わずに、動的なコンテンツをサイトに導入できる機能を持った、Spearly CMS**を使

100日後くらいに個人開発するぞ！day017

## 今日はHTML＆CSS初級編を復習してみた！


## 今日の備忘録

### テキストにリンクをつける方法
* ``タグを用いることでテキストにリンクをつけることができる
* 定型文：`アンカーテキスト`

### 画像をつける方法
* ``タグを用いることで画像をつけることができる
* 定型文：` `
* ``タグはテキストを囲むことがないので終了タグが不要

### リス

【HTML】「tr」「th」「td」 の違い

# 「tr」

tr= 「Table Row」
「表の行」という意味。
つまり、「tr」は「表の行」の要素に値する。

# 「th」
th= 「Table Header」
「表の見出し」という意味。
つまり、「th」は「表の見出し」の要素に値する。

# 「td」
td= 「Table Data」
「表のデータ」という意味。
つまり、「td」は「表のデータ」の要素に値する。

# コード
“`haml:index.html

　←表の行

←表の行

←表の行

見出し1
データ1	データ2
データ1	データ2

“`

# まとめ
– 「tr」は「表の行」の要素に値する。
– 「th」は「表の見出し」の要素に値する。
– 「td」は「表のデー

jQueryを少しだけ使って「簡単に画面を切り替える」

# はじめに
今回は、他のページに遷移するわけではなく、１ページの中で画面が切り替わったように見せる方法です!
jQueryの“`hide()“`と“`show()“`を使います!
短いコードでできるので使ってみてください!
[デモ]

イメージしやすいよう、
「input要素に入力された値を、ボタンがクリックされたら次のページに表示する。」という形にしていますが、そこのコードは無視して頂いて大丈夫です!

## 1:htmlの用意
このコードでは、最初の画面を“`input_area“`、
切り替え後の画面を“`output_area“`としています。
“`html

最初の画面

生HTMLからタグを除去する

`vue`の`v-html`や`React`の`dangerouslySetInnerHTML`に出力させているHTMLのテキスト部分だけ必要な場面があったので備忘録

# TLDR

“`ts
const removalTag = (html: string) => {
const domParser = new DOMParser()
const doc = domParser.parseFromString(html, “text/html”)
return doc.body.innerText
}
“`

# 解説

## DOMParserの呼び出し

“`ts
const domParser = new DOMParser()
const doc = domParser.parseFromString(html, “text/html”)
“`

第一引数にHTML、第二引数に`text/html`を渡す。
ここについてはドキュメントの通り。

https://developer.mozilla.org/ja/docs/Web/API/DOMParser

ユーザーごとの学習時間の合計

# はじめに
この記事は筆者がスタディープラスのトレースをする際に、ユーザーの学習時間のランキングを表示するために書いたコードの備忘録になります。
# 実装
deviseの導入と基本となる投稿機能(記事内ではtweets)が完成している前提で進めます。

“`ruby:users_controller
#以下を追記
def index
user = User.all
@arr = []
user.each do |t|
t.sum_time = t.tweets.sum(:time)
@arr.push(t)
end
end
“`
pushメソッドは配列(@arr)の末尾に要素を一つ追加してくれるメソッドです

“`ruby:app/views/users/index.html.erb

Users#index

<% @arr.each do |u| %>
<%= u.email %>
<%= u.sum_time %>

微妙な画面サイズの違いに対応するためのレスポンシブの考え方

## 今回の経緯
このWEB発展した社会で、現在さまざまな端末があります。WEB開発をしていると各端末の微妙な画面サイズの違いで表示が崩れることもあります。

特にクライアントとやりとりしていると、**こっちでは問題ないのに客先ではおかしくなってる**なんてこともザラです。けっこうこのやりとりってお客さんの状況なども聞かないと気づかないことなのでコミュニケーションコストがかかります。あと『この人ショボいな』なんて思われるかもしれません。

現在私が使用している方法で、万能とはいかないけど**画面サイズの微妙な違いなら対応できるようなサイズの計算方法**をご紹介したいと思います。

## 実例（PC）

▼大きめのノートPCサイズ（1344px）
![スクリーンショット 2022-05-04 10.47.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/85aed43f-cf7e-45cf

100日後くらいに個人開発するぞ！day016

## 今日はHTMLとCSSの環境構築をしてみた！

参照：https://prog-8.com/docs/html-env

## エディタ「Visual Studio Code（VSCode）」をダウンロード


## フォルダを作成しHTMLとCSSを記述

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/5b72b15d-51b0-70ab-3a12-9d62ce564aef.pn

ただ15行のシェルスクリプトで個人ナレッジマネジメントツールを作った話

# はじめに

自分が読んだ本や記事などを読む時に書いたノートを体系的に管理したいですよね。
現在優秀なナレッジマネジメントツールはありふれています。企業向けだと
– Confluence
– DocBase
– Qiita Team

などがあります。個人向けは
– Notion
– HackMD
– Boost Note

のようなシンプルで使いやすいツールがあります。マインドマップツールをさらに含めると数え切れません。

筆者自身はミニマリストなので、
– コードのようにGithubで自分のノートを管理したい
– Webからマインドマップ形式になっているノートを確認したい
– サブスグではなく、無料で使いたい

なので、個人ナレッジマネジメントツールを自作したいという発想に至りました。
結果としては下記の15行シェルスクリプト、GitHub ActionsとMarkdownマインドマップ変換ツール`markmap`で作りました。

https://aibazhang.github.io/
項目をクリックすると、各ノートのマインドマップを確認できます。

![](https://s

100日後くらいに個人開発するぞ！day015

## 今日は初級編を復習してみた！


## HTML＆CSS道場レッスン初級編を修了！


## 今日のアウトプット


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

100日後くらいに個人開発するぞ！day014

## 今日はフッターを作ってヘッダーを固定した！


## HTML＆CSS学習レッスン中級編を修了！


## 今日の学び
### 要素を固定する方法
– `position: fixed;`を用いると常に要素を画面上の指定した位置に固定できる
– 固定する位置はtop・left・right・bottomを使って指定する
– 例：imgを左上から10px下で20px右の位置に固定したい場合
– `img{`
– `position:fixed

生JavaScriptのみでなんちゃってスライドショーを作ってみた

GWも変わらず勉強続けるのみ。
最近は暖かいのか寒いのかよくわからない季節ですね。

今回は[Swiper](“https://swiperjs.com/”)や[Keen-Slider](“https://keen-slider.io/”)などプラグインを使わず気合いでVanillaJsでスライドショーを作るという試みをしました。

### なぜプラグインを使わないのか
最初はプラグインを使って質の良いスライドショーにするつもりだったんです。私は[Keen-Slider](“https://keen-slider.io/”)を使おうとnpmインストールを使ってどうたらこうたらしようとしました。
でも実際にインストールしてみるとオプションがたくさんあって何が何だか分からなくなり、「これもう自力で作った方が早いんじゃね？」と思ったのがきっかけです。もっとjsでのモジュールとかの扱い方に慣れてからにしようかなという次第。

### こうなったら自力で…
早速本題に入ります。まずHTMLで要素を並べる。
同時にスライド用のボタンも実装します。画像の領域にボタンを入れたいので同じ箱に入れました。

Bootstrapとは？

# bootstrapについて学んだこと
## bootstrapとは
HTML／CSS／JavaScriptから
構成される最も有名なWEBフレームワーク
###### フレームワークとは
概念的な意味で、何かの枠組みのこと。雛形等
可視化できるもので表現すると
履歴書に引いてある罫線、項目。
雛形を導入することで工数が減る手伝いをしてくれる。

## Bootatrap　メリット
##### コーディング量を減らせる
HTMLファイルととCSSファイル２つに記述しなければならない場合もBootstrapで予め用意されたクラスというものを、HTMLファイルに書くだけで簡単に作成することができます。

##### レスポンシブ対応のデザインを簡単に作れる
レスポンシブ対応とは、PCやスマートフォン、タブレットなど様々なデバイスに適したWebページを制作することを言います。

## Bootstrap デメリット

##### 画一的なデザインになりがち
近年Bootstrapを使用している人は多数いますので、自分なりにカスタマイズしないと、有益なものになりにくくなります。カスタマイ

HTMLでもmatplotlibが使えるってよ。なんならPythonも使えるってよ。

# はじめに
Java ScriptならぬPyScriptがリリースされたようです。
少し試してみました。

# 表示結果
HTMLファイルで、PyScriptを実装しmatplotlibで可視化できるか実験してみました。
ブラウザの表示結果を下記に示します。
確かに動作していることがわかります。


# ソースコード
HTMLファイルのソースコードを下記に置きます。
リーダブルコードだなというのが印象です。

“`html