今さら聞けないHTML　2021年12月21日

【CSS】background-clip: textで背景を文字の形に切り抜く

株式会社ココロファン – エンジニアリング事業部所属のhazamaです。

サイト制作・運用業務をメインに行っています。
最近はWordPressを触る機会が増えたので、関連した記事を書こうと思ったのですが、
CSSで面白そうなものを見つけたので、ちょっと調べてみました。
##background-clipとは
>background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。

引用：https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

本記事では、「text」を指定しますが、引用にもある通り「border-box、padding-box」なども指定でき、主な役割としては要素の背景領域をコントロールするプロパティのようですね。
##使用できるブラウザ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256886/00cee

リソース上では姿を表さないアイツのせいでエラーが起きる

# アイツの正体
ゼロ幅スペース

# 何があった
案件の内にリンクを仕込むものがあった
テキストとかURLとかはタイポとかあったり間違えたりしたらいけないように指示書からコピペすることにしている
今回もいつもと同じようにURLをコピー、href属性にペースト

一通りに作業終わって確認環境にデプロイ、テストへ

**「リンククリックしたら404行くんですが…」**

は？指示書からコピペしたからワタシワルクナイ
とりあえずリソース見てみる

**URLに間違いはない**

確認環境でリンクにカーソル置いて遷移先を見てみたら、

**末尾になんかいる**

`https://***.jp%E2%80%8B`

**%E2%80%8B**
お前か、何者だ
コイツの名は…ゼロ幅スペース

# どうしてそうなった
URLを指示書からコピペしたときに一緒についてきたらしい
リソース上では見えない、しかしコピペしたURLの末尾に入力位置合わせてバックスペース

**見えないコイツは消えた**

バックスペースを押しても入力位置が変わらないということは、ゼロ幅スペースが潜んでいたということだった

Vue.jsの基本の「キ」

#教材用Qiita
プロトタイプをする上で、Vue.jsは何かと便利ですよね。
今回は後輩向けに作った教材を作り直して公開してみました。
サンプルコードみたいな形にしていますので、是非教材などにご利用下さい！

#HTML/CSS/Javascriptの基本形
##基本の形
HTML/CSS/Javascriptの役割分担はざくっとこんな感じ。
・HTML：何を入れるか決めて
・CSS：どう見せるか決めて
・Javascript：どんな処理をするか決めて
良い感じのホームページを作っている。

“`html

margin と col は同時に使ってはいけない（戒め）スタイルが崩れる（迫真）

タイトルの通り，Bootstrap 利用の際に margin と　col は同時に使ってはいけません．スタイルが崩れるので，

##問題

具体的には，

“`

“`

のようにすると．

子divは横並び2つにはなりません．


##解決策

以下のように，「colで分けた」子divに．「margin」孫divを適用してあげるのです．

“`

スプレッドシートをDB代わりにするWebサイトをGASで試しに作ってみた

##HTMLを返してみる
まずシンプルなHTMLファイルを返してみましょう。

###HTMLファイルを作成

1. 適当なスプレッドシートを作成しApps Scriptエディターを開く
1. 画面左側の下記位置にあるファイルの `+` ボタンからHTMLをクリック
1. ファイル名の入力を求められるので適当な名前をつけましょう
ここでは `index` としました。ファイル拡張子は自動で `.html` が付きます。

||
|:–|

すると以下のコードを含んだ `index.html` が作成されます。便利！:yum:

