[css] タグが付いた質問

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

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

Html/CssサイトのWordPress化後Cssが反応しません!

HtmlとCssで作ったサイトをワードプレス化するため、テーマの有効化まではできたのですがcssが全て反応しません。対処方法を教えて下さい
KOTAKISHI's user avatar
0
1 回答
42 閲覧数

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

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

flexが効かない

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

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

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

スクロールに合わせてfadeInしたいが、ブラウザが開かれたタイミングでfadeInされてしまう

スクロールに合わせてfadeInしたいですが、ブラウザが開かれたタイミングでfadeInされてしまいます。 コンソールにエラーはでておりません。 fadeInの動きはできているので、問題なく読み込みされてるかと思うのですが fadeInのタイミングだけスクロールにあって動きません。 初歩的な質問で恐縮ですが、よろしくお願い致します。 <div class="test"&...
pepe's user avatar
  • 25
0
0 回答
55 閲覧数

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

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

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

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

fadeInがSPに効かず、PCのみに効く blockが原因の理由

jQueryでanimate__fadeInLeft、PCでは効きますが、SPでは左からからでなく ただのfadeInになってしまいました。 <section class="container"> <div class="contents1"> <picture class="...
pepe's user avatar
  • 25
1
1 回答
113 閲覧数

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

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

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

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

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

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

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

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

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

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

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

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

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,396
0
0 回答
77 閲覧数

JavaScriptでこのLoader作れますか?

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

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

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

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

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

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 回答
83 閲覧数

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

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

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

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

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

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

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

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

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 回答
318 閲覧数

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

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

作成した web ページを iPhone で開くと固まってしまう

主にHTMLとCSSで作ったウェブサイトを公開しようとしているところです。パソコンだと正常に動くのに対して、iPhoneで確認しようとすると、固まって内容が見られなくなります。下記は作ったウェブサイトの1つのページのコードですが、どうでしょうか?ウェブページが重くてモバイルで上手く動きませんか? <!DOCTYPE html> <html lang="ja"> &...
Richard's user avatar
-2
1 回答
525 閲覧数

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

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

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

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

max-height がきかない

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

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

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

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

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

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

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

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

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

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

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

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,147 閲覧数

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

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

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

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

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

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

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

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

colgroupにborderが反映されない

背景色は適用できるのですが、borderが反映されません。 MDNのborderのページ には適用対象はすべての要素となっているのですが、なぜなのでしょうか? 環境 Chrome (103)、Firefox (103) HTML <table> <caption>テーブルの練習</caption> <colgroup span="4&...
sunsun's user avatar
  • 3
0
3 回答
627 閲覧数

javascriptで同じ処理をまとめる方法

javascriptで同じ処理をまとめるにはどのようにすればいいでしょうか。 const but = document.getElementById("but"); const trend = document.getElementById("trend"); but.addEventListener("click", function ...
user25636's user avatar
4
1 回答
272 閲覧数

使われていないCSS指定を自動で検出するには?

困りごと php や html や css を書いて作業をしていたときのことです. html の中で,レイアウトを変えようと思って,<div class="hoge"></div> を table に変更しました. それに伴って CSS の中での div.hoge { text-align: center; } というような指定は不要になるわけです....
Kitamado's user avatar
  • 219
1
1 回答
91 閲覧数

レスポンシブ画面にしたときに要素を間に入れる方法

左のPCサイズの画面を右のスマホサイズにしたときに、緑色の要素を赤と青の間に入れたいです。 やり方を教えてください。ちなみにまだコードはありません。
SEIM's user avatar
  • 11
1
1 回答
157 閲覧数

Bootstrap Icons の Code Point とは何か?

問題の要約 Bootstrap Icons のページからアイコンの情報を見ると,次のような画面が表示されます. Code point とは何のことでしょうか? Unicode や CSS や JS, HTML などと書かれていますが,これをそのまま書いても当然ながら反映されるわけではありません. どのような使い方を想定したものなのでしょうか?
Kitamado's user avatar
  • 219
0
0 回答
67 閲覧数

Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい

現状 ・Chromeで任意URLを閲覧 ・右クリック後検証ページ開いた後、新規CSSルール追加 html{font-size:0.1em!important;} やりたいこと ・毎回追加するCSSルールが同じなので、もっと簡単に(閲覧時のみ適用される)CSSルールを追加したい その他 ・元のソースコード自体には、変更を加えない前提です ・任意のURLに対してこちらの任意のタイミングで、...
re9's user avatar
  • 6,396
0
2 回答
157 閲覧数

addEventListenerにより発生したcontextmenuが一度目の右クリックで表示されない

実現したいこと 下記ソースコードは、それぞれJavascript,css,HTMLとなっています。 このHTML内のid属性のcontextmenu1とcontextmenu2を右クリック表示させたいです。 contextmenu1は class="japan" 上で右クリックした際に、contextmenu2 はそれ以外の場所(id="menu"内)...
chihiro's user avatar
  • 59
0
0 回答
152 閲覧数

リンクのアドレスを取得したい

拡張機能を作成しようとしています。 リンクを右クリックし、コンテキストメニューに追加した新しい項目をクリックしたときに、リンクのアドレスを取得したいです。 現時点では、右クリックをしたらコンテキストメニューに項目が追加されるようにはなっているのですが、クリックしたリンクのアドレスを取得する方法が分かりません。わかる方いらしましたら、お手数をおかけしますがよろしくお願いします。 現時点でのコードです↓...
yushi's user avatar
  • 3
1
1 回答
236 閲覧数

inline-blockの要素を縦幅いっぱいに広げたい

現在ちょっとしたプロトタイプを作成しておりヘッダー部分を作っていたのですが、要素にhoverしたときに縦幅いっぱいに広がってほしいinline-blockの要素がうまく機能せずに、行き詰まっています。 例えば「要素1」の部分にhoverすると以下のような結果になり、 ご覧の通り上のborder-top:3px dotted red;の一番上までホバーしたときの色が変わらずに、...
Qwj_38's user avatar
  • 452

1
2 3 4 5
14