[html] タグが付いた質問
889
質問
1
票
1回答
77 件の閲覧数
GitHub Pages で一部の画像だけ表示されない
以下です。よろしければご回答のほど、よろしくお願いいたします・・!
聞きたいこと
GitHub Pagesにて公開したページにて、imgフォルダ内の一部の画像のみ表示されない。
対象URL
https://yukinoshita1103.github.io/leopaquiz/quiz.html
詳細
クイズのWebアプリ。
選択肢として、imgディレクトリに置いた画像をランダムに表示させたいです。...
0
票
1回答
68 件の閲覧数
Google ChromeでHTMLとCSSをモバイル表示をさせたときの画面サイズが異常です。
現象
Google Chromeのモバイル表示を320×568pxに設定して、そのサイズに合わせたコード(HTMLとCSS)を書いていたのですが、VS CodeのLiveServer機能でGoogle Chromeのモバイル表示をさせると、980×1739pxの大きさになってしまいます。
期待値
Google Chromeのモバイル表示で、320×568pxの大きさで表示させること。
再現手順
...
0
票
1回答
56 件の閲覧数
form->error のclsssを複数指定は可能か
cake
$this->Form->error('Test.id', null, ['wrap' => 'p', 'class' => 'error-message']);
以下html
<div>
<div>
<p>
<input type="text" name="data[test][id]&...
0
票
1回答
44 件の閲覧数
Tumblrのタイトル部分と日付け書式の変更方法
Tumblrの無料テーマ
https://dharmatheme.tumblr.com/
を利用して個人の備忘録のようなものを作っりたいです。
https://rum-julep.tumblr.com/post/643969604868292608
↑この画像の「あいう」となってるタイトル部分を見やすくしたいので横の画像の「美しい見出しのデザイン」のようにしたいのですが ...
0
票
1回答
47 件の閲覧数
CSSを読み込みたいのですが、どうしても読み込まれません。
現象
CSSが全く読み込まれません。
期待値
CSSを読み込んでブラウザ(Google Chrome)に反映させたいです。
再現手順
下記のHTMLとCSSをGoogle Chromeで実行すれば反映されます。CSS設計の形式は、FLOCSSです。
index.html
<!DOCTYPE html>
<html lang="ja">
<...
0
票
1回答
45 件の閲覧数
CSSで、画像を横並び&重ならない&ディスプレイサイズに合わせて縮小したい。
聞きたいこと
画像を横並びで表示し、かつ、ディスプレイサイズに合わせて縮小する方法。
html,css,javascript関連です。
現状と理想
現状)画像を横並びで表示し、かつ、ディスプレイサイズに合わせて縮小しているが、重なってしまっている。
理想)画像を横並びで表示し、かつ、ディスプレイサイズに合わせて縮小しているが、重ならないようにしたい。
背景
2枚の画像から、...
0
票
0回答
24 件の閲覧数
firebaseにて、htmlファイルごとに異なるdataを作成したい
今現在行っていることは下記です。
複数のhtmlファイル(様式は同じだが異なるジャンル)を用意する→モーダルウィンドウにてタイトルと文字を記入して送信すると、その中身がdivにひとつひとつ追加されていく
そしてfirebaseにてdataを作成し、HTMLに反映されるところまでは実装できたのですが、
もちろんですがひとつのhtmlファイルだけではなく(ex)a.html)、b.html、c....
0
票
0回答
54 件の閲覧数
cssで縦幅が決まっていないブロックの上下中央揃え
cssで縦幅のpx指定をしない(中身に合わせた大きさになって欲しい)ブロックの上下中央揃えがうまくいきません。
下記は一応うまくいきますが、htmlやbodyに100%指定しなくてはならないのが気になります。
html,
body {
height: 100%;
}
.wrapper {
display: flex;
justify-content: center;
...
0
票
1回答
59 件の閲覧数
JavaScriptでwindowのサイズ可変を制限するには
JavaScriptで500pxより下にwindow幅を小さく出来ないようにJavaScriptで制限をかけたいのですが、そのようなAPIは提供されているのでしょうか?
調べてみて、window.minWidthという物が出てきたのですが上手く動作しなかったです。
chromeで動作すれば良いです。
すいませんよろしくお願いします。
0
票
1回答
85 件の閲覧数
JavaScriptでPNG画像などのデータをバイナリ形式で取得したい
FileReader.readAsText()のサンプルを試して動作させているのですが、PNG画像を選択すると文字化けしてしまいます。
文字化けしないようにするにはどうしたら良いでしょうか?
やりたいことは、PNG画像のデータを以下のようなバイナリ形式で受け取り、これをそのままデータベースに保存したいです。データはサーバ側でPythonを動作させているのでそちらで受け取りたいです。
b'\...
1
票
1回答
43 件の閲覧数
adblock等におけるhrefのフィルター
hogeとfugaが両方、順不同でURL文字列(href属性の値)に含まれる要素を消したい場合、どのようなフィルタになるのでしょう?
a href="example.com/hoge/fuga"
a href="example.fuga.com/hoge"
などは消して、
a href="example.com/hoge"
a href=...
0
票
0回答
81 件の閲覧数
htmlでリンクを押したらcsvファイルを読み込んでグラフを表示させたい
実現したいこと
web上のリンクかボタンを押したら特定のcsvファイルを読み込みグラフを表示させる。
試したこと
以下のソースコードはファイル選択ボタンからcsvファイルを選択しグラフを表示させるプログラムです。
これをローカルにあるcsvファイルを読み込むプログラムに変更させるところで行き詰まっています。
<!DOCTYPE html>
<html lang="ja&...
0
票
1回答
49 件の閲覧数
TableのRowspanのカラムがSafariとFirefox上で見ると潰れて見えてしまう
下記のようなテーブルを作成しChromeで表示すると綺麗にrowspanで一つにしたカラムが見えているんですが、FirefoxとSafariだとこのrowspanしたカラムが潰れて見えてしまいます。
縦書きの指定が悪いのかと思いましたが縦書き自体はFirefox、Safari上でも表示されているのでrowspanがうまく表示されていないのかなと思いました。
...
0
票
1回答
93 件の閲覧数
HTML,CSS gridなしで画像配置をしたい
画像の配置調整を行いたいです。
大きく2つあります。
1つ目
1段目を2段の両端に揃えて均等配置配置したいです。
→ 現状上手くいっておらず、解決策を教えて頂きたいです。
2つ目
3段目の2枚を2段目の左側に配置したい為、gridを使用して調整しています。
Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。
→ CSS変換など試したのですが、上手くいきません。
...
0
票
0回答
35 件の閲覧数
AutodeskのForge Viewerでマークアップを2D上の指定の場所に表示させる方法を教えてください
HTML+JSにautodesk-forgeのforge viewerを組み込んで開発を行っています。
viewer上の2Dの特定のオブジェクトの近くにテキストを表示したいと考えており、方法を探しています。
下のコードの修正点、または他の実現方法があれば教えてください。よろしくお願いします。
構成
HTML+JS
試したことと結果
下記の記事の内容を実践
https://adndevblog....
0
票
1回答
73 件の閲覧数
sliderProスライド画像が少しだけ下がってしまう。
前回投稿したのですが、良い回答がいただけなかったので、再編集しました。
スニペットは拡大して確認していただけると幸いです。
まだ、スニペットでまだ表現できていない部分があるので合わせてわかる方ご教授お願いします。
1.スニペットでは<{section name=i loop=5}>が効いていません。本番環境ではループで画像を取得する処理が入っています。...
0
票
1回答
39 件の閲覧数
formで囲ったラジオボタンから選択された値を取り出したい
本来フォームに囲まれた中なら下記のコードでチェックされた値を取得出来るのですが、おそらくnav, Ul, li 等を使用しているので上手く取得出来ないのでしょうか?
let DOM = {}
DOM.languageInputs = document.querySelectorAll('.language input[name="country"]')
console.log(DOM....
0
票
1回答
50 件の閲覧数
リアルタイムでtemplate内の変数を変化させたいです
現在、サーバーに対してリクエストをして、サーバー側でバリデーション後エラーメッセージを返すプログラムを作成しております。
エラーメッセージをサーバーから取得した後、エラーの内容をdata.messageに格納後、console.logを用いて表示した結果、正常に値が出力されていました。
それに伴い、リアルタイムでtemplate内のdata.messageが変わると考えていたのですが、...
0
票
0回答
59 件の閲覧数
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回答
60 件の閲覧数
bracketsでjqueryによるbgSwitcherプラグインを使用したいのですが、うまく適用できません
表題の件について、モニターの最上部にてフルスクリーンでの複数画像のスライドを行いたいのですが、
jsの読み込みが原因なのか、複数画像の相対パスの表示方法が違うのか、うまくできない状況です。
以下に、うまく表示されない原因ではないかと思われる箇所を3点表記しました。
js読み込みとして、htmlのheadに<script src="https://ajax.googleapis....
0
票
1回答
56 件の閲覧数
jQuery でマウスホバー時に border を出したい
hoverしたときにspanタグにborderを出したいのですが上手くいきません。
どうすればうまくいきますか?
<ul class="nav">
<li class="nav-item"><a class="navbar-link" href="/xxx.html"><...
0
票
0回答
67 件の閲覧数
JavaScriptとHTMLを使ってボタンをクリックすると音が出るコードを知りたい
このようなコードで実行してみたのですが、ボタンをクリックしても音が鳴りません。
ボタン一つずつに別の音を入れ、クリックで音を鳴らすには何処を修正したら良いのでしょうか。
また、キーボードとボタンの紐づけをさせるにはどのようなコードを入れると良いでしょうか?
宜しければ回答をよろしくお願いします。
html
<!DOCTYPE html>
<html lang="ja&...
0
票
1回答
44 件の閲覧数
flexboxで要素の高さが揃わない
解決したいこと
cssでコーディングをしているのですが、flexboxで要素の高さが揃わないです
状況
下記のコードがHTMLです。
<div class="plans-content">
<div class="plans-content-item">
<h3 class="plans-content-...
1
票
1回答
140 件の閲覧数
CSSにおけるpxの使い所を知りたい
今CSSを学んでいるのですが、素朴な疑問として、サイズにおける px の使用するタイミングが知りたいです。
デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
なので、pxより%で指定したほうがいいのかと思ったりします。
pxの使用どころはどういったタイミングなのでしょうか?
...
0
票
0回答
43 件の閲覧数
CSSにおいてボックスがはみ出る問題を解決したい
HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか?
気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、
select_test_areaクラスはheaderクラスの高さを選んでいないため、...
0
票
1回答
55 件の閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
1回答
76 件の閲覧数
次のホームページのアニメーションの技術を分析したい
Javaを中心にWebアプリ開発を主にしています。
今ホームページ制作にも興味を持ち、色んなサイトを見ているのですが、
以下のサイトのアニメーションに興味があります。
このサイトのHoldすると結晶になるようなアニメーションはどんな技術を使っていますでしょうか?
あるいは調べ方を教えていただけますと幸いです。
https://tsuyoshi.in/
URLがHTMLではないので、...
2
票
1回答
59 件の閲覧数
検索エンジンの検索結果に自サイトの主要コンテンツを表示させる方法を知りたい
自社のホームページを検索すると、トップページのみしか表示されません。
他社様のホームページを検索してみると、トップページ以外の各ページが下段に表示されます。(添付画像)
同じ様に表示させるには、どの様なタグを組み込めば良いのでしょうか。
ご回答をお待ちしております。
参考画像の様に、表示させたいのですが方法をご教示くださるとたすかります。
宜しくお願いします。
0
票
2回答
75 件の閲覧数
Javascriptで後から追加した要素をふわっと出現させるには
JavaScriptでボタンをクリックすると新しく要素を追加するコードを書いてボタンを押すと要素が追加されるんですが、その追加された際のアニメーションを下からふわっとフェードインするようにしたいです。
イメージとして最初は要素が2つある。この最初の2つはふわっとさせられる。
<div class="dlcard effect"></div>
<...
-1
票
1回答
59 件の閲覧数
Spring Tool Suite 4でscriptタグ内のエラー注釈を消したい
Spring Tool Suite 4でHTMLの編集を行っており、
scriptタグ内にthymeleafやjavascriptの記載を行うとエラー注釈が出てしまいます。
こちらを消す方法をご教授頂ければ幸いです。
0
票
1回答
41 件の閲覧数
CSSにおいて正方形に余白がある状態にしたい
今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-...
0
票
1回答
32 件の閲覧数
CSSにおいて画像を上下に5つずつ配置したい
今HTML,CSS,Bootstrapでページをデザインしています。
https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。
動きはなくてよくて、配置のみになります。
これを上下2列で5ボックスずつで配置したいです。
どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。
...
0
票
1回答
38 件の閲覧数
HTML,CSSによるデザインで要素の高さを70%にしたい
html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。
恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。
▼html
<section class="section-box" data-scroll-index=&...
1
票
1回答
114 件の閲覧数
tailwind cssでradioをボタンのように表示したい
tailwind cssをインストールして使っています。
inputのradioをボタンのように装飾表示して、クリックしたら色が変化するようにしたいのでこのようにしました。
@tailwind base;
@tailwind components;
@tailwind utilities;
.radio-button:checked + label {
@apply bg-indigo-...
0
票
1回答
39 件の閲覧数
画像のリンクをhoverした際に下線が出るのを防ぎたい
現在rails勉強中で、ブログアプリを作成しています。画像アイコンをルートに戻れるリンクにしているのですが、その画像アイコンをホバーすると下線が表示されます。
これを出ないようにするにはどうしたらいいでしょうか?
調べた方法を試したのですが、うまくいきません。
cssを以下のようにするといった内容はよく見ましたが、うまくいきません。
text-decoration: none;
border: ...
0
票
1回答
64 件の閲覧数
html css で<p>の色を赤にしたいが適用されない
提示画像はディレクトリ構造のスクショで提示コードはその中身です。
タイトル通りですが「cssで設定した <p> を赤色に設定することが出来ない」ですどうすればいいのでしょうか?
ディレクトリ構造を確認しまたがやはり正しい場所に居るためどうすればいいかわかりません。参考サイト通りにやりましたが適用されません。
https://developer.mozilla.org/ja/docs/...
0
票
1回答
40 件の閲覧数
VSCodeでインストールした拡張機能がメニューに出てこなくなった
【現状】
以前、VSCodeでHTMLを書いていました。
その際、拡張機能を色々とインストールしたのですが、その中にPreview機能もありました。
それを使って、VSCodeでコードを書きながらHTMLプレビューをし確認するといった作業をやっていました。
その後、Pythonを書く機会があってPythonをインストールし、使っていました。
その後、...
0
票
0回答
80 件の閲覧数
ServiceWorker で特定のファイルをキャッシュから削除したい
サイトをPWA化するために ServiceWorker を使用しています。
キャッシュ指定しているファイルを修正した際にそのファイルだけキャッシュからではなく、サーバーから読み込んで再度キャッシュに取り込みたいのですが方法が分かりません。
下記のサイト等で追加するメソッド(cache.put)は分かったのですが、削除する方法が分かりません。...
0
票
0回答
148 件の閲覧数
twitterのOGP(サムネイル画像)を動的に変えたい
現在HTML,JQueryでおみくじアプリを作っており、その結果をtwitterに投稿する機能があるものを作っています。
https://k49977.github.io/omikuji/
ここでやりたいこととして、おみくじ結果の画像をサムネイルに反映させたいです。つまり、twitterのサムネイルを動的に変えたいです。 それについてアドバイスいただければと思います。
...
0
票
1回答
99 件の閲覧数
JavascriptでDOM処理のタイミングが合わず値を上手く処理出来ない。
問題
画像から色の情報を取得したく color-thies というライブラリーを使用しています。
途中で画像のsrcパスを書き換えて別の画像に差し替える処理があるのですが、その際タイミングが合わず前の画像の値になってしまいます。
プログラム動作
inputのフォーカスが別の要素に移った際に下記のイベントリスナーが発火します。それでURLの値があればサムネイルを取得します。...
0
票
0回答
48 件の閲覧数
Eclipse で HTML の補完候補を上下キー以外で切り替えたい
補完機能を使うと候補がたくさん出るのですが、選ぶときに上下のキー操作で行っています。
もう少し効率の良い選び方があれば教えてください!
【現状】 Ctrl + space キーを押して補完一覧を表示後、右手を上下のキーのある場所まで移動し、候補を選びます。これが、少し手間だと思っています。
【希望】右手を上下キーの場所まで移動せずに、補完一覧を出したポジションのまま、選択したいと考えています。
...
0
票
1回答
63 件の閲覧数
phpを使ってログインした後の画面移動
前提・実現したいこと
phpを使って、ログインした後に画像投稿フォームに飛んで画像を投稿できる機能を作っているのですが、 ログインした後に画像投稿フォームに飛ぶのですが、投稿した後に、別のページに飛んで、’アップロードされました。’などの表示がされ”戻る”ボタンを押すと、毎回ログインするページに飛び再度ログインしないとちゃんと投稿されているのか見れません。 ”戻る”...
0
票
1回答
71 件の閲覧数
javascriptの動的な画面変更とフラグ管理について
以下の内容で表示を押すとメニューの以下の内容を表示非表示するものを作ってみていますが、画面が一瞬ちらついて映るだけで原因を教えていただけないでしょうか?
<div class="menuContents">
<ul class="menuList">
<li>a</li>
<li>...
0
票
1回答
179 件の閲覧数
2倍サイズに書き出した画像が通常ディスプレイでぼやけてしまう
Retinaディスプレイ対応のため、画像、動画を2倍で書き出したのですが、Retinaディスプレイは綺麗に表示されますが、通常ディスプレイではぼやけてしまいます。
何か対応はありますか?
0
票
1回答
64 件の閲覧数
display:flex内の文字の縦位置を中央にできません
下記に該当箇所を抜き出します。
こちらのクラスtabBtn内のタブ1~5までの文字を縦位置中央にする方法をご教授ください
HTML
<!-- ヘッダータブ -->
<div id="tab-1" class="switch"></div>
<div id="tab-2" class="...
0
票
2回答
93 件の閲覧数
イベント移譲(Event delegation)の引数eventが何処から来るのか知りたい。
前回の質問でイベント移譲(Event delegation)と言う概念を教えて頂きました。
addEventListnerをページ更新後に追加される要素にも適応したい。
質問
それで 下記のコードにあるdocument.querySelector(".dlcardWrap").addEventListener("blur", function (elm) ...
0
票
1回答
104 件の閲覧数
スクロールバーのつまみの部分を非表示にしてスクロールできないようにしたい
スクロールバーのつまみの部分を非表示にしてスクロールしないようにしたいのですが、どうすればいいのでしょうか。
スクロールバー自体を消すのは overflow: hidden でできますが、消すと消えた領域分だけ画面がガタつくので表示したままでスクロールだけできないようにしたいです。
(instagramがこのガタつく方式)
...
0
票
1回答
66 件の閲覧数
htmlのimgパスが読み込めなかった際のエラーハンドリングをしたい。
webアプリを作成しています。
htmlで画像のパスを最初は下記のように設定しています。
<img src="images/pinkguy.jpg" alt="">
その後JSで取得した別のパスに書き換えています。
<img src="https://img.youtube.com/vi/dxezoC8w3GU/...
0
票
0回答
63 件の閲覧数
styleの中のwidthの値を可変にしたい
html css初心者です、質問がわかりにくいかと思います、申し訳ございません。
CSSで星のレーティング評価を0.0〜5.0で表示するメモ
上記のページを参考にしながら星の実装を目指しているのですが、widthの50%のところを変数にすることは可能でしょうか。
listの中にこれを入れてfor文で回して、itemによってwidthを可変にすることが目標です。
よろしくお願いいたします。
0
票
1回答
262 件の閲覧数
チェックボックスをJavascriptでチェックできてもinput type=“checkbox” の後にcheckedが付かない
Python、seleniumで社内サイトをスクレイピングしているのですが、チェックボックスにチェックをいれてから、押すボタン【確定ボタン】があります。
そこで、seleniumでそのサイトまでアクセスしたのち、下記のスクリプトでチェックボックスにチェックを入れようと考えました。
script = 'document.querySelector("チェックボックスのCSSセレクタ&...