“`html:index.html

仮想DOMとは

## 概要
仮想DOMについて学習したのでアウトプットしたいと思います。

## 結論
仮想DOMとは端的に言うと__効率よくレンダリングを行う仕組み__のことです。

## 前提知識

#### DOM
DOMとはDocument Object Modelの略称で、HTMLを操作するためのAPIのことです。
``や``といった__Node（ノード）__と呼ばれるものがツリー構造になって構築されています。
JavascriptでHTMLを操作する際に使用します。

## DOMが変更される際の仕組み
1. DOMに変更が発生した場合、再度情報を受け取り直してDOMを再構築。
1. 再構築されたDOMをもとに再描画されてブラウザに表示。

通常DOMを変更する場合は、DOMが再構築されるので描画が遅くなってしまいます。
そこで登場するのが__仮想DOM__です。

## 仮想DOMの仕組み
1. DOMに変更が発生する場合、実際のDOMと同じ仮想DOMを作成。
1. 仮想DOM上で変更を反映し、仮想DOMの変更前と変更後の差分を検出。
1. 発生した差分のみを実際

フォームデザインについて考えたこと 〜2021〜

この記事は「弁護士ドットコム Advent Calendar 2021」の 20 日目の記事です。
昨日は @NaokiTsuchiya さんでした。

# はじめに

弁護士ドットコムでエンジニアをしている @blkclct です。2021 年は，フォームのフロントエンド側を実装する機会が多い年になりました．ログインフォームや，会員登録フォーム，問い合わせフォームなど，どのアプリにもありそうなものを，ゆっくり検討するいい機会をいただきました．検討した中で，最低限この辺りは押さえておくとよさそうだな！と思ったものを何個かピックアップして紹介します！そんなの当たり前だよ！という内容もあるかもしれませんが，お手柔らかに．

# 参考にした文献

最初にフォームのことを考える上で参考にした文献を紹介しておきます．

* [Form Design Patterns シンプルでインクルーシブなフォーム制作実践ガイド|Adam Silver,土屋 一彦,株式会社Bスプラウト](https://www.amazon.co.jp/dp/4862464513/)

フォーム実装の基本的なことを,様々なフ

iOSのPWA対応時に気をつけるべきこと

iOS（Safari）は、Androidに比べるとHTML標準仕様への対応が遅れがちです。
PWA仕様への対応も例に漏れず、最新のiOS15.2においても不完全な状態です。

それでもiOS13辺りからはそれなりに使える状態になってきたので、個人的に開発しているWebアプリではiOS13.4以降をPWAに対応させました。

今回はその経験から、iOSのPWA対応時に気をつけるべき事やちょっとしたテクニックを紹介します。

## PWA対応の目的

なぜWebアプリをPWA対応させるのか？

自分としては以下2点がPWA対応の主なモチベーションだと考えています。

– ネイティブアプリのようにスマートフォンのホーム画面に導線を置ける
– アドレスバーなど不要なUI無しのフルスクリーンでWebアプリを起動できる

実はこの2点に関しては、Webアプリモードという機能を使うことでiOS4の頃には既に実現可能でした。

ただWebアプリモードはOAuthが使えなかったり起動時のURLを指定できなかったりブラウザバックできなかったりで使いづらい点も多く、PWAとして良い感じに生まれ変わること

《初心者です》HTML CSS 記述　自動補完についてのメモ

VSCode使用時
Emmet 自動補完ツールの使い方 個人memo
知らなくても書けるが知ってたら便利だそう。

“! + tabキー”

“`HTML

“`

#例: idのついたdivタグを作る
” # + container + tabキー”
” #container + tabキー”

“`HTML

“`

#例: classのついたdivタグを作る
” . + cls + tabキー”
” .cls + t

ブラウザ JavaScript / Node.js の仕組みを知ろう！ ～トラブルに迅速に立ち向かえる様に

## はじめに

近年 JavaScript の需要は増し、Web Application のほとんどは JavaScript を使って動いているのではないかと思います。

もともと JavaScript は [DOM] API (Document Object Model、HTML を JavaScript でから操作できる) の為にありました。[DOM] API を更に使いやすくした [jQuery] 等が流行りましたね。

しかし JavaScript の活用範囲は拡大し、現在では以下の様々な用途で利用されます。

* フロントエンド JS 開発の環境 ([Babel],[Webpack], etc…)
* Web バックエンド ランタイムサーバー ([Node.js], [Express])
* クロスプラットフォームなデスクトップアプリケーションランタイム ([Node.js], [Electron])
* AWS Lambda 等のサーバーレス環境のランタイム

例えばフロントエンド開発をするとき、ローカルマシンに [Node.js] をインストールして使いますが、[N

Canvasを使って画像をテキストの形にくり抜く方法

まずは、完成形の画像とコードを貼ります。

“`jsx
const canvas = document.querySelector(‘canvas.canvas’)
const ctx = canvas.getContext(‘2d’)
let width = window.innerWidth
let height = window.innerHeight
canvas.width = width
canvas.height = height

