[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
654
質問
1
票
2
回答
402
閲覧数
Flexboxでコンテンツの幅に合わせて縦並びにしたい。
上のようにflec containerに合わせてitemの幅が広がってしまうのですが、
これを"item"のコンテンツ幅に合わせるにはどうすればよいのでしょうか?
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<...
1
票
1
回答
183
閲覧数
サイトのナビゲーションの、選択されているテキストに色を付けたいです。
サイトのナビゲーションなどによくある、選択されているページの文字色を変えたいのですが、
どのようにすれば良いのでしょうか?
例えば以下の場合、会社案内をクリックしたら、会社案内ページが表示されているときは<li><a href="#">会社案内</a></li>のテキストをredにする。といった動きにしたいです。
<ul class="nav"...
1
票
2
回答
7,390
閲覧数
HTMLのtextのonkeydownで半角数字のみ入力を指定したところテンキー入力が効かない。
お世話になります。
Windows、VisualStudio2015のASP.NET(VisualBasic)、.NET Framework4.6、
ローカルIIS、ブラウザはGoogleChrome、IE、で開発しています。
1つのページにtext(ASP.NETではTextBox、名称はtxtTest)を置き、
半角数字のみ入力できるように、function(名称はnumOnly())...
1
票
1
回答
822
閲覧数
要素のクリックに反応して別の要素を出現させる(JavaScriptによらない)方法
下記のサイトがどう動いているのか不明です。
https://mem.ooo/
コードを見ても、GoogleAnalytics以外JavaScriptなどで動いているようには見受けられないですし、
どのような仕組みで画面が動的に変わっているのでしょうか。
稚拙な質問になりますが、ご回答いただけますと幸いです。
よろしくお願いいたします。
1
票
1
回答
1,365
閲覧数
横と縦のスクロールバーを消したのですが、 5%分、liの中のテキスト情報などのインライン要素がずれて真ん中になりません。
横と縦のスクロールバーを消したのですが、 下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。
・わかりにくいので下記で再現してみました。こちらを見てみてください。
$(function() {
$('.kuruttosuru').on('click', function() {
$('.kuruttosuru').addClass('...
1
票
2
回答
1,305
閲覧数
取得したfile objectを、submitの対象にするには?
javascriptで、drag&dropされたファイルのfile objectを取得しており、そのファイル情報を画面に出力しています。
ファイル情報出力時、input type="file"タグに取得ファイルを設定して画面に出力することはセキュリティ上できないようなので、Pタグで表示していますがsubmitボタン押下時のsubmit対象にはなりません。
取得し、...
1
票
1
回答
173
閲覧数
代用ボタンのクリックを、本物のボタンに適用したい
代用ボタンのクリックを、本物のボタンに適用したいのですが、
方法が分かりません。
因みに本物のボタンは非表示になっています。
<button type="button">代用ボタン</button>
<input type="file" id="本物のボタン" name="fileselect[]" multiple="multiple" />
1
票
1
回答
960
閲覧数
モバイルデバイスの画面の実寸を把握するには?
http://g.co/racer のように、複数のデバイス間で画面の見た目を揃えるにはどうしたらいいのでしょうか?
まずはCSSの実寸指定やviewportを使うことを考えたのですが、これらを使っても画面上でのサイズを正確に指定することはできないようで、失敗。
<!--次のコードでは、画面上に表示される要素のサイズは1cmになりません。-->
<div style="...
1
票
1
回答
3,233
閲覧数
Bootstrapで動的にフォームを作るとチェックボックスのラベルをクリックしても機能しない
Twitter Bootstrapについてです。
Bootstrapのスタイルは、デフォルトで
チェックボックスのラベルをクリックすると(画像の「画像を削除する」のラベル)、
チェックボックスがtoggleされます。
しかし、JSで動的にフォームを挿入した後のチェックボックスは、
ラベルをクリックしてもtoggleされません。
popoverなどの機能であれば、
$('[rel=...
1
票
1
回答
66
閲覧数
レスポンシブ画面にしたときに要素を間に入れる方法
左のPCサイズの画面を右のスマホサイズにしたときに、緑色の要素を赤と青の間に入れたいです。
やり方を教えてください。ちなみにまだコードはありません。
1
票
1
回答
72
閲覧数
Bootstrap Icons の Code Point とは何か?
問題の要約
Bootstrap Icons のページからアイコンの情報を見ると,次のような画面が表示されます.
Code point とは何のことでしょうか?
Unicode や CSS や JS, HTML などと書かれていますが,これをそのまま書いても当然ながら反映されるわけではありません.
どのような使い方を想定したものなのでしょうか?
1
票
1
回答
119
閲覧数
inline-blockの要素を縦幅いっぱいに広げたい
現在ちょっとしたプロトタイプを作成しておりヘッダー部分を作っていたのですが、要素にhoverしたときに縦幅いっぱいに広がってほしいinline-blockの要素がうまく機能せずに、行き詰まっています。
例えば「要素1」の部分にhoverすると以下のような結果になり、
ご覧の通り上のborder-top:3px dotted red;の一番上までホバーしたときの色が変わらずに、...
1
票
1
回答
134
閲覧数
StylusでCSSの属性値を複数指定する方法はありますか?
あるサイトのユーザアイコン画像をchrome拡張機能のStylusで非表示にしたいと考えています。
下記属性値の、thumb-"数値"-200-"ユーザごとのランダムな英字"がユーザを識別する値のようです。
このように記述することで非表示にすることはできたのですが、多くのユーザを非表示にする場合
何十行も書く必要がありますので、...
1
票
1
回答
1,249
閲覧数
VSCodeでCSS等にカラーコード記述するとその色を示すアイコンが欲しい
VSCode使い例えばCSSにカラーコードを打ち込んだ場合
以下の画像のように「カラーコードの前にその色を示す四角形のアイコンが表示され、これを押すとカラーピッカーが出てくる」というシンプルな形式にしたいと思っています。以前Bracketsを使っておりデフォルトでこのような形式だったと思います。
ウェブサイトなどでVSCodeのお勧めの拡張機能を探してみると”Color Highlight”...
1
票
1
回答
135
閲覧数
inputのラジオボタンが移動できない
ボックスの中のラジオボタンが左に動かない。リストで囲ってみたりボックスのパディングをなくしても
動きません。コンタクトフォームの設定をみてみたのですが。
中央から動かない理由は見当たらず、、。他に何が考えられるでしょうか?
<!-- modal -->
<div class="content">
<a class="...
1
票
1
回答
92
閲覧数
ホバーでの画面のゆれと画像の重なりをなくしたい
文字枠をホバーすると対応して画像が切り替わるのですが、SP画面の一番上(ノーズワイヤー)のところだけデフォルトの画像が重なります。枠の真ん中だと大丈夫なのですが、上辺に近づくと枠がブルブルゆれたり、デフォルトの画像と重なったりします。PCは大丈夫です。
jqueryはSPとPCで書き分けたりしていないので、CSSなのかなと思うのですが見つけられずにいます。お力をいただければと思います。...
1
票
1
回答
123
閲覧数
CSSで、ドキュメントルートより上に配置しているSVGタグそのものを読み込む方法はありますか?
現状
ドキュメントルートより上に、(実質的にはsvgである)hoge.phpを配置しています。
出力したい箇所(html)で、hoge.phpを読み込み、svgを表示しています。
hoge.php
<svg height="" viewBox="" width="" xmlns="http://www.w3.org/...
1
票
1
回答
923
閲覧数
tailwind cssでradioをボタンのように表示したい
tailwind cssをインストールして使っています。
inputのradioをボタンのように装飾表示して、クリックしたら色が変化するようにしたいのでこのようにしました。
@tailwind base;
@tailwind components;
@tailwind utilities;
.radio-button:checked + label {
@apply bg-indigo-...
1
票
1
回答
128
閲覧数
区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。
現象
区切り線だけ表示されて「または」というテキストが表示されないです。
期待値
区切り線の途中に「または」というテキストを表示したいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、...
1
票
1
回答
462
閲覧数
HTMLでGridView部品のような表示・動作がしたい
FirefoxアドオンをChrome拡張に移植中なんですが、Visual StudioなどにあるGUI、GridViewのような表示をしたくて悩んでます。具体的にどんなものかと言うと以下の画像のようなものです。
selectタグだと複数列ができません。
条件としては、
複数列表示ができる
行単位での選択・検知ができる
を満たすようなものです。
1
票
1
回答
1,047
閲覧数
flex アイテムで width の大きさが 100% 以上にならない
Flexbox を使った際に width: 200% で Flexbox の 2 倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。
<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center; align-items: ...
1
票
1
回答
48
閲覧数
background-image の repeat による繰り返しが、最初に表示された画面サイズで止まってしまう
z-index を巨大に設定した疑似クラス :after に background-image を指定することで、ページ全体の前面に画像を縦横 repeat させようとしています。
下のように書くと一見上手くいったかのように見えるのですが、実は最初に描画された部分しか repeat されておらず、ページをスクロールして描画外にいくと画像が表示されなくなってしまいます。
ページ全体に対して ...
1
票
1
回答
981
閲覧数
position:fixedのモーダルウィンドウの上側が画面が狭いと見切れてスクロールもできない
完了ボタンを押すと同意するかしないかの
モーダルウィンドウがでるボタンを作っています
うまくできたと思ったのですがレスポンスブルにしたいので
画面を狭めてテストするとモーダルウィンドウの上の方が見切れました
これはposition:fixedのせいだと疑っていますが性質上これは外せません
どうすればこれを解決できるでしょうか?
$(function() {
$('.kanryo'...
1
票
2
回答
514
閲覧数
CSS の background-image で指定した画像が反映されない
プログラミング超初心者なので用語の使い方が間違ってたらすみません。
CSSに書き込んだ、background-imageだけが反映されません。他は反映されています。
htmlはこのようになっていて、
.listに書き込んだものは反映されるのに.contentsに書き込んだbackground-imageだけ反映されません。
コードはこのように書きました。
background-...
1
票
1
回答
100
閲覧数
safari で contenteditable 内の要素が削除されてしまう
teratailにも同様の質問 をしましたが回答が得られなかったためこちらに質問させていただきます。
どなたかわかる方、教えていただけると嬉しいです。
現象の説明
safariのみで起こる現象です。
contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。
ユーザが改行するなどして新しく生成された要素
position:relative;が指定されている
...
1
票
1
回答
827
閲覧数
VS Codeのツールバー?の名称
Visual Studio Codeのテーマカラーを変更しています。
このツールバーの正式名称はなんでしょうか?
こちらのドキュメント内にプロパティが定義されていますか?
https://code.visualstudio.com/api/references/theme-color
1
票
1
回答
341
閲覧数
bootstrapのタブ内で要素を横並びに出来ない
はじめまして。menu-image要素とmenu-text要素を横並びにしたいのですが、できずに困っています。初歩的な質問だとは思いますが、自身で解決できずに困っています。宜しくお願い致します。
.tab-pane {
display: flex;
}
.menu-tab {
display: flex;
width: 50%;
background-...
1
票
1
回答
333
閲覧数
外部リンクへの遷移後に特定の位置までスクロールさせるにはどうすればいいですか?
外部リンクへ飛ばしたときに、リンク先のアンカーの位置がずれて表示されます。
リンク先のアンカーの位置がきちんと頭だしされるように調整したいです。
外部リンクへの遷移後に特定の位置までスクロールさせるにはどうすればいいですか?
html,cssでできるのがよいですが、
できなければjs,jqueryでもよいです。
よろしくお願いいたします。
1
票
1
回答
564
閲覧数
vscodeにて、CSSの影響範囲一覧を確認する方法はありますか?
vscodeにて、CSSの影響範囲一覧を確認する方法はありますか?
cssを編集する際に、ワークスペース全体で
どこまで影響があるかを簡易的に確認する方法はないでしょうか。
例えば下記cssの記述があったとして
クラス名がclass15であり、子要素にspanの記述がある箇所全てを
1つのhtmlファイル内に限らず、プロジェクト全体から
一覧で確認する方法、...
1
票
1
回答
71
閲覧数
項目間に余白が残り続けてしまいます...。
前提・実現したいこと
Flexを採用しdivをメニューのように整列させていますがうまく並びません
発生している問題・エラーメッセージ
エラーメッセージは特段発生されておりません
該当のソースコード
<div class="fluid-wrap">
<div class="el"></div>
<div class="el"></...
1
票
1
回答
1,578
閲覧数
IE11だとjavascriptのアコーディオンが動かない
$(function() {
// 初期開閉状態設定
$(".accordionbox dt")
.filter((i, e) => isActive($(e).next()))
.each((i, e) => toggle($(e)));
$(".accordionbox dt").on("click", function() {
...
1
票
1
回答
353
閲覧数
CSSのテキスト→画像置換について
お世話になります。
タイトルの件、使い方について不明点があり質問させていただきました。
先日CSSの参考書を見ていたところ、
下記コードにてテキストを画像に置換するテクニックを学びました。
参考書以外に類似記事もあったので、
スタンダードなテクニックなのかなと思います。
http://w3q.jp/t/1914
text-indent: 100%;
white-space: nowrap;
...
1
票
1
回答
2,322
閲覧数
Bootstrap4においてハンバーガーメニューの色変更について
Bootstrap4のハンバーガーメニューについてなんですが
<span class="navbar-toggler-icon"></span>
このクラスに対してデフォルトの色から白色に変更をしたいため
span.navbar-toggler-icon {
color:#fff;
}
とかいているんですが色が白色になりません。
...
1
票
1
回答
284
閲覧数
cssのカスタムプロパティ(変数)をすべて取得する方法
以下のようなcssがあったときにjsで:rootのカスタムプロパティ(変数)をすべて取得する方法はありませんか?
:root {
--main-style__day__bg-color: #e0e0e0;
--main-style__day__ft-color: #030303;
--main-style__night__bg-color: #101010;
--main-...
1
票
1
回答
2,139
閲覧数
css position: sticky 固定された時のステータスを検知したい
position stickyを使って、スマホwebサイトで上部固定をしております。
上部固定された瞬間にstickyした要素内のスタイルを変えたりしたいのですが、固定になった瞬間を検知できる方法を探しております。
javascriptでスクロールで検知する方法以外に何かのステータスで検知できないものかと。
スクロールで検知するなら、結局fixed使う時と変わらないので。。
...
1
票
1
回答
117
閲覧数
画面が切り替わるプログラムとページがめくれるプログラムをひとつのプログラムにまとめたいです
いつも大変お世話になっております。
HTML、css、jQueryの初心者です。
会社からの指示でホームページを作成することになりました。
作成時間は業務時間外で休日を使うしかない状況です。
デザインはできたのですが、プログラムで大変苦戦しています。
どうぞ宜しくお願いいたします。
やりたい処理の流れです。
(1)最初の画面をクリックすると次の画面が表示される
(2)...
1
票
1
回答
189
閲覧数
HTMLテキストフィールドの高さを合わせる方法は?
このTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。
これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。
分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。
1
票
1
回答
277
閲覧数
異なる幅のtrを持つtableで特定のtrに境界線を引く方法
下記の構造のテーブルで、「値3-1」の下部にテーブルの最大幅で境界線を引きたいのですが、可能でしょうか?
条件として、
・CSSは変更できずstyleの変更しかできない
・境界線以外の見た目は変えない
というものがあります。
仮でtbodyのstyleに境界線の設定をしていますが、これは表示されません。
tableのborder-...
1
票
1
回答
366
閲覧数
webアプリケーション開発時のブラウザチェックについて
ブラウザのチェックの際、
ブラウザのバージョンが同じ場合、OSのバージョンの差は気にする必要はありますか?
またあるとすれば、どのようなチェックの際に必要でしょうか?
チェックの内容は下記になります。
・レイアウトの確認
・javascriptの動作確認
例:
chrome ver63 android 7.0
chrome ver63 android 8.0
...
1
票
1
回答
4,350
閲覧数
Djangoでcssが反映されません
Djangoのcssファイルが反映されません.
ご教授お願い致します.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static
'...
1
票
1
回答
1,607
閲覧数
テーブル内の要素にtext-overflow: ellipsis;をかけたい(IE8)
いつもお世話になっております。
とある開発で、IE8対応を行う必要が出てきたのですが、
どうにもうまく行かないためこちらに質問させていただきます。
テーブルの幅を固定してtd内に記載している文字列が幅以上になれば
text-overflow: ellipsis;
を使い hogehoge... といったように表示させたいのですが、現状Tableの幅が広がり
...
1
票
1
回答
777
閲覧数
CSSのflex-wrapで1列目の要素のみを選択する方法は?
flex-wrapで複数の行ができた時、それぞれの行の1列目の要素を選択したいのですが、どのような方法がありますか?
できれば擬似クラス(pseudo-class)があると良いのですが、無さそうだったので。
以下のサンプルではaとcにのみスタイルを適用したいと考えてます。
#outer {
display: flex;
flex-wrap: wrap;
width: ...
1
票
1
回答
83
閲覧数
display:flexにおける子要素の動き
ご回答頂けると幸いです。
単純な質問なのかもしれませんが、display:flexを使って5つの.flex_itemsを横に並べようと思ったのですが、折り返した後に縦に隙間が発生してしまいます。
親要素であるmainのheightを600pxにすれば縦の隙間ができることなく折り返してくれるのですが、600px以上だと隙間が発生してしまいます。
flexの仕様なのでしょうか?
...
1
票
1
回答
291
閲覧数
flocssのプレフィックスについて
flocssのプレフィックスについて
下記のような場合どのフォルダにあるかわかるようにするためにc-やp-を付けるべきでしょうか?
ただそうすると
.is-fadeout {
opacity: 0;
transform: rotate(360deg);
transition: .7s ease-in-out;
}
.is-fadein {
transform: ...
1
票
1
回答
455
閲覧数
縦書きキャプションを画像の高さとレスポンシブ的に合わせる
例えば60%のペアレント幅の画像を導入するとしたら、どうやって画像と側にある縦書きキャプションの高さを画像の高さと合わせればいいでしすか。望ましい結果は、下図のようです。
様々な問題が出ています。例えば、このようにすると、本文はの外になっています(Chromeブラウザーの開発者ツールで発見しました):
.gazou-yoko{
display: flex;
...
1
票
1
回答
400
閲覧数
Ul, liで3分割された個別のイメージの縦横比率を黄金比にする方法
畏れ入ります。
スタイルシートでこのように
#top_btn ul li {
display: block;
vertical-align:bottom;
width:32%;
height:90px;
float:left;
text-align:center;
margin: 0 2% 2% 0;
border:3px ...
1
票
1
回答
5,981
閲覧数
HTML: ふりがな(ruby)を追加するときに行間拡大を少なくする
HTMLで<ruby>を追加すると、行間が非常に広がる事があります。下記の例のように、行間があまり大きくなったことなく<ruby>何とか設定できますでしょうか。
1
票
1
回答
397
閲覧数
cssフレームワーク「Materialize」でナビバーを作りたい
cssフレームワーク「Materialize」を使用して、サイト制作をしています。
テンプレートコード例があるので、それを見ながら作成しているのですが、
ナビゲーションボタンのところで行き詰まってしまいました。
同サイトのShowcase中にある下記サイトのように
「navバーをマウスオーバーすると1段組~4段組のメニューが展開する仕組み」を作りたいのです。
https://...
1
票
1
回答
6,630
閲覧数
Flexboxの要素の大きさを画面サイズによらず固定したい
Flexboxでjustify-contentやalign-itemsを使うと簡単に中の要素を中央揃えさせることができますが、画面サイズによって、要素の大きさが変わってしまいます
これを固定することはできますか?
flexboxを要素を簡単に中央揃えできるbox(画面サイズによって伸び縮みしてほしくない)として使いたいのですがどうすればいいのでしょうか?
...
1
票
2
回答
2,390
閲覧数
CSS/Javascriptでテキストにマウスカーソルが乗っているかの判定
HTMLにおいてCSSまたはJavaScriptを利用しテキスト(テキストを含む要素ではなく、テキスト、文字それ自体)にマウスカーソルが乗っているかを判定し効果をつける方法はありますか。
CSSなら
<style>
#box:hover { /* css */ }
</style>
<div id="box">てきすと</div>
...