[html5] タグが付いた質問
HTML5 (HyperText Markup Language 5)とは、人間に読解が容易なセマンティックなコーディングを特徴とする、HTMLの5番目のバージョンである。HTML 4.xと比べ、より厳密な文章構造を要求する仕様となっている。また、article(記事)や、section(節)などの特別な意味を持つタグも追加されており、より「文書」としての意味付けを高度化させることが出来るようになっている。なお、ビデオ等のマルチメディアの再生・ドラッグ&ドロップ・オフライン処理等のAPIも追加されている。
268
質問
0
票
1回答
43 件の閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
0回答
55 件の閲覧数
SlackのoEmbed仕様について
YouTubeのリンクをSlackアプリ上で送信すると、Slackアプリ上で動画が再生出来ます。
それと同じことを自分のWebサイトで実現したいです。
事象
Slackアプリ上でリンクが貼られると、Slackのrobotによる解析が始まります。
参考: https://api.slack.com/robots
下記サイトを参考に、oembedのエンドポイントを指定します。
参考: https://...
0
票
1回答
1,740 件の閲覧数
JavaScriptでcache bustingを自動化する方法
はじめまして。
色々調べていたのですが、煮詰まってしまい質問させていただきます。
Java8でSpringを使用して開発しております。
JSフレームワークはAngularJS(1系)です。
今回やりたいことはcache busting対策でHTML内の外部読み込みしている複数のCSS/JSなどに日付やバージョンなどのクエリー文字列を付けることってあると思うのですが、...
1
票
1回答
734 件の閲覧数
HTMLタグをエスケープせずに表示したい
Node.js + Express + Pugでサイトを構築しています。
サーバ側のNode.jsで次のようにプログラムを書いて
const nico="<a href=\"http://www.nicovideo.jp/\">test</a>";
res.render('index', {
nico:nico
});...
0
票
1回答
362 件の閲覧数
frameタグの中に、YouTubeのビデオIDが設定されているangular式を指定して動画再生したい
iframeタグの中に、YouTubeのビデオIDが設定されているangular式を指定して
動画再生したいのですが、可能でしょうか。
現状、直接的にビデオIDを指定する方法が分からなかったので、
仕方なくSelectBoxを使っております。
(SelectBoxでビデオIDを選択すると、選択したIDの動画が再生出来るようになっています)
※以下参照
これを、SelectBoxを使用せずに、...
1
票
1回答
97 件の閲覧数
区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。
現象
区切り線だけ表示されて「または」というテキストが表示されないです。
期待値
区切り線の途中に「または」というテキストを表示したいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、...
0
票
2回答
63 件の閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1回答
60 件の閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
1回答
51 件の閲覧数
CSSグリッドで画像の位置を指定しても、指定した位置に画像がフィットしません。
現象
CSSグリッドで画像(image_0.svg)の位置を指定しても、指定した位置に画像がフィットしません。
期待値
画像がgrid-column: 3 / -3; grid-row: facebook-logo;で指定した位置にフィットさせたい。
再現手順
下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。
index.html
<...
0
票
2回答
88 件の閲覧数
iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない
下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。
addEventListenerの第三引数をtrueにして試してもみたのですが結果は同じでした。
実際のiframe内に読み込むページはTwitterの埋め込みウィジェットになるので、
...
0
票
1回答
1,752 件の閲覧数
jqGridでテーブルが表示できない。
jqGridでテーブルを表示したいのですが全くきれいに表示されていません。どこが原因となっているのでしょうか。
jQueryUI、jqGridに関しては下記をダウンロードして使用しています。
・jQueryUI ( http://jqueryui.com/download/ )
・jqGrid ( http://www.trirand.com/blog/?page_id=6 )
...
0
票
1回答
76 件の閲覧数
SCSSの記法で出てくる $this: & !global; の意味は?
以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか?
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
scss
.p-hoge{
$this: & !global;
display:flex;
background-color:#f00;
&--...
0
票
3回答
152 件の閲覧数
javascriptが動きません
前提・実現したいこと
javascriptでリアルタイムの計算がしたい
発生している問題・エラーメッセージ
定価と掛け率を掛けた結果を単価に表示させたいのですがうまくいきません。
該当のソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=&...
0
票
0回答
29 件の閲覧数
ランディングページ内で流入元に応じて、動的コンテンツ表示の出し分け
動的コンテンツに関して質問させていただきます。標題の通り、ランディングページ内で流入元に応じて(A:バナー広告、B:テキスト広告)動的コンテンツ部分(最近だとを出し分けできるのでしょうか?その場合、1枚のランディングページ(URL)内で可能ですか?
また、この実装はHTML5だけで可能なのでしょうか?(javascript, phpなどを用いずに)
普段デザイナーをしているため、...
0
票
1回答
151 件の閲覧数
Leaflet チェックボックスの判定をしてマーカーの削除をしたい。
Leaflet チェックボックスの判定をしてマーカーの削除をしたい
現在のコードとして、チェックボックスを入れると、県にピンが立つような感じです。
クリックする度に、ピンが立つので影がついていってしまいます。
東京がONになったら、東京にピンが立って、OFFになったらピンが消えるような感じにしたいのですが、コードの想像もできません。
分かる方、教えて頂きたいです。
<!DOCTYPE ...
1
票
0回答
56 件の閲覧数
form送信ボタン押しても現在の表示がキープできるようにしたい。
formで送信ボタン押して、input要素3項目打ち込まなければエラー表示がでて、全項目打ち込んだら次のページにリンクするようにしたいのですが、3項目打ち込まずにsubmitした時ページの先頭に戻るのを避けたかったのでjqueryで記述したら表示はキープされるようになったのですが、エラー表示に対応したPHP側が反応しなくなりました。どうしても原因がわからなく解決方法を教えていただきたいです。
&...
1
票
1回答
79 件の閲覧数
HTML5 <input type=“datetime-local”> step について
以下の HTML を Chrome で表示すると時間入力とポップアップするカレンダーのような入力が出ます
<input type="datetime-local" step=600>
ボックスからの入力の方はどうやっても step 以外入力できないのですが
カレンダー入力からは任意の分が入力できてしまい非常に使いにくいUIになってしまいます
...
0
票
1回答
98 件の閲覧数
プルダウンが、うまく表示されません。
プルダウンメニューがうまく表示されません。
現状
プルダウンをクリックしても開きません。
実現したいこと
↓クリックすると、以下のように表示するようにしたい。(テキスト入力はなし)
なお、[ここに表示] というテキスト部分は、プルダウンの項目を選択したら対応するJSONのプロパティの値を表示します。(数字)
HTML
<!DOCTYPE html>
<html lang=&...
0
票
1回答
595 件の閲覧数
Angular で PrimeNG の p-table を使って表を表示する時、一行のデータを 複数行に分けた場合 rowspan 指定のない行の選択方法
使用しているAngularおよびPrimeNGのバージョン
angular-cli : 8.3.19
primeng : 8.1.1
やろうとしていること
一行のデータを画面幅の都合で2行にして p-table で表示する
一番左にチェックボックスを表示する列があり rowspan="2" で表示する
チェックボックスのオン・オフによって、...
0
票
1回答
76 件の閲覧数
選択した項目のjsonプロパティのvalueの値を変数に代入し表示したい。
選択した項目の、オブジェクトのプロパティの2つめのデータ(数字)を変数subvalueに代入して、
出力したいのですが、$(x.list)にしてみたり色々しているのですが、うまくできません。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8&...
1
票
1回答
169 件の閲覧数
<input type=“date”>に入力中の値を取得することは出来ないのでしょうか
<input type="date">で、画面上で年のみ入力した状態で、ボタンイベントを発火した際に、
画面上に入力中の年の情報を取得する方法はありますでしょうか?
具体的には、以下画像の状態で、messageボタンを押下した際に、「2020」という値を取得する方法が知りたい内容です。
ブラウザのデバッガにて、<input type="date&...
14
票
3回答
1万 件の閲覧数
HTML5でinputタグはformタグで囲う必要はありますか?
検索して下記は見つけましたが、HTML5に関する言及はありませんでした。
inputタグはformタグで必ず囲む必要がありますか? - HTML | 教えて!goo
送信する必要がなければ<form>で囲う必要はないと考えております。
また、<input>タグの内容が変わったこときに、Ajax通信をするという処理であれば、送信処理はformではなくAjaxが行うので、<...
0
票
1回答
87 件の閲覧数
ページ全体 (上下左右) の余白を無くすことができません
現象
出張 - Airbnb のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。
ご教授よろしくお願いいたします。
期待値
サイト全体の上下左右の余白を無くしたいです。
再現手順
下記コードを実行すると再現できます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>...
1
票
1回答
196 件の閲覧数
FooTableの利用について
現在スマホ用の画面構築で、テーブルを可変にする為に
FooTableを利用しようとしています。
以下のサイトを参考にしてます。
http://www.webantena.net/javascriptjquery/plugin-footable/
ところが、肝心のソースが手に入りません。
というのも、ここに限らずどのサイトでも最終的にGithubから
ダウンロードするように誘導されますが、...
0
票
1回答
67 件の閲覧数
JavaScriptで.valueを使っているのにvalueではなくHTMLタグが返ってくる
前提・実現したいこと
JavaScriptを学習中の初学者です。
JavaScript・jQueryで思うような値が返ってこないため、悩んでいます。
発生している問題・エラーメッセージ
下記ソースコードの出力1と出力2が同様の結果を返すと考えましたが、以下のように異なる結果が出力されてしまいます。
出力1: テスト1
出力2: <input class="waypoint"...
0
票
0回答
29 件の閲覧数
GoogleタグマネージャーでAudioタグのダウンロードをトリガーに設定可能でしょうか?
GoogleタグマネージャーでAudioタグの音声データダウンロードをトリガーとして設定することは可能でしょうか?
トリガーのClickURLで末尾を「.wav」に設定してもダウンロードで着火しません。
ちなみにPDFやテキストファイルはカウントできるのでAudioタグの仕様なのでしょうか?
ご教授願います。
3
票
2回答
100 件の閲覧数
javascriptのFileAPIで読み込み途中のデータを取得することは可能ですか?
ブラウザ上で、クライアントPCに保存されている点群データを操作をしようと考えています。
FileAPIで取得したfileオブジェクトを、FileReaderで読み込むことができることはわかりました。
ここからが質問なのですが、FileReaderで読み込んでいるデータを、途中で読み込み処理を停止して、停止した所までのデータを取得・操作することは可能でしょうか?
利用ケースとしては、...
0
票
3回答
147 件の閲覧数
HTMLUnknownElementの仕様は定義されているのでしょうか?されていないのでしょうか?
javascript - HTMLで独自タグを使うのは仕様上問題ないのか - スタック・オーバーフロー
一部引用:
DOM の仕様では HTMLUnknownElement という要素が定められていて、不明な要素を扱うことができます。
そのため、現時点では不明な要素を利用しても問題なく動作すると思います。
しかしながら、将来的に新しい要素が追加される可能性があります。...
3
票
1回答
89 件の閲覧数
Webページの横幅はどう決めるべき?
Webブラウザ上で利用する業務アプリを開発しています。
最近のPCやタブレットは1920X1080以上の解像度がありますが
Webページとして横幅はどのように決めるべきなのでしょうか。
基礎的なことなのかもしれませんが教えてください。
色々なサイトで書かれていることを見ましたが、950-1000が一般的との記載があったり、
最近は1200PX以上とか。。 どれも感覚的な説明で、...
0
票
1回答
82 件の閲覧数
タブごとに別の計算結果を表示させたい
前提・実現したいこと
開始時間と終了時間の入力をさせ、その差分によって金額を表示するフォームを作成しています。
railsとjQueryを使用しており、機能は以下のようなものです。
・タブ切り替えができる
・どのタブも同じ内容の計算フォームが表示される
・タブごとに時間入力でき、計算結果を表示させることができる
なお、計算フォームは部分テンプレートで切り出しています。
発生している問題・...
0
票
1回答
235 件の閲覧数
scriptタグのasyncとdeferプロパティの指定する手順
やりたいこと
目的1.ページ読み込み完了前に実行する(jQueryやグローバルナビゲーションなど)js読込
目的2.ページ読み込み完了後に実行する(クリックしたら一番上までスクロールなど)js読込
Q.下記組み合わせがあると思うのですが、やりたいことをそれぞれ実現するためにはどうすれば良いですか?
目的に応じて、それぞれ2つに分け、js読込を記述しようと考えています。
記述場所
・</...
0
票
0回答
55 件の閲覧数
Chromeの拡張機能でData URI Schemeの画像をダウンロードしたいと考えています。しかし、jQueryのattr(“src”)はUndefinedを返します。
画像を右クリックしてコンテキストメニューに表示される文字をクリックして選択した画像をダウンロードするChrome拡張機能を作ろうとしています。ダウンロードする方法は、aタグのhrefにData URL Schemeを入力します。しかし、URLを取得する際にjQueryのattr("src")ではundefinedが返ってきます。"data:image/jpeg;...
0
票
0回答
35 件の閲覧数
iOS13でreadonlyを付けたinputタグの全選択ができない場合がある
いつもお世話になっております。
下記のようなHTML,javaScriptで、inputタグをタップすると全選択をする機能を作成しています。
しかしiOS13でのみ謎の挙動をしてしまうのです。
通常では1つめのinputタグをタップをするとvalueのテキストを全選択するのですが、
2つめのinputタグにカーソルを当てた後、...
0
票
2回答
212 件の閲覧数
Pythonのbs4とrequestsを用いたスクレイピングでsrcsetに対応したい
BeautifulSoup4とRequestsでスクレイピングを行いたいのですが、
srcで検索をしてURLを取得してしまうと、想定よりも小さいサイズの画像ファイルがダウンロードされます。
これはHTMLのimgタグにあるsrcsetの影響です。
おそらく、自身がウィンドウサイズを指定できていないのが原因と考えています。
以上の点を踏まえて、...
0
票
0回答
150 件の閲覧数
Magnific Popupを使用し、オーバーレイしてYoutube表示させたい
以前同じような質問をさせていただき、解決していたのですが、現在以下のエラー表示がでてYoutube動画が再生できない状態になっています。
<エラー内容>
「エラーが発生しました。しばらくしてからもう一度お試しください。(再生 ID: ****⇦伏せてます)」
IEで上記のようなエラーがよく起こるとGoogleで調べてわかったのですが、私はChormeを使用しており、...
1
票
1回答
152 件の閲覧数
<input type=“file” accept=“…”> の拡張子フィルタで、大文字小文字を区別する方法
htmlでファイルの投稿ボタンを以下のように作りました。
<form>
<input type="file" accept=".jpg">
...
</form>
windowsのgoogle-chromeでこのボタンを実行してファイル選択ダイアログを開くと、拡張子".jpg" と ".JPG" のファイルが表示されます。
この時、...
1
票
1回答
109 件の閲覧数
phina.jsで当たり判定を取得できない
phina.js Tips集 #当たり判定編 - Qiita
上記サイトを参考にphina.jsライブラリを使用し、下記のコードで四方八方から向かってくる正方形をよけてスコアを稼ぐ避けげーを作ろうと思っているのですが、100行目の
if(shape.hitTestElement(sprite)){
var self = this;
...
1
票
1回答
171 件の閲覧数
CSSで空白を挿入する方法
<div class='a'>
<span class='b'>1</span>
<span class='c'>いい天気</span>
<div>
このようなhtmlがあって
1いい天気
と表示されます。
これをCSSを編集することで
1 いい天気
のように間にスペースほどの間隔を空けることは可能ですか?
(...
0
票
2回答
213 件の閲覧数
metaタグ末尾に含まれる / (スラッシュ) に特別な意味はありますか?
metaタグの末尾にスラッシュ(/)が記載されていますが、何か特別な意味はありますか?
省略しても良い?
Twitter metaタグより引用:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="...
6
票
3回答
1,853 件の閲覧数
<div>の中の文字列を上下で中央に揃える
htmlでdivの中の文字列を上下で中央にそろえるにはどうすればいいのでしょうか?
divの中に文字列があり、text-align: centerで左右は中央になったのですが上下で中央に揃えられません。
div#div1 {
text-align: center;
height: 400px;
width: 600px;
border: solid 1px;
...
5
票
3回答
1,555 件の閲覧数
-1
票
2回答
225 件の閲覧数
WindowsPC/Androidタブレットで同じWebページを表示したい
WindowsPC/AndroidごとにWebページを用意するのではなく、
両方から1つのWebページを表示したいです。
PCはWebページを参照するだけなのですが、タブレットはHTML5でバーコードをスキャンもさせたいです。
① WindowsPC/AndroidでWebページを共有する際に発生する問題を教えて下さい。
→ レイアウトが崩れたりしませんか?ボタンサイズの問題 etc...
②...
3
票
3回答
2,017 件の閲覧数
jQuery / JavaScriptで、ページスクロール時にアクションを起こしたい
ページをスクロールした時に、スクロールした距離に応じて、オブジェクトの移動や透過をさせたい。パララックス効果についても簡潔な例を知りたい。
0
票
1回答
71 件の閲覧数
bootstrapのdropdownで選択した画像を別の要素に表示させる方法
以下のコードで”newImg_boat”タブに選択後の画像を載せたいのですが、うまくいかず困っています。
コメントアウトしているコードは、あれやこれや試した結果です。2日くらい悩んでいます。
よろしくお願いいたします。
$(function() {
$('.dropdown-menu .dropdown-item').click(function() {
var ...
0
票
2回答
158 件の閲覧数
Vue.jsでTo Doリストを作っているのですが、VS CodeのLive Serverを起動させても急に反映されなくなりました。
こんにちは。お世話になります。
Vue.jsでTo Doリストを作っているのですが、VS CodeのLive Serverを起動させても急に反映されなくなりました。ブラウザはFirefox ESRです。
特にエラーメッセージは出ておりません。どうすればLive Serverを起動したあとにブラウザに反映されるのでしょうか。ご教授願います。
下記はソースコードです。
<!DOCTYPE ...
0
票
1回答
92 件の閲覧数
onsenuiのons-lazy-repeatで生成したons-list-item内の値を関数に渡す方法について
monaca cloudIDEでアプリ開発をしています
ons-lazy-repeatで生成したons-list-itemを列挙するjavascriptを書いているのですが,
このlist-itemをタップした際に実行される関数
onclick="js_list2.onClickListItem()
に値を2つ以上渡す方法がわかりません(↓...
1
票
1回答
293 件の閲覧数
Vue.jsのマスタッシュ構文の中身が反映されないです。どうすれば反映されるのでしょうか?
Vue.jsのマスタッシュ構文の中身が反映されないです。具体的には、messageと表示されます。
どうすれば反映されるのでしょうか?ご教授願います。
以下はHTMLファイルです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>...
8
票
3回答
6,380 件の閲覧数
A4用紙に印刷可能なピクセル数は?
htmlページをブラウザ標準の印刷機能で印刷する場合、縦向きのA4用紙に入る横幅は最大何ピクセルになるでしょうか?
css
* {
box-sizing: border-box;
}
.test1 {
width: 1366px;
border: 10px solid red;
}
.test2 {
width: 1280px;
border: 10px solid ...
1
票
2回答
630 件の閲覧数
iPhone & FileAPI で日本語タイトルのファイルを利用する方法
環境
iPhone6
UserAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0 Mobile/14B150 Safari/602.1
iPhone からファイルアップロードを利用するため FileAPI ...
2
票
1回答
122 件の閲覧数
dispatchEvent経由でDnDしたい
DnD機能をJavaScriptからテストしたいと考えています.
EventTarget.dispatchEvent を利用して dragstart イベントをトリガーさせると、
DataTransfer オブジェクトが生成されず、event.dataTransfer が undefined になってしまい、
マウスによるDnDと同じ挙動になりません.
dataTransfer
https://...