今さら聞けないHTML　2022年10月29日 │ f@ctor

1. Webアプリ開発完了
- 1.1. Next>>My Portfolio webサイトの作成

【技術書まとめ】HTML&CSS コーディング・プラクティスブック 1 実践シリーズ

現在のHTML&CSSを整理するために読んだ。参考になったコードをメモ。

# 参考になったコード
### CSSでハンバーガーメニューを作成する
“`html

“`
“`css
/* スクリーンリーダー用のテキスト */
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

/* ナビゲーションボタン */
.nav-button {
box-sizing: content-box;
padding: 0;
outline: none;
border: none;
background: none;
width: 20px;
he

元記事を表示

なんか厨二病が再発したのでCSSで超カッコいい(当社比)レーザーエフェクトを5つ作った。

！？！？！？！？！？！？！？！？！？！？！？！？！？！？！？
![メッ〇ールをデリート.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/e4796a09-9d78-bb43-8412-c1701e3271dd.gif)
※@Yametaroさんの[「ティウンティウンCSS」](https://qiita.com/Yametaro/items/114301213ee525c096b5)と組み合わせてます。

※レーザーエフェクトのソースコードは一番下にGitHubのリンクで貼っています

# 概要
本記事はレーザーエフェクトの紹介だけの記事です。
学びについてはコチラの記事に書いてます。

https://qiita.com/yowatsuyoengineer/items/8a370f27fe1ffd393268

CSSを学習中の方向け

元記事を表示

【CSS】あなたはCSSの知識をどこからキャッチアップしていますか？

## はじめに

みなさんは、CSSを勉強する時はどのようにしていますか？

よくTwitterなどでは、Qiitaではなく、公式ドキュメントを参照しようといった趣旨のツイートがみられます。

確かに、**[W3C](https://www.w3.org/)** や **[MDN](https://developer.mozilla.org/ja/docs/Web/HTML)** といったところのドキュメントを読みCSSについての知識について理解を深めるのも1つの方法ですよね..

ただ、Qiitaのような個人が書いている記事にも魅力があります。

W3Cが想定してないような面白い使い方があったり、さまざまな表現方法があったりと、
新しい知見につながるものが多くあります。

そのため、今回は、私が普段CSSの知識や知見をキャッチアップしているサイトをまとめてみました。

ぜひストックして、参考にしていただけると嬉しいです。

また、今回は、知識や知見をキャッチアップするのに適していると感じているサイトをリストアップしているので、
もし、おすすめのサイトがあったら、ぜひコメントくださ

元記事を表示

html{font-size: 62.5%; }、html{font-size: 1vw; }、font-size: calc(10 / 375 * 100vw);の違い

`html{font-size: 62.5%; }div{font-size:2rem;} span {font-size:2em;}とした時`

remとemについて(remはhtml基準、emは親要素基準)

ブラウザの文字サイズ設定中の時＝16pxの0.625==>10px基準で、1.6remとすると16px扱い

https://i.gyazo.com/f5dd4b0233b5da1ba74ffb7788e78f01.png
https://i.gyazo.com/235eb45538351c3c828007004a2fbbc7.png
https://i.gyazo.com/5e62762a52a6bfa36955137790a19d27.png

—

`html{font-size: 1vw; }div{font-size:2rem;} span {font-size:2em;}とした時`

https://

元記事を表示

Webを支える技術のまとめ(1部)

# はじめに
「Webを支える技術」を読んで，その内容を自分の知識と織り交ぜながら自分なりにまとめました．
(「Webを支える技術」のリンクは最後の参考文献に記載しています．)
# Webとは何か
文書を公開，閲覧するためのシステム．
Web上の文章は，ハイパーテキストという言語で記述されている．
World Wide Webの略．
## Webの用途
1. Webサイト
– 検索サイト，ブログ，etc
2. UI
– デバイスの設定画面，HTMLを用いたファイルの記述
3. API
– Web API

## Webを支える技術
1. HTTP,URI,HTML
– HTTP：Webサーバがクライアントとやりとりする際の通信プロトコル(get,post etc)
– URI：Web上のあらゆる情報を識別するための識別子のようなもの
– HTML：ハイパーテキストを記述するための言語
2. ハイパーメディア
– 色々なメディアをハイパーリンク(Webページの参照)で繋げて構成したシステム
3. 分散システム
– 複数のコンピュータによって

元記事を表示

?JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-](https://qiita.com/mmaumtjgj/items/ef7bf1116988bfeedd84)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## popup.js
前回popupのHTMLを作成したので色々と動きをつけるためにjsファイルを記入します。
このjsファイルには
・タブの切り替えの処理
・タイマーを表示させる
・スタート/ストップ/リセットの各ボタン機能
・タイマー作動中の有無で表示する画面の処理
と多くの処理を行う。

この記事ではタブの切り替えの処理を記述していく。

### タブの切り替えの処理
タブの切り替えは[こちらの記事](https://blog-and-destroy.com/24218)を参考に

元記事を表示

【Vue3】フォーカス時にテキストが全選択される input

![focusdemo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474068/0602a001-93a5-6c3d-dc95-d21605439b65.gif)

“`vue

