[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
566
質問
1
票
1回答
247 件の閲覧数
position:fixedのモーダルウィンドウの上側が画面が狭いと見切れてスクロールもできない
完了ボタンを押すと同意するかしないかの
モーダルウィンドウがでるボタンを作っています
うまくできたと思ったのですがレスポンスブルにしたいので
画面を狭めてテストするとモーダルウィンドウの上の方が見切れました
これはposition:fixedのせいだと疑っていますが性質上これは外せません
どうすればこれを解決できるでしょうか?
$(function() {
$('.kanryo'...
1
票
2回答
209 件の閲覧数
CSS の background-image で指定した画像が反映されない
プログラミング超初心者なので用語の使い方が間違ってたらすみません。
CSSに書き込んだ、background-imageだけが反映されません。他は反映されています。
htmlはこのようになっていて、
.listに書き込んだものは反映されるのに.contentsに書き込んだbackground-imageだけ反映されません。
コードはこのように書きました。
background-...
1
票
1回答
371 件の閲覧数
VS Codeのツールバー?の名称
Visual Studio Codeのテーマカラーを変更しています。
このツールバーの正式名称はなんでしょうか?
こちらのドキュメント内にプロパティが定義されていますか?
https://code.visualstudio.com/api/references/theme-color
1
票
1回答
157 件の閲覧数
bootstrapのタブ内で要素を横並びに出来ない
はじめまして。menu-image要素とmenu-text要素を横並びにしたいのですが、できずに困っています。初歩的な質問だとは思いますが、自身で解決できずに困っています。宜しくお願い致します。
.tab-pane {
display: flex;
}
.menu-tab {
display: flex;
width: 50%;
background-...
1
票
1回答
171 件の閲覧数
外部リンクへの遷移後に特定の位置までスクロールさせるにはどうすればいいですか?
外部リンクへ飛ばしたときに、リンク先のアンカーの位置がずれて表示されます。
リンク先のアンカーの位置がきちんと頭だしされるように調整したいです。
外部リンクへの遷移後に特定の位置までスクロールさせるにはどうすればいいですか?
html,cssでできるのがよいですが、
できなければjs,jqueryでもよいです。
よろしくお願いいたします。
1
票
1回答
310 件の閲覧数
vscodeにて、CSSの影響範囲一覧を確認する方法はありますか?
vscodeにて、CSSの影響範囲一覧を確認する方法はありますか?
cssを編集する際に、ワークスペース全体で
どこまで影響があるかを簡易的に確認する方法はないでしょうか。
例えば下記cssの記述があったとして
クラス名がclass15であり、子要素にspanの記述がある箇所全てを
1つのhtmlファイル内に限らず、プロジェクト全体から
一覧で確認する方法、...
1
票
1回答
59 件の閲覧数
項目間に余白が残り続けてしまいます…。
前提・実現したいこと
Flexを採用しdivをメニューのように整列させていますがうまく並びません
発生している問題・エラーメッセージ
エラーメッセージは特段発生されておりません
該当のソースコード
<div class="fluid-wrap">
<div class="el"></div>
<div class="el"></...
1
票
1回答
904 件の閲覧数
IE11だとjavascriptのアコーディオンが動かない
$(function() {
// 初期開閉状態設定
$(".accordionbox dt")
.filter((i, e) => isActive($(e).next()))
.each((i, e) => toggle($(e)));
$(".accordionbox dt").on("click", function() {
...
1
票
1回答
313 件の閲覧数
CSSのテキスト→画像置換について
お世話になります。
タイトルの件、使い方について不明点があり質問させていただきました。
先日CSSの参考書を見ていたところ、
下記コードにてテキストを画像に置換するテクニックを学びました。
参考書以外に類似記事もあったので、
スタンダードなテクニックなのかなと思います。
http://w3q.jp/t/1914
text-indent: 100%;
white-space: nowrap;
...
1
票
1回答
1,903 件の閲覧数
Bootstrap4においてハンバーガーメニューの色変更について
Bootstrap4のハンバーガーメニューについてなんですが
<span class="navbar-toggler-icon"></span>
このクラスに対してデフォルトの色から白色に変更をしたいため
span.navbar-toggler-icon {
color:#fff;
}
とかいているんですが色が白色になりません。
...
1
票
1回答
200 件の閲覧数
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回答
1,224 件の閲覧数
css position: sticky 固定された時のステータスを検知したい
position stickyを使って、スマホwebサイトで上部固定をしております。
上部固定された瞬間にstickyした要素内のスタイルを変えたりしたいのですが、固定になった瞬間を検知できる方法を探しております。
javascriptでスクロールで検知する方法以外に何かのステータスで検知できないものかと。
スクロールで検知するなら、結局fixed使う時と変わらないので。。
...
1
票
1回答
91 件の閲覧数
画面が切り替わるプログラムとページがめくれるプログラムをひとつのプログラムにまとめたいです
いつも大変お世話になっております。
HTML、css、jQueryの初心者です。
会社からの指示でホームページを作成することになりました。
作成時間は業務時間外で休日を使うしかない状況です。
デザインはできたのですが、プログラムで大変苦戦しています。
どうぞ宜しくお願いいたします。
やりたい処理の流れです。
(1)最初の画面をクリックすると次の画面が表示される
(2)...
1
票
1回答
126 件の閲覧数
HTMLテキストフィールドの高さを合わせる方法は?
このTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。
これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。
分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。
1
票
1回答
311 件の閲覧数
webアプリケーション開発時のブラウザチェックについて
ブラウザのチェックの際、
ブラウザのバージョンが同じ場合、OSのバージョンの差は気にする必要はありますか?
またあるとすれば、どのようなチェックの際に必要でしょうか?
チェックの内容は下記になります。
・レイアウトの確認
・javascriptの動作確認
例:
chrome ver63 android 7.0
chrome ver63 android 8.0
...
1
票
1回答
3,601 件の閲覧数
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,466 件の閲覧数
テーブル内の要素にtext-overflow: ellipsis;をかけたい(IE8)
いつもお世話になっております。
とある開発で、IE8対応を行う必要が出てきたのですが、
どうにもうまく行かないためこちらに質問させていただきます。
テーブルの幅を固定してtd内に記載している文字列が幅以上になれば
text-overflow: ellipsis;
を使い hogehoge... といったように表示させたいのですが、現状Tableの幅が広がり
...
1
票
1回答
405 件の閲覧数
CSSのflex-wrapで1列目の要素のみを選択する方法は?
flex-wrapで複数の行ができた時、それぞれの行の1列目の要素を選択したいのですが、どのような方法がありますか?
できれば擬似クラス(pseudo-class)があると良いのですが、無さそうだったので。
以下のサンプルではaとcにのみスタイルを適用したいと考えてます。
#outer {
display: flex;
flex-wrap: wrap;
width: ...
1
票
1回答
80 件の閲覧数
display:flexにおける子要素の動き
ご回答頂けると幸いです。
単純な質問なのかもしれませんが、display:flexを使って5つの.flex_itemsを横に並べようと思ったのですが、折り返した後に縦に隙間が発生してしまいます。
親要素であるmainのheightを600pxにすれば縦の隙間ができることなく折り返してくれるのですが、600px以上だと隙間が発生してしまいます。
flexの仕様なのでしょうか?
...
1
票
1回答
279 件の閲覧数
flocssのプレフィックスについて
flocssのプレフィックスについて
下記のような場合どのフォルダにあるかわかるようにするためにc-やp-を付けるべきでしょうか?
ただそうすると
.is-fadeout {
opacity: 0;
transform: rotate(360deg);
transition: .7s ease-in-out;
}
.is-fadein {
transform: ...
1
票
1回答
408 件の閲覧数
縦書きキャプションを画像の高さとレスポンシブ的に合わせる
例えば60%のペアレント幅の画像を導入するとしたら、どうやって画像と側にある縦書きキャプションの高さを画像の高さと合わせればいいでしすか。望ましい結果は、下図のようです。
様々な問題が出ています。例えば、このようにすると、本文はの外になっています(Chromeブラウザーの開発者ツールで発見しました):
.gazou-yoko{
display: flex;
...
1
票
1回答
370 件の閲覧数
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,511 件の閲覧数
HTML: ふりがな(ruby)を追加するときに行間拡大を少なくする
HTMLで<ruby>を追加すると、行間が非常に広がる事があります。下記の例のように、行間があまり大きくなったことなく<ruby>何とか設定できますでしょうか。
1
票
1回答
369 件の閲覧数
cssフレームワーク「Materialize」でナビバーを作りたい
cssフレームワーク「Materialize」を使用して、サイト制作をしています。
テンプレートコード例があるので、それを見ながら作成しているのですが、
ナビゲーションボタンのところで行き詰まってしまいました。
同サイトのShowcase中にある下記サイトのように
「navバーをマウスオーバーすると1段組~4段組のメニューが展開する仕組み」を作りたいのです。
https://...
1
票
1回答
5,722 件の閲覧数
Flexboxの要素の大きさを画面サイズによらず固定したい
Flexboxでjustify-contentやalign-itemsを使うと簡単に中の要素を中央揃えさせることができますが、画面サイズによって、要素の大きさが変わってしまいます
これを固定することはできますか?
flexboxを要素を簡単に中央揃えできるbox(画面サイズによって伸び縮みしてほしくない)として使いたいのですがどうすればいいのでしょうか?
...
1
票
2回答
1,976 件の閲覧数
CSS/Javascriptでテキストにマウスカーソルが乗っているかの判定
HTMLにおいてCSSまたはJavaScriptを利用しテキスト(テキストを含む要素ではなく、テキスト、文字それ自体)にマウスカーソルが乗っているかを判定し効果をつける方法はありますか。
CSSなら
<style>
#box:hover { /* css */ }
</style>
<div id="box">てきすと</div>
...
1
票
1回答
4,492 件の閲覧数
先祖の要素に特定のクラスを持たない要素のCSSセレクタについて
先祖(つまり階層を遡ったすべての親)が特定のクラスを持たない要素をセレクタしたいと考えています。
:not(クラス) セレクタを利用すれば実現できそうですが、直接の親子でないと機能しませんでした
例えば
.oya というクラスを持たない .ko と .mago にスタイルを適用させたい場合...
(chrome)
:not(.oya)>.ko {...} ...効く
:not(.oya)>....
1
票
2回答
2,539 件の閲覧数
HTMLで出力される文字色を、$_GET変数の値によって変更したい。
HTML+CSSおよびphpの初心者です。
$_GET変数で得た値が1であれば1の部分を赤色に、
2であれば2の部分を赤色に、3であれば3の部分を赤色に変更したいと思っております。
詳しい方、ご教示ください。
index.php
<?php
$number = $_GET['id'];
print '<ul>';
print '<li class="light"&...
1
票
1回答
699 件の閲覧数
ワードプレスのwelcartカートボタンカスタマイズに関して
ワードプレスにwelcartを設置しています。
カートボタンをカスタマイズしたいと考えています。
CSSに
@charset "utf-8";
/* CSS Document */
.skubutton{
background-image:"http:/画像"
background-repeat: no-repeat;
width: 443px;
height: 108px;
padding: ...
1
票
1回答
167 件の閲覧数
CSSでビット演算子? .a:active ~ .b {
・下記CSSは、どういう意味でしょうか?
.a:active ~ .b {
・クラスaがアクティブ または、クラスbなら?
・cssにおける ~ はどういう意味でしょうか?
・否定? ビット演算子?
1
票
1回答
214 件の閲覧数
CSSのZ-indexかjavascriptのremoveClassか・・・liの特性のせいだとおもうのですが・・・。
選択した画像をファンシーボックスのように下に拡大して表示するスクリプトをかいていて
順に一つ目、二つ目・・・とクリックしていくときには問題ないのですが
順番をランダムに選択すると若い順でしか動きません。
問題はaddClassかz-indexかliの特性なのかわかりませんが
どなたか原因を教えく下さると助かります。
追伸:...
1
票
1回答
124 件の閲覧数
画像を入れるか入れないかでサイトの幅が変わる
ConciseというCSSフレームワークのStarterというテンプレートを使用しているのですが、画像<img src="http://...">を<main class="siteContent container>の中に埋め込んだページとそうでないページで、サイトの幅が違くなってしまいます。どうすればサイトの幅を統一できるでしょうか?
1
票
1回答
332 件の閲覧数
keyframe,animation のパラメーターをinputtypeから設定したい
Boxの横幅を 0%50pxから入力した値に変化させるというアニメーションを作成したいのですが
取得した入力値をkeyframeのパラメーターをして設定する方法がわかりません。
こちらがHTMLです。
<dl>
<dt>0%</dt><dd>50px</dd>
<dt>100%</dt><dd>&...
1
票
1回答
121 件の閲覧数
CSS 高さを変更せずに画像を拡大
ライン企業サイトのNEWSのように
画像の高さを変更しないまま画像を拡大する方法を
ご存知の方がいらっしゃったらご教授お願いします。
ブラウザの幅が800px以下になると現れます。
http://linecorp.com/ja/
1
票
1回答
6,459 件の閲覧数
小塚ゴシックの代替フォント
小塚ゴシックをWeb-fontとして使いたかったのですが、adobeでは取り扱っていないようです。
typekit link
そこで代わりのフォントを探しています。
無料のもの(クセがなくて、汎用性がありそうなもの)は数が限られていると思います。
探すのに時間が掛かるのは有料のものかと思います。
モリサワ(Type Square)、...
1
票
1回答
420 件の閲覧数
monacaのtextareaの大きさを変える
monacaの勉強を、参考プログラムのメモ帳を改造するところからはじめてます。
最初の状態だと、メモを書き込むtextareaがすごく狭いのですが、大きくする方法がわかりません。
CSSでは無理なのでしょうか?
わかる方いらっしゃいましたらよろしくお願いします。
1
票
1回答
2,654 件の閲覧数
ajax処理中に画像を表示させたい
現在は下記のような実装になっており、処理中画像は処理終了と同時に一瞬出現し、消えるという状態です。
これを、処理開始~処理終了まで表示したいのですが、方法が分かる方がいましたらご教授をお願いします。
参考にしたサイト
function upload(form) {
//処理中画像表示
dispLoading();
~処理~
$.ajax(
...
1
票
1回答
915 件の閲覧数
HTMLに埋め込んだMpeg Dashプレイヤーに、音楽/動画ファイル再生URLを適用し再生したい
現在のソースは下記の通りで、
画面には、hrefタグに設定した音楽ファイルURLと、MpegDashプレイヤーが埋め込まれています。
そして、音楽ファイルURLを設定したhrefタグ(またはボタンタグ等)をクリックすると、
MpegDashプレイヤーでその音楽を再生出来るようにしたいのですが、方法が分かりません。
分かる方がいましたら、ご教授をお願いします。
また、...
1
票
1回答
4,826 件の閲覧数
HTML 文字の隣にあるテキストボックスが一段下がってしまうのを防ぎたい
文字の隣にテキストボックスを配置したいのですが、
画面幅のせいかテキストボックスが文字の下段に移動してしまいます。
これを防ぐ方法はありませんか?
分かる方がいましたらご教授をお願いします。
<span>
文字
<input type="text" style="width:450px;">
</span>
1
票
1回答
2,710 件の閲覧数
table-hover が効かない
<div class="container" style="padding:20px 0">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr><th>foo</th>...
1
票
1回答
5,224 件の閲覧数
height:100%でのoverflow: scrollがスマホでうまく行きません
cssで下記のようにサブのメニューを設定したところ、スマートフォンではサブメニューの途中でスクロールが止まり、
本体部分をスクロールし終わるまで、サブの残りがスクロールできません。
どのように対策すれば良いでしょうか?
#submenu{
height:100%;
width: 80%;
overflow:scroll;
}
1
票
1回答
841 件の閲覧数
jQuery で、スクロール追従型にメニューをカスタマイズしたい
下記サイトの右メニュー下にある、「スポンサードリンク」のように、スクロールしてもページ内の固定位置に残るメニューを実装したいです。
http://www.akb48matomemory.com/archives/1017688632.html
ただ、以下のようにもしたいのですがこういった実装は可能なのでしょうか。
下にスクロールした場合はトップ固定
...
1
票
1回答
2,148 件の閲覧数
ChromeのDeveloperツールで編集したStyleを一括コピーする方法
スタイルシートを編集するときに添付した画像のようにChromeのDeveloperツールでスタイルシートを編集して、その値をメモしておいてstyle.cssなどに記述するという方法をとっているのですが、この値を一括してコピーする方法はありますか?
今回の場合ですと
.wp-caption .wp-caption-text {
margin: inherit;
font-size: ...
1
票
0回答
53 件の閲覧数
safari で contenteditable 内の要素が削除されてしまう
teratailにも同様の質問 をしましたが回答が得られなかったためこちらに質問させていただきます。
どなたかわかる方、教えていただけると嬉しいです。
現象の説明
safariのみで起こる現象です。
contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。
ユーザが改行するなどして新しく生成された要素
position:relative;が指定されている
...
1
票
0回答
1,228 件の閲覧数
iPhoneでのバウンススクロールを無効にするには
Ruby on Railsの練習でTwitterのようなサイトを作っているのですが、バウンズスクロールを無効にする方法がどうしてもわかりません。
MacOS(Chrome等)ではバウンズスクロールを無効化出来たのですが、iPhoneでのバウンズスクロールがどうしても出来ません。
html, body {
overflow: hidden;
}
で個別の要素にheight: 100%; ...
1
票
2回答
92 件の閲覧数
atomのcssのコメントにつて
cssをatomで記述しています。コードがわかりやすいようにコメントを多用していたのですが今日atomを開いてみると
/*グラフã®ä¸å¤®å¯„ã›*/
のように文字化けしていました。どなたか直す方法をご存知の方教えて頂けると助かります。
1
票
1回答
248 件の閲覧数
異なる幅のtrを持つtableで特定のtrに境界線を引く方法
下記の構造のテーブルで、「値3-1」の下部にテーブルの最大幅で境界線を引きたいのですが、可能でしょうか?
条件として、
・CSSは変更できずstyleの変更しかできない
・境界線以外の見た目は変えない
というものがあります。
仮でtbodyのstyleに境界線の設定をしていますが、これは表示されません。
tableのborder-...
1
票
0回答
147 件の閲覧数
electronで作成したPDFにCSSが適用されない
electronのWebContents.printToPdfのAPIを使って、バックグラウンドで非表示中のページをレンダリング後にPDF化したいです。
Angular2を使ってページを整形しているため、ngAfterViewInitのlifeCycleの後にPDF化を行おうとしたのですが、
PDF化したところ、一部のテキストがレンダリングされない状態でPDFが出力されてしまいました。
(...
1
票
0回答
517 件の閲覧数
HTML5 + Bootstrap + IE11 + Windows7にて、フォーカスを当てた時の挙動がおかしい
HTML5、Bootstrapにてページを作成しています。
IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。
1.枠線の影が消える
2.テキストフィールドの左上にグレーの影が表示される
この現象は下記の環境で発生しています。
・Windows7 Professional SP1(32bit)
・IE 11.0.9600.18537 (更新バージョン 11....
1
票
1回答
813 件の閲覧数
PHP PDOでMySQLのデータを削除したい
私はいまPHP PDOを使い、content.phpに削除処理を実装しようとしています。
以下のコードでは、「//取得」のところで表示されている画像A(src=$xxurl)を、content.php内では削除(?)できます(、というか非表示になります)。
しかし、サムネイル一覧ページであるhome.phpに進むと、削除されておらず、画像Aのサムネイルをクリックしcontent....