[html5] タグが付いた質問

HTML5 (HyperText Markup Language 5)とは、人間に読解が容易なセマンティックなコーディングを特徴とする、HTMLの5番目のバージョンである。HTML 4.xと比べ、より厳密な文章構造を要求する仕様となっている。また、article(記事)や、section(節)などの特別な意味を持つタグも追加されており、より「文書」としての意味付けを高度化させることが出来るようになっている。なお、ビデオ等のマルチメディアの再生・ドラッグ&ドロップ・オフライン処理等のAPIも追加されている。

絞り込み
並べ替え
タグ付けされた
0
0 回答
55 閲覧数

HTMLにクラスルームの内容を表示したい

こんにちは、私はアプリケーションを作っており一つのことで躓いています。 HTMLにGoogle Classroomの各クラスのハイパーリンクを置いてるのですが、これをNodeJS(Javascript)に置き換えたいのですが具体的なコード例を教えていただけませんか? 日本語の情報が少なく検索をかけても他のプログラムのコード例しか出てこない(言い訳すみません)のでChatGPtに頼り切りなのです。 ...
meruna's user avatar
  • 1
0
1 回答
94 閲覧数

タブレットでChromeブラウザ でoption 要素が disabled しない

シンプルなOption要素でDisabledしたいのですが、タブレットでChromeから見るとDisabledされません。 <select name="fruits"> <option value="peach" disabled>peach</option> <option value="apple">apple</...
Chihiro Japan's user avatar
0
0 回答
93 閲覧数

flask jinjaテンプレート内での制御文エラーについて

flaskでページネーションの実装をおこなっていましたが、 どうしても、下記のエラーが解決できません。 user_maintenance.html内のfor文やif文のブロックに問題があるようですが、 {% endfor %}や{% endif %}はじっかりとfor文、if文に対応できていると思っております。 エラー文の 閉じる必要がある最も内側のブロックは「for」です。 という箇所も、...
user avatar
0
1 回答
112 閲覧数

JavaScript&HTMLを使用したモールス信号変換機能で1文字以上でも判定・変換されるようにしたい。

javascriptとhtmlを使用してアルファベットからモールス記号に変換する機能を実装したい 下記のコードでinputタグに入力した値が連想配列のkeyと合致していた場合、合致した文字の値(モールス記号)を表示するところまでは作れたのですが、一文字ずつしか変換できず、解決方法がわかりません。 期待する出力 inputタグにHELLOを入力 => ・・・・ ・ ・-・・ ・-・・ --- ...
Eta Carinae's user avatar
1
2 回答
178 閲覧数

あるセレクタの直下かつ先頭というCSSセレクタはありますか?

こちらのspanには適用させず、 <div>テキスト<span>テスト1</span>テキスト<div> こちらのspanには適用できるセレクタを探しています。 <div><span>テスト2</span>テキスト<div> divの直下かつ先頭(テキストを除く)という擬似クラス等はないのでしょうか。...
roki's user avatar
  • 29
0
1 回答
280 閲覧数

セレクトボックスを2つ選択してメッセージなどを表示するには

セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 次では、セレクトボックスで選択をすれば、メッセージが表示されるようになっています。 <script type="text/javascript" language="javascript"> function onButtonClick()...
泉北love's user avatar
0
1 回答
136 閲覧数

Bootstrapの検索フォームがiPhoneで表示が崩れる

Bootstrapを使い、このサイトを参考に検索フォームを作成した。 <div class="input-group"> <input type="text" id="search-form" class="form-control input-group-prepend" ...
ForestSeo's user avatar
0
1 回答
150 閲覧数

ページによってheaderの色が変わるようにしたい

やりたいこと ページを移動した際に、ヘッターの文字の色が変わるようにしたいです(Aのページだと、この色。Bのページだとこの色、みたいな。) 現状 以下のようなコードでheaderを書いています。仮にこのbackground -colorをページごとに変えたいときはどのように書けばいいでしょうか? 条件分岐みたいな書き方をするのか、それとも違うクラスを与えたりするのか、よくわかりません。...
sasaharukimedes's user avatar
0
0 回答
450 閲覧数

javascriptで、配列内の文字を改行したいです。

以下のJavaScriptのプログラムがあります。 これは、1問目と2問目をそれぞれ松山市と高松市と入力すれば50と出力されるようなプログラムになっています。 さらに、そこに加えて、それとは別に配列が用意され、50の場合には「あいうえお」と出力されるようなプログラムになっています。 ところが、例えば仮に「あいう」と「えお」という風に改行することができません。 ...
泉北love's user avatar
0
0 回答
177 閲覧数

