[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
669
質問
0
票
1
回答
80
閲覧数
codepenのデモをコピペしたが画像に隙間ができる原因
初心者で初めて質問します。
下記のURLのcodepenによるCSS のみでサムネイルナビ付きスライダーをコピペしたのですが
画像に隙間ができてしまう原因をご教示頂ければ幸いです。他の動作には問題は有りません。
宜しくお願いします。
https://digipress.info/tech/pure-css-slider-with-thumbnails/
body {
...
1
票
1
回答
938
閲覧数
VS Codeのツールバー?の名称
Visual Studio Codeのテーマカラーを変更しています。
このツールバーの正式名称はなんでしょうか?
こちらのドキュメント内にプロパティが定義されていますか?
https://code.visualstudio.com/api/references/theme-color
0
票
1
回答
228
閲覧数
chromeのデベロッパーツールで「Responsive」表示にすると、<li>要素の下に細い線ができる。
下のように、
chromeのデベロッパーツールで「Responsive」表示にすると、li要素の下に細い線ができます。
どうしたらなおりますか?
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TEST</title>...
1
票
1
回答
833
閲覧数
CSSで空白を挿入する方法
<div class='a'>
<span class='b'>1</span>
<span class='c'>いい天気</span>
<div>
このようなhtmlがあって
1いい天気
と表示されます。
これをCSSを編集することで
1 いい天気
のように間にスペースほどの間隔を空けることは可能ですか?
(...
0
票
1
回答
277
閲覧数
事前に変更できないHTMLに対して、後付けで(class名を付与する等して)CSS装飾を加えたい
最終的にやりたいこと
下記で、・で開始されない文字列(「あいうえお」と「かきくけこ」)に対して強調表示したい
<p>あいうえお<br>
<br>かきくけこ<br>
・さし<br>
・たち<br>
・なに<br>
・はひ<br>
・まみ</p>
条件
・...
0
票
2
回答
305
閲覧数
@font-faceのlocalに指定すべき文字列を知るには?
CSS の @font-face の src には url() の他に local() を指定することができます。たとえば src: local("MS ゴシック") と書けばローカルのMSゴシックを指定できます。
ここで、手元にある有名でないフォントについて、local に指定する名前をどう知れば良いのか知らないことに気付きました。CSS Fonts Module Level 3 には
...
5
票
0
回答
142
閲覧数
Sassに複数の条件を適用する方法は?
[主旨]
WebのプロジェクトでXMLからHTML5への変換を担当しております.世界各国語向けのCSSを生成しなければならないので、LTR/RTL(アラビア語、ヘブライ語)を分けて.scssファイルから.cssファイルをコンパイルして生成してます.今度更にコンテンツの製品のブランドをパラメータとして導入しなければならなくなりました....
6
票
2
回答
5,229
閲覧数
@importするときの@の意味
プログラム初心者です。
Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、
以下に示している@の存在の意味がよくわかっていません。
@import '@/assets/styles/mixin.scss';
アドレスに示している@は何を意味しているのでしょうか。
一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。
...
5
票
1
回答
6,142
閲覧数
Chromeで日本語の禁則処理が効かない
Firefoxやsafariでは長音や短い"ッ"などの禁則処理が効いているのに、Chromeではきちんと処理されません。Word-break: break-strict;をbodyに適用しても改行されてしまいます。Chromeできちんと禁則処理を適用さすにはどのように(どこに?)記述すればよろしいでしょうか。
Chromeのバージョンは56.0.2924.87 (64-bit)、Windows ...
6
票
3
回答
4,183
閲覧数
<div>の中の文字列を上下で中央に揃える
htmlでdivの中の文字列を上下で中央にそろえるにはどうすればいいのでしょうか?
divの中に文字列があり、text-align: centerで左右は中央になったのですが上下で中央に揃えられません。
div#div1 {
text-align: center;
height: 400px;
width: 600px;
border: solid 1px;
...
7
票
1
回答
1,357
閲覧数
Bootstrap の mixin 利用時のライセンスは?
Bootstrap は LESS を使えば、mixin で部分的に利用できます。
では Bootstrap を部分的に利用した LESS を CSS にコンパイルして配布することは、ライセンス上、問題ないのでしょうか。
また、配布できる場合、ライセンス表記はどのようにすれば良いでしょうか。Bootstrap のライセンス (MIT) のほか、自身の選択したライセンス (たとえば Apache2)...
6
票
3
回答
9,893
閲覧数
li要素のマウスオーバー時に背景色を変えたい
li要素にマウスが乗った時に背景色をフェードさせて変更させたく以下のコードを作成しましたが、アニメーションと色の変更が反映されません。なぜでしょうか。
$(document).ready(function(){
$('li').hover(function(){
$(this).css("cursor", "pointer").stop().animate({...
6
票
3
回答
8,183
閲覧数
CSSで要素の順番を変更する方法はありますか?
既出・回答ありましたら申し訳ありません。
CSSでレスポンシブレイアウトのサイトを組んでいます。
PCサイト表示時は2カラムレイアウト、スマホサイズで1カラムになる構成になっています。
上図の左側がPC表示時、右側がスマホ表示時になります。
現在上側の構成になっているのですが、下側の順に表示順を変更して欲しいと言う依頼がありました。
<div>
<div style="...
4
票
2
回答
343
閲覧数
どうして.containerで15pxして.rowで-15pxするのでしょうか?
基本的にBootstrapは.containerで括ってその中で.rowを記述していく書き方をします。
なのに何故、わざわざBootstrapは.containerで15pxして.rowで-15pxしているのでしょうか?
該当ソースリンク:
https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css#L22
...
1
票
1
回答
198
閲覧数
HTMLテキストフィールドの高さを合わせる方法は?
このTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。
これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。
分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。
3
票
1
回答
135
閲覧数
coverなのに画像の高さが無効化される
bootstrap4でサムネイルリストを作りましたが、そのCSSでobject-fitにcoverとしたにも関わらず、画像の高さがcoverになりません。どうすれば改善するのでしょうか?
HTML
<div class="container">
<div class="row">
<div class="col-6">
<...
5
票
3
回答
1,784
閲覧数
HTML5で画像を回転させると縁にジャギが出てしまう
HTML5で画像を回転させて表示させると、斜めになった画像の縁の部分がギザギザになってしまいます。このジャギを回避する方法はないでしょうか?
0
票
1
回答
107
閲覧数
グローバルナビゲーションが表示されません
以下のようにHTML、CSSを書きましたが、WEB上でグローバルナビゲーションが表示されません。
何が原因でしょうか?
対処方法も含めて、教えて頂きたいです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, ...
1
票
1
回答
94
閲覧数
画像だけ拡大したいですが文字まで拡大する
animationで説明文章の背景画像だけ大きくしたいですが、できません
説明にだけ1.1の逆数を掛けましたがこれでもうまく動きません
簡単にできると思ったんですが、できず、助けてください(T_T)
できればJavascriptは使わずに済ませたいです
.container-panel {
width: 500px;
height: 500px;
overflow: ...
1
票
0
回答
2,551
閲覧数
iPhoneでのバウンススクロールを無効にするには
Ruby on Railsの練習でTwitterのようなサイトを作っているのですが、バウンズスクロールを無効にする方法がどうしてもわかりません。
MacOS(Chrome等)ではバウンズスクロールを無効化出来たのですが、iPhoneでのバウンズスクロールがどうしても出来ません。
html, body {
overflow: hidden;
}
で個別の要素にheight: 100%; ...
1
票
1
回答
779
閲覧数
imgタグで、アスペクト比を保ちつつ長辺の長さを指定したい [重複]
CSS を使って img タグで表示される画像のサイズを以下のように指定したいです。
長辺の長さは 128 ピクセル、かつ、
縦横の長さの比は維持。
たとえば具体的には以下のように表示したいです。
256×256 → 128×128
256×128 → 128x64
128×64 → 128×64
64×128 → 64×128
64×64 → 128×128
32×64 → 64×128
...
3
票
3
回答
2,136
閲覧数
jQuery / JavaScriptで、ページスクロール時にアクションを起こしたい
ページをスクロールした時に、スクロールした距離に応じて、オブジェクトの移動や透過をさせたい。パララックス効果についても簡潔な例を知りたい。
6
票
3
回答
2万
閲覧数
input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ?
チェックボックスと連動して変化する表示を CSS だけで実装できないかと、以下のようなコードを書きました。これは Chrome 46 では期待通りに動き、チェック状態がテキストで表示されます。
input:before {
content: 'not checked';
position: absolute;
top: 30px;
}
input:checked:...
0
票
0
回答
1,111
閲覧数
IEの「イントラネット サイトを互換表示で表示する」について
IEの「イントラネット サイトを互換表示で表示する」について教えてください。
今回作成したアプリをIE11で開こうとすると、「イントラネット サイトを互換表示で表示する」の設定のせいだと思われるのですが、IE7のモードで表示されてレイアウトが乱れてしまいます。
よって試しに「イントラネット サイトを互換表示で表示する」のチェックを外してみると、期待しているレイアウトになりました。
そこで X-...
4
票
1
回答
409
閲覧数
IE 11では思ったように星の色が変わりません。
星にマウスを乗せた時、色がつくように実装をしております。
Chrome, Edge, Firefox, Safariでは問題なく期待通りに動きますが、
なぜかIE11では星が1つのサイズしか色がつかないです。
下記がソースコードになります。
<html>
<style>
.select-star-rating {
font-size: 0;
...
0
票
1
回答
2,980
閲覧数
webpack-dev-serverで自動コンパイル・画面更新できない
この度フロントエンドに入門しようとしています。
やりたいこと
webpack及びその周辺技術を用いて、
- js及びcssが保存時(ファイル変更時)にウォッチされ自動コンパイルされる
- 自動コンパイルされた際に、ブラウザ(localhost:8080 ??)が自動でリロードされる
やったこと
以下のようにyarnとwebpackで環境構築をしました。
package.json
{
...
0
票
2
回答
167
閲覧数
フォーカスのデフォルトを設定するには
フォーカスのデフォルトを設定するにはどうすればいいですか?
first-childを試しましたがこれだと他をフォーカスしても最初のフォーカスが残っていまいます
これをフォーカスするたびにフォーカスが変わるようにしたいです
ul {
vertical-align: middle;
text-align: center;
font-size: 0;
}
li {
...
0
票
1
回答
27
閲覧数
フォーカスしてフォントサイズを変えると他とliの位置が変化するのを直したい
フォーカスしてフォントサイズを変えると他とliの位置が変化しますがこれをどうにか一律に揃えたいです
vertical-alignとtext-alignを試してみましたがうまくいきませんでした
なので何か別の原因だと思いますが調べてもわかりませんでした
ul {
vertical-align: middle;
text-align: center;
}
li {
...
1
票
1
回答
374
閲覧数
bootstrapのタブ内で要素を横並びに出来ない
はじめまして。menu-image要素とmenu-text要素を横並びにしたいのですが、できずに困っています。初歩的な質問だとは思いますが、自身で解決できずに困っています。宜しくお願い致します。
.tab-pane {
display: flex;
}
.menu-tab {
display: flex;
width: 50%;
background-...
0
票
2
回答
539
閲覧数
ハンバーガーメニューを追加したいけどcssがうまく効かない
codepenというサイトにあったメニューバーを自分のサイトに追加したいのですが、貼り付けだけではこのようになり
うまく行きませんでした。ul部分のcssが効いていないような気がします。
https://codepen.io/victorfreire/pen/QywRNM
htmlはこのようになっていてbootstrapを読み込んでいます。
詳しい方ご回答よろしくお願いします。
@...
0
票
2
回答
211
閲覧数
ブラウザ幅を変更すると、inputが入力できなくなるときがある
以下のコードで、ブラウザ幅を狭めると、inputの編集ができなくなります。
どうもbootstrapのcssが影響しているようです。
感覚的にはグリッドシステムのcol-xs-**~col-sm-**の幅範囲になると起きているような気がします。
最小限のコードを切り出してみました。
同じ内容をcodepenにも入れてあります。
http://codepen.io/tomorin/pen/...
0
票
1
回答
973
閲覧数
codepenにあるサンプルと同じレイアウトにする方法
プログラミング初心者です。
codepenにある下記サンプルと同じものを作成しようと試しにコピペしてみましたが、divが縦に1列にしか表示されません。
Infinite Scroll - Colcade
サンプル同様に3列にするためには、ライブラリか何かが必要なのでしょうか。
(そもそもコード自体がサンプル通りになるような完璧なものではないようですが)
環境
テキストエディタ:...
1
票
1
回答
2,395
閲覧数
css position: sticky 固定された時のステータスを検知したい
position stickyを使って、スマホwebサイトで上部固定をしております。
上部固定された瞬間にstickyした要素内のスタイルを変えたりしたいのですが、固定になった瞬間を検知できる方法を探しております。
javascriptでスクロールで検知する方法以外に何かのステータスで検知できないものかと。
スクロールで検知するなら、結局fixed使う時と変わらないので。。
...
0
票
1
回答
961
閲覧数
jqueryでの1文字ずつのアニメーションについて
ジェイクエリーの1文字ずつのテキストアニメーションで複数行対応する方法で困っています
splitで1文字ずつ配列にいれてforeachで配列をspanでくくりアニメーションさせているのですが
brタグなども1文字ずつ格納されてしまうためbrタグは1文字で格納されないようにしたいのですが方法がわかりません
欲を言えばbrタグのみではなくhtmlタグは1文字で配列に格納されずにしたいです。
また、...
0
票
1
回答
553
閲覧数
リストの番号が文字に重なってしまいます
おかしなところがあれば教えてご教授いただきたいです。
ol{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:0.5em;
border: dashed 1px gray;
}
ol li{
position: relative;
line-...
8
票
3
回答
9,829
閲覧数
A4用紙に印刷可能なピクセル数は?
htmlページをブラウザ標準の印刷機能で印刷する場合、縦向きのA4用紙に入る横幅は最大何ピクセルになるでしょうか?
css
* {
box-sizing: border-box;
}
.test1 {
width: 1366px;
border: 10px solid red;
}
.test2 {
width: 1280px;
border: 10px solid ...
1
票
1
回答
114
閲覧数
stickyがうまく動かない
CSSでstickyを指定しているのですが、うまく動きません。
以下にcodepenに簡易的なソースを置いておりますが、
potision: sticky;
bottom: 0;
の場合はこのプログラムはうまく動くのですが、
potision: sticky;
top: 0;
の場合はtopが0の時に固定されません。
うまく動作しない理由が知りたいです。
top:0;とbottom:0;...
1
票
1
回答
1万
閲覧数
リストのaタグを親要素いっぱいにして、さらにテキストを上下中央にしたい
リストのaタグを親要素いっぱいにして、さらにテキストを上下中央にしたいのですが、うまくいきません。
レスポンシブサイトなので下記のように特殊なやり方で上下左右中央にテキストをもってきています。
.u-centaring-all-item-height-flexible {
position: absolute;
top: 50%;
left: 0;
right: 0;
-...
0
票
1
回答
1,581
閲覧数
img要素にdisplay:table-cellをしても効かない。(縦に配置されてしまう)
img要素にdisplay:table-cellをしても効かない(縦に配置されてしまう)のはなぜでしょうか?
imgをdivで囲むと効くのですが。
(上:divで囲んだもの、下: imgだけのもの)
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
...
0
票
2
回答
1,553
閲覧数
BEMでのクラス名のつけ方を確認して頂きたいのですが、下記でクラス名のつけ方全般に問題はないでしょうか?
BEMでのクラス名のつけ方を確認して頂きたいのですが、下記でクラス名のつけ方全般に問題はないでしょうか?
(簡易なBEMなので、すべては引き継がずという形を目指しています。)
タグも間違ってなさそうでしょうか?
いろいろな方の意見が聞きたいです。
・ソース
<div class="wrap-skew1 first-section-skew1">
<div class="...
0
票
3
回答
1,529
閲覧数
marqueeをCSSに代替するには。
marqueeタグは廃止されるそうですが、CSSで代替できると聞きました。
下記のソースコードにあるような『方向』や『速度』などをCSSに置き換えるには、
どのようにしたらいいのでしょうか。ご教示ください。
<style>
.DIRECTION {
color: white;
background: black;
}
.BLINK {
animation: blink ...
1
票
1
回答
6,965
閲覧数
先祖の要素に特定のクラスを持たない要素のCSSセレクタについて
先祖(つまり階層を遡ったすべての親)が特定のクラスを持たない要素をセレクタしたいと考えています。
:not(クラス) セレクタを利用すれば実現できそうですが、直接の親子でないと機能しませんでした
例えば
.oya というクラスを持たない .ko と .mago にスタイルを適用させたい場合...
(chrome)
:not(.oya)>.ko {...} ...効く
:not(.oya)>....
3
票
1
回答
2,212
閲覧数
button要素内の画像をCSSでグレースケール化したい
button要素内の画像をCSSでグレースケール化したい
下記のように、button要素にdisabled属性が付けられている場合だけ、内部のimg要素の画像をグレースケール化したいです。
<button disabled><img src="URL"/></button>
グレースケール化とその解除については、...
2
票
1
回答
1,978
閲覧数
css3 アニメーションで左にスライドして次の要素を見せるには?
css3 アニメーションで左にスライドして押し出すようにして、次の要素を見せたいのですが文字が重なってうまくいきません。
.slideFirstを左にスライド(left:0→left:-300px)すると、控えていた.slideSecond(left:300px→left:0)もスライドして見せたい。
外側の#wrapは width:300pxの為、....
1
票
1
回答
1,543
閲覧数
横と縦のスクロールバーを消したのですが、 5%分、liの中のテキスト情報などのインライン要素がずれて真ん中になりません。
横と縦のスクロールバーを消したのですが、 下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。
・わかりにくいので下記で再現してみました。こちらを見てみてください。
$(function() {
$('.kuruttosuru').on('click', function() {
$('.kuruttosuru').addClass('...
1
票
1
回答
2,698
閲覧数
画像の上下に空欄出てしまいます。それを消したいです
ウェブページでどうしても空白ができてしまい困っています。
pタグで囲みたいのですが、pタグを使うとどうしても上下に空白ができてしまいます。
この空白を消したいです。
どうしたらよいのでしょうか?
<body>
<div id="pc-wrapper">
<div id="pc-header-box">
<p>&...
2
票
1
回答
3,535
閲覧数
数字以外入力できないテキストボックスを作りたい
<input type="number">
を使った場合、Chrome では数字以外入力できませんが、他のブラウザでは数字以外の文字も入力できてしまいます。(submit時にエラーになりますが)
数字のみが入力可能なテキストボックスを作ることは出来るでしょうか?
5
票
1
回答
2,596
閲覧数
背景にCSSのfilterを使用すると,前面の文字が表示されない
背景要素にfilter: brightnessを使い,明度を暗くした後,その前面に白い文字を表示したいと思っています.
#background {
z-index: -1000;
height: 300px;
width: 100%;
background-color: #555;
filter: brightness(20%);
...
3
票
2
回答
1万
閲覧数
CSSのtransform、translateを取得するには?
cssのtransformプロパティについて質問があります。
transformプロパティに、translate(xpx, ypx)を指定した場合のデータを取得するには、どのようにしたらよいでしょうか?
この時、文字列以外の形式で取得したいです。
ウェブブラウザ:Google Chrome バージョン 45.0.2454.101 m
・試したこと
1.jqueryでcssを適用した場合
$(...
7
票
2
回答
490
閲覧数
CSSの遠近効果付き3D回転をするとFirefoxで表示されなくなる
CSSのtransform:perspectiveを利用して要素に遠近法のような効果を与えるとき、ブラウザの画面幅によって要素が表示されなくなります。
(Firefoxで確認。Chrome/IEでは正常でした。)
サンプルコード:
.text {
position: absolute;
left: 50%;
-moz-transform: translateX(-...