[html] タグが付いた質問
1,117
質問
0
票
1
回答
162
閲覧数
sliderProスライド画像が少しだけ下がってしまう。
前回投稿したのですが、良い回答がいただけなかったので、再編集しました。
スニペットは拡大して確認していただけると幸いです。
まだ、スニペットでまだ表現できていない部分があるので合わせてわかる方ご教授お願いします。
1.スニペットでは<{section name=i loop=5}>が効いていません。本番環境ではループで画像を取得する処理が入っています。...
0
票
1
回答
122
閲覧数
HTML,CSS gridなしで画像配置をしたい
画像の配置調整を行いたいです。
大きく2つあります。
1つ目
1段目を2段の両端に揃えて均等配置配置したいです。
→ 現状上手くいっておらず、解決策を教えて頂きたいです。
2つ目
3段目の2枚を2段目の左側に配置したい為、gridを使用して調整しています。
Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。
→ CSS変換など試したのですが、上手くいきません。
...
0
票
1
回答
344
閲覧数
OnsenUIで複数ページを使用するときの戻るボタンが実装できない
こんにちは。
Monacaのアプリ製作プラットフォームを使っています。
使用しているJSフレームワークは、OnsenUI V2 JS Minimumです。
OnsenUIで複数ページを設定して、飛ぶ先のページに × のようにページを消して戻る仕組みを作っています。具体的には、index.html→page1.html→index.htmlという風に母体のindex.htmlに戻れるようにしたいです。...
0
票
1
回答
184
閲覧数
レスポンシブル iOS 横幅が合わない。
レスポンシブル Webページを作ったのですが、iPhoneのみ、なぜか横に幅ができ横スクロールしてししまいます。画像なども見切れる(左よりになる。)
CSSでwidthなどは 100% 等に指定していても 20% ぐらい必ず右に隙間ができてスクロールされてしまう。
解決方法があったら教えてください。
viewportは指定しています。
<meta name="viewport" ...
0
票
1
回答
54
閲覧数
formで囲ったラジオボタンから選択された値を取り出したい
本来フォームに囲まれた中なら下記のコードでチェックされた値を取得出来るのですが、おそらくnav, Ul, li 等を使用しているので上手く取得出来ないのでしょうか?
let DOM = {}
DOM.languageInputs = document.querySelectorAll('.language input[name="country"]')
console.log(DOM....
0
票
1
回答
487
閲覧数
bracketsでjqueryによるbgSwitcherプラグインを使用したいのですが、うまく適用できません
表題の件について、モニターの最上部にてフルスクリーンでの複数画像のスライドを行いたいのですが、
jsの読み込みが原因なのか、複数画像の相対パスの表示方法が違うのか、うまくできない状況です。
以下に、うまく表示されない原因ではないかと思われる箇所を3点表記しました。
js読み込みとして、htmlのheadに<script src="https://ajax.googleapis....
0
票
1
回答
100
閲覧数
jQuery でマウスホバー時に border を出したい
hoverしたときにspanタグにborderを出したいのですが上手くいきません。
どうすればうまくいきますか?
<ul class="nav">
<li class="nav-item"><a class="navbar-link" href="/xxx.html"><...
0
票
1
回答
730
閲覧数
flexboxで要素の高さが揃わない
解決したいこと
cssでコーディングをしているのですが、flexboxで要素の高さが揃わないです
状況
下記のコードがHTMLです。
<div class="plans-content">
<div class="plans-content-item">
<h3 class="plans-content-...
1
票
1
回答
246
閲覧数
CSSにおけるpxの使い所を知りたい
今CSSを学んでいるのですが、素朴な疑問として、サイズにおける px の使用するタイミングが知りたいです。
デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
なので、pxより%で指定したほうがいいのかと思ったりします。
pxの使用どころはどういったタイミングなのでしょうか?
...
0
票
0
回答
189
閲覧数
CSSにおいてボックスがはみ出る問題を解決したい
HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか?
気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、
select_test_areaクラスはheaderクラスの高さを選んでいないため、...
0
票
1
回答
5,878
閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
1
回答
99
閲覧数
次のホームページのアニメーションの技術を分析したい
Javaを中心にWebアプリ開発を主にしています。
今ホームページ制作にも興味を持ち、色んなサイトを見ているのですが、
以下のサイトのアニメーションに興味があります。
このサイトのHoldすると結晶になるようなアニメーションはどんな技術を使っていますでしょうか?
あるいは調べ方を教えていただけますと幸いです。
https://tsuyoshi.in/
URLがHTMLではないので、...
2
票
1
回答
66
閲覧数
検索エンジンの検索結果に自サイトの主要コンテンツを表示させる方法を知りたい
自社のホームページを検索すると、トップページのみしか表示されません。
他社様のホームページを検索してみると、トップページ以外の各ページが下段に表示されます。(添付画像)
同じ様に表示させるには、どの様なタグを組み込めば良いのでしょうか。
ご回答をお待ちしております。
参考画像の様に、表示させたいのですが方法をご教示くださるとたすかります。
宜しくお願いします。
0
票
2
回答
374
閲覧数
Javascriptで後から追加した要素をふわっと出現させるには
JavaScriptでボタンをクリックすると新しく要素を追加するコードを書いてボタンを押すと要素が追加されるんですが、その追加された際のアニメーションを下からふわっとフェードインするようにしたいです。
イメージとして最初は要素が2つある。この最初の2つはふわっとさせられる。
<div class="dlcard effect"></div>
<...
1
票
1
回答
903
閲覧数
リーダーモード用HTMLのガイドライン
スマートフォン用ブラウザの多くはWebページの記事部分のみを抜き出して読み易く表示する「リーダーモード」という機能が備わっています。他にも似たような機能を持つWebサービスとしてReadabilityやInstapaperがあります。
リーダーモードは便利ですが、ページによっては画像が表示されなかったり記事の抽出に失敗したりと、ブラウザの実装やサービスによってレンダリングがまちまちな印象です。
...
-1
票
1
回答
944
閲覧数
Spring Tool Suite 4でscriptタグ内のエラー注釈を消したい
Spring Tool Suite 4でHTMLの編集を行っており、
scriptタグ内にthymeleafやjavascriptの記載を行うとエラー注釈が出てしまいます。
こちらを消す方法をご教授頂ければ幸いです。
0
票
1
回答
133
閲覧数
CSSにおいて正方形に余白がある状態にしたい
今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-...
0
票
1
回答
133
閲覧数
CSSにおいて画像を上下に5つずつ配置したい
今HTML,CSS,Bootstrapでページをデザインしています。
https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。
動きはなくてよくて、配置のみになります。
これを上下2列で5ボックスずつで配置したいです。
どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。
...
1
票
1
回答
1,126
閲覧数
tailwind cssでradioをボタンのように表示したい
tailwind cssをインストールして使っています。
inputのradioをボタンのように装飾表示して、クリックしたら色が変化するようにしたいのでこのようにしました。
@tailwind base;
@tailwind components;
@tailwind utilities;
.radio-button:checked + label {
@apply bg-indigo-...
0
票
1
回答
96
閲覧数
HTML,CSSによるデザインで要素の高さを70%にしたい
html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。
恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。
▼html
<section class="section-box" data-scroll-index=&...
0
票
1
回答
260
閲覧数
画像のリンクをhoverした際に下線が出るのを防ぎたい
現在rails勉強中で、ブログアプリを作成しています。画像アイコンをルートに戻れるリンクにしているのですが、その画像アイコンをホバーすると下線が表示されます。
これを出ないようにするにはどうしたらいいでしょうか?
調べた方法を試したのですが、うまくいきません。
cssを以下のようにするといった内容はよく見ましたが、うまくいきません。
text-decoration: none;
border: ...
0
票
1
回答
71
閲覧数
html css で<p>の色を赤にしたいが適用されない
提示画像はディレクトリ構造のスクショで提示コードはその中身です。
タイトル通りですが「cssで設定した <p> を赤色に設定することが出来ない」ですどうすればいいのでしょうか?
ディレクトリ構造を確認しまたがやはり正しい場所に居るためどうすればいいかわかりません。参考サイト通りにやりましたが適用されません。
https://developer.mozilla.org/ja/docs/...
0
票
1
回答
1,169
閲覧数
VSCodeでインストールした拡張機能がメニューに出てこなくなった
【現状】
以前、VSCodeでHTMLを書いていました。
その際、拡張機能を色々とインストールしたのですが、その中にPreview機能もありました。
それを使って、VSCodeでコードを書きながらHTMLプレビューをし確認するといった作業をやっていました。
その後、Pythonを書く機会があってPythonをインストールし、使っていました。
その後、...
0
票
2
回答
5,523
閲覧数
動的に追加した要素にswiper.jsが効かない
jQueryで動的に追加した要素に対してswiper.jsでスライドを実装したいのですが、機能しません。
動的に追加した要素に対しての処理であることが原因と考え、以下のようにswiperのオプションのobserverをtrueとしましたが、それによってTypeErrorとなります。
ご教授お願いいたします。
HTML記述
<div class="detail">
<ul ...
-1
票
1
回答
5,211
閲覧数
この動作をSwiperで実現したい
解決方法が不明なので質問いたしました。下記のリンクのスライダライブラリを使用して
実現したいスライドがあります。
http://www.idangero.us/swiper/#.VpMcPRWLRsc
その実現したいスライドは下記のサイトにあるようなものです。
・メイン画像はスライド、クリックで変更できる
・その下に配置されたサムネイルからその画像を表示できる
http://black-flag....
0
票
1
回答
118
閲覧数
サンプルコードを組み合わせたところ、リンク(内部、外部)できない
ハンバーガーメニューとスライダーのサンプルコードを組み合わせたところ、ハンバーガーメニューについては問題なく開き、外部へのリンクもできますが、外部への画像リンクや、フッターからトップページへの内部リンクができません。
menu css から以下の部分を削除し、フッターにカーソルを当てると人差し指マークには変わりますが、リンクはしませんでした。
.container {
position: ...
0
票
1
回答
2,940
閲覧数
要素幅がそれぞれ異なるスライダーを作りたい
現在、Webサイトにスライダーを実装しようしているのですが、一つ目の要素が他の要素の約2倍になるようなものを作りたいです。(以下画像のようなイメージです)
有名なjsプラグイン(swiperやslickなど)でできないかやってみましたが、どうにもうまくいきませんでした。動きは下記サイトのような感じで、スムーズにしたいです。
https://liginc.co.jp/
...
0
票
1
回答
581
閲覧数
スクロールバーのつまみの部分を非表示にしてスクロールできないようにしたい
スクロールバーのつまみの部分を非表示にしてスクロールしないようにしたいのですが、どうすればいいのでしょうか。
スクロールバー自体を消すのは overflow: hidden でできますが、消すと消えた領域分だけ画面がガタつくので表示したままでスクロールだけできないようにしたいです。
(instagramがこのガタつく方式)
...
0
票
1
回答
80
閲覧数
display:flex内の文字の縦位置を中央にできません
下記に該当箇所を抜き出します。
こちらのクラスtabBtn内のタブ1~5までの文字を縦位置中央にする方法をご教授ください
HTML
<!-- ヘッダータブ -->
<div id="tab-1" class="switch"></div>
<div id="tab-2" class="...
0
票
0
回答
525
閲覧数
ServiceWorker で特定のファイルをキャッシュから削除したい
サイトをPWA化するために ServiceWorker を使用しています。
キャッシュ指定しているファイルを修正した際にそのファイルだけキャッシュからではなく、サーバーから読み込んで再度キャッシュに取り込みたいのですが方法が分かりません。
下記のサイト等で追加するメソッド(cache.put)は分かったのですが、削除する方法が分かりません。...
1
票
1
回答
1,283
閲覧数
HTMLタグをエスケープせずに表示したい
Node.js + Express + Pugでサイトを構築しています。
サーバ側のNode.jsで次のようにプログラムを書いて
const nico="<a href=\"http://www.nicovideo.jp/\">test</a>";
res.render('index', {
nico:nico
});...
0
票
0
回答
832
閲覧数
twitterのOGP(サムネイル画像)を動的に変えたい
現在HTML,JQueryでおみくじアプリを作っており、その結果をtwitterに投稿する機能があるものを作っています。
https://k49977.github.io/omikuji/
ここでやりたいこととして、おみくじ結果の画像をサムネイルに反映させたいです。つまり、twitterのサムネイルを動的に変えたいです。 それについてアドバイスいただければと思います。
...
0
票
1
回答
195
閲覧数
JavascriptでDOM処理のタイミングが合わず値を上手く処理出来ない。
問題
画像から色の情報を取得したく color-thies というライブラリーを使用しています。
途中で画像のsrcパスを書き換えて別の画像に差し替える処理があるのですが、その際タイミングが合わず前の画像の値になってしまいます。
プログラム動作
inputのフォーカスが別の要素に移った際に下記のイベントリスナーが発火します。それでURLの値があればサムネイルを取得します。...
0
票
1
回答
627
閲覧数
2倍サイズに書き出した画像が通常ディスプレイでぼやけてしまう
Retinaディスプレイ対応のため、画像、動画を2倍で書き出したのですが、Retinaディスプレイは綺麗に表示されますが、通常ディスプレイではぼやけてしまいます。
何か対応はありますか?
0
票
2
回答
166
閲覧数
イベント移譲(Event delegation)の引数eventが何処から来るのか知りたい。
前回の質問でイベント移譲(Event delegation)と言う概念を教えて頂きました。
addEventListnerをページ更新後に追加される要素にも適応したい。
質問
それで 下記のコードにあるdocument.querySelector(".dlcardWrap").addEventListener("blur", function (elm) ...
0
票
1
回答
658
閲覧数
javascriptの動的な画面変更とフラグ管理について
以下の内容で表示を押すとメニューの以下の内容を表示非表示するものを作ってみていますが、画面が一瞬ちらついて映るだけで原因を教えていただけないでしょうか?
<div class="menuContents">
<ul class="menuList">
<li>a</li>
<li>...
0
票
1
回答
101
閲覧数
addEventListnerをページ更新後に追加される要素にも適応したい。
Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。
分からない事
同じクラス名の要素に別々の変更を加えるには
作成したい機能
inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。
要素について
.dlcardWrapがあってその子要素として.dlcardがあります。...
0
票
1
回答
128
閲覧数
htmlのimgパスが読み込めなかった際のエラーハンドリングをしたい。
webアプリを作成しています。
htmlで画像のパスを最初は下記のように設定しています。
<img src="images/pinkguy.jpg" alt="">
その後JSで取得した別のパスに書き換えています。
<img src="https://img.youtube.com/vi/dxezoC8w3GU/...
0
票
2
回答
79
閲覧数
Elementオブジェクトから子要素を取り出すには
javascriptで下記のDOM要素?を取得したのですが、子要素の.dlcard > dlcard__thumbnail > imgのようにアクセスしたいです。どのような関数を使用したらよいでしょうか? 要素はinputという変数に格納されています。
追記
説明不足ですいません。
inputに格納されたelementオブジェクトから要素を取り出す方法はないでしょうか?
...
1
票
1
回答
706
閲覧数
umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法
React.js を用いて Web サイトを開発しています。
モジュール形式で提供されていない、<script> タグで読みこんでグローバルオブジェクト(window)に追加されたオブジェクトを利用するタイプの外部スクリプトを、React.js でうまく扱う方法についての質問です。
たとえば、決済代行業者 PAY.JP が提供する payjp.js はまさにそのパターンで、素の ...
0
票
1
回答
280
閲覧数
特定のキーが押されたら動画を一時停止、再生したい
特定のキーが押されたらビデオを一時停止、再生させたいのですがどうすればできるでしょうか。
下記のコードはそれぞれkeydownのサンプルコード
https://www.ipentec.com/document/javascript-accept-keydown
と、videoのサンプルコード
http://www.htmq.com/video/
を参照し自分なりに合わせたものです。
...
0
票
2
回答
361
閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1
回答
674
閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
0
回答
82
閲覧数
todoのデータが消えてしまう localstorage
すみませんコードの張り方がわからず 変な風になってしまいました、
ご教示いただけると幸いです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>やることリスト</...
0
票
1
回答
153
閲覧数
ナビゲーションメニューが横並びになりません。
練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>company</title>
<...
0
票
2
回答
1,856
閲覧数
react redux formタグのonSubmitが動作しない
現在、react-reduxを学習しています
以下のようなコードを書いたのですが、formタグ内のonSubmitが動作しません
inputタグ内のonChangeは問題なく動作します
どなたかご教示頂けましたら幸いです
import React,{ Component } from 'react'
import { connect } from 'react-redux'
...
-1
票
2
回答
194
閲覧数
グーグルブラウザなのにbrowserNameでMozillaと出る
var name = navigator.appName;
console.log(name)
とjavascriptのコードを書いてグーグルブラウザで実行したところ、Mozilla と表示されました。
これは正しいのでしょうか?何か間違っていますか?
1
票
2
回答
4,647
閲覧数
セレクタにシャープ記号(#)を使う意味と、ドット記号(.)を使う時との違いは?
模写の際CSSのコードを記入していると、#header, #footer のような記述があります。
.header または header, footer を使うことによりHTML要素を指定できるのは知っていますが、# を使った指定方法は知りませんでした。
ぼくは、この # がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。
...
0
票
1
回答
191
閲覧数
ページが変わっても"content_scripts"が反応しない
YouTube 向けの拡張機能の作成をしており、manifestには以下のように記述しました。
"content_scripts":[
{
"matches":[
"https://www.youtube.com/*"
],
"js":[
...
0
票
2
回答
2,489
閲覧数
iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない
下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。
addEventListenerの第三引数をtrueにして試してもみたのですが結果は同じでした。
実際のiframe内に読み込むページはTwitterの埋め込みウィジェットになるので、
...