リンクのアドレスを取得したい

拡張機能を作成しようとしています。 リンクを右クリックし、コンテキストメニューに追加した新しい項目をクリックしたときに、リンクのアドレスを取得したいです。 現時点では、右クリックをしたらコンテキストメニューに項目が追加されるようにはなっているのですが、クリックしたリンクのアドレスを取得する方法が分かりません。わかる方いらしましたら、お手数をおかけしますがよろしくお願いします。 現時点でのコードです↓...
yushi's user avatar
  • 3
0
0 回答
171 閲覧数

冗長なHTMLマークアップとは何か、セマンティクスの評価の基準について

HTMLでのマークアップについて、セマンティクス的な観点でのマークアップの「適切さ」を評価するにはどう考えれば良いのでしょうか。 code-1 直感的には、code-1 のマークアップは冗長であり不適切(不自然)に思います。p 要素タグで括る必要がないと思います。 // (code-1) <ul> <li><p>テキスト</p></li&...
quickstar's user avatar
0
0 回答
558 閲覧数

スクロールするとページが縦に揺れます

スクロールすると各要素が縦に揺れます。 各要素を一つずつ消してみても、揺れはなおりませんでした。 ページはこちらです。 https://unagi-ryousin.com/ 現象の確認方法としては、下にスクロールさせてから上にすぐ戻すと、ページが縦に揺れます。特に「量深の人気商品」より下の、商品が並んでいる辺りの画像の部分をスクロールしてみると分かりやすいです。TOPページのみ発生しています。 ...
Macc's user avatar
  • 1
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"&...
atago_IT's user avatar
  • 237
0
1 回答
61 閲覧数

Javascriptでフォーム調整プログラム(その他を選択時に追加の選択事項を表示、選択させる)を書きたいです

プログラムを最近独学で始めたのですが、インターネットで調べながらやってみたい動作が なかなか上手く動作しません。 下のプログラム単体では動くのですが、 elements、len、sele_valを『elements1、elements2、elements3』といった形で増やす  と動作しなくなってしまいます。 動かしたいプログラムとして、 ・『その他』を選択した時のみ、『その他詳細』...
Hunt - JPN's user avatar
0
1 回答
1,421 閲覧数

JavaScriptで計算した結果をHTMLに表示したいです

現象 JavaScriptで適正体重(身長(m)の2乗×22で求める)を算出したいが、index.htmlから入力した身長(m)を入力しても何も起こらない。consoleにはエラーが出現する。 以下、実際に出現したconsoleのエラー 期待値 入力フォームに身長(m)を入力したら、適正体重が表示されること。 再現手順 下記のコードを実行する。 index.html <!DOCTYPE ...
atago_IT's user avatar
  • 237
1
1 回答
418 閲覧数

position:fixed;のaの階層を一番上にする方法

背景にbeforeを使って画像を表示させたaを、fixedで追従するメニューのようにしました。 しかし背景に画像を表示させる関係でbeforeのz-indexを-1にしてしまったため、他のdiv要素が邪魔して追従時に隠れてしまいます。 あれこれz-indexを変えたりpositionを入れてみたりしているのですが解決できません。 この場合は階層順をどのようにすればいいのでしょうか? ...
wan's user avatar
  • 25
1
1 回答
108 閲覧数

メニューをクリックするとメニュー文字が動いてしまう

メニューをクリックすると画像がメニュー文字の背後に出てくるものを作ったのですが、画像が出てくると同時に文字が左に押し出されてしまって不自然になってしまっています。z-indexで上下をいじってみたりしましたがよくわからず…わかる方ご教示していただけると助かります。画像が出てくるのはjQueryでクラスをつけたり消したりする処理をしています。 <!DOCTYPE html> <...
wan's user avatar
  • 25
4
5 回答
976 閲覧数

ブラウザで開いてるページの ajax 通信の内容を自動でローカルファイルに残したい

ウェブアプリの ajax 通信の内容を自動でローカルファイル等にダンプしたいです tcpdump で特定のドメインIPがソースのパケットをファイルにダンプすればできなくはなさそうですが HTTP ヘッダとかを分離しないといけないので大変です chrome の開発ツールで ネットワーク > XHR > Name が特定のエンドポイント の場合のレスポンスボディだけを ...
user avatar
0
1 回答
277 閲覧数

透過的コンテンツモデルの仕様について知りたいです

