[css] タグが付いた質問

CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。

絞り込み
並べ替え
タグ付けされた
0
0 回答
25 閲覧数

LaravelMix、LaravelVIteでMaterializeCSSのAutoInitがエラーになる

概要 Laravelでmaterializecss( https://materializeweb.com/ )を使いたいのですが、 エラーになります。 この解決方法がわかりません。 エラー内容 Uncaught TypeError: can't access property "AutoInit", ...
zenzenzenone's user avatar
0
0 回答
63 閲覧数

【ラジオボタンの選択保持】「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。

実現したいこと ラジオボタンの選択保持 前提 この質問はマルチポストです。 下記URLでも質問しています。 https://teratail.com/questions/9pkuzcnadxkgq6 プラグイン「WCFM」商品編集画面の「金額」の項目をテキストボックスからラジオボタンに変更しています。 「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。 ...
ryouhei's user avatar
0
1 回答
87 閲覧数

ボタンのhoverが効かない

hoverが効きません。 デベロッパーツールで、要素の状態を強制にすると適応はされますが 実際にカーソル当てるだけでは効きません。 また、.cartの要素をクリックしてもトップページに移動しないので .cart a:hoverやz-indexで手前にくるように指定なども試しましてみましたが、効きませんでした。 よろしくお願いいたします。 .cart { display: block; ...
pepe's user avatar
  • 39
1
1 回答
48 閲覧数

Bootstrapでhover時に他のアイコンへ変えたい

Bootstrapでhover時にアイコンを変えたいです。 しかし、hoverすると画像のように黒い四角形になってしまいます。 よろしくお願いいたします。 .bi-person:hover::before { font-family: 'Bootstrap-icons'; content: '\F4DA'; background-color: #000; } .bi-bag:...
pepe's user avatar
  • 39
0
1 回答
52 閲覧数

Bootstrapでhover時に他のアイコンに変えたい

hover時に1-circleから、1-circle-fillのアイコンに変えたいです。 下記のように記述したところ、画像のように黒色の四角形になってしまいます。 よろしくお願い致します。 .header-icon .bi-i-circle:hover { font-family: 'Bootstrap-icons'; content: '\F796'; background-...
pepe's user avatar
  • 39
0
0 回答
114 閲覧数

HTML内にscriptを記載して思っているようにしたいのですが、どうしても上手くいきません。どなたかご教授よろしくお願いします。

以下の四つの事が出来るようになりたいのですが、HTMLのタグの中のscriptタグの中にコードを書いてるのですがどうしてもどのようなコードを書けば良いかわかりません。 どなたかご教授ください。 1つ目:名前とニックネームを3回追記したらボタンを非表示(削除ではないのでDisplayではないとは思いますが)にし、それ以降は追記できない。 2つ目:tableタグとそれに関連するタグを利用し、登録した ...
kkoo's user avatar
  • 1
0
1 回答
167 閲覧数

HTML/CSS/JSでまだら模様の波を実装したい

質問の背景 HTML/CSS/JSを使用した静的コーディングでWebサイトを制作しています。 その過程で、canvasで単色の波のアニメーションを使用しているのですが、 まだら模様で波を実装しなければならない箇所があり、お知恵を借りられれば幸いです。 実現したいこと 波打つ(1 つ 重なりなし) | 動くWebデザインアイディア帳 添付画像のようなまだら模様を、上記と同じ動きの波で実装したいです。 ...
koh's user avatar
  • 1
0
1 回答
80 閲覧数

li タグの要素が重なってしまう

以下のような記述をした時、私の環境だとliタグ一個目と二個目が中央で重なってしまうのですが、これは何が原因でしょうか? 開発環境はWindows 11・VSCode・XAMPPです。 /*============== 汎用設定 ===============*/ .white{ color: #fff; margin: auto; } /*============== ...
キャラメルマキアート's user avatar
0
1 回答
80 閲覧数

絞り込み検索後の要素間の隙間を無くしたい

JavaScriptのワイルドカードでのあいまい検索検索結果後、opacity: 0 では検索結果後に要素間に隙間が出てしまうので、display:none にしてしまうと結果自体が消えてしまいます。 結果の隙間を無くしたいのですがどうすればよいでしょうか(*>人<) const filterButtons = document.querySelectorAll("[data-...
aruchiman's user avatar
1
2 回答
156 閲覧数

select内に入れるとdata属性が効かないのでしょうか?

ドロップダウンに項目を入れようとして、selectを使用したところ結果が表示されなくなります。 divの時は動いていたので何か問題があるのだと思うのですが、何が問題なのかがわかりません。 何か足りない部分があるのでしょうか<(_ _)> <select> <option value="all" data-...
aruchiman's user avatar
0
0 回答
134 閲覧数

HTMLでボタンの表示位置を変更したい

この時ボタンの位置を上にしたいのですがどのようにすれば良いでしょうか? ファイルフォルダ ├test.html ├video ├back.mp4 ├back.ogv ├back.webm └css __└setting.css /*============== 背景動画設定 ===============*/ /*header設定*/ #header{ position: ...
キャラメルマキアート's user avatar
0
0 回答
69 閲覧数

Visual Studio Codeで.scssファイルを作成および保存する際に、複数の.cssファイルが自動的に生成されるのを防ぎたい

VScode上でsassを使用したプロジェクトがあったため.scssに.cssから変更しコマンド+Sで保存したところ以下のような複数の.cssファイルが生成されました。 保存したファイル .global.scss 自動生成されたファイル .global.css .global.css.map .global.min.css .global.min.css.map ...
k_95.21's user avatar
0
1 回答
69 閲覧数

リンクの色がバックグラウンドと被って変えたい

リンクの色がバックグラウンドと被って変えたいです。 以下で color:skyblue になりません。答えていただける方よろしくお願いします。 <a style="color:skyblue;" href="https://www.salk.edu/">Sark Institute for Biological Studies ...
shin-Gplusplus097096's user avatar
0
1 回答
51 閲覧数

アコーディオン表示のテーブルのフィルターがうまく動作しない

実現したいこと アコーディオン表示のテーブルに下記の動きをするフィルターを追加したい 小カテゴリのA,B,C,Dのセレクトボックスで任意の名前を選択すると、 名前が同じ行と選択した名前を含む中カテゴリのチーム名と大カテゴリのグループ名を表示 例: Cを選択した場合          困っていること フィルターでB,C,Dを選択したときに不正表示になってしまう ...
st410gaku's user avatar
0
1 回答
90 閲覧数

flexが効かない

均等に横並びに配置するために、下記のようにコードを書いたのですがflexが適用されません。もしこのコードをみて改善策がわかる方がいたら教えてください。  よろしくお願いします。 <nav class="global-nav_items"> <ul class="nav-list"> <li><...
rikkow4532's user avatar
0
1 回答
111 閲覧数

アコーディオンの開閉によって変わる高さをgsapに伝えたい

test1をスクロールに合わせて、画面内にでてきたらfadeInさせたいです。 ブラウザを読み込み、そのままスクロールするだけでしたら問題ないですが、 スクロールしたい要素の上にある.accordion-title 詳しくはこちら を開いた状態でスクロールすると、開閉により高さが変わり、test1がブラウザに出て来る前にfadein済みになってしまいます。 ...
pepe's user avatar
  • 39
0
0 回答
81 閲覧数

レスポンシブ対応のドロップダウンメニューがうまく作れません。

コーディング初心者です。レスポンシブ対応のドロップダウンメニューがうまく作れません。 どこを直せば添付した画像の通りSP版PC版整ったかたちになるでしょうか? $(function(){ // ハンバーガーメニュー $("#drawer_toggle").click(function(){ $(this).toggleClass("...
nhtgc's user avatar
  • 1
1
1 回答
148 閲覧数

スマホからサイトを確認するとフォントが変更されていない

wordpressのaffinger5を使ってwebページを作成しました。 pcから開発者モードでスマホ用の画面で確認するとフォントは設定した通りに表示されております。 しかし、実際のスマホで確認すると機種を問わず、デフォルトのフォントになってしまいます。 なにかプラグインが影響していたりするのでしょうか? 2枚目がインストールしたプラグイン一覧です。 どうか、ご教示いただけると幸いです。
shinji's user avatar
  • 11
1
1 回答
151 閲覧数

YouTubeの動画を埋め込んだ際、アイコン等で動画が隠れないようにしたい

YouTubeの動画をYoutube iFrame Player APIを使用して埋め込みました。 コントローラを非表示にしているため、YouTubeロゴやチャンネル登録ボタン、後で見るボタン、共有ボタンが動画再生後、一定時間表示されてしまいます。 仕様上、避けられないため、動画の上と下に余白を設け、ボタン類で動画が見づらくなる事態を避けたいと思います。 現状は、...
初心者にゃんこ's user avatar
-2
1 回答
175 閲覧数

CSSで、兄弟要素の最初の一文字が指定文字列だった場合のセレクタ

下記状態のpタグをcssで指定したいのですが、可能ですか? <blockquote></blockquote> <p>※</p>
re9's user avatar
  • 6,412
0
2 回答
88 閲覧数

テキストのみに影をつけ、下線のshadowは影をなくしたい。

下線のあるテキストです。テキストのみに影をつけたく、text-shadowを追加しました。 <div class="test">1行目です<br>こんにちは2行目です</div> .test{ position: absolute; top: 10rem; right: 5rem; text-shadow: ...
pepe's user avatar
  • 39
2
3 回答
143 閲覧数

複数行のテキスト:positionで場所固定すると、全行にあった下線が消えてしまう

2行以上あるテキスト文に対して、全行に下線をつけたいです。 下記コードでつけることはできました。 .test{ display: inline; background:linear-gradient(transparent 60%, #f940bc 0%); } <div class="test">1行目です<br&...
pepe's user avatar
  • 39
1
1 回答
164 閲覧数

正円の中でテキストを折り返し表示する場合、正円の中から外へはみ出さないテキスト文字数のカウントの仕方は?

目的 正円の中から外へはみ出さないテキスト文字数をカウントしたい 前提 ・正円の中でテキストを折り返し表示 ・文字の大きさは固定(em) ・テキスト数は可変 知りたいこと 例えば、文字の大きさが「1.2em」の場合、 円(外枠div枠)の「幅」=「高さ」と「文字の大きさ」と「文字数」には、どのような関係性が成り立ちますか? div{ display:inline-block; ...
re9's user avatar
  • 6,412
2
1 回答
125 閲覧数

テキストを囲うdiv枠を、文字の長さに応じて常にcssで正円に表示したい

div{ display:inline-block; border-radius:50%; background-color:yellow; } <div>文字数可変のテキスト</div>
re9's user avatar
  • 6,412
0
1 回答
215 閲覧数

html の select タグで表示するリストが画面外にいった場合に画面内に移動させる方法

以下の画像のようにselectタグでリスト表示すると画面外(ブラウザの外)にリストが表示されてしまいます。 そこで質問なのですが、 (1) 以下の画像のように画面内に自動で移動させることは可能でしょうか? (2) 以下の画像のようにselectタグ右側起点でリストを表示するようにすることは可能でしょうか? ソースは以下の通りです。 <!DOCTYPE html> <...
oya3's user avatar
  • 351
0
0 回答
87 閲覧数

prismjsで、コードを行ごとに交互色で表示したい

prismjsで、コードを行ごとに交互色で表示したい。 試したこと ・オプションを見たのですが、見つかりませんでした。 ・prismjs実行後のhtmlソースコードを見たのですが、(少なくとも見た目上は行単位ではなく)<code><span></span><span></span><span></span><...
re9's user avatar
  • 6,412
0
0 回答
77 閲覧数

JavaScriptでこのLoader作れますか?

Willstyle.co.jpのヘッダーの要素を塗りつぶすローダーの作り方をご存じの方は教えてください。 自分が考えるに登録された要素に操作をかけているのだと思うのですが()
Sou's user avatar
  • 1
0
0 回答
31 閲覧数

GitHub Pages で CSS がうまく反映されない [重複]

GitHub Pages を用いて作成したHPをアップロードしようとしましたが、CSSだけがうまく反映されませんでした。 調べてみたらcssのパスを書き換える必要があるとわかり、他の方のコードとも見比べて色々試してみたのですが、どうしてもうまくいきません。申し訳ございませんが、どなたかご指導よろしくお願いします。 以下、コード <!DOCTYPE html> <html lang=...
akyo's user avatar
  • 1
1
2 回答
152 閲覧数

HTMLでVideoを画面中央に全体表示させたい。

例えば以下のようにCSSを書くと概ね望み通りの表示が行えるのですが、フルスクリーン(F11)表示をさせた際に、ビデオの位置がtop50%を受けたように画面の中央より下に表示されてしまいます。(スニペットを最大化後にフルスクリーンで確認出来ます。) どのようにすれば問題を解決出来ますでしょうか。 video { min-width: 100%; min-height: 100vh; ...
水瀬敦美's user avatar
0
1 回答
63 閲覧数

background-image が指定された div で、自動的に height を指定する方法を知りたい

やりたいこと background-image, max-width が指定された div で、自動的に height を明示する方法を知りたい。 max-width を超える場合は、 max-width まで縮小したい。 できれば css だけで実現したい。 前提条件 画像のサイズは不定で、小さいこともあれば大きいこともある。 div の max-width は 400px を指定。 ...
vips's user avatar
  • 17
0
1 回答
53 閲覧数

縦長画像を含むWebページを印刷すると、画像が2ページ目に出力されてしまう。

以下のHTMLを印刷すると、.test-2(ピンク部分)は1ページ目に出力されますが、 .test-3(パープル部分)の画像は2ページ目に出力されてしまいます。 1枚目の画像(ブラウザでの表示)のように、1ページ目の.test-2(ピンク部分)の直下に、 .test-3(パープル部分)の画像をくっつけて出力したいです。 CSS の記述方法を教えていただけないでしょうか。 ※ ...
vips's user avatar
  • 17
0
1 回答
84 閲覧数

JSで日付によって画像の角度を変える

ホロスコープ作成サイトを作っています。 jsを使って現在の日付けを取得し、その日付に応じて画像の角度を変更したいのですが、初心者のため、試行錯誤もできていません。具体性がなく非常に答えにくいとは思うのですが方法を教えてください。
You's user avatar
  • 3
0
1 回答
54 閲覧数

Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?

実現したいこと Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。 キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
鉛筆と紙's user avatar
0
0 回答
97 閲覧数

リキッドレイアウトにする際remでのレイアウト

初めて質問させていただきます。 コーディングの勉強をしています。まだ2か月ちょっとしか勉強もしておらず、見当違いな質問になってしまうかもしれませんが教えていただけると嬉しいです。 リキッドレイアウトを作成中です。これまでvwで作成していましたが初めてremでのコーディングにトライしています。htmlで以下のコードを指定していれば、...
muimui's user avatar
  • 1
0
0 回答
54 閲覧数

ログインフォームの自動補完を選択後の自動遷移について

ログインフォームの自動補完を選択すると自動遷移する現象があるのですが クライアントから自動補完は残していいのですが自動遷移を止めて欲しいと希望があるのですが どのようにHTML,CSS、JSなどで対策できますか? 現在は、Wordpressにて利用しているのでいいアイディアや参考になるサイトなどがあればご教授いただければ幸いです。 OSレベルの問題かと思っているのですが、、、
Kou Amano's user avatar
1
1 回答
433 閲覧数

GitHub PagesでCSSが反映されない

VSCodeで書いたコードを使ってGitHubで自作HPを公開しようとしています。 コードはHTMLとCSSのみ。CSSが反映されずに困っています。 VSCodeのプレビューでは問題なく反映されているのですが、原因がわかりません。 試したこと 1. <link rel="stylesheet" href="css/home.css"> を <...
Emma's user avatar
  • 13
0
1 回答
368 閲覧数

table内のborderの太さがバラバラになるバグ

Laravel, Bootstrapを使用してwebサイトの画面を作成しています。 table内のborder(罫線)の太さが画面サイズを変更するとバラバラになってしまうブラウザ側のバグがあるようです。ブラウザの問題なのですが、この現象が起きないよう対応してほしいという要望があり苦戦しております。 100%以外の拡大/縮小で不規則に発生します。 Google Chrome, Microsoft ...
KeiOTN's user avatar
  • 1
-2
1 回答
540 閲覧数

テキスト画面をコピーしてHTMLで表示したい [クローズ済み]

Linuxでコンソールアプリを実行した画面をコピーしてHTMLで表示したところ、綺麗に表示されません。 どうすれば綺麗に表示できるのでしょうか? 再現手順 Ubuntu20.04で以下のコードを実行して出てきた画面を、gnome-terminalの「HTMLとしてコピー」を使ってhtmlファイルとして保存します。 テキストアプリ(bash) selected=$( for i in `...
dameo's user avatar
  • 1
1
1 回答
123 閲覧数

ブラウザゲーム上で自作のドット絵フォントを表示する方法

HTML、CSS、JavaScript でドット絵のゲームを作ろうとしているのですが、相手のPCにないフォントを表示する方法がわかりません。ライブラリはp5.jsを使っていて、他にライブラリを使う予定はないです。
kakakaka11's user avatar
1
1 回答
1,366 閲覧数

max-height がきかない

外側に大きさの決まってるブロック要素が合って その中に bootstrap の card を配置して 中に大きなコンテンツがあっても card 内でスクロールしたいです 以下のように max-height 100% を内側に順に指定していったのですが card-body のところで max-height がきかずにはみ出してしまいます container の max-height を ...
user avatar
0
2 回答
205 閲覧数

Web開発のポートフォリオ作成手順と学習内容について

プログラミング初心者です。現在、HTML,CSS,Pythonを学習中で、同時にポートフォリオ作成を進めようと考えています。Webアプリを作成するときには、 フロントエンドでHTML,CSS,Javascript バックエンドでPython そして、SQLとAWSを学ぶ必要があると調べた結果わかりました。 しかし、ポートフォリオを作成するさいに、SQLやAWSの知識はどこで必要になるのでしょうか? ...
stark02's user avatar
0
2 回答
335 閲覧数

Htmlでinputタグから受けとった値の処理の方法を教えてください。

プログラミング初心者です。HTMLでinputタグでワードを受け取り、その結果をもとにおすすめの映画を紹介するというサービスを考えています。HTMLでinputタグから入力フォームは作成したのですが、ここからどのように進めればいいかわかりません。 web開発の手順では、HTML・CSSを作成してからPythonなどのバックエンドの作り方を紹介されていますが、このような仕組みの場合、...
stark02's user avatar
1
2 回答
178 閲覧数

あるセレクタの直下かつ先頭というCSSセレクタはありますか?

こちらのspanには適用させず、 <div>テキスト<span>テスト1</span>テキスト<div> こちらのspanには適用できるセレクタを探しています。 <div><span>テスト2</span>テキスト<div> divの直下かつ先頭(テキストを除く)という擬似クラス等はないのでしょうか。...
roki's user avatar
  • 29
0
1 回答
185 閲覧数

inview.jsでスクロールした際に文字を浮かび上がらせたい

実現したいこと こちらのサイトを参考にスクロールしたときに文字を浮かび上がらせたいです。 「1.【サンプル】フェードイン(ふわっと)」をまねしたいです。 現状は表示させたい文字が現れません。 【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集 解説をいただきたい部分 ①なぜ最初に$(なのか ②...
Iori_ss67's user avatar
0
1 回答
139 閲覧数

iPhone での表示時、ul の左側に変な空白ができてしまう

現在作成中のサイトで、トップのメニューバーがおかしくなってしまいます。 PCで見るときはいいのですが、スマホ(iPhone SE)で見ると ul タグの左側 (li タグの左側?)に空白が入ってしまいます。 どのCSSが原因なのかChromeのDevToolsでいくつかCSSを消してみたのですが、どれを消してみても空白が消えません。どうすれば消えますか? ...
ポルポラ's user avatar
1
1 回答
427 閲覧数

inputタグにてplaceholderの文字サイズを小さくした時の、Chromeの挙動がおかしい

背景 inputタグのplaceholder文字サイズを、通常の入力文字サイズより小さくしたかった。 そこで、以下のようなcssを適用した。 input { max-height: 40px; padding: 8px; font-size: 32px; } input::placeholder { font-size: 16px; } ...
pannnakotta's user avatar
0
1 回答
1,252 閲覧数

CSS Modulesの'composes'がVSCodeにてUnknown propertyと表示され有効化されない

とある教材でWebサイト構築を勉強中なのですが 表題の通り'composes'を記述しても 「Unknown property: 'composes'css(unknownProperties)」と表示されてしまいます。 教材の完成版のコードを読み込んでも同じエラーが出るので VSCode上の設定に問題があるのかなとは考えております。 海外のサイトで検索してみても'composes'...
wbwebwb's user avatar
-1
1 回答
173 閲覧数

スマホ時に 横幅いっぱいにならず、困っています。

https://y-sasakik.github.io/web/web3/ 上のサイトでスマホ時に横幅いっぱいにならず、困っています。 どこを変えれば直りますか? ソースは検証ツールまたは GitHub のリポジトリを参照してください。 https://github.com/y-sasakik/web/tree/main/web3 (追記) ...
sasakik's user avatar
0
1 回答
157 閲覧数

CSSで ul を flex から block に書き換えたが、Chromeのモバイル表示で縦並びにならない

初心者で質問の要領も得ません。助けていただけたらありがたいです。 まず、HTMLでメニュー設定、次にCSSでメニューを横並びにする、さらに、モバイル用(幅が800px以下の場合)にはメニューを縦並びにする、ということをやりたい。 Chromeの「検証」のモバイル表示では字が小さくなって横並びのままです。しかし、普通の表示でウインドウを800px以下に縮めたら、縦に見えます。何がおかしいのでしょうか?...
N-kao's user avatar
  • 3
1
2 回答
589 閲覧数

CSSで日本語の文字のみ別のフォントにしたい

Chromeではデフォルトのフォントがメイリオになってるのですが、メイリオは日本語は斜体が存在しないためemタグで囲んでも斜体になりません。 日本語の時のみ別のフォントに変更したいと思うのですが、通常のCSSでは単純にどのフォントを優先するかしか指定できないようです。 ただ、もし英数などは存在せず日本語だけ存在するフォントがあれば、...
Loran's user avatar
  • 445

1
2 3 4 5
14