[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
28
件の質問
18
票
4
回答
4,757
閲覧数
要素に適用されている実際のフォントを知るには?
CSS の font-familyプロパティ について、こちらに
font-familyプロパティは、フォントの種類を指定する際に使用します。
フォントの種類はカンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 ...
6
票
3
回答
2万
閲覧数
input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ?
チェックボックスと連動して変化する表示を CSS だけで実装できないかと、以下のようなコードを書きました。これは Chrome 46 では期待通りに動き、チェック状態がテキストで表示されます。
input:before {
content: 'not checked';
position: absolute;
top: 30px;
}
input:checked:...
2
票
1
回答
2,325
閲覧数
cssで枠の中の画像をアスペクト比を保ちつつ拡大して全て表示する方法
divで囲まれたimg要素があります。
<div class="wrapper">
<img class="image" src="xxxx" />
</div>
imgのアスペクト比を保ちつつdivの中いっぱいに拡大表示したいです。
画像はすべて表示されるようにしたいです。(divをはみ出さない)
縦か横に隙間が出来る場合は、...
0
票
1
回答
110
閲覧数
addEventListnerをページ更新後に追加される要素にも適応したい。
Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。
分からない事
同じクラス名の要素に別々の変更を加えるには
作成したい機能
inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。
要素について
.dlcardWrapがあってその子要素として.dlcardがあります。...
6
票
1
回答
432
閲覧数
ベンダープレフィックスを自動的に付与する方法
Visual Studio 2013(+ Web Essentials)でSass(.scss)ファイルを編集しています。
.scssファイルに
div.border {
border-radius: 5px;
}
と書いたらレンダープレフィックスを自動的に付与して、cssに
div.border {
-o-border-radius: 5px;
-moz-border-...
5
票
1
回答
777
閲覧数
特定の1行(HTML)に紐づいているJSを特定する方法はありますでしょうか?
特定の1行のHTMLソースに紐づいているJSを
一番効率よく割出す方法はありますでしょうか?
具体的には以下となるのですが、
https://www.sony.co.jp/united/userexperience/support/ja_jp/?uxscc=set
例えば上記サイトの Gナビ部:【CSR・環境・社会貢献】
のアコーディオン時のレイアウトが崩れています。
...
4
票
3
回答
3,871
閲覧数
jQuery / JavaScriptで、ロード画面を表示させたい
作成したWebサイトのページに含まれるDOM要素が多く、ページの表示が遅い。
また、JavaScriptなどで再レイアウトされる要素が崩れるといった症状がでている。
すべての要素が読み込まれるまでページを表示させず、すべての要素が読み込まれた時点でページを表示させるにはどうすればよいか。
4
票
3
回答
3万
閲覧数
DIV要素にonloadの代用になるものはありますか?
div要素にonloadを付けたいのですが、残念ながら現在の時点ではdivにonloadは付けれません。
ですが、divにonloadなる物を付けたいのですが、何か代用できる方法などはございますでしょうか?
私がやりたいことは、「onload指定している箇所が読み込まれた後、他の要素を表示する」事です。
<style>
.main_off {
display: none;
}
....
3
票
1
回答
145
閲覧数
文章の一部を黒く塗りつぶしたい
こちらの文章で文字の一部だけ黒く塗りつぶしておきたいのですが、何か方法はありますでしょうか。
jqueryをつかった方法はありましたが、できればcssだけでやりたいと思っています。
<p>アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈(たいくつ)しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。&...
3
票
3
回答
549
閲覧数
縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。
★前提・実現したいこと
縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。
例えば、幅×高さで以下の二つを同じ200px200pxで表示する場合です。
①2000×1333
②160×160
★発生している問題・エラーメッセージ
上記例の場合だと、幅はそろえることができるのですが、
高さが合いません…
【幅=高さ】
【幅≠高さ】
...
3
票
1
回答
160
閲覧数
PolymerとBootstrapの併用について
お世話になってます。
現在Bootstrapを使用してWebサイトを開発しています。
しかし、Polymerを利用して部品化してみようと思い、Polymerを導入したのですが、BootstrapのclassがComponentに反映されなかったりと何かと不具合が生じています。
Componentのhtmlには
polymer.htmlとbootstrap.min.cssをlinkしています。
...
3
票
3
回答
2,694
閲覧数
Javascriptで特定のカラーを全て他の色に置き換えるには?
以下のHTMLとCSSがあるとき、Javascriptで #FF0000 を #0000FF に変更するには
すべての要素を繰り返し処理で回し、さらにcolorやborder-color、background-colorの
一つ一つの要素の中を覗いて書き換える方法しか思いつかないのですが、もうすこし
効率の良い方法はありますか?
また、:after や :before ...
2
票
1
回答
400
閲覧数
cssnext から rem に自動で px を加える機能をなくしたい
cssnextを使っているのですが、IE8のサポートが切れたのでremに自動にpxを加える機能をなくしたいのですが、セットになっているので、これだけ外すことはできないのでしょうか?
https://github.com/robwierzbowski/node-pixrem
を見ても英語で完全にはわからず翻訳してもそれらしい記述が見つかりません。
どなたか、ご存じないでしょうか?
...
2
票
3
回答
2,027
閲覧数
データの無い行も含めて、常に50件表示したい
現在下記ソースのようにjqueryのcolumnsを使用して実装をしています。
データの無い行も含めて常に50行を表示したいのですが、方法が分かりません。
また、常に50行を表示したいので、表示行数設定は削除したいです。
ご教授をお願いします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
...
2
票
1
回答
2,396
閲覧数
FLOCSSでいうutilityについて
FLOCSSでいうutilityは便利なので、たくさん使いたくなってしまいますが、
制作時は良くても、クラス名がたくさんになってしまうと、
CSSがまとまっておらず管理がしにくいという説もあります。
どのような制限をつけて使っていますか?
好き放題使っても問題ないのでしょうか?
例
/* Bottom margin */
.u-mb-0{
margin-bottom: 0 !...
1
票
1
回答
220
閲覧数
サイトのナビゲーションの、選択されているテキストに色を付けたいです。
サイトのナビゲーションなどによくある、選択されているページの文字色を変えたいのですが、
どのようにすれば良いのでしょうか?
例えば以下の場合、会社案内をクリックしたら、会社案内ページが表示されているときは<li><a href="#">会社案内</a></li>のテキストをredにする。といった動きにしたいです。
<ul class="nav"...
1
票
1
回答
99
閲覧数
HTML5とCSS3を使って写真を互い違いに配置した後、横にチャット風メッセージを挿入し、レスポンシブ(スマホ)対応にしたい
PC用デザインでは、一番上に写真が左、メッセージと人物アイコンが右に配置、二番目に写真が右で左がメッセージと人物アイコンが右、三番目に写真が左、メッセージと人物アイコンが右に配置されるようなデザインにしました。そのあと本画像のような上が写真でメッセージと人物アイコンが下になるようにスマホ対応画面にしたいと思っています。どうしたら画像のような画面を再現できるでしょうか?
...
1
票
2
回答
8,293
閲覧数
HTMLのtextのonkeydownで半角数字のみ入力を指定したところテンキー入力が効かない。
お世話になります。
Windows、VisualStudio2015のASP.NET(VisualBasic)、.NET Framework4.6、
ローカルIIS、ブラウザはGoogleChrome、IE、で開発しています。
1つのページにtext(ASP.NETではTextBox、名称はtxtTest)を置き、
半角数字のみ入力できるように、function(名称はnumOnly())...
1
票
1
回答
866
閲覧数
GitHub PagesでCSSが反映されない
VSCodeで書いたコードを使ってGitHubで自作HPを公開しようとしています。
コードはHTMLとCSSのみ。CSSが反映されずに困っています。
VSCodeのプレビューでは問題なく反映されているのですが、原因がわかりません。
試したこと
1. <link rel="stylesheet" href="css/home.css"> を
<...
1
票
1
回答
977
閲覧数
HTMLでGridView部品のような表示・動作がしたい
FirefoxアドオンをChrome拡張に移植中なんですが、Visual StudioなどにあるGUI、GridViewのような表示をしたくて悩んでます。具体的にどんなものかと言うと以下の画像のようなものです。
selectタグだと複数列ができません。
条件としては、
複数列表示ができる
行単位での選択・検知ができる
を満たすようなものです。
1
票
1
回答
8万
閲覧数
position: absolute;した親要素の高さがなくなるのを解消する一般的な(clearfixのような)方法はありませんか?
.box {position: absolute;}
とした要素の親要素の高さ(幅も?)がなくなるのを解消する
一般的な(clearfixのような)方法はありませんか?
[html]
<body>
<div class="wrap">
<div class="box_left">
A
</div>
...
0
票
0
回答
194
閲覧数
ブラウザ更新時の読み込みシームレス化を実現したいです
ブラウザ更新時の画像読み込みシームレス化(以下のブラウザページ)のページ全体版を実現したいと思っています。
https://teratail.com/questions/271650
上の過去の質問回答の構文では画像URLを指定していますが、画像URLではなくWEBページ全体を表示させる場合に更新時のラグ(ページが完全に表示されるまでの読み込み中の状態)...
0
票
1
回答
75
閲覧数
display:block;同士横並びにしたい
以下のようなコードでtd1とtd2の両方にdisplay:blockを適用すると、td1の下にtd2が配置されてしまいます。
td1の右横にtd2を配置したいのですがどうしたらよいですか?
現状では、画像の黒色の配置になっていますが、td2を赤色のところに配置したいです。
<table>
<tr>
<td class = "td1">aaaa&...
0
票
1
回答
137
閲覧数
background-image が指定された div で、自動的に height を指定する方法を知りたい
やりたいこと
background-image, max-width が指定された div で、自動的に height を明示する方法を知りたい。
max-width を超える場合は、 max-width まで縮小したい。
できれば css だけで実現したい。
前提条件
画像のサイズは不定で、小さいこともあれば大きいこともある。
div の max-width は 400px を指定。
...
0
票
2
回答
251
閲覧数
Web開発のポートフォリオ作成手順と学習内容について
プログラミング初心者です。現在、HTML,CSS,Pythonを学習中で、同時にポートフォリオ作成を進めようと考えています。Webアプリを作成するときには、
フロントエンドでHTML,CSS,Javascript
バックエンドでPython
そして、SQLとAWSを学ぶ必要があると調べた結果わかりました。
しかし、ポートフォリオを作成するさいに、SQLやAWSの知識はどこで必要になるのでしょうか?
...
0
票
1
回答
153
閲覧数
Bootstrapでhover時に他のアイコンに変えたい
hover時に1-circleから、1-circle-fillのアイコンに変えたいです。
下記のように記述したところ、画像のように黒色の四角形になってしまいます。
よろしくお願い致します。
.header-icon .bi-i-circle:hover {
font-family: 'Bootstrap-icons';
content: '\F796';
background-...
0
票
1
回答
575
閲覧数
チェックボックスに適用したCSS(ブロックの折り畳みを開閉)が機能しません
すみません。ド素人で申し訳御座いません。個人的理由でみよう見まねで作ってみた人物の紹介の為のチェックボックスが効きません。何故かお解りでしょうか?宜しくお願い致します(m_m)。
動かない事例
動く事例
html(動かない事例の)
<h4 class="teacher_h3">ハイレベルプロの先生のご紹介</h4>
<div class="...
0
票
1
回答
381
閲覧数
Uncaught TypeError: overlay_navigation.velocity is not a functionのエラーについて
以下のようにサイトを作成中です。
サンプルのように三本バーをクリックするとアクションが行われるようにしたいと考えてます。
jsにある overlay_navigation.velocity('transition.slideLeftIn' の部分でエラーを起こします。
出ているエラーは以下になります。
script.js:16 Uncaught TypeError: ...