HTML5からコンテンツ・カテゴリー、コンテンツ・モデルなどが導入されましたが、その中でも「透過的コンテンツモデル」という概念(仕組み?)がよく理解できず困っています。 例えば下記MozillaのMDN Web Docsの中では、 要素が透過的コンテンツモデル (transparent content model) を持っている場合、透過的な要素が削除されたり、子要素で置き換えられたりしても、...
vinylvinylvinyl's user avatar
0
1 回答
853 閲覧数

jQueryにてdiv要素にキー入力を代行させる方法

やりたいこと 下記のdiv要素である"down"をクリックしている間は、下矢印キーを押し続けている扱いにする方法はないでしょうか? 試す限りでは押し続けている判定は、onmousedownを使えば出来そうですが、javascriptに「キー入力を代わりに入力させる」方法がわかりません。 <div class="down"> <h1&...
スパーサー's user avatar
1
1 回答
168 閲覧数

表示されているフォントを知る方法はありますか? [重複]

下記画像のようにChromeデベロッパーツールでFontを調べてみました。 Arial, "Helvetica Neue", Helvetica, ... とあるのは、ブラウザーがArialがあれば、Arialを使う、なければ、Helvetica Neueを使う、と順に搭載されているフォントがあれば使うよっていう命令だと思うのですが、今知りたいのはこの順番ではなくて、...
shingo.nakanishi's user avatar
0
1 回答
371 閲覧数

Webにおいて、ドラッグ・アンド・ドロップで画像を任意の位置に移動させる処理の種類と名称を知りたい。

諸注意 ※追記 この質問は、「下記ご回答いただきたいこと」の回答は得られていないため解決済みにしておりませんが、質問者の根本的な問題が解決しましたので実質解決済みであります。 詳細は「回答」欄の筆者コメントよりご確認ください。 やりたいが、分からなくて困っていること Webにおいて、ドラッグ・アンド・ドロップで画像を任意の位置に移動させる処理の種類と名称を知りたいです。 ...
sck's user avatar
  • 15
0
0 回答
132 閲覧数

サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかかる。PCサイズでもややひっかかりを感じる。

サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかります。 下記がコードになります。コンテンツに高さを持たさせるために AやBといったアルファベット一文字を多用していますが、そこはコンテンツに高さを持たせるためなので気にしないでください。 環境: Mac OS 10.15.5, Chrome Version 88.0.4324.192 (Official Build) ...
shingo.nakanishi's user avatar
0
1 回答
2,585 閲覧数

JavaScriptでwindowのサイズ可変を制限するには

JavaScriptで500pxより下にwindow幅を小さく出来ないようにJavaScriptで制限をかけたいのですが、そのようなAPIは提供されているのでしょうか? 調べてみて、window.minWidthという物が出てきたのですが上手く動作しなかったです。 chromeで動作すれば良いです。 すいませんよろしくお願いします。
wataru's user avatar
  • 1,123
0
1 回答
1,000 閲覧数

JavaScriptでPNG画像などのデータをバイナリ形式で取得したい

FileReader.readAsText()のサンプルを試して動作させているのですが、PNG画像を選択すると文字化けしてしまいます。 文字化けしないようにするにはどうしたら良いでしょうか? やりたいことは、PNG画像のデータを以下のようなバイナリ形式で受け取り、これをそのままデータベースに保存したいです。データはサーバ側でPythonを動作させているのでそちらで受け取りたいです。 b'\...
wataru's user avatar
  • 1,123
0
1 回答
124 閲覧数

HTML,CSS gridなしで画像配置をしたい

画像の配置調整を行いたいです。 大きく2つあります。 1つ目 1段目を2段の両端に揃えて均等配置配置したいです。 → 現状上手くいっておらず、解決策を教えて頂きたいです。 2つ目 3段目の2枚を2段目の左側に配置したい為、gridを使用して調整しています。 Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。 → CSS変換など試したのですが、上手くいきません。 ...
チョコレート's user avatar
0
1 回答
55 閲覧数

formで囲ったラジオボタンから選択された値を取り出したい