“`

ユーザーが１クリックでコピー / 削除 / 入力などの作業を行えるので便利です。

　
　

フロントエンドのことをよく呟いています
 画面端から引っ張るデザインのメモ
コーディングデザインで画面の端からのデザインがありましたので、そのデザイン方法。
先にコードから
~~~html

~~~

~~~css
.container{
max-width: 1200px;
margin: 0 auto;
padding: 30px;
}

.children{
max-width: calc(100vw – (50% – (1200px / 2)));
width: calc(100% – 0px);
}
~~~
上のコードは最大幅が１２００pxの時の例
`(50% – (1200px / 2))`で左右余白の半分の幅が求まり`-100vw`することで、範囲が画面端からコンテナ端まで伸びます。
コンテナの中で幅を狭めたいときは`.children`の`width`にその値を引く。
下の参考記事はより詳しく書いています。

### 参考
[CSSのcalcで片側だけグリッドガイドライン外へ飛び出した

元記事を表示

【JavaScript】アイコンでパスワードの表示を切り替える(複数)

![スクリーンショット 2022-10-25 151336.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2041536/26c83c15-96d8-e5c5-34b4-8cbd4b102542.png)

アイコンを押下したらパスワードの表示/非表示を切り替え、なおかつアイコンも変化させたいと思いまして久しぶりJs,,
HTML側
~~~html:html
// font Awesome使用するにあたってのCDNコード

元記事を表示

face-api.jsのリサイズを理解する【技術メモ】【小ネタ】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/b6d31427-3ef7-8a1a-d68e-896254c9be43.png)

# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています。

今回も、face-api.jsネタです。

# リサイズを使いこなしたい
[face-api.js](https://github.com/justadudewhohacks/face-api.js)を気に入ってよく使っています。

特によく使っているのが、
・顔検出
・68点顔ランドマーク検出
の2つの機能。

face-api.jsには標準で検出のリサイズ方法があるのですが、
実はあんまり使ったことが無く…
今回はここへの理解を深めたいと思います。

# リサイズが必要な理由
検出に使ったソースの解像度と、画面に表示するキャンバスのサイズが一致するとは限りませ

元記事を表示

CSSの単位についてお勉強

## はじめに
派遣スタッフさん(未経験の方)にCSS単位の説明をさせて頂いた際に「難しい」と仰っていました。

おそらく「私の説明が悪い」そして「私の理解度低い」ことが原因と思われる。

そこで、私の理解を深めるためにも纏めてみました。

当記事に訪れた方が、少しでも理解が深まることを祈っております。

## 相対単位と絶対単位
まず、CSSで使える単位は、**絶対単位**と**相対単位**に分類されます。

* 絶対単位
親要素や他要素のサイズに影響されることなく、指定したサイズそのものを表す単位です。
例えば、ブラウザを画面を大きくしたり、小さくしたりなどしても**絶対単位を指定した内容は変わらない**ことになります。

* 相対単位
他の要素と比較することで大きさが決まる単位のことであり、比較することで大きさが変わります。
絶対単位とは違い、常に別の要素を基準として、「○○(他要素)に対する割合」という指定をします。
例えば、ブラウザを画面を大きくしたり、小さくしたりなど画面表示の大きさ(基準)に対して**相対単位を指定した内容も変わる**ことになります。

## なぜ相対単

元記事を表示

Progate Web開発コース終了

Webアプリ開発完了

Nodejsを用いてデータベース型のWebアプリを作成した。

・スマホから見やすい画面を作る
・ユーザごとに別の買い物メモを作れるようにする

のような機能を追加していきたいなと思った。

とりあえず基礎的なWebアプリを制作した。自分の現状は、レシピを見て料理ができる人に過ぎないのでもっと積極的に知的好奇心をこのまま探求し続けて頑張っていく。どんどん作りたいものが増えていく一方で学ばなければならないことが追い付いていない状況なので物事を順序だてて考えていきたい。(下書きに入れっぱなしで投稿が遅れてしまった)

Next>>My Portfolio webサイトの作成

トライデントコンピューター専門学校ウェブデザイン学科の生徒さんたちのPortfolioをざっと見て、このようなWebサイトを1か月未満で作成したい。以下にリンク。

[Webトライデントコンピュータ専門学校](https://tridentwebdesign.blog.fc2.com/e/protfolio2022?sp)

元記事を表示

とはblock要素とinline要素

`

