[html5] タグが付いた質問
HTML5 (HyperText Markup Language 5)とは、人間に読解が容易なセマンティックなコーディングを特徴とする、HTMLの5番目のバージョンである。HTML 4.xと比べ、より厳密な文章構造を要求する仕様となっている。また、article(記事)や、section(節)などの特別な意味を持つタグも追加されており、より「文書」としての意味付けを高度化させることが出来るようになっている。なお、ビデオ等のマルチメディアの再生・ドラッグ&ドロップ・オフライン処理等のAPIも追加されている。
273
質問
0
票
0回答
29 件の閲覧数
サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかかる。PCサイズでもややひっかかりを感じる。
サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかります。
下記がコードになります。コンテンツに高さを持たさせるために AやBといったアルファベット一文字を多用していますが、そこはコンテンツに高さを持たせるためなので気にしないでください。
環境: Mac OS 10.15.5, Chrome Version 88.0.4324.192 (Official Build) ...
0
票
1回答
59 件の閲覧数
JavaScriptでwindowのサイズ可変を制限するには
JavaScriptで500pxより下にwindow幅を小さく出来ないようにJavaScriptで制限をかけたいのですが、そのようなAPIは提供されているのでしょうか?
調べてみて、window.minWidthという物が出てきたのですが上手く動作しなかったです。
chromeで動作すれば良いです。
すいませんよろしくお願いします。
0
票
1回答
85 件の閲覧数
JavaScriptでPNG画像などのデータをバイナリ形式で取得したい
FileReader.readAsText()のサンプルを試して動作させているのですが、PNG画像を選択すると文字化けしてしまいます。
文字化けしないようにするにはどうしたら良いでしょうか?
やりたいことは、PNG画像のデータを以下のようなバイナリ形式で受け取り、これをそのままデータベースに保存したいです。データはサーバ側でPythonを動作させているのでそちらで受け取りたいです。
b'\...
0
票
1回答
93 件の閲覧数
HTML,CSS gridなしで画像配置をしたい
画像の配置調整を行いたいです。
大きく2つあります。
1つ目
1段目を2段の両端に揃えて均等配置配置したいです。
→ 現状上手くいっておらず、解決策を教えて頂きたいです。
2つ目
3段目の2枚を2段目の左側に配置したい為、gridを使用して調整しています。
Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。
→ CSS変換など試したのですが、上手くいきません。
...
0
票
1回答
39 件の閲覧数
formで囲ったラジオボタンから選択された値を取り出したい
本来フォームに囲まれた中なら下記のコードでチェックされた値を取得出来るのですが、おそらくnav, Ul, li 等を使用しているので上手く取得出来ないのでしょうか?
let DOM = {}
DOM.languageInputs = document.querySelectorAll('.language input[name="country"]')
console.log(DOM....
0
票
1回答
56 件の閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
0回答
62 件の閲覧数
SlackのoEmbed仕様について
YouTubeのリンクをSlackアプリ上で送信すると、Slackアプリ上で動画が再生出来ます。
それと同じことを自分のWebサイトで実現したいです。
事象
Slackアプリ上でリンクが貼られると、Slackのrobotによる解析が始まります。
参考: https://api.slack.com/robots
下記サイトを参考に、oembedのエンドポイントを指定します。
参考: https://...
1
票
1回答
102 件の閲覧数
区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。
現象
区切り線だけ表示されて「または」というテキストが表示されないです。
期待値
区切り線の途中に「または」というテキストを表示したいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、...
0
票
2回答
69 件の閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1回答
67 件の閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
1回答
70 件の閲覧数
CSSグリッドで画像の位置を指定しても、指定した位置に画像がフィットしません。
現象
CSSグリッドで画像(image_0.svg)の位置を指定しても、指定した位置に画像がフィットしません。
期待値
画像がgrid-column: 3 / -3; grid-row: facebook-logo;で指定した位置にフィットさせたい。
再現手順
下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。
index.html
<...
0
票
1回答
92 件の閲覧数
SCSSの記法で出てくる $this: & !global; の意味は?
以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか?
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
scss
.p-hoge{
$this: & !global;
display:flex;
background-color:#f00;
&--...
0
票
3回答
153 件の閲覧数
javascriptが動きません
前提・実現したいこと
javascriptでリアルタイムの計算がしたい
発生している問題・エラーメッセージ
定価と掛け率を掛けた結果を単価に表示させたいのですがうまくいきません。
該当のソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=&...
0
票
0回答
30 件の閲覧数
ランディングページ内で流入元に応じて、動的コンテンツ表示の出し分け
動的コンテンツに関して質問させていただきます。標題の通り、ランディングページ内で流入元に応じて(A:バナー広告、B:テキスト広告)動的コンテンツ部分(最近だとを出し分けできるのでしょうか?その場合、1枚のランディングページ(URL)内で可能ですか?
また、この実装はHTML5だけで可能なのでしょうか?(javascript, phpなどを用いずに)
普段デザイナーをしているため、...
0
票
2回答
210 件の閲覧数
iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない
下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。
addEventListenerの第三引数をtrueにして試してもみたのですが結果は同じでした。
実際のiframe内に読み込むページはTwitterの埋め込みウィジェットになるので、
...
0
票
0回答
56 件の閲覧数
form送信ボタン押しても現在の表示がキープできるようにしたい。
formで送信ボタン押して、input要素3項目打ち込まなければエラー表示がでて、全項目打ち込んだら次のページにリンクするようにしたいのですが、3項目打ち込まずにsubmitした時ページの先頭に戻るのを避けたかったのでjqueryで記述したら表示はキープされるようになったのですが、エラー表示に対応したPHP側が反応しなくなりました。どうしても原因がわからなく解決方法を教えていただきたいです。
&...
1
票
1回答
106 件の閲覧数
HTML5 <input type=“datetime-local”> step について
以下の HTML を Chrome で表示すると時間入力とポップアップするカレンダーのような入力が出ます
<input type="datetime-local" step=600>
ボックスからの入力の方はどうやっても step 以外入力できないのですが
カレンダー入力からは任意の分が入力できてしまい非常に使いにくいUIになってしまいます
...
0
票
1回答
106 件の閲覧数
プルダウンが、うまく表示されません。
プルダウンメニューがうまく表示されません。
現状
プルダウンをクリックしても開きません。
実現したいこと
↓クリックすると、以下のように表示するようにしたい。(テキスト入力はなし)
なお、[ここに表示] というテキスト部分は、プルダウンの項目を選択したら対応するJSONのプロパティの値を表示します。(数字)
HTML
<!DOCTYPE html>
<html lang=&...
0
票
1回答
81 件の閲覧数
選択した項目のjsonプロパティのvalueの値を変数に代入し表示したい。
選択した項目の、オブジェクトのプロパティの2つめのデータ(数字)を変数subvalueに代入して、
出力したいのですが、$(x.list)にしてみたり色々しているのですが、うまくできません。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8&...
1
票
1回答
258 件の閲覧数
<input type=“date”>に入力中の値を取得することは出来ないのでしょうか
<input type="date">で、画面上で年のみ入力した状態で、ボタンイベントを発火した際に、
画面上に入力中の年の情報を取得する方法はありますでしょうか?
具体的には、以下画像の状態で、messageボタンを押下した際に、「2020」という値を取得する方法が知りたい内容です。
ブラウザのデバッガにて、<input type="date&...
0
票
1回答
174 件の閲覧数
Leaflet チェックボックスの判定をしてマーカーの削除をしたい。
Leaflet チェックボックスの判定をしてマーカーの削除をしたい
現在のコードとして、チェックボックスを入れると、県にピンが立つような感じです。
クリックする度に、ピンが立つので影がついていってしまいます。
東京がONになったら、東京にピンが立って、OFFになったらピンが消えるような感じにしたいのですが、コードの想像もできません。
分かる方、教えて頂きたいです。
<!DOCTYPE ...
0
票
1回答
88 件の閲覧数
ページ全体 (上下左右) の余白を無くすことができません
現象
出張 - Airbnb のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。
ご教授よろしくお願いいたします。
期待値
サイト全体の上下左右の余白を無くしたいです。
再現手順
下記コードを実行すると再現できます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>...
0
票
1回答
68 件の閲覧数
JavaScriptで.valueを使っているのにvalueではなくHTMLタグが返ってくる
前提・実現したいこと
JavaScriptを学習中の初学者です。
JavaScript・jQueryで思うような値が返ってこないため、悩んでいます。
発生している問題・エラーメッセージ
下記ソースコードの出力1と出力2が同様の結果を返すと考えましたが、以下のように異なる結果が出力されてしまいます。
出力1: テスト1
出力2: <input class="waypoint"...
0
票
0回答
31 件の閲覧数
GoogleタグマネージャーでAudioタグのダウンロードをトリガーに設定可能でしょうか?
GoogleタグマネージャーでAudioタグの音声データダウンロードをトリガーとして設定することは可能でしょうか?
トリガーのClickURLで末尾を「.wav」に設定してもダウンロードで着火しません。
ちなみにPDFやテキストファイルはカウントできるのでAudioタグの仕様なのでしょうか?
ご教授願います。
3
票
2回答
123 件の閲覧数
javascriptのFileAPIで読み込み途中のデータを取得することは可能ですか?
ブラウザ上で、クライアントPCに保存されている点群データを操作をしようと考えています。
FileAPIで取得したfileオブジェクトを、FileReaderで読み込むことができることはわかりました。
ここからが質問なのですが、FileReaderで読み込んでいるデータを、途中で読み込み処理を停止して、停止した所までのデータを取得・操作することは可能でしょうか?
利用ケースとしては、...
0
票
3回答
153 件の閲覧数
HTMLUnknownElementの仕様は定義されているのでしょうか?されていないのでしょうか?
javascript - HTMLで独自タグを使うのは仕様上問題ないのか - スタック・オーバーフロー
一部引用:
DOM の仕様では HTMLUnknownElement という要素が定められていて、不明な要素を扱うことができます。
そのため、現時点では不明な要素を利用しても問題なく動作すると思います。
しかしながら、将来的に新しい要素が追加される可能性があります。...
3
票
1回答
94 件の閲覧数
Webページの横幅はどう決めるべき?
Webブラウザ上で利用する業務アプリを開発しています。
最近のPCやタブレットは1920X1080以上の解像度がありますが
Webページとして横幅はどのように決めるべきなのでしょうか。
基礎的なことなのかもしれませんが教えてください。
色々なサイトで書かれていることを見ましたが、950-1000が一般的との記載があったり、
最近は1200PX以上とか。。 どれも感覚的な説明で、...
0
票
1回答
95 件の閲覧数
タブごとに別の計算結果を表示させたい
前提・実現したいこと
開始時間と終了時間の入力をさせ、その差分によって金額を表示するフォームを作成しています。
railsとjQueryを使用しており、機能は以下のようなものです。
・タブ切り替えができる
・どのタブも同じ内容の計算フォームが表示される
・タブごとに時間入力でき、計算結果を表示させることができる
なお、計算フォームは部分テンプレートで切り出しています。
発生している問題・...
0
票
0回答
63 件の閲覧数
Chromeの拡張機能でData URI Schemeの画像をダウンロードしたいと考えています。しかし、jQueryのattr(“src”)はUndefinedを返します。
画像を右クリックしてコンテキストメニューに表示される文字をクリックして選択した画像をダウンロードするChrome拡張機能を作ろうとしています。ダウンロードする方法は、aタグのhrefにData URL Schemeを入力します。しかし、URLを取得する際にjQueryのattr("src")ではundefinedが返ってきます。"data:image/jpeg;...
0
票
0回答
40 件の閲覧数
iOS13でreadonlyを付けたinputタグの全選択ができない場合がある
いつもお世話になっております。
下記のようなHTML,javaScriptで、inputタグをタップすると全選択をする機能を作成しています。
しかしiOS13でのみ謎の挙動をしてしまうのです。
通常では1つめのinputタグをタップをするとvalueのテキストを全選択するのですが、
2つめのinputタグにカーソルを当てた後、...
0
票
0回答
188 件の閲覧数
Magnific Popupを使用し、オーバーレイしてYoutube表示させたい
以前同じような質問をさせていただき、解決していたのですが、現在以下のエラー表示がでてYoutube動画が再生できない状態になっています。
<エラー内容>
「エラーが発生しました。しばらくしてからもう一度お試しください。(再生 ID: ****⇦伏せてます)」
IEで上記のようなエラーがよく起こるとGoogleで調べてわかったのですが、私はChormeを使用しており、...
0
票
1回答
270 件の閲覧数
scriptタグのasyncとdeferプロパティの指定する手順
やりたいこと
目的1.ページ読み込み完了前に実行する(jQueryやグローバルナビゲーションなど)js読込
目的2.ページ読み込み完了後に実行する(クリックしたら一番上までスクロールなど)js読込
Q.下記組み合わせがあると思うのですが、やりたいことをそれぞれ実現するためにはどうすれば良いですか?
目的に応じて、それぞれ2つに分け、js読込を記述しようと考えています。
記述場所
・</...
1
票
1回答
169 件の閲覧数
<input type=“file” accept=“…”> の拡張子フィルタで、大文字小文字を区別する方法
htmlでファイルの投稿ボタンを以下のように作りました。
<form>
<input type="file" accept=".jpg">
...
</form>
windowsのgoogle-chromeでこのボタンを実行してファイル選択ダイアログを開くと、拡張子".jpg" と ".JPG" のファイルが表示されます。
この時、...
1
票
1回答
118 件の閲覧数
phina.jsで当たり判定を取得できない
phina.js Tips集 #当たり判定編 - Qiita
上記サイトを参考にphina.jsライブラリを使用し、下記のコードで四方八方から向かってくる正方形をよけてスコアを稼ぐ避けげーを作ろうと思っているのですが、100行目の
if(shape.hitTestElement(sprite)){
var self = this;
...
1
票
1回答
211 件の閲覧数
CSSで空白を挿入する方法
<div class='a'>
<span class='b'>1</span>
<span class='c'>いい天気</span>
<div>
このようなhtmlがあって
1いい天気
と表示されます。
これをCSSを編集することで
1 いい天気
のように間にスペースほどの間隔を空けることは可能ですか?
(...
0
票
2回答
246 件の閲覧数
metaタグ末尾に含まれる / (スラッシュ) に特別な意味はありますか?
metaタグの末尾にスラッシュ(/)が記載されていますが、何か特別な意味はありますか?
省略しても良い?
Twitter metaタグより引用:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="...
0
票
1回答
72 件の閲覧数
bootstrapのdropdownで選択した画像を別の要素に表示させる方法
以下のコードで”newImg_boat”タブに選択後の画像を載せたいのですが、うまくいかず困っています。
コメントアウトしているコードは、あれやこれや試した結果です。2日くらい悩んでいます。
よろしくお願いいたします。
$(function() {
$('.dropdown-menu .dropdown-item').click(function() {
var ...
0
票
2回答
175 件の閲覧数
Vue.jsでTo Doリストを作っているのですが、VS CodeのLive Serverを起動させても急に反映されなくなりました。
こんにちは。お世話になります。
Vue.jsでTo Doリストを作っているのですが、VS CodeのLive Serverを起動させても急に反映されなくなりました。ブラウザはFirefox ESRです。
特にエラーメッセージは出ておりません。どうすればLive Serverを起動したあとにブラウザに反映されるのでしょうか。ご教授願います。
下記はソースコードです。
<!DOCTYPE ...
0
票
1回答
96 件の閲覧数
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回答
336 件の閲覧数
Vue.jsのマスタッシュ構文の中身が反映されないです。どうすれば反映されるのでしょうか?
Vue.jsのマスタッシュ構文の中身が反映されないです。具体的には、messageと表示されます。
どうすれば反映されるのでしょうか?ご教授願います。
以下はHTMLファイルです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>...
1
票
1回答
118 件の閲覧数
4
票
2回答
1,853 件の閲覧数
divタグとsectionタグとarticleタグの違いって何でしょう?
毎度初歩的な質問で失礼します。
タイトルの通り、divとsectionとarticleの違いってなんでしょうか?
いろいろググりましたが、とても曖昧にしか理解できずにいます。
divの中にsectionとarticleがある。
sectionは前後関係を必要とする要素で
articleは独自に成立する要素。
とざっくりそんな風に理解しています。
コードを書くときは
<div>
...
0
票
1回答
644 件の閲覧数
Angular で PrimeNG の p-table を使って表を表示する時、一行のデータを 複数行に分けた場合 rowspan 指定のない行の選択方法
使用しているAngularおよびPrimeNGのバージョン
angular-cli : 8.3.19
primeng : 8.1.1
やろうとしていること
一行のデータを画面幅の都合で2行にして p-table で表示する
一番左にチェックボックスを表示する列があり rowspan="2" で表示する
チェックボックスのオン・オフによって、...
1
票
1回答
71 件の閲覧数
olの行頭番号をboldにするには??
XMLアーキテクチャにDITA(Wikipediaへのリンク)というのがありまして、それをPDFにしたりHTMLにしたりする仕事をしています.今回はHTML5への変換の質問です.
簡単に言いますと、表題のとおりolの行頭番号にfont-weight:bold;を適用したいのですがやり方がわかりません.
まずDITAには作業の手順を示すsteps/stepという要素があります....
0
票
1回答
58 件の閲覧数
vue-cli 再読み込みすると入力した内容が全てのフォームに反映してしまう。
環境
windows10(64)
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vue-cli":"3.11.0",
"node":"v11.13.0"
プログラミング歴 4か月ほど
苦戦しているところ
...
0
票
1回答
274 件の閲覧数
音の再生を重複したくない
ボタン(画像)を押すと音が鳴り、再度押すと止まるサイトを作成中なのですが、再生とストップは出来たのですが、複数ボタンを設置すると、「ボタン1」を再生中に「ボタン2」を押すと1.mp3の音楽再生したまま、2.mp3が再生されてしまいます。
「ボタン2」のボタンを押したら1.mp3は止まるようにしたいのですが、教えて頂けますでしょうか?
HTML
<span class="...
0
票
1回答
80 件の閲覧数
ホームページ中の各ページの位置が異なる
ポートフォリオサイトを手打ちで作っています。何故か一部のページだけ表示される位置が変わってしまいます。デベロッパーツールで確認したところ、body要素が何故かマージンを持っています。しかし、body要素に含まれるどの要素もそのマージンの原因ではありませんでした。また、CSSでbody要素のマージンは設定済みです。
なぜこのようになっているかお分かりの人はいますか?
0
票
1回答
131 件の閲覧数
アイコンをマウスホバー時に滑らかに別アイコンに、マウスアウトした際に滑らかに元アイコンに変化させたい
『スニペットを実行』を押して、動作サンプルをご確認いただけますでしょうか。
html {
text-align: center;
}
#check, .fas.fa-check-circle {
display: none;
}
i {
cursor: pointer;
font-size: 64px;
}
#check:...
3
票
1回答
102 件の閲覧数
ブロック要素とインライン要素について質問があります
お世話になります。
CSSとHTMLでブロック要素インライン要素の違いを学習しています。
https://60pablog.com/html-block-inline/#CSS
http://www.htmq.com/htmlkihon/005.shtml
上二つのサイトを参考にしていますが、ブロック要素インライン要素をCSSで変えられるとかかれていました。
...
0
票
1回答
72 件の閲覧数
jQuery の :visible に相当するセレクタ
jQuery の :visible に相当するセレクタを CSS で記述する方法はありますか。
たとえば、ボタンが横に複数並んでいる状態で右端のボタンのみ角丸にしたい場合
last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
と記述したりしますが、条件によってボタンの表示/...