本来フォームに囲まれた中なら下記のコードでチェックされた値を取得出来るのですが、おそらくnav, Ul, li 等を使用しているので上手く取得出来ないのでしょうか? let DOM = {} DOM.languageInputs = document.querySelectorAll('.language input[name="country"]') console.log(DOM....
wataru's user avatar
  • 1,123
0
1 回答
6,143 閲覧数

フォームのlabelとinputの位置を揃えたい。

現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。 <div class="song__info-cover"> <div class="song__info"> ...
wataru's user avatar
  • 1,123
1
1 回答
170 閲覧数

区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。

現象 区切り線だけ表示されて「または」というテキストが表示されないです。 期待値 区切り線の途中に「または」というテキストを表示したいです。 再現手順 facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。 下記のコードを、...
atago_IT's user avatar
  • 237
0
2 回答
380 閲覧数

ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。

現象 ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。 期待値 ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。 再現手順 facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
atago_IT's user avatar
  • 237
0
1 回答
728 閲覧数

重複があるHTML要素から重複した要素だけを取り除きたい

文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。 ご教授よろしくお願いします。 <ul> <li> <h3> Jack <...
user42571's user avatar
0
1 回答
295 閲覧数

CSSグリッドで画像の位置を指定しても、指定した位置に画像がフィットしません。

現象 CSSグリッドで画像(image_0.svg)の位置を指定しても、指定した位置に画像がフィットしません。 期待値 画像がgrid-column: 3 / -3; grid-row: facebook-logo;で指定した位置にフィットさせたい。 再現手順 下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。 index.html <...
atago_IT's user avatar
  • 237
0
1 回答
1,104 閲覧数

SCSSの記法で出てくる $this: & !global; の意味は?

以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか? BEMのmodifierでスタイルを切り替える時の書き方 - Qiita scss .p-hoge{ $this: & !global; display:flex; background-color:#f00; &--...
wataru's user avatar
  • 1,123
0
3 回答
168 閲覧数

javascriptが動きません

前提・実現したいこと javascriptでリアルタイムの計算がしたい 発生している問題・エラーメッセージ 定価と掛け率を掛けた結果を単価に表示させたいのですがうまくいきません。 該当のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset=&...
shimoda's user avatar
0
2 回答
2,621 閲覧数

iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない

下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。 addEventListenerの第三引数をtrueにして試してもみたのですが結果は同じでした。 実際のiframe内に読み込むページはTwitterの埋め込みウィジェットになるので、 ...
a10a's user avatar
  • 349
0
0 回答
113 閲覧数

form送信ボタン押しても現在の表示がキープできるようにしたい。

formで送信ボタン押して、input要素3項目打ち込まなければエラー表示がでて、全項目打ち込んだら次のページにリンクするようにしたいのですが、3項目打ち込まずにsubmitした時ページの先頭に戻るのを避けたかったのでjqueryで記述したら表示はキープされるようになったのですが、エラー表示に対応したPHP側が反応しなくなりました。どうしても原因がわからなく解決方法を教えていただきたいです。 &...
matafall's user avatar
1
1 回答
1,516 閲覧数

HTML5 <input type="datetime-local"> step について

以下の HTML を Chrome で表示すると時間入力とポップアップするカレンダーのような入力が出ます <input type="datetime-local" step=600> ボックスからの入力の方はどうやっても step 以外入力できないのですが カレンダー入力からは任意の分が入力できてしまい非常に使いにくいUIになってしまいます ...
user avatar
0
1 回答
522 閲覧数

プルダウンが、うまく表示されません。

プルダウンメニューがうまく表示されません。 現状 プルダウンをクリックしても開きません。   実現したいこと ↓クリックすると、以下のように表示するようにしたい。(テキスト入力はなし) なお、[ここに表示] というテキスト部分は、プルダウンの項目を選択したら対応するJSONのプロパティの値を表示します。(数字) HTML <!DOCTYPE html> <html lang=&...
user42039's user avatar
0
1 回答
261 閲覧数

選択した項目のjsonプロパティのvalueの値を変数に代入し表示したい。

選択した項目の、オブジェクトのプロパティの2つめのデータ(数字)を変数subvalueに代入して、 出力したいのですが、$(x.list)にしてみたり色々しているのですが、うまくできません。 [html] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8&...
user42039's user avatar
1
1 回答
3,067 閲覧数

<input type="date">に入力中の値を取得することは出来ないのでしょうか

<input type="date">で、画面上で年のみ入力した状態で、ボタンイベントを発火した際に、 画面上に入力中の年の情報を取得する方法はありますでしょうか? 具体的には、以下画像の状態で、messageボタンを押下した際に、「2020」という値を取得する方法が知りたい内容です。 ブラウザのデバッガにて、<input type="date&...
user41913's user avatar
0
1 回答
799 閲覧数

Leaflet チェックボックスの判定をしてマーカーの削除をしたい。

Leaflet チェックボックスの判定をしてマーカーの削除をしたい 現在のコードとして、チェックボックスを入れると、県にピンが立つような感じです。 クリックする度に、ピンが立つので影がついていってしまいます。 東京がONになったら、東京にピンが立って、OFFになったらピンが消えるような感じにしたいのですが、コードの想像もできません。 分かる方、教えて頂きたいです。 <!DOCTYPE ...
アイス's user avatar
0
1 回答
97 閲覧数

ページ全体 (上下左右) の余白を無くすことができません

現象 出張 - Airbnb のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。 ご教授よろしくお願いいたします。 期待値 サイト全体の上下左右の余白を無くしたいです。 再現手順 下記コードを実行すると再現できます。 index.html <!DOCTYPE html> <html lang="en"> <head>...
atago_IT's user avatar
  • 237
0
1 回答
130 閲覧数

JavaScriptで.valueを使っているのにvalueではなくHTMLタグが返ってくる

前提・実現したいこと JavaScriptを学習中の初学者です。 JavaScript・jQueryで思うような値が返ってこないため、悩んでいます。 発生している問題・エラーメッセージ 下記ソースコードの出力1と出力2が同様の結果を返すと考えましたが、以下のように異なる結果が出力されてしまいます。 出力1: テスト1 出力2: <input class="waypoint"...
Nakamura Yuji's user avatar
3
2 回答
637 閲覧数

javascriptのFileAPIで読み込み途中のデータを取得することは可能ですか?

ブラウザ上で、クライアントPCに保存されている点群データを操作をしようと考えています。 FileAPIで取得したfileオブジェクトを、FileReaderで読み込むことができることはわかりました。 ここからが質問なのですが、FileReaderで読み込んでいるデータを、途中で読み込み処理を停止して、停止した所までのデータを取得・操作することは可能でしょうか? 利用ケースとしては、...
外神雅人's user avatar
0
3 回答
374 閲覧数

HTMLUnknownElementの仕様は定義されているのでしょうか?されていないのでしょうか?

javascript - HTMLで独自タグを使うのは仕様上問題ないのか - スタック・オーバーフロー 一部引用: DOM の仕様では HTMLUnknownElement という要素が定められていて、不明な要素を扱うことができます。 そのため、現時点では不明な要素を利用しても問題なく動作すると思います。 しかしながら、将来的に新しい要素が追加される可能性があります。...
shingo.nakanishi's user avatar
3
1 回答
142 閲覧数

Webページの横幅はどう決めるべき?

Webブラウザ上で利用する業務アプリを開発しています。 最近のPCやタブレットは1920X1080以上の解像度がありますが Webページとして横幅はどのように決めるべきなのでしょうか。 基礎的なことなのかもしれませんが教えてください。 色々なサイトで書かれていることを見ましたが、950-1000が一般的との記載があったり、 最近は1200PX以上とか。。 どれも感覚的な説明で、...
hiro's user avatar
  • 31
0
1 回答
303 閲覧数

タブごとに別の計算結果を表示させたい

前提・実現したいこと 開始時間と終了時間の入力をさせ、その差分によって金額を表示するフォームを作成しています。 railsとjQueryを使用しており、機能は以下のようなものです。 ・タブ切り替えができる ・どのタブも同じ内容の計算フォームが表示される ・タブごとに時間入力でき、計算結果を表示させることができる なお、計算フォームは部分テンプレートで切り出しています。 発生している問題・...
楠瀬 大志's user avatar
0
1 回答
600 閲覧数

scriptタグのasyncとdeferプロパティの指定する手順

やりたいこと 目的1.ページ読み込み完了前に実行する(jQueryやグローバルナビゲーションなど)js読込 目的2.ページ読み込み完了後に実行する(クリックしたら一番上までスクロールなど)js読込 Q.下記組み合わせがあると思うのですが、やりたいことをそれぞれ実現するためにはどうすれば良いですか? 目的に応じて、それぞれ2つに分け、js読込を記述しようと考えています。 記述場所 ・</...
re9's user avatar
  • 6,412
1
1 回答
615 閲覧数

<input type="file" accept="..."> の拡張子フィルタで、大文字小文字を区別する方法

htmlでファイルの投稿ボタンを以下のように作りました。 <form> <input type="file" accept=".jpg"> ... </form> windowsのgoogle-chromeでこのボタンを実行してファイル選択ダイアログを開くと、拡張子".jpg" と ".JPG" のファイルが表示されます。 この時、...
user28998's user avatar
  • 441
1
1 回答
247 閲覧数

phina.jsで当たり判定を取得できない

phina.js Tips集 #当たり判定編 - Qiita 上記サイトを参考にphina.jsライブラリを使用し、下記のコードで四方八方から向かってくる正方形をよけてスコアを稼ぐ避けげーを作ろうと思っているのですが、100行目の if(shape.hitTestElement(sprite)){ var self = this; ...
katoon's user avatar
  • 11