[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
683
質問
0
票
0
回答
25
閲覧数
LaravelMix、LaravelVIteでMaterializeCSSのAutoInitがエラーになる
概要
Laravelでmaterializecss( https://materializeweb.com/ )を使いたいのですが、
エラーになります。
この解決方法がわかりません。
エラー内容
Uncaught TypeError: can't access property "AutoInit", ...
0
票
0
回答
63
閲覧数
【ラジオボタンの選択保持】「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。
実現したいこと
ラジオボタンの選択保持
前提
この質問はマルチポストです。
下記URLでも質問しています。
https://teratail.com/questions/9pkuzcnadxkgq6
プラグイン「WCFM」商品編集画面の「金額」の項目をテキストボックスからラジオボタンに変更しています。
「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。
...
0
票
1
回答
87
閲覧数
ボタンのhoverが効かない
hoverが効きません。
デベロッパーツールで、要素の状態を強制にすると適応はされますが
実際にカーソル当てるだけでは効きません。
また、.cartの要素をクリックしてもトップページに移動しないので
.cart a:hoverやz-indexで手前にくるように指定なども試しましてみましたが、効きませんでした。
よろしくお願いいたします。
.cart {
display: block;
...
1
票
1
回答
48
閲覧数
Bootstrapでhover時に他のアイコンへ変えたい
Bootstrapでhover時にアイコンを変えたいです。
しかし、hoverすると画像のように黒い四角形になってしまいます。
よろしくお願いいたします。
.bi-person:hover::before {
font-family: 'Bootstrap-icons';
content: '\F4DA';
background-color: #000;
}
.bi-bag:...
0
票
1
回答
52
閲覧数
Bootstrapでhover時に他のアイコンに変えたい
hover時に1-circleから、1-circle-fillのアイコンに変えたいです。
下記のように記述したところ、画像のように黒色の四角形になってしまいます。
よろしくお願い致します。
.header-icon .bi-i-circle:hover {
font-family: 'Bootstrap-icons';
content: '\F796';
background-...
0
票
0
回答
114
閲覧数
HTML内にscriptを記載して思っているようにしたいのですが、どうしても上手くいきません。どなたかご教授よろしくお願いします。
以下の四つの事が出来るようになりたいのですが、HTMLのタグの中のscriptタグの中にコードを書いてるのですがどうしてもどのようなコードを書けば良いかわかりません。
どなたかご教授ください。
1つ目:名前とニックネームを3回追記したらボタンを非表示(削除ではないのでDisplayではないとは思いますが)にし、それ以降は追記できない。
2つ目:tableタグとそれに関連するタグを利用し、登録した ...
0
票
1
回答
167
閲覧数
HTML/CSS/JSでまだら模様の波を実装したい
質問の背景
HTML/CSS/JSを使用した静的コーディングでWebサイトを制作しています。
その過程で、canvasで単色の波のアニメーションを使用しているのですが、
まだら模様で波を実装しなければならない箇所があり、お知恵を借りられれば幸いです。
実現したいこと
波打つ(1 つ 重なりなし) | 動くWebデザインアイディア帳
添付画像のようなまだら模様を、上記と同じ動きの波で実装したいです。
...
0
票
1
回答
80
閲覧数
li タグの要素が重なってしまう
以下のような記述をした時、私の環境だとliタグ一個目と二個目が中央で重なってしまうのですが、これは何が原因でしょうか?
開発環境はWindows 11・VSCode・XAMPPです。
/*============== 汎用設定 ===============*/
.white{
color: #fff;
margin: auto;
}
/*============== ...
0
票
1
回答
80
閲覧数
絞り込み検索後の要素間の隙間を無くしたい
JavaScriptのワイルドカードでのあいまい検索検索結果後、opacity: 0 では検索結果後に要素間に隙間が出てしまうので、display:none にしてしまうと結果自体が消えてしまいます。
結果の隙間を無くしたいのですがどうすればよいでしょうか(*>人<)
const filterButtons = document.querySelectorAll("[data-...
1
票
2
回答
156
閲覧数
select内に入れるとdata属性が効かないのでしょうか?
ドロップダウンに項目を入れようとして、selectを使用したところ結果が表示されなくなります。
divの時は動いていたので何か問題があるのだと思うのですが、何が問題なのかがわかりません。
何か足りない部分があるのでしょうか<(_ _)>
<select>
<option value="all" data-...
0
票
0
回答
134
閲覧数
HTMLでボタンの表示位置を変更したい
この時ボタンの位置を上にしたいのですがどのようにすれば良いでしょうか?
ファイルフォルダ
├test.html
├video
├back.mp4
├back.ogv
├back.webm
└css
__└setting.css
/*============== 背景動画設定 ===============*/
/*header設定*/
#header{
position: ...
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
...
0
票
1
回答
69
閲覧数
リンクの色がバックグラウンドと被って変えたい
リンクの色がバックグラウンドと被って変えたいです。
以下で color:skyblue になりません。答えていただける方よろしくお願いします。
<a style="color:skyblue;"
href="https://www.salk.edu/">Sark Institute for Biological Studies ...
0
票
1
回答
51
閲覧数
アコーディオン表示のテーブルのフィルターがうまく動作しない
実現したいこと
アコーディオン表示のテーブルに下記の動きをするフィルターを追加したい
小カテゴリのA,B,C,Dのセレクトボックスで任意の名前を選択すると、
名前が同じ行と選択した名前を含む中カテゴリのチーム名と大カテゴリのグループ名を表示
例: Cを選択した場合
困っていること
フィルターでB,C,Dを選択したときに不正表示になってしまう
...
0
票
1
回答
90
閲覧数
flexが効かない
均等に横並びに配置するために、下記のようにコードを書いたのですがflexが適用されません。もしこのコードをみて改善策がわかる方がいたら教えてください。
よろしくお願いします。
<nav class="global-nav_items">
<ul class="nav-list">
<li><...
0
票
1
回答
111
閲覧数
アコーディオンの開閉によって変わる高さをgsapに伝えたい
test1をスクロールに合わせて、画面内にでてきたらfadeInさせたいです。
ブラウザを読み込み、そのままスクロールするだけでしたら問題ないですが、
スクロールしたい要素の上にある.accordion-title 詳しくはこちら を開いた状態でスクロールすると、開閉により高さが変わり、test1がブラウザに出て来る前にfadein済みになってしまいます。
...
0
票
0
回答
81
閲覧数
レスポンシブ対応のドロップダウンメニューがうまく作れません。
コーディング初心者です。レスポンシブ対応のドロップダウンメニューがうまく作れません。
どこを直せば添付した画像の通りSP版PC版整ったかたちになるでしょうか?
$(function(){
// ハンバーガーメニュー
$("#drawer_toggle").click(function(){
$(this).toggleClass("...
1
票
1
回答
148
閲覧数
スマホからサイトを確認するとフォントが変更されていない
wordpressのaffinger5を使ってwebページを作成しました。
pcから開発者モードでスマホ用の画面で確認するとフォントは設定した通りに表示されております。
しかし、実際のスマホで確認すると機種を問わず、デフォルトのフォントになってしまいます。
なにかプラグインが影響していたりするのでしょうか?
2枚目がインストールしたプラグイン一覧です。
どうか、ご教示いただけると幸いです。
1
票
1
回答
151
閲覧数
YouTubeの動画を埋め込んだ際、アイコン等で動画が隠れないようにしたい
YouTubeの動画をYoutube iFrame Player APIを使用して埋め込みました。
コントローラを非表示にしているため、YouTubeロゴやチャンネル登録ボタン、後で見るボタン、共有ボタンが動画再生後、一定時間表示されてしまいます。
仕様上、避けられないため、動画の上と下に余白を設け、ボタン類で動画が見づらくなる事態を避けたいと思います。
現状は、...
-2
票
1
回答
175
閲覧数
CSSで、兄弟要素の最初の一文字が指定文字列だった場合のセレクタ
下記状態のpタグをcssで指定したいのですが、可能ですか?
<blockquote></blockquote>
<p>※</p>
0
票
2
回答
88
閲覧数
テキストのみに影をつけ、下線のshadowは影をなくしたい。
下線のあるテキストです。テキストのみに影をつけたく、text-shadowを追加しました。
<div class="test">1行目です<br>こんにちは2行目です</div>
.test{
position: absolute;
top: 10rem;
right: 5rem;
text-shadow: ...
2
票
3
回答
143
閲覧数
複数行のテキスト:positionで場所固定すると、全行にあった下線が消えてしまう
2行以上あるテキスト文に対して、全行に下線をつけたいです。
下記コードでつけることはできました。
.test{
display: inline;
background:linear-gradient(transparent 60%, #f940bc 0%);
}
<div class="test">1行目です<br&...
1
票
1
回答
164
閲覧数
正円の中でテキストを折り返し表示する場合、正円の中から外へはみ出さないテキスト文字数のカウントの仕方は?
目的
正円の中から外へはみ出さないテキスト文字数をカウントしたい
前提
・正円の中でテキストを折り返し表示
・文字の大きさは固定(em)
・テキスト数は可変
知りたいこと
例えば、文字の大きさが「1.2em」の場合、
円(外枠div枠)の「幅」=「高さ」と「文字の大きさ」と「文字数」には、どのような関係性が成り立ちますか?
div{
display:inline-block;
...
2
票
1
回答
125
閲覧数
テキストを囲うdiv枠を、文字の長さに応じて常にcssで正円に表示したい
div{
display:inline-block;
border-radius:50%;
background-color:yellow;
}
<div>文字数可変のテキスト</div>
0
票
1
回答
215
閲覧数
html の select タグで表示するリストが画面外にいった場合に画面内に移動させる方法
以下の画像のようにselectタグでリスト表示すると画面外(ブラウザの外)にリストが表示されてしまいます。
そこで質問なのですが、
(1) 以下の画像のように画面内に自動で移動させることは可能でしょうか?
(2) 以下の画像のようにselectタグ右側起点でリストを表示するようにすることは可能でしょうか?
ソースは以下の通りです。
<!DOCTYPE html>
<...
0
票
0
回答
87
閲覧数
prismjsで、コードを行ごとに交互色で表示したい
prismjsで、コードを行ごとに交互色で表示したい。
試したこと
・オプションを見たのですが、見つかりませんでした。
・prismjs実行後のhtmlソースコードを見たのですが、(少なくとも見た目上は行単位ではなく)<code><span></span><span></span><span></span><...
0
票
0
回答
77
閲覧数
JavaScriptでこのLoader作れますか?
Willstyle.co.jpのヘッダーの要素を塗りつぶすローダーの作り方をご存じの方は教えてください。
自分が考えるに登録された要素に操作をかけているのだと思うのですが()
0
票
0
回答
31
閲覧数
GitHub Pages で CSS がうまく反映されない [重複]
GitHub Pages を用いて作成したHPをアップロードしようとしましたが、CSSだけがうまく反映されませんでした。
調べてみたらcssのパスを書き換える必要があるとわかり、他の方のコードとも見比べて色々試してみたのですが、どうしてもうまくいきません。申し訳ございませんが、どなたかご指導よろしくお願いします。
以下、コード
<!DOCTYPE html>
<html lang=...
1
票
2
回答
152
閲覧数
HTMLでVideoを画面中央に全体表示させたい。
例えば以下のようにCSSを書くと概ね望み通りの表示が行えるのですが、フルスクリーン(F11)表示をさせた際に、ビデオの位置がtop50%を受けたように画面の中央より下に表示されてしまいます。(スニペットを最大化後にフルスクリーンで確認出来ます。)
どのようにすれば問題を解決出来ますでしょうか。
video {
min-width: 100%;
min-height: 100vh;
...
0
票
1
回答
63
閲覧数
background-image が指定された div で、自動的に height を指定する方法を知りたい
やりたいこと
background-image, max-width が指定された div で、自動的に height を明示する方法を知りたい。
max-width を超える場合は、 max-width まで縮小したい。
できれば css だけで実現したい。
前提条件
画像のサイズは不定で、小さいこともあれば大きいこともある。
div の max-width は 400px を指定。
...
0
票
1
回答
53
閲覧数
縦長画像を含むWebページを印刷すると、画像が2ページ目に出力されてしまう。
以下のHTMLを印刷すると、.test-2(ピンク部分)は1ページ目に出力されますが、
.test-3(パープル部分)の画像は2ページ目に出力されてしまいます。
1枚目の画像(ブラウザでの表示)のように、1ページ目の.test-2(ピンク部分)の直下に、
.test-3(パープル部分)の画像をくっつけて出力したいです。
CSS の記述方法を教えていただけないでしょうか。
※ ...
0
票
1
回答
84
閲覧数
JSで日付によって画像の角度を変える
ホロスコープ作成サイトを作っています。
jsを使って現在の日付けを取得し、その日付に応じて画像の角度を変更したいのですが、初心者のため、試行錯誤もできていません。具体性がなく非常に答えにくいとは思うのですが方法を教えてください。
0
票
1
回答
54
閲覧数
Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?
実現したいこと
Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。
キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
0
票
0
回答
97
閲覧数
リキッドレイアウトにする際remでのレイアウト
初めて質問させていただきます。
コーディングの勉強をしています。まだ2か月ちょっとしか勉強もしておらず、見当違いな質問になってしまうかもしれませんが教えていただけると嬉しいです。
リキッドレイアウトを作成中です。これまでvwで作成していましたが初めてremでのコーディングにトライしています。htmlで以下のコードを指定していれば、...
0
票
0
回答
54
閲覧数
ログインフォームの自動補完を選択後の自動遷移について
ログインフォームの自動補完を選択すると自動遷移する現象があるのですが
クライアントから自動補完は残していいのですが自動遷移を止めて欲しいと希望があるのですが
どのようにHTML,CSS、JSなどで対策できますか?
現在は、Wordpressにて利用しているのでいいアイディアや参考になるサイトなどがあればご教授いただければ幸いです。
OSレベルの問題かと思っているのですが、、、
1
票
1
回答
433
閲覧数
GitHub PagesでCSSが反映されない
VSCodeで書いたコードを使ってGitHubで自作HPを公開しようとしています。
コードはHTMLとCSSのみ。CSSが反映されずに困っています。
VSCodeのプレビューでは問題なく反映されているのですが、原因がわかりません。
試したこと
1. <link rel="stylesheet" href="css/home.css"> を
<...
0
票
1
回答
368
閲覧数
table内のborderの太さがバラバラになるバグ
Laravel, Bootstrapを使用してwebサイトの画面を作成しています。
table内のborder(罫線)の太さが画面サイズを変更するとバラバラになってしまうブラウザ側のバグがあるようです。ブラウザの問題なのですが、この現象が起きないよう対応してほしいという要望があり苦戦しております。
100%以外の拡大/縮小で不規則に発生します。 Google Chrome, Microsoft ...
-2
票
1
回答
540
閲覧数
テキスト画面をコピーしてHTMLで表示したい [クローズ済み]
Linuxでコンソールアプリを実行した画面をコピーしてHTMLで表示したところ、綺麗に表示されません。
どうすれば綺麗に表示できるのでしょうか?
再現手順
Ubuntu20.04で以下のコードを実行して出てきた画面を、gnome-terminalの「HTMLとしてコピー」を使ってhtmlファイルとして保存します。
テキストアプリ(bash)
selected=$(
for i in `...
1
票
1
回答
123
閲覧数
ブラウザゲーム上で自作のドット絵フォントを表示する方法
HTML、CSS、JavaScript でドット絵のゲームを作ろうとしているのですが、相手のPCにないフォントを表示する方法がわかりません。ライブラリはp5.jsを使っていて、他にライブラリを使う予定はないです。
1
票
1
回答
1,366
閲覧数
max-height がきかない
外側に大きさの決まってるブロック要素が合って
その中に bootstrap の card を配置して
中に大きなコンテンツがあっても card 内でスクロールしたいです
以下のように max-height 100% を内側に順に指定していったのですが
card-body のところで max-height がきかずにはみ出してしまいます
container の max-height を ...
0
票
2
回答
205
閲覧数
Web開発のポートフォリオ作成手順と学習内容について
プログラミング初心者です。現在、HTML,CSS,Pythonを学習中で、同時にポートフォリオ作成を進めようと考えています。Webアプリを作成するときには、
フロントエンドでHTML,CSS,Javascript
バックエンドでPython
そして、SQLとAWSを学ぶ必要があると調べた結果わかりました。
しかし、ポートフォリオを作成するさいに、SQLやAWSの知識はどこで必要になるのでしょうか?
...
0
票
2
回答
335
閲覧数
Htmlでinputタグから受けとった値の処理の方法を教えてください。
プログラミング初心者です。HTMLでinputタグでワードを受け取り、その結果をもとにおすすめの映画を紹介するというサービスを考えています。HTMLでinputタグから入力フォームは作成したのですが、ここからどのように進めればいいかわかりません。
web開発の手順では、HTML・CSSを作成してからPythonなどのバックエンドの作り方を紹介されていますが、このような仕組みの場合、...
1
票
2
回答
178
閲覧数
あるセレクタの直下かつ先頭というCSSセレクタはありますか?
こちらのspanには適用させず、
<div>テキスト<span>テスト1</span>テキスト<div>
こちらのspanには適用できるセレクタを探しています。
<div><span>テスト2</span>テキスト<div>
divの直下かつ先頭(テキストを除く)という擬似クラス等はないのでしょうか。...
0
票
1
回答
185
閲覧数
inview.jsでスクロールした際に文字を浮かび上がらせたい
実現したいこと
こちらのサイトを参考にスクロールしたときに文字を浮かび上がらせたいです。
「1.【サンプル】フェードイン(ふわっと)」をまねしたいです。
現状は表示させたい文字が現れません。
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
解説をいただきたい部分
①なぜ最初に$(なのか
②...
0
票
1
回答
139
閲覧数
iPhone での表示時、ul の左側に変な空白ができてしまう
現在作成中のサイトで、トップのメニューバーがおかしくなってしまいます。
PCで見るときはいいのですが、スマホ(iPhone SE)で見ると ul タグの左側 (li タグの左側?)に空白が入ってしまいます。
どのCSSが原因なのかChromeのDevToolsでいくつかCSSを消してみたのですが、どれを消してみても空白が消えません。どうすれば消えますか?
...
1
票
1
回答
427
閲覧数
inputタグにてplaceholderの文字サイズを小さくした時の、Chromeの挙動がおかしい
背景
inputタグのplaceholder文字サイズを、通常の入力文字サイズより小さくしたかった。
そこで、以下のようなcssを適用した。
input {
max-height: 40px;
padding: 8px;
font-size: 32px;
}
input::placeholder {
font-size: 16px;
}
...
0
票
1
回答
1,252
閲覧数
CSS Modulesの'composes'がVSCodeにてUnknown propertyと表示され有効化されない
とある教材でWebサイト構築を勉強中なのですが
表題の通り'composes'を記述しても
「Unknown property: 'composes'css(unknownProperties)」と表示されてしまいます。
教材の完成版のコードを読み込んでも同じエラーが出るので
VSCode上の設定に問題があるのかなとは考えております。
海外のサイトで検索してみても'composes'...
-1
票
1
回答
173
閲覧数
スマホ時に 横幅いっぱいにならず、困っています。
https://y-sasakik.github.io/web/web3/
上のサイトでスマホ時に横幅いっぱいにならず、困っています。
どこを変えれば直りますか?
ソースは検証ツールまたは GitHub のリポジトリを参照してください。
https://github.com/y-sasakik/web/tree/main/web3
(追記)
...
0
票
1
回答
157
閲覧数
CSSで ul を flex から block に書き換えたが、Chromeのモバイル表示で縦並びにならない
初心者で質問の要領も得ません。助けていただけたらありがたいです。
まず、HTMLでメニュー設定、次にCSSでメニューを横並びにする、さらに、モバイル用(幅が800px以下の場合)にはメニューを縦並びにする、ということをやりたい。
Chromeの「検証」のモバイル表示では字が小さくなって横並びのままです。しかし、普通の表示でウインドウを800px以下に縮めたら、縦に見えます。何がおかしいのでしょうか?...
1
票
2
回答
589
閲覧数
CSSで日本語の文字のみ別のフォントにしたい
Chromeではデフォルトのフォントがメイリオになってるのですが、メイリオは日本語は斜体が存在しないためemタグで囲んでも斜体になりません。
日本語の時のみ別のフォントに変更したいと思うのですが、通常のCSSでは単純にどのフォントを優先するかしか指定できないようです。
ただ、もし英数などは存在せず日本語だけ存在するフォントがあれば、...