[html5] タグが付いた質問
HTML5 (HyperText Markup Language 5)とは、人間に読解が容易なセマンティックなコーディングを特徴とする、HTMLの5番目のバージョンである。HTML 4.xと比べ、より厳密な文章構造を要求する仕様となっている。また、article(記事)や、section(節)などの特別な意味を持つタグも追加されており、より「文書」としての意味付けを高度化させることが出来るようになっている。なお、ビデオ等のマルチメディアの再生・ドラッグ&ドロップ・オフライン処理等のAPIも追加されている。
286
質問
0
票
0
回答
55
閲覧数
HTMLにクラスルームの内容を表示したい
こんにちは、私はアプリケーションを作っており一つのことで躓いています。
HTMLにGoogle Classroomの各クラスのハイパーリンクを置いてるのですが、これをNodeJS(Javascript)に置き換えたいのですが具体的なコード例を教えていただけませんか?
日本語の情報が少なく検索をかけても他のプログラムのコード例しか出てこない(言い訳すみません)のでChatGPtに頼り切りなのです。
...
0
票
1
回答
94
閲覧数
タブレットでChromeブラウザ でoption 要素が disabled しない
シンプルなOption要素でDisabledしたいのですが、タブレットでChromeから見るとDisabledされません。
<select name="fruits">
<option value="peach" disabled>peach</option>
<option value="apple">apple</...
0
票
0
回答
93
閲覧数
flask jinjaテンプレート内での制御文エラーについて
flaskでページネーションの実装をおこなっていましたが、
どうしても、下記のエラーが解決できません。
user_maintenance.html内のfor文やif文のブロックに問題があるようですが、
{% endfor %}や{% endif %}はじっかりとfor文、if文に対応できていると思っております。
エラー文の
閉じる必要がある最も内側のブロックは「for」です。
という箇所も、...
0
票
1
回答
112
閲覧数
JavaScript&HTMLを使用したモールス信号変換機能で1文字以上でも判定・変換されるようにしたい。
javascriptとhtmlを使用してアルファベットからモールス記号に変換する機能を実装したい
下記のコードでinputタグに入力した値が連想配列のkeyと合致していた場合、合致した文字の値(モールス記号)を表示するところまでは作れたのですが、一文字ずつしか変換できず、解決方法がわかりません。
期待する出力
inputタグにHELLOを入力 => ・・・・ ・ ・-・・ ・-・・ --- ...
1
票
2
回答
178
閲覧数
あるセレクタの直下かつ先頭というCSSセレクタはありますか?
こちらのspanには適用させず、
<div>テキスト<span>テスト1</span>テキスト<div>
こちらのspanには適用できるセレクタを探しています。
<div><span>テスト2</span>テキスト<div>
divの直下かつ先頭(テキストを除く)という擬似クラス等はないのでしょうか。...
0
票
1
回答
280
閲覧数
セレクトボックスを2つ選択してメッセージなどを表示するには
セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~
次では、セレクトボックスで選択をすれば、メッセージが表示されるようになっています。
<script type="text/javascript" language="javascript">
function onButtonClick()...
0
票
1
回答
136
閲覧数
Bootstrapの検索フォームがiPhoneで表示が崩れる
Bootstrapを使い、このサイトを参考に検索フォームを作成した。
<div class="input-group">
<input type="text" id="search-form" class="form-control input-group-prepend" ...
0
票
1
回答
150
閲覧数
ページによってheaderの色が変わるようにしたい
やりたいこと
ページを移動した際に、ヘッターの文字の色が変わるようにしたいです(Aのページだと、この色。Bのページだとこの色、みたいな。)
現状
以下のようなコードでheaderを書いています。仮にこのbackground -colorをページごとに変えたいときはどのように書けばいいでしょうか?
条件分岐みたいな書き方をするのか、それとも違うクラスを与えたりするのか、よくわかりません。...
0
票
0
回答
450
閲覧数
javascriptで、配列内の文字を改行したいです。
以下のJavaScriptのプログラムがあります。
これは、1問目と2問目をそれぞれ松山市と高松市と入力すれば50と出力されるようなプログラムになっています。
さらに、そこに加えて、それとは別に配列が用意され、50の場合には「あいうえお」と出力されるようなプログラムになっています。
ところが、例えば仮に「あいう」と「えお」という風に改行することができません。
...
0
票
0
回答
177
閲覧数
リンクのアドレスを取得したい
拡張機能を作成しようとしています。
リンクを右クリックし、コンテキストメニューに追加した新しい項目をクリックしたときに、リンクのアドレスを取得したいです。
現時点では、右クリックをしたらコンテキストメニューに項目が追加されるようにはなっているのですが、クリックしたリンクのアドレスを取得する方法が分かりません。わかる方いらしましたら、お手数をおかけしますがよろしくお願いします。
現時点でのコードです↓...
0
票
0
回答
171
閲覧数
冗長なHTMLマークアップとは何か、セマンティクスの評価の基準について
HTMLでのマークアップについて、セマンティクス的な観点でのマークアップの「適切さ」を評価するにはどう考えれば良いのでしょうか。
code-1
直感的には、code-1 のマークアップは冗長であり不適切(不自然)に思います。p 要素タグで括る必要がないと思います。
// (code-1)
<ul>
<li><p>テキスト</p></li&...
0
票
0
回答
558
閲覧数
スクロールするとページが縦に揺れます
スクロールすると各要素が縦に揺れます。
各要素を一つずつ消してみても、揺れはなおりませんでした。
ページはこちらです。
https://unagi-ryousin.com/
現象の確認方法としては、下にスクロールさせてから上にすぐ戻すと、ページが縦に揺れます。特に「量深の人気商品」より下の、商品が並んでいる辺りの画像の部分をスクロールしてみると分かりやすいです。TOPページのみ発生しています。
...
0
票
1
回答
1,002
閲覧数
HPを作成中ですが、CSSとSCSSが反映されません。
現象
作成中のHPをVS CodeのLive Serverでプレビューとして見た。
CSSとSCSSが反映されない。
期待値
logo.svgをwidth: 120px;、height: 40px;に設定したい。
再現手順
下記のコードをGoogle Chromeで実行する。
index.html
<!DOCTYPE html>
<html lang="ja"&...
0
票
1
回答
61
閲覧数
Javascriptでフォーム調整プログラム(その他を選択時に追加の選択事項を表示、選択させる)を書きたいです
プログラムを最近独学で始めたのですが、インターネットで調べながらやってみたい動作が
なかなか上手く動作しません。
下のプログラム単体では動くのですが、
elements、len、sele_valを『elements1、elements2、elements3』といった形で増やす
と動作しなくなってしまいます。
動かしたいプログラムとして、
・『その他』を選択した時のみ、『その他詳細』...
0
票
1
回答
1,421
閲覧数
JavaScriptで計算した結果をHTMLに表示したいです
現象
JavaScriptで適正体重(身長(m)の2乗×22で求める)を算出したいが、index.htmlから入力した身長(m)を入力しても何も起こらない。consoleにはエラーが出現する。
以下、実際に出現したconsoleのエラー
期待値
入力フォームに身長(m)を入力したら、適正体重が表示されること。
再現手順
下記のコードを実行する。
index.html
<!DOCTYPE ...
1
票
1
回答
418
閲覧数
position:fixed;のaの階層を一番上にする方法
背景にbeforeを使って画像を表示させたaを、fixedで追従するメニューのようにしました。
しかし背景に画像を表示させる関係でbeforeのz-indexを-1にしてしまったため、他のdiv要素が邪魔して追従時に隠れてしまいます。
あれこれz-indexを変えたりpositionを入れてみたりしているのですが解決できません。
この場合は階層順をどのようにすればいいのでしょうか?
...
1
票
1
回答
108
閲覧数
メニューをクリックするとメニュー文字が動いてしまう
メニューをクリックすると画像がメニュー文字の背後に出てくるものを作ったのですが、画像が出てくると同時に文字が左に押し出されてしまって不自然になってしまっています。z-indexで上下をいじってみたりしましたがよくわからず…わかる方ご教示していただけると助かります。画像が出てくるのはjQueryでクラスをつけたり消したりする処理をしています。
<!DOCTYPE html>
<...
4
票
5
回答
976
閲覧数
ブラウザで開いてるページの ajax 通信の内容を自動でローカルファイルに残したい
ウェブアプリの ajax 通信の内容を自動でローカルファイル等にダンプしたいです
tcpdump で特定のドメインIPがソースのパケットをファイルにダンプすればできなくはなさそうですが
HTTP ヘッダとかを分離しないといけないので大変です
chrome の開発ツールで
ネットワーク > XHR > Name が特定のエンドポイント
の場合のレスポンスボディだけを
...
0
票
1
回答
277
閲覧数
透過的コンテンツモデルの仕様について知りたいです
HTML5からコンテンツ・カテゴリー、コンテンツ・モデルなどが導入されましたが、その中でも「透過的コンテンツモデル」という概念(仕組み?)がよく理解できず困っています。
例えば下記MozillaのMDN Web Docsの中では、
要素が透過的コンテンツモデル (transparent content model) を持っている場合、透過的な要素が削除されたり、子要素で置き換えられたりしても、...
0
票
1
回答
853
閲覧数
jQueryにてdiv要素にキー入力を代行させる方法
やりたいこと
下記のdiv要素である"down"をクリックしている間は、下矢印キーを押し続けている扱いにする方法はないでしょうか?
試す限りでは押し続けている判定は、onmousedownを使えば出来そうですが、javascriptに「キー入力を代わりに入力させる」方法がわかりません。
<div class="down">
<h1&...
1
票
1
回答
168
閲覧数
表示されているフォントを知る方法はありますか? [重複]
下記画像のようにChromeデベロッパーツールでFontを調べてみました。
Arial, "Helvetica Neue", Helvetica, ... とあるのは、ブラウザーがArialがあれば、Arialを使う、なければ、Helvetica Neueを使う、と順に搭載されているフォントがあれば使うよっていう命令だと思うのですが、今知りたいのはこの順番ではなくて、...
0
票
1
回答
371
閲覧数
Webにおいて、ドラッグ・アンド・ドロップで画像を任意の位置に移動させる処理の種類と名称を知りたい。
諸注意 ※追記
この質問は、「下記ご回答いただきたいこと」の回答は得られていないため解決済みにしておりませんが、質問者の根本的な問題が解決しましたので実質解決済みであります。
詳細は「回答」欄の筆者コメントよりご確認ください。
やりたいが、分からなくて困っていること
Webにおいて、ドラッグ・アンド・ドロップで画像を任意の位置に移動させる処理の種類と名称を知りたいです。
...
0
票
0
回答
132
閲覧数
サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかかる。PCサイズでもややひっかかりを感じる。
サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかります。
下記がコードになります。コンテンツに高さを持たさせるために AやBといったアルファベット一文字を多用していますが、そこはコンテンツに高さを持たせるためなので気にしないでください。
環境: Mac OS 10.15.5, Chrome Version 88.0.4324.192 (Official Build) ...
0
票
1
回答
2,585
閲覧数
JavaScriptでwindowのサイズ可変を制限するには
JavaScriptで500pxより下にwindow幅を小さく出来ないようにJavaScriptで制限をかけたいのですが、そのようなAPIは提供されているのでしょうか?
調べてみて、window.minWidthという物が出てきたのですが上手く動作しなかったです。
chromeで動作すれば良いです。
すいませんよろしくお願いします。
0
票
1
回答
1,000
閲覧数
JavaScriptでPNG画像などのデータをバイナリ形式で取得したい
FileReader.readAsText()のサンプルを試して動作させているのですが、PNG画像を選択すると文字化けしてしまいます。
文字化けしないようにするにはどうしたら良いでしょうか?
やりたいことは、PNG画像のデータを以下のようなバイナリ形式で受け取り、これをそのままデータベースに保存したいです。データはサーバ側でPythonを動作させているのでそちらで受け取りたいです。
b'\...
0
票
1
回答
124
閲覧数
HTML,CSS gridなしで画像配置をしたい
画像の配置調整を行いたいです。
大きく2つあります。
1つ目
1段目を2段の両端に揃えて均等配置配置したいです。
→ 現状上手くいっておらず、解決策を教えて頂きたいです。
2つ目
3段目の2枚を2段目の左側に配置したい為、gridを使用して調整しています。
Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。
→ CSS変換など試したのですが、上手くいきません。
...
0
票
1
回答
55
閲覧数
formで囲ったラジオボタンから選択された値を取り出したい
本来フォームに囲まれた中なら下記のコードでチェックされた値を取得出来るのですが、おそらくnav, Ul, li 等を使用しているので上手く取得出来ないのでしょうか?
let DOM = {}
DOM.languageInputs = document.querySelectorAll('.language input[name="country"]')
console.log(DOM....
0
票
1
回答
6,143
閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
1
票
1
回答
170
閲覧数
区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。
現象
区切り線だけ表示されて「または」というテキストが表示されないです。
期待値
区切り線の途中に「または」というテキストを表示したいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、...
0
票
2
回答
380
閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1
回答
728
閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
1
回答
295
閲覧数
CSSグリッドで画像の位置を指定しても、指定した位置に画像がフィットしません。
現象
CSSグリッドで画像(image_0.svg)の位置を指定しても、指定した位置に画像がフィットしません。
期待値
画像がgrid-column: 3 / -3; grid-row: facebook-logo;で指定した位置にフィットさせたい。
再現手順
下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。
index.html
<...
0
票
1
回答
1,104
閲覧数
SCSSの記法で出てくる $this: & !global; の意味は?
以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか?
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
scss
.p-hoge{
$this: & !global;
display:flex;
background-color:#f00;
&--...
0
票
3
回答
168
閲覧数
javascriptが動きません
前提・実現したいこと
javascriptでリアルタイムの計算がしたい
発生している問題・エラーメッセージ
定価と掛け率を掛けた結果を単価に表示させたいのですがうまくいきません。
該当のソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=&...
0
票
2
回答
2,621
閲覧数
iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない
下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。
addEventListenerの第三引数をtrueにして試してもみたのですが結果は同じでした。
実際のiframe内に読み込むページはTwitterの埋め込みウィジェットになるので、
...
0
票
0
回答
113
閲覧数
form送信ボタン押しても現在の表示がキープできるようにしたい。
formで送信ボタン押して、input要素3項目打ち込まなければエラー表示がでて、全項目打ち込んだら次のページにリンクするようにしたいのですが、3項目打ち込まずにsubmitした時ページの先頭に戻るのを避けたかったのでjqueryで記述したら表示はキープされるようになったのですが、エラー表示に対応したPHP側が反応しなくなりました。どうしても原因がわからなく解決方法を教えていただきたいです。
&...
1
票
1
回答
1,516
閲覧数
HTML5 <input type="datetime-local"> step について
以下の HTML を Chrome で表示すると時間入力とポップアップするカレンダーのような入力が出ます
<input type="datetime-local" step=600>
ボックスからの入力の方はどうやっても step 以外入力できないのですが
カレンダー入力からは任意の分が入力できてしまい非常に使いにくいUIになってしまいます
...
0
票
1
回答
522
閲覧数
プルダウンが、うまく表示されません。
プルダウンメニューがうまく表示されません。
現状
プルダウンをクリックしても開きません。
実現したいこと
↓クリックすると、以下のように表示するようにしたい。(テキスト入力はなし)
なお、[ここに表示] というテキスト部分は、プルダウンの項目を選択したら対応するJSONのプロパティの値を表示します。(数字)
HTML
<!DOCTYPE html>
<html lang=&...
0
票
1
回答
261
閲覧数
選択した項目のjsonプロパティのvalueの値を変数に代入し表示したい。
選択した項目の、オブジェクトのプロパティの2つめのデータ(数字)を変数subvalueに代入して、
出力したいのですが、$(x.list)にしてみたり色々しているのですが、うまくできません。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8&...
1
票
1
回答
3,067
閲覧数
<input type="date">に入力中の値を取得することは出来ないのでしょうか
<input type="date">で、画面上で年のみ入力した状態で、ボタンイベントを発火した際に、
画面上に入力中の年の情報を取得する方法はありますでしょうか?
具体的には、以下画像の状態で、messageボタンを押下した際に、「2020」という値を取得する方法が知りたい内容です。
ブラウザのデバッガにて、<input type="date&...
0
票
1
回答
799
閲覧数
Leaflet チェックボックスの判定をしてマーカーの削除をしたい。
Leaflet チェックボックスの判定をしてマーカーの削除をしたい
現在のコードとして、チェックボックスを入れると、県にピンが立つような感じです。
クリックする度に、ピンが立つので影がついていってしまいます。
東京がONになったら、東京にピンが立って、OFFになったらピンが消えるような感じにしたいのですが、コードの想像もできません。
分かる方、教えて頂きたいです。
<!DOCTYPE ...
0
票
1
回答
97
閲覧数
ページ全体 (上下左右) の余白を無くすことができません
現象
出張 - Airbnb のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。
ご教授よろしくお願いいたします。
期待値
サイト全体の上下左右の余白を無くしたいです。
再現手順
下記コードを実行すると再現できます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>...
0
票
1
回答
130
閲覧数
JavaScriptで.valueを使っているのにvalueではなくHTMLタグが返ってくる
前提・実現したいこと
JavaScriptを学習中の初学者です。
JavaScript・jQueryで思うような値が返ってこないため、悩んでいます。
発生している問題・エラーメッセージ
下記ソースコードの出力1と出力2が同様の結果を返すと考えましたが、以下のように異なる結果が出力されてしまいます。
出力1: テスト1
出力2: <input class="waypoint"...
3
票
2
回答
637
閲覧数
javascriptのFileAPIで読み込み途中のデータを取得することは可能ですか?
ブラウザ上で、クライアントPCに保存されている点群データを操作をしようと考えています。
FileAPIで取得したfileオブジェクトを、FileReaderで読み込むことができることはわかりました。
ここからが質問なのですが、FileReaderで読み込んでいるデータを、途中で読み込み処理を停止して、停止した所までのデータを取得・操作することは可能でしょうか?
利用ケースとしては、...
0
票
3
回答
374
閲覧数
HTMLUnknownElementの仕様は定義されているのでしょうか?されていないのでしょうか?
javascript - HTMLで独自タグを使うのは仕様上問題ないのか - スタック・オーバーフロー
一部引用:
DOM の仕様では HTMLUnknownElement という要素が定められていて、不明な要素を扱うことができます。
そのため、現時点では不明な要素を利用しても問題なく動作すると思います。
しかしながら、将来的に新しい要素が追加される可能性があります。...
3
票
1
回答
142
閲覧数
Webページの横幅はどう決めるべき?
Webブラウザ上で利用する業務アプリを開発しています。
最近のPCやタブレットは1920X1080以上の解像度がありますが
Webページとして横幅はどのように決めるべきなのでしょうか。
基礎的なことなのかもしれませんが教えてください。
色々なサイトで書かれていることを見ましたが、950-1000が一般的との記載があったり、
最近は1200PX以上とか。。 どれも感覚的な説明で、...
0
票
1
回答
303
閲覧数
タブごとに別の計算結果を表示させたい
前提・実現したいこと
開始時間と終了時間の入力をさせ、その差分によって金額を表示するフォームを作成しています。
railsとjQueryを使用しており、機能は以下のようなものです。
・タブ切り替えができる
・どのタブも同じ内容の計算フォームが表示される
・タブごとに時間入力でき、計算結果を表示させることができる
なお、計算フォームは部分テンプレートで切り出しています。
発生している問題・...
0
票
1
回答
600
閲覧数
scriptタグのasyncとdeferプロパティの指定する手順
やりたいこと
目的1.ページ読み込み完了前に実行する(jQueryやグローバルナビゲーションなど)js読込
目的2.ページ読み込み完了後に実行する(クリックしたら一番上までスクロールなど)js読込
Q.下記組み合わせがあると思うのですが、やりたいことをそれぞれ実現するためにはどうすれば良いですか?
目的に応じて、それぞれ2つに分け、js読込を記述しようと考えています。
記述場所
・</...
1
票
1
回答
615
閲覧数
<input type="file" accept="..."> の拡張子フィルタで、大文字小文字を区別する方法
htmlでファイルの投稿ボタンを以下のように作りました。
<form>
<input type="file" accept=".jpg">
...
</form>
windowsのgoogle-chromeでこのボタンを実行してファイル選択ダイアログを開くと、拡張子".jpg" と ".JPG" のファイルが表示されます。
この時、...
1
票
1
回答
247
閲覧数
phina.jsで当たり判定を取得できない
phina.js Tips集 #当たり判定編 - Qiita
上記サイトを参考にphina.jsライブラリを使用し、下記のコードで四方八方から向かってくる正方形をよけてスコアを稼ぐ避けげーを作ろうと思っているのですが、100行目の
if(shape.hitTestElement(sprite)){
var self = this;
...