[html] タグが付いた質問
876
質問
0
票
0回答
10 件の閲覧数
リアルタイムでtemplate内の変数を変化させたいです
現在、サーバーに対してリクエストをして、サーバー側でバリデーション後エラーメッセージを返すプログラムを作成しております。
エラーメッセージをサーバーから取得した後、エラーの内容をdata.messageに格納後、console.logを用いて表示した結果、正常に値が出力されていました。
それに伴い、リアルタイムでtemplate内のdata.messageが変わると考えていたのですが、...
0
票
0回答
46 件の閲覧数
Next.js 「Can't perform a React state update on an unmounted component」という警告が発生し、メモリリークしてしまいます。
Next.jsでmdファイルをpre-renderingしてhtmlに変換し、その結果を表示するシンプルなサイトを作成しています。
非常にシンプルな構成のサイトなのですが、ページ遷移や言語切り替えをローディング直後に連打すると
Warning: Can't perform a React state update on an unmounted component. This is a no-op,...
0
票
1回答
49 件の閲覧数
bracketsでjqueryによるbgSwitcherプラグインを使用したいのですが、うまく適用できません
表題の件について、モニターの最上部にてフルスクリーンでの複数画像のスライドを行いたいのですが、
jsの読み込みが原因なのか、複数画像の相対パスの表示方法が違うのか、うまくできない状況です。
以下に、うまく表示されない原因ではないかと思われる箇所を3点表記しました。
js読み込みとして、htmlのheadに<script src="https://ajax.googleapis....
0
票
1回答
48 件の閲覧数
jQuery でマウスホバー時に border を出したい
hoverしたときにspanタグにborderを出したいのですが上手くいきません。
どうすればうまくいきますか?
<ul class="nav">
<li class="nav-item"><a class="navbar-link" href="/xxx.html"><...
0
票
0回答
60 件の閲覧数
JavaScriptとHTMLを使ってボタンをクリックすると音が出るコードを知りたい
このようなコードで実行してみたのですが、ボタンをクリックしても音が鳴りません。
ボタン一つずつに別の音を入れ、クリックで音を鳴らすには何処を修正したら良いのでしょうか。
また、キーボードとボタンの紐づけをさせるにはどのようなコードを入れると良いでしょうか?
宜しければ回答をよろしくお願いします。
html
<!DOCTYPE html>
<html lang="ja&...
0
票
1回答
37 件の閲覧数
flexboxで要素の高さが揃わない
解決したいこと
cssでコーディングをしているのですが、flexboxで要素の高さが揃わないです
状況
下記のコードがHTMLです。
<div class="plans-content">
<div class="plans-content-item">
<h3 class="plans-content-...
2
票
1回答
131 件の閲覧数
CSSにおけるpxの使い所を知りたい
今CSSを学んでいるのですが、素朴な疑問として、サイズにおける px の使用するタイミングが知りたいです。
デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
なので、pxより%で指定したほうがいいのかと思ったりします。
pxの使用どころはどういったタイミングなのでしょうか?
...
0
票
0回答
33 件の閲覧数
CSSにおいてボックスがはみ出る問題を解決したい
HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか?
気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、
select_test_areaクラスはheaderクラスの高さを選んでいないため、...
0
票
0回答
55 件の閲覧数
C++のゲームにオンラインハイスコアリーダーボードを導入したいです [クローズ済み]
チームメンバーのコードもあるため、ソースの開示は厳しいですが、回答する上で必須のソース等がありましたら載せれる範囲で載せます。
概要
Windowsデスクトップアプリケーション DirectX11 個人ライブラリを使用しています
プログラミングを始めて1年も満たないレベルです
勉強したこと
PHPの基礎(簡易掲示板作成 動作確認にはxamppを使用しました)
HTMLの基礎(...
0
票
1回答
45 件の閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
1回答
72 件の閲覧数
次のホームページのアニメーションの技術を分析したい
Javaを中心にWebアプリ開発を主にしています。
今ホームページ制作にも興味を持ち、色んなサイトを見ているのですが、
以下のサイトのアニメーションに興味があります。
このサイトのHoldすると結晶になるようなアニメーションはどんな技術を使っていますでしょうか?
あるいは調べ方を教えていただけますと幸いです。
https://tsuyoshi.in/
URLがHTMLではないので、...
2
票
1回答
55 件の閲覧数
検索エンジンの検索結果に自サイトの主要コンテンツを表示させる方法を知りたい
自社のホームページを検索すると、トップページのみしか表示されません。
他社様のホームページを検索してみると、トップページ以外の各ページが下段に表示されます。(添付画像)
同じ様に表示させるには、どの様なタグを組み込めば良いのでしょうか。
ご回答をお待ちしております。
参考画像の様に、表示させたいのですが方法をご教示くださるとたすかります。
宜しくお願いします。
0
票
2回答
69 件の閲覧数
Javascriptで後から追加した要素をふわっと出現させるには
JavaScriptでボタンをクリックすると新しく要素を追加するコードを書いてボタンを押すと要素が追加されるんですが、その追加された際のアニメーションを下からふわっとフェードインするようにしたいです。
イメージとして最初は要素が2つある。この最初の2つはふわっとさせられる。
<div class="dlcard effect"></div>
<...
-1
票
1回答
54 件の閲覧数
Spring Tool Suite 4でscriptタグ内のエラー注釈を消したい
Spring Tool Suite 4でHTMLの編集を行っており、
scriptタグ内にthymeleafやjavascriptの記載を行うとエラー注釈が出てしまいます。
こちらを消す方法をご教授頂ければ幸いです。
0
票
1回答
38 件の閲覧数
CSSにおいて正方形に余白がある状態にしたい
今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-...
0
票
1回答
30 件の閲覧数
CSSにおいて画像を上下に5つずつ配置したい
今HTML,CSS,Bootstrapでページをデザインしています。
https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。
動きはなくてよくて、配置のみになります。
これを上下2列で5ボックスずつで配置したいです。
どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。
...
1
票
1回答
34 件の閲覧数
HTML,CSSによるデザインで要素の高さを70%にしたい
html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。
恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。
▼html
<section class="section-box" data-scroll-index=&...
2
票
1回答
77 件の閲覧数
tailwind cssでradioをボタンのように表示したい
tailwind cssをインストールして使っています。
inputのradioをボタンのように装飾表示して、クリックしたら色が変化するようにしたいのでこのようにしました。
@tailwind base;
@tailwind components;
@tailwind utilities;
.radio-button:checked + label {
@apply bg-indigo-...
1
票
1回答
36 件の閲覧数
画像のリンクをhoverした際に下線が出るのを防ぎたい
現在rails勉強中で、ブログアプリを作成しています。画像アイコンをルートに戻れるリンクにしているのですが、その画像アイコンをホバーすると下線が表示されます。
これを出ないようにするにはどうしたらいいでしょうか?
調べた方法を試したのですが、うまくいきません。
cssを以下のようにするといった内容はよく見ましたが、うまくいきません。
text-decoration: none;
border: ...
1
票
1回答
59 件の閲覧数
html css で<p>の色を赤にしたいが適用されない
提示画像はディレクトリ構造のスクショで提示コードはその中身です。
タイトル通りですが「cssで設定した <p> を赤色に設定することが出来ない」ですどうすればいいのでしょうか?
ディレクトリ構造を確認しまたがやはり正しい場所に居るためどうすればいいかわかりません。参考サイト通りにやりましたが適用されません。
https://developer.mozilla.org/ja/docs/...
0
票
1回答
34 件の閲覧数
VSCodeでインストールした拡張機能がメニューに出てこなくなった
【現状】
以前、VSCodeでHTMLを書いていました。
その際、拡張機能を色々とインストールしたのですが、その中にPreview機能もありました。
それを使って、VSCodeでコードを書きながらHTMLプレビューをし確認するといった作業をやっていました。
その後、Pythonを書く機会があってPythonをインストールし、使っていました。
その後、...
0
票
0回答
61 件の閲覧数
ServiceWorker で特定のファイルをキャッシュから削除したい
サイトをPWA化するために ServiceWorker を使用しています。
キャッシュ指定しているファイルを修正した際にそのファイルだけキャッシュからではなく、サーバーから読み込んで再度キャッシュに取り込みたいのですが方法が分かりません。
下記のサイト等で追加するメソッド(cache.put)は分かったのですが、削除する方法が分かりません。...
0
票
0回答
82 件の閲覧数
twitterのOGP(サムネイル画像)を動的に変えたい
現在HTML,JQueryでおみくじアプリを作っており、その結果をtwitterに投稿する機能があるものを作っています。
https://k49977.github.io/omikuji/
ここでやりたいこととして、おみくじ結果の画像をサムネイルに反映させたいです。つまり、twitterのサムネイルを動的に変えたいです。 それについてアドバイスいただければと思います。
...
0
票
1回答
92 件の閲覧数
JavascriptでDOM処理のタイミングが合わず値を上手く処理出来ない。
問題
画像から色の情報を取得したく color-thies というライブラリーを使用しています。
途中で画像のsrcパスを書き換えて別の画像に差し替える処理があるのですが、その際タイミングが合わず前の画像の値になってしまいます。
プログラム動作
inputのフォーカスが別の要素に移った際に下記のイベントリスナーが発火します。それでURLの値があればサムネイルを取得します。...
0
票
0回答
46 件の閲覧数
Eclipse で HTML の補完候補を上下キー以外で切り替えたい
補完機能を使うと候補がたくさん出るのですが、選ぶときに上下のキー操作で行っています。
もう少し効率の良い選び方があれば教えてください!
【現状】 Ctrl + space キーを押して補完一覧を表示後、右手を上下のキーのある場所まで移動し、候補を選びます。これが、少し手間だと思っています。
【希望】右手を上下キーの場所まで移動せずに、補完一覧を出したポジションのまま、選択したいと考えています。
...
0
票
1回答
59 件の閲覧数
phpを使ってログインした後の画面移動
前提・実現したいこと
phpを使って、ログインした後に画像投稿フォームに飛んで画像を投稿できる機能を作っているのですが、 ログインした後に画像投稿フォームに飛ぶのですが、投稿した後に、別のページに飛んで、’アップロードされました。’などの表示がされ”戻る”ボタンを押すと、毎回ログインするページに飛び再度ログインしないとちゃんと投稿されているのか見れません。 ”戻る”...
0
票
1回答
65 件の閲覧数
javascriptの動的な画面変更とフラグ管理について
以下の内容で表示を押すとメニューの以下の内容を表示非表示するものを作ってみていますが、画面が一瞬ちらついて映るだけで原因を教えていただけないでしょうか?
<div class="menuContents">
<ul class="menuList">
<li>a</li>
<li>...
0
票
1回答
155 件の閲覧数
2倍サイズに書き出した画像が通常ディスプレイでぼやけてしまう
Retinaディスプレイ対応のため、画像、動画を2倍で書き出したのですが、Retinaディスプレイは綺麗に表示されますが、通常ディスプレイではぼやけてしまいます。
何か対応はありますか?
0
票
1回答
60 件の閲覧数
display:flex内の文字の縦位置を中央にできません
下記に該当箇所を抜き出します。
こちらのクラスtabBtn内のタブ1~5までの文字を縦位置中央にする方法をご教授ください
HTML
<!-- ヘッダータブ -->
<div id="tab-1" class="switch"></div>
<div id="tab-2" class="...
0
票
2回答
91 件の閲覧数
イベント移譲(Event delegation)の引数eventが何処から来るのか知りたい。
前回の質問でイベント移譲(Event delegation)と言う概念を教えて頂きました。
addEventListnerをページ更新後に追加される要素にも適応したい。
質問
それで 下記のコードにあるdocument.querySelector(".dlcardWrap").addEventListener("blur", function (elm) ...
0
票
1回答
89 件の閲覧数
スクロールバーのつまみの部分を非表示にしてスクロールできないようにしたい
スクロールバーのつまみの部分を非表示にしてスクロールしないようにしたいのですが、どうすればいいのでしょうか。
スクロールバー自体を消すのは overflow: hidden でできますが、消すと消えた領域分だけ画面がガタつくので表示したままでスクロールだけできないようにしたいです。
(instagramがこのガタつく方式)
...
1
票
1回答
65 件の閲覧数
htmlのimgパスが読み込めなかった際のエラーハンドリングをしたい。
webアプリを作成しています。
htmlで画像のパスを最初は下記のように設定しています。
<img src="images/pinkguy.jpg" alt="">
その後JSで取得した別のパスに書き換えています。
<img src="https://img.youtube.com/vi/dxezoC8w3GU/...
1
票
0回答
59 件の閲覧数
styleの中のwidthの値を可変にしたい
html css初心者です、質問がわかりにくいかと思います、申し訳ございません。
CSSで星のレーティング評価を0.0〜5.0で表示するメモ
上記のページを参考にしながら星の実装を目指しているのですが、widthの50%のところを変数にすることは可能でしょうか。
listの中にこれを入れてfor文で回して、itemによってwidthを可変にすることが目標です。
よろしくお願いいたします。
1
票
1回答
212 件の閲覧数
チェックボックスをJavascriptでチェックできてもinput type=“checkbox” の後にcheckedが付かない
Python、seleniumで社内サイトをスクレイピングしているのですが、チェックボックスにチェックをいれてから、押すボタン【確定ボタン】があります。
そこで、seleniumでそのサイトまでアクセスしたのち、下記のスクリプトでチェックボックスにチェックを入れようと考えました。
script = 'document.querySelector("チェックボックスのCSSセレクタ&...
0
票
2回答
62 件の閲覧数
Elementオブジェクトから子要素を取り出すには
javascriptで下記のDOM要素?を取得したのですが、子要素の.dlcard > dlcard__thumbnail > imgのようにアクセスしたいです。どのような関数を使用したらよいでしょうか? 要素はinputという変数に格納されています。
追記
説明不足ですいません。
inputに格納されたelementオブジェクトから要素を取り出す方法はないでしょうか?
...
0
票
1回答
84 件の閲覧数
addEventListnerをページ更新後に追加される要素にも適応したい。
Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。
分からない事
同じクラス名の要素に別々の変更を加えるには
作成したい機能
inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。
要素について
.dlcardWrapがあってその子要素として.dlcardがあります。...
0
票
1回答
53 件の閲覧数
特定のキーが押されたら動画を一時停止、再生したい
特定のキーが押されたらビデオを一時停止、再生させたいのですがどうすればできるでしょうか。
下記のコードはそれぞれkeydownのサンプルコード
https://www.ipentec.com/document/javascript-accept-keydown
と、videoのサンプルコード
http://www.htmq.com/video/
を参照し自分なりに合わせたものです。
...
0
票
0回答
60 件の閲覧数
imgタグのsrcsetで画像は切り替わらないのでしょうか?
実際にためしたコード
下記コードを書いてみました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-...
0
票
2回答
65 件の閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1回答
61 件の閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
0回答
42 件の閲覧数
todoのデータが消えてしまう localstorage
すみませんコードの張り方がわからず 変な風になってしまいました、
ご教示いただけると幸いです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>やることリスト</...
0
票
1回答
87 件の閲覧数
ナビゲーションメニューが横並びになりません。
練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>company</title>
<...
-1
票
2回答
100 件の閲覧数
グーグルブラウザなのにbrowserNameでMozillaと出る
var name = navigator.appName;
console.log(name)
とjavascriptのコードを書いてグーグルブラウザで実行したところ、Mozilla と表示されました。
これは正しいのでしょうか?何か間違っていますか?
0
票
1回答
44 件の閲覧数
ページが変わっても“content_scripts”が反応しない
YouTube 向けの拡張機能の作成をしており、manifestには以下のように記述しました。
"content_scripts":[
{
"matches":[
"https://www.youtube.com/*"
],
"js":[
...
0
票
0回答
57 件の閲覧数
display:gridで、画像の高さが合わないです。
初めまして、お願いします。
display:gridにして、画像を2列2行で配置したのですが、1枚だけ何故か、高さが合いません。デベロッパーツールで確認しましたが、よくわかりませんでした。
初歩的な質問で申し訳ありません。
HTML
CSS
1
票
2回答
152 件の閲覧数
セレクタにシャープ記号(#)を使う意味と、ドット記号(.)を使う時との違いは?
模写の際CSSのコードを記入していると、#header, #footer のような記述があります。
.header または header, footer を使うことによりHTML要素を指定できるのは知っていますが、# を使った指定方法は知りませんでした。
ぼくは、この # がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。
...
0
票
1回答
79 件の閲覧数
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
票
2回答
95 件の閲覧数
iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない
下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。
addEventListenerの第三引数をtrueにして試してもみたのですが結果は同じでした。
実際のiframe内に読み込むページはTwitterの埋め込みウィジェットになるので、
...
0
票
0回答
74 件の閲覧数
画像が表示されない
現在テックアカデミーさんの教材でHTMLを学習しております。(10月19日からメンターの指導開始の為聞ける人がおりません。)
発生している問題
画像を表示したいのですが、出てきません。(AWS Cloud9使用)
これまでに試した事
imgやsrc、altが入力間違えていないか確認した。
ダウンロードをし直して再度プレビューしなおした。
(1の方法....