[html] タグが付いた質問

HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。

絞り込み
並べ替え
タグ付けされた
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の埋め込みウィジェットになるので、 ...

1
5 6
7
8 9
23