[html5] タグが付いた質問

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

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

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

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

HTML5canvasでpngデータを描画したいのですが、つまづいています。

フォルダ内のpngデータをcanvasに描画したいのですが。 以下のようなerrorをもらってしまいました。 chrome Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement ...
1
1 回答
417 閲覧数

frameタグの中に、YouTubeのビデオIDが設定されているangular式を指定して動画再生したい

iframeタグの中に、YouTubeのビデオIDが設定されているangular式を指定して 動画再生したいのですが、可能でしょうか。 現状、直接的にビデオIDを指定する方法が分からなかったので、 仕方なくSelectBoxを使っております。 (SelectBoxでビデオIDを選択すると、選択したIDの動画が再生出来るようになっています)  ※以下参照 これを、SelectBoxを使用せずに、...
0
0 回答
79 閲覧数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vue.jsでTo Doリストを作っているのですが、VSCodeのLive Serverを起動させても急に反映されなくなりました。

Vue.jsでTo Doリストを作っているのですが、VSCodeのLive Serverを起動させても急に反映されなくなりました。ブラウザはFirefox ESRです。 特にエラーメッセージは出ておりません。どうすればLive Serverを起動したあとにブラウザに反映されるのでしょうか。ご教授願います。 下記はソースコードです。 <!DOCTYPE html> <html ...
0
0 回答
149 閲覧数

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

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

IE11 で開発者ツールを起動していないと ConsoleAPI や Ajax 通信が期待した挙動をしない

(諸般の事情で該当のコードなどを提示することができないのですが、問題解決のために必要であれば別途用意いたします) 表題の通り、InternetExplorer 11 において、開発者ツールを立ち上げていないと期待した挙動をしない問題に直面しております。 いずれも JavaScript の絡んだ処理でしたので、ドキュメントモードなどが原因かと思いましたが、 meta ...
2
1 回答
823 閲覧数

画像を一括アップロードできるフォームでブラウザを閉じたあとも続きから入力できるようにしたい。

iPhoneの写真の容量平均が約3MB。画像を20枚一括でセレクトした場合、60MBのデータをローカルに記憶しなければいけません。 localStorageの容量が約5MB WebSQLの容量が約50MB これでは、選択された画像をローカルに保存するのは難しそうです。 そこで、<input type="file">で取得したFileオブジェクトをローカルストレージに保存することで、...
0
0 回答
164 閲覧数

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

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

Angular で PrimeNG の p-table を使って表を表示する時、一行のデータを 複数行に分けた場合 rowspan 指定のない行の選択方法

使用しているAngularおよびPrimeNGのバージョン angular-cli : 8.3.19 primeng : 8.1.1 やろうとしていること 一行のデータを画面幅の都合で2行にして p-table で表示する 一番左にチェックボックスを表示する列があり rowspan="2" で表示する チェックボックスのオン・オフによって、...
0
0 回答
495 閲覧数

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

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

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 回答
3,082 閲覧数

JavaScriptでcache bustingを自動化する方法

はじめまして。 色々調べていたのですが、煮詰まってしまい質問させていただきます。 Java8でSpringを使用して開発しております。 JSフレームワークはAngularJS(1系)です。 今回やりたいことはcache busting対策でHTML内の外部読み込みしている複数のCSS/JSなどに日付やバージョンなどのクエリー文字列を付けることってあると思うのですが、...
0
1 回答
1,293 閲覧数

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

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

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

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

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

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

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

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

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

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

Evernote API の consumerKey, consumerSecret を流出しないようにする工夫

monacaを用いて、HTML5 + Javascriptベースでのスマートフォン用のEvernoteアプリ開発に取り組んでおります。 Evernoteのサーバーとやり取りするためには、キー(consumerKey, consumerSecret)を使い、OAuth認証する必要があります。 Evernote のウェブページを参考に開発をしていますが、このページのサンプルコードでは、...
0
1 回答
324 閲覧数

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

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

Evernoteアプリでmonacaデバッガとビルドされたアプリの差異をなくす方法

monacaプラットフォームで、HTML5+Javascriptベースで、Evernoteアプリの開発を行っております。 Evernoteのウェブサイト 上からリンクが貼られていた、GitHub のサンプルコードを参考に実装をしました。 https://github.com/evernote/phonegap-example/blob/master/HelloWorld/www/js/index....
0
0 回答
125 閲覧数

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

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

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

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

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

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

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

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

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

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

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

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

HTMLタグをエスケープせずに表示したい

Node.js + Express + Pugでサイトを構築しています。 サーバ側のNode.jsで次のようにプログラムを書いて const nico="<a href=\"http://www.nicovideo.jp/\">test</a>"; res.render('index', { nico:nico });...
1
1 回答
160 閲覧数

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

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

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

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

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

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

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

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

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

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

jqGridでテーブルが表示できない。

jqGridでテーブルを表示したいのですが全くきれいに表示されていません。どこが原因となっているのでしょうか。 jQueryUI、jqGridに関しては下記をダウンロードして使用しています。 ・jQueryUI ( http://jqueryui.com/download/ ) ・jqGrid ( http://www.trirand.com/blog/?page_id=6 ) ...
0
1 回答
1,034 閲覧数

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
1 回答
748 閲覧数

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

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

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

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

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

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

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

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

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

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