f@ctor

今さら聞けないHTML　2021年08月07日

今さら聞けないHTML　2021年08月07日
目次

Firebase Hostingとgapiを使って限定アクセスのスプレッドシートにアクセスする！

# はじめに

こんにちは、高校一年の[Akimasa_L][twitter]です！

世間は自粛自粛っと言ってばかりで最近では緊急事態宣言の発出範囲が増えたようですが、僕のようなパソコンオタクは緊急事態宣言が出ていようがなかろうが何も変わらずこの夏休み中は家に引きこもり続けてずっとパソコンの画面とにらめっこしています。

最近はコロナの影響もありうちの学校でも様々な学校行事が中止になったようですが、どうやらうちの校長は行事やる気まんまんらしく、今年度は文化祭と体育祭はやることになっているようです(ほんとに大丈夫なのか？)。

そんなこともあって、今回は僕らの学校がやっていた文化祭・体育祭関連のことについてお話したいと思います。

# 今までやっていたこと

どうやら僕たちの学校の文化祭・体育祭ではTシャツを着るという文化があるらしく、所属している団体部門やクラス、学年等によってそれぞれ独自の色・デザインのTシャツを着ているようです。

そこで重要になってくるのがTシャツのサイズの問題らしく、今までは各クラスごとでそのようなSとかMとかを一人づつ名簿に書いていって超アナログにやっ

元記事を表示

HTMLの＜nav＞まとめ

#HTMLの＜nav＞まとめ

html触ってて、＜nav＞? ん？＜nav＞ってなんぞや！！！ってなったので、備忘録ついでにまとめました。

nav要素、navタグってよばれているこれ＜nav＞…..＜nav＞は、ナビゲーションメニューを設定するときに用います。
ナビゲーションメニューってなんぞやって思うかもしれませんので、実際に書いてみました。コレです↓

元記事を表示

【Unity(C#)】UniWebView4使ってUnityでWebView表示

##はじめに
[UniWebView4](https://assetstore.unity.com/packages/tools/network/uniwebview-4-175993)とはアプリ内でWEBサイトを表示したい場面で役に立つアセットです。

初めて使用する際にいろいろとわからないことが多かったので
メモを残しておきます。

## バージョン情報

| 諸々名前 | バージョン |
|:-:|:-:|
| Unity | 2020.3.4f1 |
| UniWebView4 | 4.9.0 |
| UniRx | 7.1.0 |

##デモ

フルスクリーンで半透明のWebViewを表示し、WebView上のボタン押下でCubeを動かすサンプルです。

![WebViewDemo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/8de94df7-f428-6bd4-a4f6-98a4b1b30518.gif)

##コード

まずはHTMLです。
デモなので超簡易で

元記事を表示

iOS11~12台のSafariでは、landscape時かつアドレスバー展開時に下部に50pxのスクロール可能領域が発生する

##タイトル通り
about:blankのページを開き、html・body要素のheightに関わる数値を0pxに指定、`overflow: hidden;`とした状態であれど、タイトルのような現象が発生する。
ちなみに本記事はただの備忘録です。

##どうしたか

プロダクトの仕様上、

– `document.body.scrollHeight === innerHeight`でありたい
– `scroll`や`touchmove`の差し止めをすることはできなかった

という条件があったため、妥協の下

“`js:sample
const scrollPrevent = () => {
if (window.pageYOffset > 0) window.scrollTo(0, 0);
}
window.addEventListener(“touchend”, scrollPrevent);
“`
とした。

元記事を表示

はじめまして、

はじめまして、miru-kululuです。
よろしくお願い致します。
＃駆け出しエンジニアとつながりたい
＃本日の積み重ね

元記事を表示

『Angular Webアプリ開発 スタートブック 初版』を勉強中に躓いたこととその解決策

　『Angular Webアプリ開発 スタートブック 初版』を勉強中に躓いたこととその解決策を共有します。

# 躓きの原因
　一言で書いてしまうとバージョンの違いに尽きるかと思います。この書籍が出版された2018年4月時点でAngularのバージョンは5、一方で私の環境では12を使用しています。

“`
> ng version

Angular CLI: 12.1.4
Node: 16.2.0 (Unsupported)
Package Manager: npm 7.13.0
OS: darwin x64

Angular: 12.1.4
… animations, cli, common, compiler, compiler-cli, core, forms
… platform-browser, platform-browser-dynamic, router

Package Version
———————————————————
@angu

元記事を表示

【Quill】editorの内容を書き換える

Quillエディタの中身を更新するとき、HTML構成に沿って書き換えないといけません。
ちゃんと理解してなかったし、詰まったので、メモ。

###QuillのHTML
自分のコードのHTMLはこれだけしか書かれてないんです。

“`html

“`
ですが、開発者ツールで見れば実体はこんな感じ。

“`html

　

　

　

　　
元記事を表示

Vue.jsで動画サイトによくある動画のプログレスバーを作る

# はじめに
YouTubeなどの動画サイトによくある再生時間のプログレスバー（サムネイル画像の下に表示される赤色のバーなど）を作ってみます。

# TL;DRな方へ

## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271414/12f766ae-a6a5-a717-9060-4cb652e9736b.png)
サムネイル画像の下に赤色のバーとグレーの背景が表示されています。
現在の再生時間が500秒で全体が1000秒で設定しているので、赤色のバーがちょうど真ん中の位置まで達していることがわかります。

## コード
“`vuejs:movie.vue