`
– block要素
– 縦方向に配置される。
– 縦幅と横幅を指定できる。

``
– inline要素
– 横方向に配置される。
– 縦幅と横幅を指定できない。

元記事を表示

押すと死んじゃうボタン

# こんなボタンが欲しいと思ったことはありませんか？

みなさん、クリックすると「ティウンティウンティウン・・・」と死滅してしまう、そんなボタンが欲しいと思ったことはありませんか？

今回はそれを作ってみました。

# こんな感じ

押すと死んじゃうボタン作ってみた pic.twitter.com/7szLVhJJFY

— 無職やめ太郎（本名） (@Yametaro1983) October 24, 2022

# 作り方〜HTML編〜

HTMLはこれだけです。

“`html:HTML

元記事を表示

rel=”noopener”

# rel=”noopener”とは？
一種のセキュリティ対策で、`target=”_blank”`で開いたページに仕込んである悪意のあるコードから元のページを守ることができる。
`rel=”noopener”`を使用しなければ、遷移先に`window.opener.location = “hogehoge.com”`とあれば、遷移してきた元のページが`hogehoge.com`に置き換わってしまう可能性があり、フィッシング詐欺に遭う可能性が出てくる。
“`
Google
“`

## 参照
– [リンクのへの rel=noopener 付与による Tabnabbing 対策](https://blog.jxck.io/entries/2016-06-12/noopener.html)
– [HTML 本当は怖い target=”_blank” 。rel=”noopener” ってなに？](https://chaika.hatenablog.com/

元記事を表示

サーバ上のpythonとブラウザ上のjavascriptとデータ通信を行う

# やりたいこと
– pythonで簡単なゲームのプログラムを書いた。
– HTMLを駆使しながら、ブラウザ上の「GUI」でこのゲームができるようにしたい。
→　javascriptとpythonでデータのやり取りができれば大体OK

# この記事で説明すること
ここでは **WebSocket** の基本的な使い方をまとめておきます。
– javascript ↔ pythonのデータ通信が簡単に実装できる。
– ゲームユーザ（クライアント）がゲームから途中離脱した場合などの接続管理が簡単になるっぽい。複数人が個別でバラバラに接続してもOK。

# さっそくサンプル
### 使い方
1. webscoketsをpython環境にインストール
“conda install -c conda-forge websockets“を実行すればOK。簡単。

1. 下の“server.py“を保存して実行。
“`python:server.py
”’Echoサーバの実装”’
import asyncio
import websockets

# この関数に通信しているとき

元記事を表示

faviconに絵文字を使う

## TL;DR

?の部分を任意の絵文字に変更することで、その絵文字をfaviconとすることができます。

“`html SNS共有リンクまとめ（LINE、Twitter、Facebook）
# リンクの挙動
LINE：友達に送る
Twitter：タイムラインに投稿
Facebook：タイムラインに投稿

## LINE
“`html
LINEで共有
“`

## Twitter
“`html
Twiiterで共有
“`

## Facebook
“`html
Facebookで共有
“`

# まとめ
検索するとアイコンがあらかじめ用意されていたり、iframeが使われているものが多かったため、aタグで

元記事を表示

cdコマンドと相対path

### cdコマンド
Change Directoryの略

[~] ユーザー,ホームディレクトリ
[.] 現在いるディレクトリ　（cd使ってもカレントディレクトリは変わらない)
[..]　現在いるディレクトリの一階上(finderで開くと左側)に移動
[/]　最高位ディレクトリ

### 相対パスについて
##### 同じフォルダ内、同じ階層のindex2.htmlをリンク
“`index.html
アンカーリンク
or
アンカーリンク
“`
##### 1階層下のtestフォルダ内index2.htmlをリンク
“`index.html
アンカー
or
アンカー
“`
##### 2階層下test/about/index2.htmlをリンク
“`index.html

元記事を表示

INSERT文のカラムと値を一覧化しました。

## 経緯

INSERT文を修正する際に、使用している値がどのカラムの値なのか
一目でわからなかったため作成しました。

## 画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604560/d1bd7de4-956f-1de7-c6b9-0212237c2240.png)

画面半分にして使用するのを前提としているので全画面表示だと表示位置がずれます。

## コード

コピペしてHTMLファイル作成すれば動きます。

“` HTML

Easy Insert

今さら聞けないHTML 2022年10月29日

Webアプリ開発完了

Next>>My Portfolio webサイトの作成

今さら聞けないHTML　2022年10月29日