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