今さら聞けないHTML　2022年08月26日

人事のおじさんプログラミングを学ぶ Day7「while文を使って繰り返す」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
While文を使って繰り返してみた。

ウェブデザイン技能検定2級　令和4年度　対策　実技

実技の対策はYoutubeに参考の動画がありました。
学科の対策は公式の過去問やGoogle検索で見つけたもので学習。

Safari上のinput:dateの大きさを変えるのに少し手間取った話

# どういうことか

“`“`
“`“`
“`“`

これらの要素は大きさを`%`で指定したときに、想定した大きさになってくれませんでした。
これを解決するために行った内容の備忘録になっています。

# 結論

1. 最低限以下の内容を指定しましょう。
“`css
input[type=”date”],
input[type=”time”],
input[type=”datetime-local”] {
-webkit-appearance: none;
height: 1em;
}

input[type=”date”]::-webkit-date-and-time-value,
input[type=”time”]::-webkit-date-and-time-value {
text-align: left;
}
`

hrefやsrc属性のパス名の修正漏れをチェックするために属性値をリストするコマンドを作った

imgタグのsrc属性やaタグのhref属性などに書くパス名を本番環境ではサイトルート相対にしておく必要があったので、ちゃんと書き換えたかHTMLファイルを提出する前にチェックしたい。他にもimgタグのalt属性に書き忘れがないかなども。

