[html] タグが付いた質問
889
質問
0
票
2回答
63 件の閲覧数
Elementオブジェクトから子要素を取り出すには
javascriptで下記のDOM要素?を取得したのですが、子要素の.dlcard > dlcard__thumbnail > imgのようにアクセスしたいです。どのような関数を使用したらよいでしょうか? 要素はinputという変数に格納されています。
追記
説明不足ですいません。
inputに格納されたelementオブジェクトから要素を取り出す方法はないでしょうか?
...
0
票
1回答
87 件の閲覧数
addEventListnerをページ更新後に追加される要素にも適応したい。
Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。
分からない事
同じクラス名の要素に別々の変更を加えるには
作成したい機能
inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。
要素について
.dlcardWrapがあってその子要素として.dlcardがあります。...
0
票
1回答
55 件の閲覧数
特定のキーが押されたら動画を一時停止、再生したい
特定のキーが押されたらビデオを一時停止、再生させたいのですがどうすればできるでしょうか。
下記のコードはそれぞれkeydownのサンプルコード
https://www.ipentec.com/document/javascript-accept-keydown
と、videoのサンプルコード
http://www.htmq.com/video/
を参照し自分なりに合わせたものです。
...
0
票
0回答
68 件の閲覧数
imgタグのsrcsetで画像は切り替わらないのでしょうか?
実際にためしたコード
下記コードを書いてみました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-...
0
票
2回答
68 件の閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1回答
66 件の閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
0回答
44 件の閲覧数
todoのデータが消えてしまう localstorage
すみませんコードの張り方がわからず 変な風になってしまいました、
ご教示いただけると幸いです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>やることリスト</...
0
票
1回答
88 件の閲覧数
ナビゲーションメニューが横並びになりません。
練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>company</title>
<...
-1
票
2回答
102 件の閲覧数
グーグルブラウザなのにbrowserNameでMozillaと出る
var name = navigator.appName;
console.log(name)
とjavascriptのコードを書いてグーグルブラウザで実行したところ、Mozilla と表示されました。
これは正しいのでしょうか?何か間違っていますか?
0
票
1回答
45 件の閲覧数
ページが変わっても“content_scripts”が反応しない
YouTube 向けの拡張機能の作成をしており、manifestには以下のように記述しました。
"content_scripts":[
{
"matches":[
"https://www.youtube.com/*"
],
"js":[
...
0
票
0回答
61 件の閲覧数
display:gridで、画像の高さが合わないです。
初めまして、お願いします。
display:gridにして、画像を2列2行で配置したのですが、1枚だけ何故か、高さが合いません。デベロッパーツールで確認しましたが、よくわかりませんでした。
初歩的な質問で申し訳ありません。
HTML
CSS
1
票
2回答
199 件の閲覧数
セレクタにシャープ記号(#)を使う意味と、ドット記号(.)を使う時との違いは?
模写の際CSSのコードを記入していると、#header, #footer のような記述があります。
.header または header, footer を使うことによりHTML要素を指定できるのは知っていますが、# を使った指定方法は知りませんでした。
ぼくは、この # がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。
...
0
票
1回答
88 件の閲覧数
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
票
2回答
188 件の閲覧数
iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない
下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。
addEventListenerの第三引数をtrueにして試してもみたのですが結果は同じでした。
実際のiframe内に読み込むページはTwitterの埋め込みウィジェットになるので、
...
0
票
0回答
81 件の閲覧数
画像が表示されない
現在テックアカデミーさんの教材でHTMLを学習しております。(10月19日からメンターの指導開始の為聞ける人がおりません。)
発生している問題
画像を表示したいのですが、出てきません。(AWS Cloud9使用)
これまでに試した事
imgやsrc、altが入力間違えていないか確認した。
ダウンロードをし直して再度プレビューしなおした。
(1の方法....
0
票
0回答
83 件の閲覧数
Tabulatorのチェックボックスを非アクティブ化したい
Tabulatorで列にチェックボックスを表示したテーブルを作成した後、そのチェックボックスを非活性化したいと考えています。
左端の列に表示されるチェックボックスを非活性にしたいのですが、
公式のドキュメントを読んでも非活性にする方法が書いてありません。何か良い方法は無いでしょうか。
なお、同じ内容で teratail でも質問しています。
https://teratail.com/...
0
票
1回答
71 件の閲覧数
JavaScript と LocalStorege を使用して背景色をサイト内で共有したい
Webアプリを作成しています。0から始めて間もないので、優しく教えていただけたら嬉しいです。(せめてヒントだけでもお願いしたいです。)
HTMLで作成したボタンを押すとJavaScriptで動的にクラスを変更し背景色が変わるようなプログラムを作成しました。
これをローカルファイル内で作成した別のHTMLへ移動しても背景色を保存できるようにしたいと思っています。...
0
票
2回答
91 件の閲覧数
JavaScriptでタグを含む要素が返ってくる
const base = document.getElementById('parent');
const children = base.children;
console.log(children[0]);
console.log(children[1]);
console.log(children[2]);
下に記述したHTMLの <ul> ...
0
票
0回答
361 件の閲覧数
jspで入力フォームの値を保持したい
解決したいこと
今Webアプリを作っています。入力フォームに値を保持したいのですが、うまくいきません。
表以外はうまくいったのですが、表の中の入力フォームはうまく値を保持することができませんでした
ネットでも色々調べたのですが、そもそもtableを入力フォームにしている事例があまりなく困っています
発生している問題・エラー
1,2枚目で入力して投稿ボタンを押してエラーがあった場合1,...
0
票
1回答
108 件の閲覧数
EmEditorでHTML文書作成時にコメントアウト内のURL表示が変
パソコンをWindows8.1からWindows10へ新調し、EmEditor Freeもversionを18から最新のVersion 20.1.2にしました。
すると、いままでHTML文書でコメント<!-- -->内にURLを書くとコメントと同色でリンクとしては無効になったのが、コメント内でもURL部分だけ青色でリンクとして有効になります。間違ってクリックすると反応して鬱陶しい。
...
0
票
1回答
44 件の閲覧数
javascriptのオブジェクトにsvgを文字列で格納してhtmlに追加する方法
htmlに外部ファイルからsvgを読み込みたくて、jsファイルのオブジェクトに文字列としてsvgを格納してhtmlに追加する方法を考えたのですが、上手く動作しません。body直下にsvgを置いているので上部に空白出来るはずなのですが、出来ないです。
見ていただけないでしょうか?
index.html
<!DOCTYPE html>
<html lang="ja"...
1
票
1回答
103 件の閲覧数
HTML5 <input type=“datetime-local”> step について
以下の HTML を Chrome で表示すると時間入力とポップアップするカレンダーのような入力が出ます
<input type="datetime-local" step=600>
ボックスからの入力の方はどうやっても step 以外入力できないのですが
カレンダー入力からは任意の分が入力できてしまい非常に使いにくいUIになってしまいます
...
0
票
1回答
171 件の閲覧数
JavaScript の for 文でテーブルを作成したい
td {
border: solid 1px;
/* 枠線指定 */
}
table {
border-collapse: collapse;
/* セルの線を重ねる */
}
.cell {
width: 100px;
}
.title_area {
height: 30px;
}
.up_down_border {
border-top-style: ...
0
票
2回答
159 件の閲覧数
foreachで連続するセルを横並びにしたい
以下のようなコードでテーブルを作成すると図のcccとdddがaaaの下に配置されてしまいます。こちらをbbbの右に並べたいのですがどのようにしたらいいでしょうか?
HTML
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</...
0
票
1回答
61 件の閲覧数
display:block;でセルを横並びにしたい
display:block;同士横並びにしたい
上記で回答いただきましたが、今度はセルが多くなったときに画像のようにtd2とtd3を横並びにしたいのですがどのようにしたらいいでしょうか?
現状では下記コードで図の上のような形になってしまいます、図の下のようにしたいです。
HTML
<td>
<table>
<thead>
<tr>
...
0
票
0回答
76 件の閲覧数
htdocsに任意のファイルを置いてurlの最後尾を任意のファイル名に変えても表示されない
htdocsに任意のファイルを置いてurlの最後尾を任意のファイル名に変えても表示されないのはなぜでしょう?
ファイルに問題があるのでしょうか?
ファイルはhtml php両方で置いて 両方だめです
追記
実際に置いたディレクトリ : nfs://ip-ad/opt/lampp/htdocs/project
ファイル名 : pdo_form.php , pdo_form.html
...
0
票
1回答
58 件の閲覧数
grid-template で余白を設けるときにドットを使うのはそういう仕様ですか?
【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】 - YouTube で grid-template で余白を設けるのにドットを用いています(解説されているように gap を使うよりわかりやすそうなので使うつもりです)。
ソースコードは下記のようです。
html-css-class/style....
0
票
1回答
92 件の閲覧数
PHPサーバーとHTTPサーバー
通信 というか 投稿 アップロードをする際 クライアントから出たデータはどこへいってますか? HTTPサーバーを介して HTMLサーバー そのあと PHPサーバー で レスポンス でしょうか?
0
票
1回答
73 件の閲覧数
htmlとjqueryで入力フォームを作成、ページが呼び出されるごとに「No」の箇所に自動採番したい
以下の形で、各項目を作成して入力フォームが呼び出せれます。
この呼び出された際に、一番上の「NO」に、呼び出されるごとに 1、2、3、・・・・・・と受付番号を採番していきたいのですが、何かよい方法があれば教えてほしいです。
htmlやjquery初心者なので検索方法がいまいちピントこないです。宜しくお願いします。
<!-- 基本情報入力 -->
<div id='...
0
票
1回答
161 件の閲覧数
PHPでデータベースに接続するときにエラーが出る
エラーでコードがそのまま出ます
html
<html>
<head>
<title>フォーム画面</title>
<meta charset="utf-8">
</head>
<body>
<h1>フォーム画面</h1>
<form action="...
1
票
1回答
248 件の閲覧数
<input type=“date”>に入力中の値を取得することは出来ないのでしょうか
<input type="date">で、画面上で年のみ入力した状態で、ボタンイベントを発火した際に、
画面上に入力中の年の情報を取得する方法はありますでしょうか?
具体的には、以下画像の状態で、messageボタンを押下した際に、「2020」という値を取得する方法が知りたい内容です。
ブラウザのデバッガにて、<input type="date&...
0
票
1回答
63 件の閲覧数
ブラウザの横幅によっては、グリッドエリアに隙間ができてしまう
Depending on the width size of the browser, the grid area may not fit でも質問したのですが満足いく回答が得られなかったので、こちらでも質問します。
表題の通りで、ブラウザの横幅を伸ばしたり縮めたりしていると、グリッドエリアに隙間が生じているような動きをします。
確認したブラウザ:Chrome Version 85.0.4183....
0
票
0回答
74 件の閲覧数
0
票
0回答
51 件の閲覧数
htmlに投稿ごとにsqlのデータをセルのようにして表示
htmlに投稿ごとにセルのようにして表示するには$row['xxxx']をなにで表示すればいいですか? articleだと分配できないようにおもえます
0
票
1回答
173 件の閲覧数
Leaflet チェックボックスの判定をしてマーカーの削除をしたい。
Leaflet チェックボックスの判定をしてマーカーの削除をしたい
現在のコードとして、チェックボックスを入れると、県にピンが立つような感じです。
クリックする度に、ピンが立つので影がついていってしまいます。
東京がONになったら、東京にピンが立って、OFFになったらピンが消えるような感じにしたいのですが、コードの想像もできません。
分かる方、教えて頂きたいです。
<!DOCTYPE ...
0
票
1回答
64 件の閲覧数
javascriptでbuttonをクリックしても演算子が表示されない
現在javascriptで電卓を作っている途中なのですが数字ボタンをクリックすることで数字を<div ID="result">に表示することができたのですが、演算子のボタンをクリックして<div id="Halfway">に表示しようとしても-ボタンは表示できるのですがそれ以外のボタンはクリックしても表示されません。...
-5
票
1回答
151 件の閲覧数
0
票
1回答
537 件の閲覧数
JavaScript から exe ファイル (Outlook) を起動させたい
はじめまして、現在JavaScriptにてwebページを作成中です。
outlookをボタン押下時に起動させたい(exeを起動するだけで新規メールの作成ではない)のですがうまくいかずに困っています。
以下のコードにてボタンを押すと現状『アクセスが拒否されました。』と出てしまいます。
解決策や別の実行方法があれば教えていただきたく思います。
<input type="button&...
0
票
1回答
200 件の閲覧数
Htmlに埋め込んだテキストファイルをJavaScriptで取得したい
自分だけが使う開発用(一般に公開の予定はないのでセキュリティはあまり気にしてない)のホームページにおいて、ページと同じフォルダ内にあるテキストファイル(.txt)の中身をJavaScriptで値として取得したい思っています。なお、ファイル選択ダイアログを開いて選択するのではなく、ページを開けば自動的にJSに取得されるようにしたいです。
今試している方法としては、テキストファイル(.txt)...
0
票
1回答
65 件の閲覧数
grid-template-columns: minmax(100px, 200px) 1fr 1fr は どのような挙動になりますか?
CSSの関数はどんどん便利になっている!minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス に
.grid {
display: grid;
grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}
とその挙動が載っています。
解説は下記
ビューポートのサイズが変更されると、...
0
票
1回答
58 件の閲覧数
CSSグリッドの角括弧で囲まれた部分の意味と使い方はどのようなものなのでしょうか?
grid-template - CSS: カスケーディングスタイルシート | MDN に下記のコードがありました。
#page {
display: grid;
width: 100%;
height: 200px;
grid-template: [header-left] "head head" 30px [header-right]
...
0
票
1回答
88 件の閲覧数
ページ全体 (上下左右) の余白を無くすことができません
現象
出張 - Airbnb のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。
ご教授よろしくお願いいたします。
期待値
サイト全体の上下左右の余白を無くしたいです。
再現手順
下記コードを実行すると再現できます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>...
0
票
1回答
288 件の閲覧数
GitHub Pages 上で CSS が反映されない
GitHub Pages を用いて作成したHPをアップロードしようとしましたが、CSSだけがうまく反映されませんでした。
対処の仕方を教えてください。お願いします。
以下、コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content=...
0
票
0回答
43 件の閲覧数
0
票
0回答
84 件の閲覧数
checkboxを非表示にした時にlabelが効かない。
pc用のヘッダーとスマートフォン用にcssを分けてヘッダーを作成中です。
(max-width: 768px)までは左のトグルバーを押下し
果物のカテゴリーは出てくるのですが、768pxを下回った時点でのヘッダーではカテゴリーを押下してもオレンジは出てこないです。
@media screen and ( min-width: 0px ) and (max-width: 640px){
...
0
票
1回答
151 件の閲覧数
Javascript のコンストラクタ 内で処理の実行順について
下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。Javascriptは非同期処理のためでしょうか?
text-animation.js
class TextAnimation {
constructor(el) {
//elには<div class...が入ってる
console.log(el);
...
0
票
1回答
80 件の閲覧数
JavaScriptコード内でThymeleafを使用したい
HTML内に記載しているJavaScriptコード内でThymeleafを使用したいです。
ソースコードは以下の通りです。
具体的には、Thymeleafで"${i}"を指定している為、
"i" 変数の中身をvalueとして参照したいです。
<a href="javascript:document.f.page.th:value = &...
0
票
0回答
50 件の閲覧数
HTMLのaudioタグを使って音声再生している時に、途中で音声が止まる事がある
HTMLでは以下のコードを書いて preload しております。
<audio id="soundFile" preload="auto">
<source
src="xxxxxx.mp3"
type="audio/mp3"
/>
</audio>
...
0
票
1回答
93 件の閲覧数
inputのrangeのつまみのデザインを変えたい
質問内容
inputのrangeのつまみのデザインを変えたいのですが、-webkit-slider-thumbにbeforeやafterといった擬似要素が付与できません。
ソースコード
input[type="range"]::-webkit-slider-thumb {
&::before {
//反映されない
}
}
...