[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
643
質問
0
票
0
回答
76
閲覧数
スタイルシートが反映されない
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
回答
118
閲覧数
HTML input 検索ボックス半角英数字が反応しない。
検索ボックスで半角英数字を入力し検索をしても検索ができない。
ひらがなや漢字であれば検索文字を受け取って検索するのですが、半角英数字だと反応しません。
半角英数字の判定などは特に入れていないのですが、反応しなくなる理由がわからずにいます。
どなたかご教授いただける方いらっしゃいますでしょうか?
よろしくお願いします。
<div class="menu-search-wrap&...
1
票
1
回答
809
閲覧数
VSCodeでCSS等にカラーコード記述するとその色を示すアイコンが欲しい
VSCode使い例えばCSSにカラーコードを打ち込んだ場合
以下の画像のように「カラーコードの前にその色を示す四角形のアイコンが表示され、これを押すとカラーピッカーが出てくる」というシンプルな形式にしたいと思っています。以前Bracketsを使っておりデフォルトでこのような形式だったと思います。
ウェブサイトなどでVSCodeのお勧めの拡張機能を探してみると”Color Highlight”...
0
票
2
回答
402
閲覧数
入力した内容を反映させたい・送信完了メッセージを表示したい
HTML, CSS, javascriptで、VSCode, postmanを使い、あるシステムを作成しています。
以下の内容を実現したいのですがうまくいきません。
ページに入力した内容をそのまま反映させたい
その送信が完了したら送信完了メッセージを出したい
1. ページに入力した内容をそのまま反映させたい
たぶんコードは合っているのですがなせか反映されない状態です。
(...
0
票
0
回答
81
閲覧数
JavaScriptで時間経過で背景を変更する方法
初心者です。
例を挙げるとリシャールミルの公式ホームページのような開くと同時にアニメーションが出て、それが終わると本文が出てくるっていうプログラミングを書きたいのですが、分かる人いればお願いします!
0
票
0
回答
82
閲覧数
replitでのサイトにgoogle広告は掲載可能ですか?
replitを使ってサイトを作っておりgoogle広告で稼ぎたいなーと思い審査してもらっているのですが、サブドメインがダメらしく目的のサイトを登録できません。
replitのサイトでgoogle広告はできるのか、またできるのであれば方法を教えてください。
0
票
0
回答
85
閲覧数
テーブルを横スクロールでレスポンシブ対応させたい。
現在ウェブサイトにテーブルを表示しようとしています。そこでBootstrap5を軸として使っています。デスクトップでは正常に表示されますが、スマホ画面にした際に、画像のように表示されます。カラムヘッダーが表示されておらず、また表示がおそらくblockになってしまっています。これを正常なテーブルの形に表示し、横スクロールできるようにしたいです。
現状
コード
{% load ...
1
票
1
回答
101
閲覧数
setPropertyメソッドを使用してもcontentプロパティへ値が反映されない
:root{
--name: "*";
}
.test::before{
font-size: 13px;
Content: var(--name);
}
このcss変数をjsから
document.documentElement.style.setProperty("--name", "test");
...
0
票
1
回答
138
閲覧数
可変なサイドバーを開いたり閉じたりした時のコンテンツの幅
表題にもある通り、可変なサイドバーを開いたり閉じたりした時のコンテンツの幅を可変にしているのはどうやって実現しているのでしょうか?
以下のサイトで例えるとサイドバーが開いた際にコンテンツの幅が小さくなり、閉じた場合はコンテンツの幅が大きくなっています。
何か、CSSのプロパティで幅を可変にできるものがあるのでしょうか?
-1
票
1
回答
92
閲覧数
olの番号の縦位置が下になってしまう。上揃えにしたい。
キャプチャのようにliの番号が下揃えになってしまいます。
*キャプチャの赤い位置にしたい。
(safariで下になります。chromeでは上になっています)
次のようにしても上になりません。
ol li {
vertical-align: top;
}
どうすれば良いでしょうか?
0
票
1
回答
94
閲覧数
フォームの作成について
解決したいこと
スクショのようなフォームを作りたいと思っているのですが、なかなか思ったように外観が調整できずに困っています。
発生している問題・エラー
ググってフォームの作成の仕方を手当たり次第調べているのですが、こういった入力欄が罫線でかこってあるフォームの作成の仕方しか見当たりません。
自分で試したこと
ググって出てきた、罫線でかこってあるフォームにCSSで
form {
...
0
票
0
回答
483
閲覧数
長押し(ロングタップ)した時に表示される拡大鏡を抑止したい。iOS15-safari。
ios15のsafariにおいて、要素(またはウィンドウ全体)を長押し、ロングタップした際に表示される拡大鏡を抑止したいです。
この機能はiOS13で一度廃止されましたが、iOS15で復活しました。
https://github.com/Leaflet/Leaflet/issues/7678
にもあるように、[-webkit-user-select:none]や[-webkit-touch-...
0
票
1
回答
161
閲覧数
rails6リセットcssなどが2重に読み込まれてしまう
rails6で開発を行っていますが、cssが2重で適用されてしまいます。
フォルダの階層構造は以下の様になっています。
app/assets/stylesheets/_common.css
app/assets/stylesheets/_icomoon.css
app/assets/stylesheets/_initialize.css
app/assets/stylesheets/...
0
票
1
回答
123
閲覧数
railsでcss適用させようとするとRack app error handling requestというのが出ます
railsにcssを適用させたいのですが、適用されません
application.html.erb
<title>UberEvaluation</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag '...
1
票
1
回答
108
閲覧数
inputのラジオボタンが移動できない
ボックスの中のラジオボタンが左に動かない。リストで囲ってみたりボックスのパディングをなくしても
動きません。コンタクトフォームの設定をみてみたのですが。
中央から動かない理由は見当たらず、、。他に何が考えられるでしょうか?
<!-- modal -->
<div class="content">
<a class="...
0
票
2
回答
663
閲覧数
iPhoneでナビゲーションの横スクロールを実現したい
cssでナビゲーションの横スクロールを実装しようとしているんですが、うまくいきません。
環境はiPhone5c、iOS 10.3.3、Safari 602.1です。
下記のようにコードを書いているんですが、iPhoneでは全くスクロールできません。
PCやXperiaでは問題なくスクロールできています。
ご教授よろしくお願い致します。
<div class="navigation&...
1
票
1
回答
92
閲覧数
ホバーでの画面のゆれと画像の重なりをなくしたい
文字枠をホバーすると対応して画像が切り替わるのですが、SP画面の一番上(ノーズワイヤー)のところだけデフォルトの画像が重なります。枠の真ん中だと大丈夫なのですが、上辺に近づくと枠がブルブルゆれたり、デフォルトの画像と重なったりします。PCは大丈夫です。
jqueryはSPとPCで書き分けたりしていないので、CSSなのかなと思うのですが見つけられずにいます。お力をいただければと思います。...
0
票
1
回答
104
閲覧数
ちゃんとFooterの形にしたいです。
コチラ を見本にFooterを作成してみましたが、うまくいきません。
どこを調整すれば、きちんと反映されるのでしょうか?
具体的にどのようにしたいのか
まず、見本のように横いっぱいにFooterを広げたいです。
そして、見本でいうAboutのあたりにコピーライトを、見本のカテゴリーにはカテゴリーを配置したいです。カテゴリーは上から縦に並べます。色味に関しては#f2f2f2を基調としたいです。
...
0
票
0
回答
60
閲覧数
FLIP手法を用いたページレイアウトの作成
こんにちは、プログラミング初学者です。ReactでFLIP手法を用いたページレイアウトを作っているのですが、手詰まりなのでご教授願いたいです。FLIP手法については参考URLを参照願います。
早速ですが、私が作りたいと思っているものは、下記の画像のように1つのメインコンテンツと複数のサブコンテンツで構成され、...
3
票
2
回答
2万
閲覧数
ページを最初から指定の位置にスクロールする
こちらのサイト(http://play-in-hell.com/)ではページが遷移すると一番下から表示されるようになっています。
このように指定した場所からトップページを表示させるにはどのようにしたらよいでしょうか?
私がやりたいのは、トップページに画像が貼ってありその画像の一番下の部分が必ず見えるようにしたいです。...
0
票
1
回答
83
閲覧数
親要素に角丸ボーダーを付けると中の要素の角が目立つ
下記のコードですが、親要素に角丸ボーダーをつけると中の要素の角が目立ちます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
0
票
1
回答
640
閲覧数
CSSが適用されない。そもそも参照しているパスが違う。
やったこと:
https://www.freecodecamp.org/news/static-site-generation-with-nextjs/
を参考に下記を行いました。
$ npx create-next-app my-static-nextjs-app
$ cd my-static-nextjs-app
...
5
票
1
回答
221
閲覧数
クラス名にコロン(:)は許可されているのでしょうか?
https://tailwindcss.com/docs/responsive-design
に レスポンシブ対応のために
md:w-32 lg:w-48
という プレフィックス: という書き方がありますが、クラス名に:は許可されているのでしょうか?
疑似要素のbeforeなどでhoge::beforeなどの書き方があるので、衝突してしまってできなさそうな気もするのですが、...
0
票
0
回答
54
閲覧数
変数を定義したファイルが何個も読み込まれて、打ち消されて残ったものだけが使われているようですが、これを防ぐにはSCSS等のメタ言語を導入するしかないのでしょうか?
コンポーネント的な構造で、CSSを作っています。
(下記のコードは、あくまで再現できる最小限のコードなので、コード的には意味はありません)
variable.css:
:root {
--background1: #333;
}
とう変数の定義の書かれたファイルを用意します。
この背景色は素朴に色なコンポーネントから使いたいとして
component1.css:
@import url(&...
0
票
1
回答
93
閲覧数
vue.jsでCSSの複数セレクタのバインディングをする方法(vueのフィルタ機能との併用)
実現したいこと
CSSのセレクタを複数追加したいです。
通常は、表示側で :classでバインディングし、カンマ区切りでオブジェクトを追加していけば良いかと思うのですが、
今回は、vue.jsのフィルタ機能(このフィルタ関数も、cssのセレクタを返します) を併用したく、
やり方が分からず困っています。
やりたいこと①②を同時に実現できる書き方は存在するでしょうか?
実現したいこと(詳細)
①...
0
票
1
回答
88
閲覧数
ブログサイトの記事内の商品群を並べ替えできるソートボックスを設置したい
自サイトの記事内に配置した商品を値段順や商品発売日順などにする、フィルターボックスを作りたいと思っています。以下の画像はFANZAからスクリーンショットしたものですが、丁度こんな具合のソートのボックスを作りたいと思っているのです。
このような動的な仕組みを作るには、どのような知識が必要とされるのでしょうか?
つまりは、CSSやPHP、JSなどを応用すれば実現できるのか。また、...
0
票
1
回答
101
閲覧数
SVG の線の長さと同じ値はどうやって探すんですか?
CSS animation で遊び倒す -SVG Line - - Qiitaを読んでいます。
破線の間隔が、SVG の線の長さと同じ値を探し、stroke-dasharrayに設定して、全てを隠します。
「SVG の線の長さと同じ値を探し」とはどのように探すのでしょうか?
コードの該当箇所の引用:
stroke-dasharray: 700px;
stroke-dashoffset: ...
0
票
1
回答
106
閲覧数
カードを横スライドできるようにしたい。
実現したいこと
以下のカードを横にスライドできるような形に持っていきたいです。
しかし、現時点において横に配置することができていません。
そこでまず横にカードを並べたいです。
カードの仕組み
カードは裏で動いているCMSの追加に合わせて増えていく仕組みです。現時点においてカードは縦並びに追加されてしまいます。一番良い形としては、追加に伴い、カード自体のサイズを変えることなく、...
0
票
1
回答
149
閲覧数
バナーの位置を下に下げたい
現状
画像のように、ページを開いたときにすでにバナーがメニュー下に重なり、見づらくなってしまっています。
いろいろ試してみたのですが、動きません。お力お貸しください!!
こちらとマルチポストしております。こちらで情報が更新・解決され次第、反映する予定です。どうぞよろしくお願いいたします。
実現したいこと
分かりにくいかもしれませんが、メニューバー(白い部分)とバナー(山の写真の部分)...
0
票
1
回答
125
閲覧数
Some problems no longer generate console message, but are surfaced in the issues tab. Click to view 2 possible improvements.というイシューが出ている
Chromeのデベロッパーツールで以下のメッセージが表示されます。
Some problems no longer generate console message, but are surfaced in the issues tab. Click to view 2 possible improvements.
該当箇所
この青い吹き出しの上にマウスを乗せると上記メッセージが出ます。
...
0
票
0
回答
151
閲覧数
カードの横スクロールを実現したい。
カードをbootstrap 5で作っています。リンク等はHTML上に直打ちではなく、DjangoCMS(wagtail)で管理しています。裏でカードをジャンジャン追加していき、ある程度の数(だいたい5つくらい)になったら横スクロールできるようにしたいです。カードの作成までは何とかできたのですが、追加するごとに細くなってしまい、スクロールが機能しません。...
0
票
1
回答
99
閲覧数
react-native-webで作成したWebページに、"http://---.js" 形式ファイルを埋め込みたい
やりたいこと
react-native-webで作成したWebページに、"http://---.js" 形式ファイル を埋め込みたい
やってること
react-native-web, expo, firebase hostingを用いてWebページを作成しました。
そこにブログページも作ろうと思ってます。
ブログ記事の作成にはGoogleドキュメント、...
-1
票
1
回答
87
閲覧数
ブラウザの幅を変えると要素の位置が変わってしまうのを直したいです。
どのようにすれば、ブラウザの幅を変えても1枚目の状態で維持できるようになるのでしょうか?
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport&...
1
票
1
回答
121
閲覧数
CSSで、ドキュメントルートより上に配置しているSVGタグそのものを読み込む方法はありますか?
現状
ドキュメントルートより上に、(実質的にはsvgである)hoge.phpを配置しています。
出力したい箇所(html)で、hoge.phpを読み込み、svgを表示しています。
hoge.php
<svg height="" viewBox="" width="" xmlns="http://www.w3.org/...
1
票
1
回答
200
閲覧数
position:fixed;のaの階層を一番上にする方法
背景にbeforeを使って画像を表示させたaを、fixedで追従するメニューのようにしました。
しかし背景に画像を表示させる関係でbeforeのz-indexを-1にしてしまったため、他のdiv要素が邪魔して追従時に隠れてしまいます。
あれこれz-indexを変えたりpositionを入れてみたりしているのですが解決できません。
この場合は階層順をどのようにすればいいのでしょうか?
...
0
票
0
回答
117
閲覧数
モバイルでアクセスしたときは、HTML階層構造を変更したい
パソコンとモバイルでWebレイアウトを分けたいです。
display:flex;のorderプロパティやメディアクエリを試してみたのですが、どうしてもうまくいきません。
HTML階層構造が異なるからだということに気が付きました。
モバイルでアクセスしたときだけ、HTML階層構造を変更することはできますか?
PCからのアクセスを想定。前提となるhtml
<div class="...
1
票
1
回答
104
閲覧数
メニューをクリックするとメニュー文字が動いてしまう
メニューをクリックすると画像がメニュー文字の背後に出てくるものを作ったのですが、画像が出てくると同時に文字が左に押し出されてしまって不自然になってしまっています。z-indexで上下をいじってみたりしましたがよくわからず…わかる方ご教示していただけると助かります。画像が出てくるのはjQueryでクラスをつけたり消したりする処理をしています。
<!DOCTYPE html>
<...
0
票
1
回答
74
閲覧数
動く背景がクリックすると表示され、別のものをクリックするとそちらに動く背景が移るメニューを作りたい
クリックしてアクティブにしたリンクの背景にだけ、ふわふわと動く背景画像を出現させたいです。
cssだけでできないかと調べてlabelを試して失敗し、jqueryでクラスを付け替えることを試しましたがうまくいきません。
コードは以下
<!DOCTYPE html>
<html lang="ja">
<head>
<meta ...
0
票
1
回答
112
閲覧数
ビルドでCSSを書き換えるには?
長文大変失礼いたします.
背景
XMLで書かれたドキュメント群を変換してHTMLにし、CSSや画像ファイルとセットでパブリッシングするのをやっています.日本語だけでなく多言語をやっております.今般お客様の意向で、従来CSSで@font-faceで指定していたフォントファイルを、今はやりのWeb Fontに置き換えることになりました.
主な狙いは日本語フォントなんだろうと思います....
0
票
0
回答
39
閲覧数
jqgridで期間を設定したい
jqgridで日付を含むデータセットを扱いたいと考えています。
データの表示範囲を開始日から終了日で選択できるようにしたいです。
datepickerが使用できることは把握しているのですが、自至で選択する方法が分かっていません。
ツールバーにdatepickerを表示して開始日・終了日を指定してデータを絞り込みたいです。
ご教示いただければ幸いです。
1
票
1
回答
172
閲覧数
縦に積み上がる要素の削除したときに、下にガタっと落ちてしまうのを滑らかにアニメーションしたい
material-uiの下記リンクスナックバーのようなものを作成しようとしています。
https://material-ui.com/ja/components/snackbars/#complementary-projects
その際のアニメーションで、要素が削除されたときに縦に移動するアニメーションの実装方法がわからず困っています。
理想↓↓
現実↓↓ ...
0
票
0
回答
56
閲覧数
japacartテーマの左カラムの太さを変更する方法
japacartというネット販売のワードプレステーマを利用しています。
左側のカラムの幅を変えたいのですが、スタイルシートの書き方がわかりません。
調べながらこのように書いてみたのですが、変化しませんでした。
https://japawww.com/demo-bakery/
#sidebar{
width:40%
}
参考にしたページ
https://naruhodo.repop.jp/...
0
票
0
回答
44
閲覧数
ルートフォルダをwebconfigまたはJSで変更する方法
サイト構築にあたり、ルート相対パスを使用してCSSなどの外部ファイルを読み込んでいます。
しかし、テストサーバとメインサーバではルートからの階層が異なるため、webconfigやJSなどでルートフォルダを変更する方法を探しています。
テストサーバはメインサーバの中に構築されているので、メインサーバに影響を及ばさない方法が知りたいです。
また、...
0
票
0
回答
56
閲覧数
スライドショー、フェードデザインのカスタマイズについて
https://shinsoken.jp/
上記のサイトのトップページのスライドショーのように、フェードのなかで一瞬白くなるように実装したいです。
ただのふわっとするフェードならできるのですが、白くするやり方が分かりませんでした。
https://hikarutest.space/
↑こちらのページのスライドショーをカスタマイズしたいです。
すみませんが、どなたか教えていただきたいです。
★...
0
票
2
回答
110
閲覧数
transformした要素内のanchorタグをクリックしたら特定のページに遷移したい
題の通りです.hrefで指定したURLに要素をクリックしたら飛ぶようにしたいのですが,良い方法が見つかりません.
https://codepen.io/matsubax/pen/yLMKRmX
body {
text-align: center;
background-color: #D7FFD7;
}
#menu {
width: 150px;
...
0
票
1
回答
118
閲覧数
Bootstrapのhamburgar menuが動かない
下記のドキュメントのExternal contentの章で記述されているサンプルコードをそのまま
コピーすると、レイアウトはそのまま黒のヘッダーにアイコンという状態で再現できます。
https://getbootstrap.com/docs/4.1/components/navbar/
ただ、アイコンを押下してもメニューを展開できない状態です。
何か追加で設定する必要があるのでしょうか?
&...
0
票
1
回答
203
閲覧数
element.styleの値を取得できない
WordPressで作成しているサイトに、jQuery/JavaScriptでcssのleft、top、transform:scaleを操作するかたちで、画像を左右、拡大縮小できる機能をつくりました。
さらに、上記の値を取得したいのですが、値は「element.style」に反映されており、取得がうまくいきません。
この「element.style」の値を取得する方法を教えていただけますでしょうか?...
0
票
1
回答
126
閲覧数
JavaScriptで.loadしたheaderにcssが適用されない
ホームページのheaderを
<script>
//共通パーツ読み込み
$(function() {
$("#header").load("components/header.html");
});
</script>
で読み込み
<div id="header"></div&...
0
票
1
回答
149
閲覧数
JavaScriptとCSSのアニメーションはどちらが速い?
例えば横移動のアニメーションをする際、どちらが速いのでしょうか?
transitionプロパティを使ったアニメーション
requestAnimationFrameでtransform:translate3D等を動かしたアニメーション
速さ = FPS が良い方を知りたいです。
例えばスペックの悪いデバイス等でも、
FPSが高いのはどちらなのかなという疑問からの
質問でした。
0
票
1
回答
122
閲覧数
wordpress上でのアコーディオンが動かない
前提・実現したいこと
webサイト上でのアコーディオン実装
発生している問題・エラーメッセージ
質問をクリックするとその答えがスライドして表示/非表示されるはずが、
なぜかそうならないのです。
どういじれば、動きますか?
該当のソースコード
htmlファイル
<div class="container">
<div class=&...