[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
90
未回答やベストアンサーなし質問
0
票
0
回答
444
閲覧数
position:absolute;の後のブロックが重なる
list16及びlist17のブロックが重なってしまい困っています。
list16の要素に指定したposition:absolute;をコメントアウトすると二つの要素が離れることからこれが原因だと思うのですがこれはどうして起こるのでしょうか。
list17にmarginを指定してもtopのmarginが効かず重なったままです。解決方法をが回答よろしくお願いします。
<!DOCTYPE ...
0
票
0
回答
61
閲覧数
スマホのsafariで開いた場合、videoタグの動画、文章が表示されません。
pcでディベロッパーツールで見た場合はスマホのサイズでも表示されるのですが、スマートフォンで実際に見たときに空白となっています。
pタグの文章すら表示されません。
videoタグの中にsrc=""の表記を入れてみても変わりませんでした。
どなたか教えていただけますでしょうか。
0
票
0
回答
80
閲覧数
スタイルシートが反映されない
CSSが反映されず文字と写真が別々に表示されてしまいます。また、firefoxで開くと Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content....
0
票
0
回答
141
閲覧数
HTML input 検索ボックス半角英数字が反応しない。
検索ボックスで半角英数字を入力し検索をしても検索ができない。
ひらがなや漢字であれば検索文字を受け取って検索するのですが、半角英数字だと反応しません。
半角英数字の判定などは特に入れていないのですが、反応しなくなる理由がわからずにいます。
どなたかご教授いただける方いらっしゃいますでしょうか?
よろしくお願いします。
<div class="menu-search-wrap&...
0
票
0
回答
85
閲覧数
JavaScriptで時間経過で背景を変更する方法
初心者です。
例を挙げるとリシャールミルの公式ホームページのような開くと同時にアニメーションが出て、それが終わると本文が出てくるっていうプログラミングを書きたいのですが、分かる人いればお願いします!
0
票
0
回答
92
閲覧数
replitでのサイトにgoogle広告は掲載可能ですか?
replitを使ってサイトを作っておりgoogle広告で稼ぎたいなーと思い審査してもらっているのですが、サブドメインがダメらしく目的のサイトを登録できません。
replitのサイトでgoogle広告はできるのか、またできるのであれば方法を教えてください。
0
票
0
回答
122
閲覧数
テーブルを横スクロールでレスポンシブ対応させたい。
現在ウェブサイトにテーブルを表示しようとしています。そこでBootstrap5を軸として使っています。デスクトップでは正常に表示されますが、スマホ画面にした際に、画像のように表示されます。カラムヘッダーが表示されておらず、また表示がおそらくblockになってしまっています。これを正常なテーブルの形に表示し、横スクロールできるようにしたいです。
現状
コード
{% load ...
0
票
0
回答
573
閲覧数
長押し(ロングタップ)した時に表示される拡大鏡を抑止したい。iOS15-safari。
ios15のsafariにおいて、要素(またはウィンドウ全体)を長押し、ロングタップした際に表示される拡大鏡を抑止したいです。
この機能はiOS13で一度廃止されましたが、iOS15で復活しました。
https://github.com/Leaflet/Leaflet/issues/7678
にもあるように、[-webkit-user-select:none]や[-webkit-touch-...
0
票
0
回答
64
閲覧数
FLIP手法を用いたページレイアウトの作成
こんにちは、プログラミング初学者です。ReactでFLIP手法を用いたページレイアウトを作っているのですが、手詰まりなのでご教授願いたいです。FLIP手法については参考URLを参照願います。
早速ですが、私が作りたいと思っているものは、下記の画像のように1つのメインコンテンツと複数のサブコンテンツで構成され、...
0
票
0
回答
121
閲覧数
モバイルでアクセスしたときは、HTML階層構造を変更したい
パソコンとモバイルでWebレイアウトを分けたいです。
display:flex;のorderプロパティやメディアクエリを試してみたのですが、どうしてもうまくいきません。
HTML階層構造が異なるからだということに気が付きました。
モバイルでアクセスしたときだけ、HTML階層構造を変更することはできますか?
PCからのアクセスを想定。前提となるhtml
<div class="...
0
票
1
回答
75
閲覧数
動く背景がクリックすると表示され、別のものをクリックするとそちらに動く背景が移るメニューを作りたい
クリックしてアクティブにしたリンクの背景にだけ、ふわふわと動く背景画像を出現させたいです。
cssだけでできないかと調べてlabelを試して失敗し、jqueryでクラスを付け替えることを試しましたがうまくいきません。
コードは以下
<!DOCTYPE html>
<html lang="ja">
<head>
<meta ...
0
票
1
回答
172
閲覧数
Bootstrapのhamburgar menuが動かない
下記のドキュメントのExternal contentの章で記述されているサンプルコードをそのまま
コピーすると、レイアウトはそのまま黒のヘッダーにアイコンという状態で再現できます。
https://getbootstrap.com/docs/4.1/components/navbar/
ただ、アイコンを押下してもメニューを展開できない状態です。
何か追加で設定する必要があるのでしょうか?
&...
0
票
1
回答
97
閲覧数
CSS グリッドレイアウトの並び順について
グリッドレイアウトで以下の要件を満たす実装をしてたいのですがやり方がわからないので質問させてください。
下記のようにアイテム数によってレイアウトの変更は実現できるのですが、9個以上の場合のアイテムの配置順が上から下になってしまいます。それを解決する方法は何かありますでしょうか?
private getKeysStyle(items: string) {
if(items.length &...
0
票
0
回答
81
閲覧数
複数のデザインを数ヶ月に一度のサイクルで回した際のSEOの懸念
自社の社長がコーポレートサイトのデザインを複数人に作成させ、それを数ヶ月ペースで回して使っていきたいと言っているのですが、これはSEO的に悪いのでしょうか?
ちなみにドメインは同じで、内容は違います。
0
票
0
回答
93
閲覧数
ネットショップやホームページでアニメーションをつけたい
プログラミング初心者です。プログラミング学習でアニメーションをつける練習をしていてネットで落ち葉が降るアニメーションを見つけました。
サイトを参考にしつつVScodeでsampleというフォルダを作り同じディレクトリ内にindex.htmlとmain.jsと落ち葉の画像とcss/style.cssの計4種類のファイルを作りました。
こちらのindex....
0
票
0
回答
121
閲覧数
ブラウザ更新時の読み込みシームレス化を実現したいです
ブラウザ更新時の画像読み込みシームレス化(以下のブラウザページ)のページ全体版を実現したいと思っています。
https://teratail.com/questions/271650
上の過去の質問回答の構文では画像URLを指定していますが、画像URLではなくWEBページ全体を表示させる場合に更新時のラグ(ページが完全に表示されるまでの読み込み中の状態)...
0
票
1
回答
160
閲覧数
URL 指定での Web ページ表示時にリダイレクトされるのを停止したい
以下の構文、サンプルページのとおり、URL を指定して表示させる HTML を書いたのですが、当該 URL を表示後、当該 URL 側の挙動として自動的に別の URL にリダイレクトされてしまいます。(この例ですと、「https://www.jma.go.jp/bosai/map.html#5&contents=earthquake_map」を指定していますが、「https://www....
0
票
0
回答
203
閲覧数
Qt(C++)Grid Layout上のQLabelでフォントの余白によってLabelが大きくなってしまう(Labelのデザインはstylesheetを使用)
QtでLabelをGridLayout上に等間隔で並べていて、そこに文字を表示しています
普段はそのまま綺麗に表示されるのですが、外国語フォント(韓国語、中国語)で表示するとフォント自体の余白が大きいのか
グリッド上のラベルでギリギリのフォントサイズで文字を表示するとラベルが微妙にサイズが大きくなってしまい、
日本語とその他の言語に切り替えた瞬間にデザインが崩れてしまいます
...
0
票
0
回答
94
閲覧数
サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかかる。PCサイズでもややひっかかりを感じる。
サイドバーを固定させるグリッドレイアウトを作ったが、iPadでスクロールがひっかります。
下記がコードになります。コンテンツに高さを持たさせるために AやBといったアルファベット一文字を多用していますが、そこはコンテンツに高さを持たせるためなので気にしないでください。
環境: Mac OS 10.15.5, Chrome Version 88.0.4324.192 (Official Build) ...
0
票
0
回答
70
閲覧数
cssで縦幅が決まっていないブロックの上下中央揃え
cssで縦幅のpx指定をしない(中身に合わせた大きさになって欲しい)ブロックの上下中央揃えがうまくいきません。
下記は一応うまくいきますが、htmlやbodyに100%指定しなくてはならないのが気になります。
html,
body {
height: 100%;
}
.wrapper {
display: flex;
justify-content: center;
...
0
票
0
回答
143
閲覧数
CSSにおいてボックスがはみ出る問題を解決したい
HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか?
気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、
select_test_areaクラスはheaderクラスの高さを選んでいないため、...
0
票
0
回答
64
閲覧数
todoのデータが消えてしまう localstorage
すみませんコードの張り方がわからず 変な風になってしまいました、
ご教示いただけると幸いです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>やることリスト</...
0
票
1
回答
172
閲覧数
IE11で属性セレクタにコロンを含むときスタイルが適用されない
属性セレクタで以下のように指定したいのですが、IE11ではうまく動作しません。
Edge(Chronium)は正しく動作します。
いろいろ試してみるとコロン(:)以降に文字列が入ったところで一致しなくなるようです。
font-size:...OK
font-size:50...NG
コロン(:)をエスケープする必要があるのかと思い、\\:、\:や:...
0
票
1
回答
162
閲覧数
高さを600px、横をブラウザー画面いっぱいにしても画像の比率がおかしくならないようにしたい。
画像をブラウザの表示いっぱいにして、高さを600pxにしたいと考えてます。
今は高さを調節したせいで画像の比率がおかしくなってしまいます。
画像の比率を保ったまま高さを600pxにして横幅は変更されても画像の比率がおかしくならない方法をご存知の方いらしたら教えてください。
また、600pxにこだわらなくても良いです。
高さを600pxにした理由は、...
0
票
1
回答
97
閲覧数
グローバルナビゲーションが表示されません
以下のようにHTML、CSSを書きましたが、WEB上でグローバルナビゲーションが表示されません。
何が原因でしょうか?
対処方法も含めて、教えて頂きたいです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, ...
0
票
0
回答
1,077
閲覧数
IEの「イントラネット サイトを互換表示で表示する」について
IEの「イントラネット サイトを互換表示で表示する」について教えてください。
今回作成したアプリをIE11で開こうとすると、「イントラネット サイトを互換表示で表示する」の設定のせいだと思われるのですが、IE7のモードで表示されてレイアウトが乱れてしまいます。
よって試しに「イントラネット サイトを互換表示で表示する」のチェックを外してみると、期待しているレイアウトになりました。
そこで X-...
0
票
1
回答
282
閲覧数
同じ画面内で特定のエリアのみcssを反映させたい
以下HTMLで、titile_area,body_areaのみCSSを反映させたいが、どうしたらいいか?
現状は、titile_area,body_area以外の部分にも適用されてしまう。
<div class="title_area">
<table>
<tr>
<th>A</th>
<th>B</...
0
票
0
回答
899
閲覧数
イメージマップのレスポンシブ対応がうまくいかない
既存サイトで固定横幅で正常なイメージマップをレスポンシブ対応しようとしているのですが、以下のようにやってもブラウザの横幅を変えた時にイメージマップの縮小に対応してリンクエリアが追従されません。(以下書き直します)
■script部分
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/...
0
票
0
回答
74
閲覧数
メガナビゲーションの高さ、グローバルナビのマウスオーバ時の色について
お世話になっております。
掲題の件で質問させていただきます。
メガナビゲーション内を左右に分けたい場合、以下のコードで実施しましたが高さを固定しないとロード時に背景色が表示されないことがあります。
この場合の回避方法をご教示お願いいたします。
また、グローバルナビのリストにマウスオーバ時に色が変化しますが、メガナビゲーション内にカーソルを移動すると色が保持できません。
...
0
票
0
回答
415
閲覧数
画面更新(リロード)するとhomeディレクトリ以外のCSSが反映されない場合の解決方法がわからないです。
今Railsでブログを作成しています。
全部のページ表示は最初正常に反映されるのですが、画面をリロードすると
CSSが反映されません。CSSが反映されなくなる要因はURLの階層が一段深いです。
ページのレイアウトはapplication.html.erbです。
階層が深くなってもCSSが反映されるようにするにはどうすればよいでしょうか。
画面更新してもCSSは正常に反映される (views/...
0
票
0
回答
44
閲覧数
responsive-components機能を実装したい。
やりたいこと
Railsで下記を実装したいのです。
画面分割かつ可変なウェブコンポーネントです。
https://philipwalton.github.io/responsive-components/
困ってること
Railsに移行する方法がイメージできないこと。
現状
$ git clone
$ npm start
localhostでdemo実行
までできたのですが、...
0
票
0
回答
62
閲覧数
railsの本番環境で、sassを更新するたびに前回のsassに上書きされてしまいます。railsの本番環境AWS sass css config
railsのwebサイトをAWS,nginx,unicornを使って、運営しています。
railsの本番環境に新しく、更新したsassを反映をさせようと思って、precompileして再起動するのですが、毎回、前回までの古いsassの上に上書きされる形で反映されてしまい、お互いの反映がぶつかり合ってしまいます。
結果として、新しい変更の方は無視されて、古いsassの方が反映されてしまいます。
...
0
票
0
回答
404
閲覧数
動的にテキストをセットした場合のplaceholderの表示について
jQueryのvalを使ってテキストボックスに動的にテキストをセットした場合にMacのsafariではplaceholderのテキストが非表示にならず、重なって表示されてしまいます。
フォーカス時にplaceholderを非表示にする方法は見つかったのですが、動的に値がセットされた場合にplaceholderを非表示にする方法はありますでしょうか?
...
0
票
0
回答
183
閲覧数
jQuery BlackAndWhiteが利用できない
初めまして。
コーディング初心者で現在ホームページ作りをしているのですが、
画像マウスオーバー時に白黒からカラーを切り替えるプラグインのBlackAndWhiteを利用しようとしておりますが、うまくいきません。
念のためマウスオーバー前の画像を添付しておきます。
マウスオーバー前
このような形でマウスオーバー前はalt属性が左上に謎に表示された状態で、...
0
票
0
回答
2,255
閲覧数
iOS x Safariで画像が表示されない
前提・実現したいこと
以下のサイトのリリースを控えていますが、表題の不具合が解決できずに悩んでいます...
https://magazine.tabitatsu.jp/
発生している問題・エラーメッセージ
iOSのSafariで記事ページにアクセスした際に、画像が表示されません。
https://magazine.tabitatsu.jp/articles/63
しかし、...
0
票
0
回答
427
閲覧数
CSSで画像の位置がうまく調整できない
現在HTMLで↓のように
<body>
<div class="daruma"><div style="position:absolute;top:-20px;left:0px;">
<a href="リンク/"><img src="元の画像" border="0" onMouseOver="this.src='マウスオーバー時画像'" ...
0
票
0
回答
4,195
閲覧数
iOSのSafariでvhによるheightの指定が実際より少し大きくなる
iOSのSafariで heightを "vh" で指定した場合、実際より一回り大きなサイズになってしまいます。
例えば、"height:100vh" とすると、表示領域全体より少し大きくなります。
おそらく、iOSのSafariはアドレスバーの領域も含めて100vhとして計算しているのではないかと思います。
このため、他のブラウザと表示に差がでてしまうのですが、...
0
票
0
回答
57
閲覧数
上下の枠に接したところで向きを変える方法
下記のコードは、marqueeタグの代わりにCSSを使って文字(〇)を"ジグザグ走行"させたものです。
しかし、その文字は親要素のdiv(id="container")で設定した背景色の上の枠からははみ出て、
下の枠からは幾分上の方で向きが変わってしまいます。
どうすれば、上下の枠に接したところで向きが変わるようになるでしょうか。ご教示ください。
<style>
#...
0
票
0
回答
80
閲覧数
"マウスストーカー"の効果を失わずに、セレクトのoptionにもanimationDURATIONスタイルを設定する方法
下記のソースコードは、 文字マウスストーカーにanimationDURATIONスタイルを設定したのですが、
これを設定したらマウスストーカーの効果が失われてしまいました(*初期状態のみ正常に機能します)。
どのように設定しなおせば、マウスストーカーの効果を失わずに、animationDURATIONスタイルを
セレクトのoptionにも設定できるでしょうか。ご教示ください。
*"...
-1
票
1
回答
1,844
閲覧数
railsでapplication.css以外のscssが反応しない
RailsでWebアプリケーションを作ろうとしています。application.cssの他にHomeコントローラを作成して、home.css.scssを作ってみたんですが、.classといった具合にセレクタ名を打ち込んでも全く反応しません。(文字色が白から変わらない、、)
application.cssはちゃんと読み込まれています。
ググってみるとよく出てくる、*/ = ...