“`font-size: 62.5%;“`というテクニックがありますよね:thinking:
**デフォルト値に手をかける**ので、**超絶嫌い**なテクニックのひとつです:japanese_ogre:
なのにですね、あちこちで超見かけるんですよ。
検索かけても「**便利！**」という言葉がたくさん並んでいるんです。
超嫌いなんですが、いったいどこから湧いたテクニックなのかわからない。
そこで、時間を見つけて調べようと思って、タイトルを書くだけ書いたら1年溶けてました:rolling_eyes:
そろそろ廃れる頃合いだと思うのですが、現在Webサイト制作の勉強をしている初学者間では、いまだにメインストリームを歩んでいるっぽいので、流行りに乗り遅れたなあと思いつつ、つらつら調べてみました。
# html { font-size: 62.5%; } の概要
**フォントサイズをピクセル**で指定した場合、ユーザーがブラウザ設定でフォントサイズを変更していても**フォントの大きさは変わりません**。
はっきり言って**アクセシビリティ的ではない**ので、**相対でフォントサイ
WebGL の作法を学ぶため作ってみました。
「[正多面体のデータを作る[改] (HTML+JavaScript版)](https://qiita.com/ikiuo/items/d7486f40f2378af15288)」の大幅改造版です。
select, input 等で設定を変更したり、正多面体の向き等をマウスイベントを使って操作可能にしています。
単体の HTML ファイルで動作します。他のファイルに依存していません。
動作確認は Google Chrome バージョン: 108.0.5359.124 (macOS版) で行っています。
RegularPolyhedronViewer.html（長いので折りたたみ）
“`html:Re
どんなサービスにもコンポーネントの端を見ると日付時刻が表示されていますが、意識して注目したことはありますか？（自分はこれまでありませんでした…）
データ通りに日付時刻を表示しているサービスもありますが、サービスの特性に合わせて表現を変えているサービスもありました。
今回は後者のサービスがどの様な特性のサービスで、その表現はどのように実装しているのか調べてみました。
:::note info
インフォメーション
実装はSvelteベースで実装し、動作確認しております。適宜みなさんの実装環境に読み替えてください?♂️
:::
## 現時点からの経過時間を表示するパターン
GitHubを参考例に紹介します。
リポジトリのトップページにあるディレクトリやファイルの右側に表示されている「X days ago」という表示にカーソルを合わせると日付時刻が表示されるようになっています。
ここで日付時刻をそのまま表示せずに現時点からの経過時刻を表示することでパッと見で、コード変更が古いのか新しいのか瞬時に判断ができますね。
見ているデータの新旧情報がユーザーにとって価値のあるサービスで
HTML5プロフェッショナル認定試験 レベル1を受験してきました。
受験の経緯・対策・勉強の中で気づいたことなど書き留めます
# 筆者について
IT歴5年（社会人歴も5年）のフィジカル系エンジニア。
これまでバックエンドの開発（java、javascript、VBA、Python、Rust）を仕事やら趣味やらでしてきました。
その反面、フロントのデザイン周りから散々逃げ続けてきていて、Element UIを使って何とかデザインをしないようにと逃亡を続けてきました。
# 受験経緯
現在参画しているPJにてフロントエンド開発を初めて担当しました。
画面開発をする中で簡単ですがデザイン周りのコーディングをしましたが、当然HTMLとCSSということでプログラミング言語とはまるで毛色がことなるもので意外と苦戦してしまったのでせっかくなら資格取得を通して体系的に勉強しようということで資格の受験をしました。
ただし、現在すでにHTML5は廃止されております。とはいえHTML living standardはHTML5を基礎として派生したHTMLのバージョンなので勉強にはなるはず！
# 試験勉強
# はじめに
`style=”text-align: center;”`のinputを複数並べた際、MacのSafariでtype=”password”のinputだけカーソルが少し左にずれていることに気づきました。
※ChromeやiOSでは起きませんでした。
修正方法を調べたので、備忘録として残します。
パスワードのボタン自体を非表示にする方法と、スタイルを調整する方法の2種類を試しました。
## 対処方法１：パスワードのボタン自体を非表示にする
– ボタンを非表示、ポインターイベントなどを無効化します。
“`scss
.input::-webkit-credentials-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute; // フォーカス時、キーアイコン要素分中央からずれるため指定しています。
right: 0;
}
“`
## 対処方法２：カーソルの
### 【概要】
Google Earthの地球儀表示部分はShadow DOMで生成されています。
Shadow DOMの要素はgetElementByIdなどを使用して取得することができませんが、開発者ツールから取得できます。
取得したShadow DOMに対して、キーボードの”→”キー押下のイベントを発火させることで地球儀を自動回転します。
### 【環境】
Google Chrome
### 【実行手順】
#### 1. Google Earthを起動する
下記リンク先へ遷移します。
[Google Earth](https://www.google.com/intl/ja/earth/)
`Earth を起動`ボタンをクリックします。
新しいタブが開き、地球儀が表示されます。
– [初めに](#初めに)
– [1.Nullish と Falsy](#1nullish-と-falsy)
– [関連参考資料\_1](#関連参考資料_1)
– [2. tsconfig の便利な設定](#2-tsconfig-の便利な設定)
– [関連参考資料\_2](#関連参考資料_2)
– [3. 依存関係の綺麗な図示の仕方](#3-依存関係の綺麗な図示の仕方)
– [関連参考資料\_3
.NETフレームワークでのインクルード方法
こんにちは！見習いIOTエンジニアのめぐみです。
多くの画面で共通するヘッダーフッターやサイドメニューなどは使いまわしたい！
１か所に記載した共通部分を読み込みする「インクルード」ですが、ドットネットフレームワークでは簡単にできる♪と思いきや、苦戦させられました(T_T)
今回の記事ではドットネットフレームワークでのインクルードの方法を書いていきます。
※自分の勉強・備忘録と同じ沼にはまった方の助けになりますように。
まずは「Site.Master」を作ろう！
これが使いまわせる共通部分になります。
プロジェクトを右クリックして「追加」⇒「新しい項目」⇒「WEBFormsのマスターページ」というカッコいい名前をクリックします。