こんな時、HTMLエディタ上でファイル内を検索しながらチェックするのが面倒だったので、HTMLファイルからタグの属性と設定値をリストに出力するコマンド[list-attr](https://github.com/kazhashimoto/list-attr)をnode.jsで作りました。

https://github.com/kazhashimoto/list-attr

## 使い方
以下の例で、入力のサンプルに使ったindex.htmlは記事の最後にあります。

### imgタグのsrc属性やalt属性をリストする
コマンドにオプションを指定しない場合は、imgタグのsrc属性とalt属性を抽出します。

“`bash
list-attr index.html
“`

list-attrコマンドからの出力は属性が１行につき１個ずつ表示

過去の自分のコードを修正してみる – PHP カレンダー編③

# 前回までのまとめ
これを

“`php

\n

\n

\n

“;
$t++;
} elseif (($t == 1) or ($t == 2)) {
print “

“;
$t++;
} else {
print “

“;
$t = 0; //次の段へ
}

“`

こうした

“`php

if ($t === 0) :
?>

数式の余白を設定する方法

# はじめに

v3のMathJaxで数式の`margin`や`padding`を設定する方法が、調べても意外と見つからなかったので書き残しておきます。

# 解決策

以下をHTMLのどこかに追加します。

“`html

“`

`[display=”true”]`がついていない方がinlineの方のスタイルで、`[display=”true”]`がついている方がdisplayの方のスタイルです。

元記事を表示

ポートフォリオとして、寝ていたら起こしてくれるCamera SleepというWebアプリを作成しました。

# はじめに
Camera Sleepというアプリを作成しました。
パソコンの前で作業をしているときに、つい寝てしまった時に、起こしてくれるアプリです。
使用場面としては、会議中につい寝てしまうような時に、起こしてくれるよう想定しました。
ただし、会議にはパソコンを持ち込む必要があります。

アプリのURLはこちらです。
https://camera-sleep.herokuapp.com/index.html

githubのソースコードはこちらです。
https://github.com/shosuke1989/camera-sleep

# アプリの説明
– 目を閉じているかwebカメラで判定し、寝ていると判定した場合音を鳴らします。
– 寝ている場合にメールを送信することもでき、スマホのバイブレーションで眠気を覚まさせます。
– メール記入欄に、メールアドレスを記入すると寝ている場合に、メールが送信されます。
– メールが届かない場合は、アドレスが間違っているか、迷惑フィルタがかかっている可能性があります。
– 目を閉じているか判定する閾値を調整することで、精度を上げることがで

元記事を表示

過去の自分のコードを修正してみる – PHP カレンダー編②

# 前回のおさらい
[前回](https://qiita.com/kei_0_f/items/61d20d691cb02a84e2eb)は、これを

“`php

\n

\n

\n “; $t++; } “` こうした “`php \n 元記事を表示 ファイルアップロード機能をファイル選択ボタン非表示で行う方法 ## 前提 ・ ファイルアップロード機能を作りたい人 ・ 「ファイルを選択」ボタンを表示させたくない人 ## ファイルアップロード 通常ファイルアップロード機能を作る場合、「input type=”file”」にすると思うが、それだとファイル選択が表示される。  “`html “` こういった「ファイルを選択」ボタンを出さないようにするにはどうすれば良いのだろうか。   元記事を表示 SSR と CSR の違いを図で表してみた # はじめに SSR と CSR の違いを説明するために、一目で把握できる資料が欲しかったので作成してみました。 どっちがどういうときに有利なのか、といった考察はしません(うまくまとめる能力もないので?)。 以下の違いを表現することが主な目的です。 – 最終的な HTML が生成されるタイミング – ダウンロードされるデータ量 # 用語解説 – SSR – **S**erver-**s**ide **R**endering の略 – CSR – **C**lient-**s**ide **R**endering の略 # 概略図  # まとめ 自分の表現力の乏しさにはがっかりですが、実際に説明するときにうまく使えれば良いなぁ、と思ってます?。 元記事を表示 過去の自分のコードを修正してみる – PHP カレンダー編① # これは何？ PHP処女作のコードの一部を、ある程度PHPに触れた今の私がツッコミ入れていく記事です。 PHPで4か月分×3段の年間カレンダーを作った時のコードの抜粋です 何回かに分けて投稿します…~~私が自分のコード読むの疲れるので~~ # ①条件に合わせてテーブルにあてるスタイルを変えたかった “`php \n \n “; $t++; } “` は？ ## ①-1 絶対わざわざprintしなくていい “`php PHP HTML CSS HTML5 PHP7 元記事を表示 HTML １．はじめに 　本ブログではUdemyのWeb Developer Bootcampを受講した中で、 　学習した内容のアウトプットを兼ねてWeb開発の手法を記載していく。 　 ２．概要 　Webページを構成するコードの１つであるHTMLについて前回「画面の中に何があるか」がHTMLだと記載したが、 　実際にどのような構成になっているのかを記載する。 　 ３．本文 ・HTMLとは 　他のプログラミング言語のように処理やフローを書く言語ではなく、 　Webページを構成する文章に対して「ここは見出し」「ここは本文」など文章の構造を示すタグを記述する言語である。（これをマークアップ言語と言い、HTMLはHyperTextMarkupLanguageの略称） 　例： 　HTMLの記述がないデータをブラウザで表示 　 　`または`math.div`を必ず使う ※他にも変更点はありそうだが私が気をつけたのは2点です ※`@import`は **2022年10月1日には廃止** されるからまじで早く切り替えたほうがいい（ちなみに私は同僚に聞くまで知らなかった） # `@use`とは 読み込んだスタイルシートにのみに適用される。 たとえば`common.scss`に`button.scss`を読み込ませるときはこう。 “`scss @use “button”; “` コンパイルされた`common.css`には`button.scss`のスタイルが適用される。 ## 変数とmixinの読み込ませ方 `common.scss`に変数ファイル`color.scss`と`button.scss`を読み込ませて、`button.scss`で変数を使おうとするとエラーになる。 “`scss //　こ 元記事を表示 人事のおじさんプログラミングを学ぶ Day5「比較演算子、データ型」 書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、 数あてゲーム～比較演算子、データ型までやってみた。 テキスト閲覧せずには書けないけれども、まずは考えすぎず進めよう。  元記事を表示 ajaxでリクエストしたレスポンスをもとにエラーメッセージを表示する仕組みを簡単に一枚図で説明する # やりたいこと ### ボタンをクリックすると、、、 ### エラーメッセージが表示される ## 一枚絵 元記事を表示 初めてのウェブサービスに縦書きエディタを選んだ理由（２） # 1.はじめに 　55歳を過ぎてWebの勉強を始め、[縦書きエディタ](https://www.sakubun.tokyo)を開発した[前回の記事](https://qiita.com/tategaki3/items/14266860629892376d29)が、思いのほかよく読まれたので、勝手に続編を上げさせてもらいます。コーディングも開発も技術系記事の執筆もなにもかも手探り。おかしい面も多々あることかと思いますが、遠慮なくご指摘ください。 # 2.縦書きにこだわる理由 　さて前回、縦書きエディタを開発した理由にGIGAスクールが関係していると書きました。児童・生徒が学校で使うChromebookのGoogle系ツールに縦書き機能がなく、国語の先生が困っているという話です。 　Googleは欧米の企業なので、Googleドキュメントなどが横書きなのは自然なことです。問題は日本語が縦書きも横書きもOKなことです。日本で出版される小説や文庫本、新書などは縦書きが主流ですが、技術系の雑誌や本はほとんどが横書きです。縦書きの文化を担ってきた出版、雑誌、新聞などのマスコミ業界はいずれも斜 元記事を表示 【HTML & JavaScript & CSS】夏休みの自由研究的な感じでシューティングゲーム作ってみた。 # はじめに :::note alert シューティングゲームと書いていますが、そんな大層なものではないです。 プレイヤーがいて、敵がいて、少し動いて、弾が出る、その程度です。 プレイヤーは〇インビーを模しています。 ::: 5日ほど夏季休暇があったので、何かを作ってみたいなという気持ちがあり挑戦してみました。 シューティングゲームの作り方は調べるとゴロゴロ出てくると思うのですが、折角？なので直接作り方を調べることはせずに手探り状態で自分なりに実装しました。 作業としては(本記事作成含め)1日2～3時間程度です。 滅茶苦茶なコードですが、すべて晒します。 汚いものを見ても耐えられる方のみ気が向いたときにご覧ください。 https://github.com/tacchan5424/CSSPrac # アウトプット ※[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)を使うと遊ぶことができます。 ![k1d4y-xjxj9.gif](https://qiit 元記事を表示 datalistで選択後にも候補を全て表示させる # 概要 HTMLの< datalist >要素は、選択後に候補が選択したものしか表示されなくなります。 再度、全ての候補を表示させるには、選択した候補を削除する必要があります。 今回はjqueryを使って、選択後も全ての候補が表示されるようにします。 # ソースコード “`test.html プログラミング言語 元記事を表示 OTHERカテゴリの最新記事 2024.09.19 JavaScript関連のことを調べてみた 2024.09.19 JAVA関連のことを調べてみた 2024.09.19 iOS関連のことを調べてみた 2024.09.19 Rails関連のことを調べてみた 2024.09.19 Lambda関連のことを調べてみた 2024.09.19 Python関連のことを調べてみた