let image = new Image()
image.src = ‘https://drive.google.com/uc?export=view&id=1Pp6a8w8ChESp4vYF_jhYUfNiidIEtaHT’

image.onload = () => {
draw()
}

const draw = () => {
const scale = Math.max(width / image.width, height / image.height);
const ratioX = (width / 2) – (

Macの設定でスクロールバーの表示を常に表示にした方が良い話

# はじめに
この記事は、ユアマイスター[AdventCalendar2021](https://adventar.org/calendars/6956)の19日目の記事です。
Macの`設定＞一般＞スクロールバーの表示`を常に表示させていなくて痛い目に遭ったので記事にまとめました。

# 概要
スクロールバーの表示を常に表示にするとブラウザを開いた際に、常に表示するスクロールバー分の幅が必要になり、`width`の設定をミスると画面が**横スクロール可能**になってしまう話です。

# `vw` と `%` の違いについて

画面幅いっぱいにコンテンツを表示させる場合`100vw`や`100%`を使うと思います。
`vw`と`%`の違いですぐ思い浮かぶのが`vw`は親要素の横幅に依存せずに画面幅を設定でき、`%`は親要素に依存した画面幅を設定できる点です。

また、

`vh` -> スクロールバーの幅も**含む**
`%` -> スクロールバーの幅も**含まない**

このような違いもあります。

今回の問題はこのスクロールバーの幅の差分によって発生します。

### サンプル画

Bootstrapと Fontawesome で綺麗なLINEアイコンを作る

##プロローグ

アプリ版Noteのフローティングアイコンの様に，綺麗なLINEアイコンを作りたい！
と思った場合，Twiterアイコンのようには単純には作れなかったので以下にソースコードを共有します．

##完成イメージ
ちなみに完成図は以下，


完成リンクは以下．

https://mini.kaedeee.com

##ソースコード
参考までに，Twitterアイコン用のソースコード量よりもLINEアイコン用ソースコードの方が多いことが見て取れます！

“`

HTMLメールの話 ⛄️ 2021冬

この記事は [ビビッドガーデン Advent Calendar 2021](https://qiita.com/advent-calendar/2021/vivid-garden) の19日目です。

はじめまして、北関東に移住したばかりで食べチョクのエンジニアの @naoiwata です。
今回は、最近やっていたHTMLメール作成について、フルスクラッチで作りながら得た知見について書いてみます。

## :christmas_tree: 3行まとめ

* HTMLメール界隈は特に目新しいアップデートはなさそう
* 90年代に戻ってHTMLを書こう
* とにかく実機を使って検証検証検証！

## :memo: 前提

5年前くらいにHTMLメールを書いていた時期があり、今回久々に作るにあたって検証などしましたが、結論びっくりするほど目新しいアップデートはなさそうでした。
今は主流の flexbox はもちろん、float で組み立てることもできません。
外部 CSS ファイル読み込みや、Web font も使えないです。

## :pencil2: 作り方

今回はフルスク

WordPressで役立つHTMLタグ

##目次
1,[はじめに](#1はじめに)
2,[HTMLでよく使うタグ](#2htmlでよく使うタグ)
3,[最後に](#3最後に)

#1,はじめに
この記事は[SLP KBIT Advent Calender2021](https://adventar.org/calendars/6706)の18日目の記事です。
ここでは、私がWordPressでHTMLを勉強していてよく使ったタグについてまとめていこうと思います。

その他のタグについての詳細は[こちらのサイト](http://www.htmq.com/)から。

#2,HTMLでよく使うタグ
HTMLとは、HyperText Markup Languageの略で、ウェブページを作成するために開発されたプログラミング言語です。

“`text
(DOCTYPE宣言。
Document Type Definition(DTD)の略で、そのページがHTMLで書かれていることをブラウザに認識させる。)

(DOCTYPE宣言のすぐ後に記述する。このタグで囲まれた部分がHTMLで書かれた文章であるこ

ターミナルを使わずにHTMLを作る方法(初心者向け)(備忘録)

[環境]MacBook
[概要]
・htmlでwebサイトを作ってみたいけど、どうやってファイルを作成すればいいか分からない人向け
・ターミナルコマンドがわからない人向け
・MacBook使い慣れてない人向け

——————–

#1[テキストエディット]の設定をする


・MacBook内で**[テキストエディット]**を探す


.**[環境設定]**を選択する

![スクリーンショット 2021-12-18 17.32

作品：クレディっト（Kreddit）

#概要

Odin Projectレッスンに従って作ったウェブサイト。

レッスンURL: https://www.theodinproject.com/paths/full-stack-ruby-on-rails/courses/javascript/lessons/javascript-final-project

Github: https://github.com/RistoLibera/Kreddit


作品URL: https://kreddit-unpublic-d62c1.web.app/

#サイトマップ

![Sitemap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613718/0aff2ae0-af62-feca-cdd4-94dafb6d

素のJavaScriptでモーダルを爆速実装する

昨今の便利なフレームワークやライブラリを使えばモーダルの一つや二つ簡単に実装できそうなものですが、素のJavaScriptで実装できるようになっていても損はないはずです！
超簡易的な実装例をご紹介しますので、早速やっていきましょう！

（チャンネル登録と高評価も忘れずにお願いしますww）
## 爆速実装

一応codepenにもコードを置いているので、手元で環境作るのが面倒な場合はささっと確認してみてください！

### 実際にできるやつ

デザインは非常にしょっぱいですが、基本的な考え方は分かりますww


### HTML

“`html
モーダル表示

素振りの練習を充実させませんか？？VRで試合をイメージした練習術！

##こんな経験ありませんか？？
**『試合で打てない！！』『大事な場面で打って、ヒーローになりたい！！』**ただ打撃というものは、奥が深く、中々上達しないですよね、、、汗
プロの打撃フォームを参考にしたから打てる訳でもなく、監督から教わった事を真面目に聞いて、取り入れたからといって打てる訳でもありません。
成功したメジャーリーガーは**『色々な人の打撃フォームを教わる事も重要だが、最終的には、自分の身体にあった、最適なスイングを見つけ出さないと上達する事が出来ないし、無理なフォームにすると怪我する！』**
有名なプロ野球選手は**『バットを上から出して、たたけばヒットが出る時代は、終わった！日々の状態を確認しながら、スイングを変えた方がいい』**など、時代の変化とともに野球の考え方も大きく変わってきているという事ですね！！
送金できないアドレスを判定して弾く

#送金できないアドレス
Symbolでは次のような場合に送金が行えない場合があります
・アドレス制限が行われている場合
・アドレスが正しくない場合
・トランザクションの制限が行われている場合

最近はアドレス制限によってスパムのトランザクションを受け付けないようにしている人も増えています．

これらの送金できないアドレスをトランザクションに組み込んでしまった場合，トランザクションの一部であったとしても送金できないといった問題が発生します．特に沢山の人に向けて行うアグリゲートトランザクションではトランザクションが実行できないリスクが非常に高まってしまいます．

#送金できないアドレスを弾く
これらの問題を解決するには，送金できないアドレスを事前に特定してアグリゲートトランザクションに混ぜないように注意するしかありません．また，送金先にも正しいアドレスを伝えてもらうことが必要です．そこで送金できるか判定するHTMLのフォームを作ってみました．

“`html