[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
643
質問
1
票
1
回答
918
閲覧数
flex アイテムで width の大きさが 100% 以上にならない
Flexbox を使った際に width: 200% で Flexbox の 2 倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。
<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center; align-items: ...
0
票
1
回答
211
閲覧数
ホバーがうまくできない
ユーザーネーム(常に表示
リンク
リンク この3つはユーザーネームにマウスを当てた時表示される
リンク
マウスオーバー時のみリンクが表示されるようにしたいです
cssがおかしいのかなと思いますがどう直せば良いかわからないです
ブラウザで検索してみましたが当てずっぽうになってしまい解決に至らないです
不躾な質問で申し訳ないですが教えてください
<ul>
<li>&...
1
票
1
回答
47
閲覧数
background-image の repeat による繰り返しが、最初に表示された画面サイズで止まってしまう
z-index を巨大に設定した疑似クラス :after に background-image を指定することで、ページ全体の前面に画像を縦横 repeat させようとしています。
下のように書くと一見上手くいったかのように見えるのですが、実は最初に描画された部分しか repeat されておらず、ページをスクロールして描画外にいくと画像が表示されなくなってしまいます。
ページ全体に対して ...
0
票
1
回答
83
閲覧数
モバイルフレンドリー対応で、「コンテンツの幅が画面の幅を超えています」とSerch Consoleでエラーが出てしまいます。
モバイルフレンドリー対応したいのですが、「コンテンツの幅が画面の幅を超えています」とSerch Consoleでエラーが出てしまいます。
今考える原因としては、画像スライダーと、ハンバーガーメニューの二つでメニュー一覧は
right: -25rem;
にして表示させないようにしています。
この2つの場合がやはり、原因なのでしょうか?
その場合はいかにして対応していく方法がありますか?
...
1
票
1
回答
599
閲覧数
HTMLで番号付きの見出しを使う良い方法
HTMLで番号付きの見出しを実現する良い方法を教えてください。例えば,次のような文章を作成したいです。
(例1)
1. 漫画の定義
(本文)
2. 漫画の歴史
1. 近代以前
(本文)
2. 現代
(本文)
3. 漫画の役割
1. 娯楽
(本文)
2. 教育
(本文)
(例2)
1. 漫画の定義
(本文)
2. 漫画の歴史
2-1....
0
票
1
回答
284
閲覧数
Qt:フォームの上に配置したウィジェットにスタイルシートが反映されないのと、フレームいっぱいに占領したい
QtでC++です
ウィジェットを別のウィジェットの上に配置したときの質問です
1.メインフォーム上にボタンとフレームを配置
2.フレームに配置するためのウィジェットを2個作成
ウィジェットのクラスは
form1000
form1001
3.メインフォームのヘッダのプライベート部分に以下のように宣言
private :
form1000 *f1000;//ウィジェット1個目
form1001 ...
0
票
1
回答
222
閲覧数
videoタグにmargin使用できますか?
videoタグにmargin使用できますか?
HTML Living Standard は、HTML の仕様なので(?)、CSS使用可能と思ったのですが…
2
票
2
回答
278
閲覧数
ウェブコンテンツでよく見かけるこの山型マークは画像ですか?テキストですか?
赤で囲った部分ですが、テキストで出力するにはどうすればいいでしょうか?
論理和、論理積記号よりも横長なようですが。
0
票
1
回答
176
閲覧数
クラウドソーシングサービス等での、成果物の提出について。 [クローズ済み]
成果物の提出についてどのような提出方法を取っていられるでしょうか?
主にHPなどを提出したいと考えています。
オススメの手段があればご教授下さい。
0
票
1
回答
288
閲覧数
htmlタグのデフォルトのfont-sizeについて
remを使用する際、 <html>の font-size が基準になるとのことですが、
Q1.<html>の font-size を明示的に指定した方が良いですか?
指定しない場合は、ブラウザのデフォルトのfont-size(16px?) が自動的に適用される?
Q2.<html>の font-size はどうやって指定しますか?
・<html>...
1
票
1
回答
1,058
閲覧数
画像の上に文字があるリンクを作りたい
プログラミング超初心者なので用語の使い方が間違ってたらすみません。
画像を4つ並べてそれぞれの中央に文字を置き、それぞれをリンクにしたいです。
加えてマウスオーバーで画像が暗くなるようにしたいです(この部分は、形としては一応できています)。
こんな感じで、計4つのリンクを作るのが目標です。
htmlはこう書きました。(試行錯誤しまくったので必要ないclassやdivがあるかもしれないです)
...
1
票
1
回答
832
閲覧数
position:fixedのモーダルウィンドウの上側が画面が狭いと見切れてスクロールもできない
完了ボタンを押すと同意するかしないかの
モーダルウィンドウがでるボタンを作っています
うまくできたと思ったのですがレスポンスブルにしたいので
画面を狭めてテストするとモーダルウィンドウの上の方が見切れました
これはposition:fixedのせいだと疑っていますが性質上これは外せません
どうすればこれを解決できるでしょうか?
$(function() {
$('.kanryo'...
1
票
2
回答
474
閲覧数
CSS の background-image で指定した画像が反映されない
プログラミング超初心者なので用語の使い方が間違ってたらすみません。
CSSに書き込んだ、background-imageだけが反映されません。他は反映されています。
htmlはこのようになっていて、
.listに書き込んだものは反映されるのに.contentsに書き込んだbackground-imageだけ反映されません。
コードはこのように書きました。
background-...
0
票
1
回答
595
閲覧数
libフォルダに配置したcss,jsをapplication.{js,css}に読み込みたい
Ruby on Railsで管理画面を作っています。
デザインのためAdminLTEというテンプレートを使おうと思って、
Zipファイルをダウンロード、プロジェクト/libフォルダにダウンロードしたものを置きました。
ですが、このフォルダにあるcssファイルとjsファイルをプロジェクト全体に適用するために
以下の各プロジェクトへの設定方法がわからなくて困っています。
/app/assets/...
3
票
3
回答
2,092
閲覧数
Javascriptで特定のカラーを全て他の色に置き換えるには?
以下のHTMLとCSSがあるとき、Javascriptで #FF0000 を #0000FF に変更するには
すべての要素を繰り返し処理で回し、さらにcolorやborder-color、background-colorの
一つ一つの要素の中を覗いて書き換える方法しか思いつかないのですが、もうすこし
効率の良い方法はありますか?
また、:after や :before ...
4
票
1
回答
1,547
閲覧数
ons-listを2列にしたい
タイトル通りですが2列にしたいのですが改行されてしまい、想定と異なった表示になってしまいます。基本的なことで申し訳ありませんがどなたかご教授いただけますでしょうか。
ons.bootstrap()
.controller('main', function($scope) {
$scope.disable = false;
$scope.push = function(...
4
票
1
回答
1,238
閲覧数
Monaca + AngularJS のiOSアプリで、ツールバーの上に空白ができてしまう
Monaca を使ってアプリ開発しているのですが下の画像のようにツールバーの上に空白ができてしまいます。
画面 http://ryo110isa.main.jp/ios.png
Android の場合はこのようなことにはなりません。
いろいろやってみると、 AngularJS を使ったときだけ空白ができるようです。
ちなみに index.html は
<!DOCTYPE HTML&...
4
票
3
回答
3万
閲覧数
DIV要素にonloadの代用になるものはありますか?
div要素にonloadを付けたいのですが、残念ながら現在の時点ではdivにonloadは付けれません。
ですが、divにonloadなる物を付けたいのですが、何か代用できる方法などはございますでしょうか?
私がやりたいことは、「onload指定している箇所が読み込まれた後、他の要素を表示する」事です。
<style>
.main_off {
display: none;
}
....
4
票
1
回答
174
閲覧数
テンプレート「Train Catalog」でリストから参照される画像を全画面表示したい
Monaca 新規プロジェクトから選択できるテンプレートの "Train Catalog" で、リストから参照される電車の画像には、上下左右に余白があります。
この余白をなくし画像を表示することは可能でしょうか?
<div data-role="page" id="tokaido-page">
<div data-role="header" data-position=...
5
票
1
回答
2,112
閲覧数
Androidでユーザー設定の文字サイズに影響されず固定サイズにする方法
Androidは文字サイズをユーザー側で少・中・大・特大に変更できる機能がありますが、
Monacaでアプリを開発する際にユーザー設定の文字サイズに影響されず固定サイズにする方法はありますか?
【開発】
Monaca
【実機】
Android 4.4.4
【試した方法】
htmlに以下記述
<meta name="viewport" content="target-...
6
票
2
回答
1,103
閲覧数
PythonでHTMLメール用にCSSをインラインにする方法
Python2.7を使っています。
HTML HEAD内のCSSファイルやStyle定義を、BODY内のタグにStyleとして埋め込みたい。変換してくれるモジュールを探しています。
変換前
<html><head><style>h1{font-size:20px;}</style></head>
<body><h1&...
0
票
1
回答
1,622
閲覧数
VSCodeでCSSの補完がしたい
CSSファイルで.を入力すると
VSCodeで開いているHTMLファイルから
使用されているClass名が補完されるプラグインはありませんか?
2
票
2
回答
1万
閲覧数
railsでcssを使うにはどうすれば良いでしょうか?
views内にあるindex.html.erbを編集し、mycss.cssを反映させようとしていますがうまくいきません。以下の二つのパターンでコードをhtml内に書き試しましたがうまくいきませんでした。
初歩的で申し訳ありませんが宜しくお願いします。
1.
<%= stylesheet_link_tag "mycss", media: "all","data-turbolinks-...
0
票
1
回答
76
閲覧数
codepenのデモをコピペしたが画像に隙間ができる原因
初心者で初めて質問します。
下記のURLのcodepenによるCSS のみでサムネイルナビ付きスライダーをコピペしたのですが
画像に隙間ができてしまう原因をご教示頂ければ幸いです。他の動作には問題は有りません。
宜しくお願いします。
https://digipress.info/tech/pure-css-slider-with-thumbnails/
body {
...
1
票
1
回答
766
閲覧数
VS Codeのツールバー?の名称
Visual Studio Codeのテーマカラーを変更しています。
このツールバーの正式名称はなんでしょうか?
こちらのドキュメント内にプロパティが定義されていますか?
https://code.visualstudio.com/api/references/theme-color
0
票
1
回答
222
閲覧数
chromeのデベロッパーツールで「Responsive」表示にすると、<li>要素の下に細い線ができる。
下のように、
chromeのデベロッパーツールで「Responsive」表示にすると、li要素の下に細い線ができます。
どうしたらなおりますか?
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TEST</title>...
1
票
1
回答
709
閲覧数
CSSで空白を挿入する方法
<div class='a'>
<span class='b'>1</span>
<span class='c'>いい天気</span>
<div>
このようなhtmlがあって
1いい天気
と表示されます。
これをCSSを編集することで
1 いい天気
のように間にスペースほどの間隔を空けることは可能ですか?
(...
0
票
1
回答
232
閲覧数
事前に変更できないHTMLに対して、後付けで(class名を付与する等して)CSS装飾を加えたい
最終的にやりたいこと
下記で、・で開始されない文字列(「あいうえお」と「かきくけこ」)に対して強調表示したい
<p>あいうえお<br>
<br>かきくけこ<br>
・さし<br>
・たち<br>
・なに<br>
・はひ<br>
・まみ</p>
条件
・...
0
票
2
回答
256
閲覧数
@font-faceのlocalに指定すべき文字列を知るには?
CSS の @font-face の src には url() の他に local() を指定することができます。たとえば src: local("MS ゴシック") と書けばローカルのMSゴシックを指定できます。
ここで、手元にある有名でないフォントについて、local に指定する名前をどう知れば良いのか知らないことに気付きました。CSS Fonts Module Level 3 には
...
5
票
0
回答
115
閲覧数
Sassに複数の条件を適用する方法は?
[主旨]
WebのプロジェクトでXMLからHTML5への変換を担当しております.世界各国語向けのCSSを生成しなければならないので、LTR/RTL(アラビア語、ヘブライ語)を分けて.scssファイルから.cssファイルをコンパイルして生成してます.今度更にコンテンツの製品のブランドをパラメータとして導入しなければならなくなりました....
5
票
2
回答
2,040
閲覧数
@importするときの@の意味
プログラム初心者です。
Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、
以下に示している@の存在の意味がよくわかっていません。
@import '@/assets/styles/mixin.scss';
アドレスに示している@は何を意味しているのでしょうか。
一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。
...
5
票
1
回答
5,791
閲覧数
Chromeで日本語の禁則処理が効かない
Firefoxやsafariでは長音や短い"ッ"などの禁則処理が効いているのに、Chromeではきちんと処理されません。Word-break: break-strict;をbodyに適用しても改行されてしまいます。Chromeできちんと禁則処理を適用さすにはどのように(どこに?)記述すればよろしいでしょうか。
Chromeのバージョンは56.0.2924.87 (64-bit)、Windows ...
6
票
3
回答
3,305
閲覧数
<div>の中の文字列を上下で中央に揃える
htmlでdivの中の文字列を上下で中央にそろえるにはどうすればいいのでしょうか?
divの中に文字列があり、text-align: centerで左右は中央になったのですが上下で中央に揃えられません。
div#div1 {
text-align: center;
height: 400px;
width: 600px;
border: solid 1px;
...
7
票
1
回答
1,337
閲覧数
Bootstrap の mixin 利用時のライセンスは?
Bootstrap は LESS を使えば、mixin で部分的に利用できます。
では Bootstrap を部分的に利用した LESS を CSS にコンパイルして配布することは、ライセンス上、問題ないのでしょうか。
また、配布できる場合、ライセンス表記はどのようにすれば良いでしょうか。Bootstrap のライセンス (MIT) のほか、自身の選択したライセンス (たとえば Apache2)...
6
票
3
回答
8,971
閲覧数
li要素のマウスオーバー時に背景色を変えたい
li要素にマウスが乗った時に背景色をフェードさせて変更させたく以下のコードを作成しましたが、アニメーションと色の変更が反映されません。なぜでしょうか。
$(document).ready(function(){
$('li').hover(function(){
$(this).css("cursor", "pointer").stop().animate({...
6
票
3
回答
7,948
閲覧数
CSSで要素の順番を変更する方法はありますか?
既出・回答ありましたら申し訳ありません。
CSSでレスポンシブレイアウトのサイトを組んでいます。
PCサイト表示時は2カラムレイアウト、スマホサイズで1カラムになる構成になっています。
上図の左側がPC表示時、右側がスマホ表示時になります。
現在上側の構成になっているのですが、下側の順に表示順を変更して欲しいと言う依頼がありました。
<div>
<div style="...
4
票
2
回答
318
閲覧数
どうして.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
回答
174
閲覧数
HTMLテキストフィールドの高さを合わせる方法は?
このTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。
これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。
分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。
3
票
1
回答
128
閲覧数
coverなのに画像の高さが無効化される
bootstrap4でサムネイルリストを作りましたが、そのCSSでobject-fitにcoverとしたにも関わらず、画像の高さがcoverになりません。どうすれば改善するのでしょうか?
HTML
<div class="container">
<div class="row">
<div class="col-6">
<...
5
票
3
回答
1,696
閲覧数
HTML5で画像を回転させると縁にジャギが出てしまう
HTML5で画像を回転させて表示させると、斜めになった画像の縁の部分がギザギザになってしまいます。このジャギを回避する方法はないでしょうか?
0
票
1
回答
97
閲覧数
グローバルナビゲーションが表示されません
以下のように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,242
閲覧数
iPhoneでのバウンススクロールを無効にするには
Ruby on Railsの練習でTwitterのようなサイトを作っているのですが、バウンズスクロールを無効にする方法がどうしてもわかりません。
MacOS(Chrome等)ではバウンズスクロールを無効化出来たのですが、iPhoneでのバウンズスクロールがどうしても出来ません。
html, body {
overflow: hidden;
}
で個別の要素にheight: 100%; ...
1
票
1
回答
619
閲覧数
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,095
閲覧数
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,045
閲覧数
IEの「イントラネット サイトを互換表示で表示する」について
IEの「イントラネット サイトを互換表示で表示する」について教えてください。
今回作成したアプリをIE11で開こうとすると、「イントラネット サイトを互換表示で表示する」の設定のせいだと思われるのですが、IE7のモードで表示されてレイアウトが乱れてしまいます。
よって試しに「イントラネット サイトを互換表示で表示する」のチェックを外してみると、期待しているレイアウトになりました。
そこで X-...
4
票
1
回答
400
閲覧数
IE 11では思ったように星の色が変わりません。
星にマウスを乗せた時、色がつくように実装をしております。
Chrome, Edge, Firefox, Safariでは問題なく期待通りに動きますが、
なぜかIE11では星が1つのサイズしか色がつかないです。
下記がソースコードになります。
<html>
<style>
.select-star-rating {
font-size: 0;
...
0
票
1
回答
2,896
閲覧数
webpack-dev-serverで自動コンパイル・画面更新できない
この度フロントエンドに入門しようとしています。
やりたいこと
webpack及びその周辺技術を用いて、
- js及びcssが保存時(ファイル変更時)にウォッチされ自動コンパイルされる
- 自動コンパイルされた際に、ブラウザ(localhost:8080 ??)が自動でリロードされる
やったこと
以下のようにyarnとwebpackで環境構築をしました。
package.json
{
...
0
票
2
回答
125
閲覧数
フォーカスのデフォルトを設定するには
フォーカスのデフォルトを設定するにはどうすればいいですか?
first-childを試しましたがこれだと他をフォーカスしても最初のフォーカスが残っていまいます
これをフォーカスするたびにフォーカスが変わるようにしたいです
ul {
vertical-align: middle;
text-align: center;
font-size: 0;
}
li {
...