[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
669
質問
17
票
4
回答
4,446
閲覧数
要素に適用されている実際のフォントを知るには?
CSS の font-familyプロパティ について、こちらに
font-familyプロパティは、フォントの種類を指定する際に使用します。
フォントの種類はカンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 ...
17
票
2
回答
1,894
閲覧数
引用符のガイドライン
htmlタグの属性値
CSSのプロパティ(urlなど)
JavaScript の文字列リテラル
これらで使用する引用符はシングルクォート、ダブルクォートのどちらも使用できますが、メンテナンス性を考慮してスタイルを統一したいです。
また、
htmlタグのイベント属性(onlickなど)に直接JavaScriptを記述する場合
JavaScriptで属性値付きのhtmlタグを編集する場合
...
12
票
1
回答
7,169
閲覧数
body に overflow:hidden; をあてるとなぜスクロールしなくなるのでしょうか?
body {
overflow:hidden;
}
この記述を加えると、コンテンツ量に関わらずブラウザのスクロールバーが消えて、
スクロールができなくなるというのは、よく知られたテクニック?の1つかと思います。
私も簡単なモーダルを実装するときによく使っています。
body.fixed {
overflow:hidden;
}
みたいな感じで、...
10
票
1
回答
348
閲覧数
CSSのクラスセレクタと属性セレクタの違い
初めまして。css初心者なのですが、学習をしていく中で記法でわからない部分が出たのでご質問させていただきます。
例えばなのですが、
<p class="abc">こんにちは</p>
というHTMLに対し、
p[class="abc"] { color: blueviolet; }
p.abc { color: blueviolet; }
このどちらのcssも"...
9
票
3
回答
1万
閲覧数
iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう
スマートフォンサイトを制作していて発生した問題です。
headerタグにposition:fixed;を指定しスクロール時に画面上部に常に固定配置されるヘッダーを作成しました。
そのヘッダーにinputを利用して検索ボックスを設置したのですがiOS8のsafariで検索ボックスにフォーカスをあてると、...
8
票
3
回答
9,818
閲覧数
A4用紙に印刷可能なピクセル数は?
htmlページをブラウザ標準の印刷機能で印刷する場合、縦向きのA4用紙に入る横幅は最大何ピクセルになるでしょうか?
css
* {
box-sizing: border-box;
}
.test1 {
width: 1366px;
border: 10px solid red;
}
.test2 {
width: 1280px;
border: 10px solid ...
8
票
2
回答
4,083
閲覧数
数値を含む値にマッチするセレクタ
<div id="foo">...<div>
<div id="foo-bar">...<div>
<div id="foo-1">...<div>
<div id="foo-2">...<div>
上記のようなHTMLに対して、id属性がfoo-{数値}な要素のみにマッチするセレクタはあるでしょうか?...
8
票
1
回答
442
閲覧数
WAI-ARIAは最近のWebサイトでは必要なのでしょうか?
最近かなり久々にHTML,CSSを学習しているのですが、昔は見なかったWAI-ARIAなる属性を良く目にするようになってきました。
「これは何だ?」と色々と調べてみたのですが、サッパリ分かりません。
このページやこのページなどにも詳しく書いているようなのですが、それで、この属性は必要なのか、いったい何がメリットなのかまでは分かりませんでした。
個人的に良く見るのは、aria-...
8
票
1
回答
8,750
閲覧数
htmlで背景画像だけを全体的にぼかす
htmlで背景画像だけを全体的にぼかすにはどうすればいいのでしょうか?
filterのblurを使うことはわかるのですが、下のcssのようにbodyの中に
filter: blur(5px);と書くと、body内のすべての要素にblurがかかってしまいます。
背景画像だけにblurをしたいのですがどうすればいいのでしょうか?
<!DOCTYPE html>
<html>
...
8
票
2
回答
2,624
閲覧数
DOMが書き換わった後ブラウザはどのように再描画していますか?
ブラウザで HTML/CSS を読み込んでページを描画した後、もし JavaScript によって動的に DOM が書き換わったら、ブラウザはページの再描画をしなくてはなりません。
素朴に考えるとページの描画にかかるコストは無視できません。DOM がちょっと変わっただけで要素のレイアウトが変わりえますし、テキストの折り返しが変わって更にレイアウトが変わることもありそうです。
しかし多くの場合、...
8
票
6
回答
2万
閲覧数
.min のファイルはどうやって作るのですか
jQueryやBootstrapなど .min とついているファイルはスペースやコメントもなくギュウギュウ詰めで書かれているのですが、このようなものはどうやって作成するのでしょうか?
8
票
1
回答
962
閲覧数
htmlのテキストボックスでtext-align:rightにすると入力した文字が左右に動く
きわめて微妙~な現象なので、説明がわかりにくく恐縮ですが
次のような当たり前の入力ボックスで
<input type="text" value="12345678" style="text-align:right;" />
ボックス内の文字の真ん中(たとえば4と5の間)をマウスで選択して、
その前後を交互に選択状態にするように
カーソルを大きく(...
7
票
1
回答
1,357
閲覧数
Bootstrap の mixin 利用時のライセンスは?
Bootstrap は LESS を使えば、mixin で部分的に利用できます。
では Bootstrap を部分的に利用した LESS を CSS にコンパイルして配布することは、ライセンス上、問題ないのでしょうか。
また、配布できる場合、ライセンス表記はどのようにすれば良いでしょうか。Bootstrap のライセンス (MIT) のほか、自身の選択したライセンス (たとえば Apache2)...
7
票
1
回答
567
閲覧数
Webフォントで複数文字の文字列が、一文字分の字形で表示される仕組み
フォントは一つの文字に一つの字形を割り当てていると思います。
Webフォントにおいても例えばMaterial Iconsでは、「」()という文字に吹き出しの中にクエスチョンマークが入った字形が割り当てられています。
<i class="material-icons"></i>
とする事で(class="material-...
7
票
2
回答
489
閲覧数
CSSの遠近効果付き3D回転をするとFirefoxで表示されなくなる
CSSのtransform:perspectiveを利用して要素に遠近法のような効果を与えるとき、ブラウザの画面幅によって要素が表示されなくなります。
(Firefoxで確認。Chrome/IEでは正常でした。)
サンプルコード:
.text {
position: absolute;
left: 50%;
-moz-transform: translateX(-...
7
票
1
回答
8,175
閲覧数
iOS Safari のメニューバーを常に表示させたい
スマートフォン向け Web サイト制作に関する質問です。
画面の下に固定のナビゲーションを配置しようと思っているのですが、 iOS の Safari で画面下部をタップすると戻るボタン等のメニューバーが現れる動きをします。
これでは 1 回目の操作ではメニューバーが出るだけで、もう一度タップしないとナビゲーションを操作する事ができません。 viewport の minimal-ui ...
6
票
3
回答
2万
閲覧数
input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ?
チェックボックスと連動して変化する表示を CSS だけで実装できないかと、以下のようなコードを書きました。これは Chrome 46 では期待通りに動き、チェック状態がテキストで表示されます。
input:before {
content: 'not checked';
position: absolute;
top: 30px;
}
input:checked:...
6
票
2
回答
5,189
閲覧数
@importするときの@の意味
プログラム初心者です。
Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、
以下に示している@の存在の意味がよくわかっていません。
@import '@/assets/styles/mixin.scss';
アドレスに示している@は何を意味しているのでしょうか。
一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。
...
6
票
3
回答
8,180
閲覧数
CSSで要素の順番を変更する方法はありますか?
既出・回答ありましたら申し訳ありません。
CSSでレスポンシブレイアウトのサイトを組んでいます。
PCサイト表示時は2カラムレイアウト、スマホサイズで1カラムになる構成になっています。
上図の左側がPC表示時、右側がスマホ表示時になります。
現在上側の構成になっているのですが、下側の順に表示順を変更して欲しいと言う依頼がありました。
<div>
<div style="...
6
票
2
回答
3万
閲覧数
flexboxの孫要素にheight:100%が効かない理由はなぜですか
html,body
{
height: 100%;
margin: 0;
}
.flex
{
display: flex;
height: 100%;
}
.flex-child
{
border: solid 1px gray;
background: blue;
}
.flex-grandchildren
{
...
6
票
3
回答
9,880
閲覧数
li要素のマウスオーバー時に背景色を変えたい
li要素にマウスが乗った時に背景色をフェードさせて変更させたく以下のコードを作成しましたが、アニメーションと色の変更が反映されません。なぜでしょうか。
$(document).ready(function(){
$('li').hover(function(){
$(this).css("cursor", "pointer").stop().animate({...
6
票
2
回答
1,163
閲覧数
PythonでHTMLメール用にCSSをインラインにする方法
Python2.7を使っています。
HTML HEAD内のCSSファイルやStyle定義を、BODY内のタグにStyleとして埋め込みたい。変換してくれるモジュールを探しています。
変換前
<html><head><style>h1{font-size:20px;}</style></head>
<body><h1&...
6
票
3
回答
4,167
閲覧数
<div>の中の文字列を上下で中央に揃える
htmlでdivの中の文字列を上下で中央にそろえるにはどうすればいいのでしょうか?
divの中に文字列があり、text-align: centerで左右は中央になったのですが上下で中央に揃えられません。
div#div1 {
text-align: center;
height: 400px;
width: 600px;
border: solid 1px;
...
6
票
1
回答
421
閲覧数
ベンダープレフィックスを自動的に付与する方法
Visual Studio 2013(+ Web Essentials)でSass(.scss)ファイルを編集しています。
.scssファイルに
div.border {
border-radius: 5px;
}
と書いたらレンダープレフィックスを自動的に付与して、cssに
div.border {
-o-border-radius: 5px;
-moz-border-...
6
票
4
回答
2,521
閲覧数
img要素の読み込み完了後に非表示要素を表示したい
img要素の読み込み完了を検知し、非表示要素を表示するため、onload=""を使用してCSSの生成を行いたいのですが、いまいち方法が理解できておりません。
<style>
セレクタ {display: none;}
</style>
上記のCSSを、onloadを使用して
<style>
セレクタ {display: block;}
</...
6
票
1
回答
2,408
閲覧数
Vue.jsの静的サイトでの利用について
vue.jsなどは主にSPAといった、データ志向な動的ページなど向いていると思うのですが、
一般的な静的サイトになんとかvue.js(vue-loader)の下記のメリットを持ち込めないか、
を考えています。
単一コンポーネント
→CSS/HTML/JSを1つのファイルで管理
→scoped cssが扱える
やはり静的サイトとはいえど、ページ数が増え、コンテンツが拡張されていくと
...
6
票
1
回答
1,173
閲覧数
IEにおいて、SVGをHTML内に直接記述した場合、他のブラウザと大きさが異なる
IE11において、以下のようにHTML内に直接記述したSVGのスケーリングが、他のブラウザと異なります。
#svg {
width: 80%;
background-color: #DDD;
}
<svg viewBox="0 0 430 330" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=...
5
票
1
回答
6,139
閲覧数
Chromeで日本語の禁則処理が効かない
Firefoxやsafariでは長音や短い"ッ"などの禁則処理が効いているのに、Chromeではきちんと処理されません。Word-break: break-strict;をbodyに適用しても改行されてしまいます。Chromeできちんと禁則処理を適用さすにはどのように(どこに?)記述すればよろしいでしょうか。
Chromeのバージョンは56.0.2924.87 (64-bit)、Windows ...
5
票
3
回答
331
閲覧数
「position: static」は相対位置指定ではない?
「positionプロパティを指定しない時に適用される初期値static」は相対位置指定だろうと思い、仕様を確認しているのですが、見つけることが出来ません。
リンク先では下記のように記載されていますが、どういう意味でしょうか?
規定の振る舞いです。フロー内の現在の位置に配置されます
https://developer.mozilla.org/ja/docs/Web/CSS/...
5
票
1
回答
649
閲覧数
特定の1行(HTML)に紐づいているJSを特定する方法はありますでしょうか?
特定の1行のHTMLソースに紐づいているJSを
一番効率よく割出す方法はありますでしょうか?
具体的には以下となるのですが、
https://www.sony.co.jp/united/userexperience/support/ja_jp/?uxscc=set
例えば上記サイトの Gナビ部:【CSR・環境・社会貢献】
のアコーディオン時のレイアウトが崩れています。
...
5
票
3
回答
1,783
閲覧数
HTML5で画像を回転させると縁にジャギが出てしまう
HTML5で画像を回転させて表示させると、斜めになった画像の縁の部分がギザギザになってしまいます。このジャギを回避する方法はないでしょうか?
5
票
1
回答
2,593
閲覧数
背景にCSSのfilterを使用すると,前面の文字が表示されない
背景要素にfilter: brightnessを使い,明度を暗くした後,その前面に白い文字を表示したいと思っています.
#background {
z-index: -1000;
height: 300px;
width: 100%;
background-color: #555;
filter: brightness(20%);
...
5
票
1
回答
443
閲覧数
クラス名にコロン(:)は許可されているのでしょうか?
https://tailwindcss.com/docs/responsive-design
に レスポンシブ対応のために
md:w-32 lg:w-48
という プレフィックス: という書き方がありますが、クラス名に:は許可されているのでしょうか?
疑似要素のbeforeなどでhoge::beforeなどの書き方があるので、衝突してしまってできなさそうな気もするのですが、...
5
票
1
回答
2,218
閲覧数
Androidでユーザー設定の文字サイズに影響されず固定サイズにする方法
Androidは文字サイズをユーザー側で少・中・大・特大に変更できる機能がありますが、
Monacaでアプリを開発する際にユーザー設定の文字サイズに影響されず固定サイズにする方法はありますか?
【開発】
Monaca
【実機】
Android 4.4.4
【試した方法】
htmlに以下記述
<meta name="viewport" content="target-...
5
票
0
回答
142
閲覧数
Sassに複数の条件を適用する方法は?
[主旨]
WebのプロジェクトでXMLからHTML5への変換を担当しております.世界各国語向けのCSSを生成しなければならないので、LTR/RTL(アラビア語、ヘブライ語)を分けて.scssファイルから.cssファイルをコンパイルして生成してます.今度更にコンテンツの製品のブランドをパラメータとして導入しなければならなくなりました....
4
票
1
回答
409
閲覧数
IE 11では思ったように星の色が変わりません。
星にマウスを乗せた時、色がつくように実装をしております。
Chrome, Edge, Firefox, Safariでは問題なく期待通りに動きますが、
なぜかIE11では星が1つのサイズしか色がつかないです。
下記がソースコードになります。
<html>
<style>
.select-star-rating {
font-size: 0;
...
4
票
3
回答
3万
閲覧数
DIV要素にonloadの代用になるものはありますか?
div要素にonloadを付けたいのですが、残念ながら現在の時点ではdivにonloadは付けれません。
ですが、divにonloadなる物を付けたいのですが、何か代用できる方法などはございますでしょうか?
私がやりたいことは、「onload指定している箇所が読み込まれた後、他の要素を表示する」事です。
<style>
.main_off {
display: none;
}
....
4
票
2
回答
8,344
閲覧数
overflow: hiddenが指定された要素を持つinline-blockの高さが親の高さと違う理由
下記のようなHTML/CSSの場合に、クラスwrapperとクラスinline・overflowの高さが異なってしまうのはどうしてでしょうか?
HTML:
<div class='wrapper'>
<div class="inline">
<div class="overflow">あいうえお</div>
&...
4
票
1
回答
2万
閲覧数
<body>内に<style>を設定したときの動作仕様
<style>タグは通常<head></head>内に置くものといった説明がされていますが、<body>
内に置いたときの動作がどうなるかの説明はどこかにないでしょうか?
対象はメジャーな最新ブラウザのみでよいです。
試しに、Safari8.0.3で以下のhtmlを表示すると、<div>hoge</div>...
4
票
3
回答
3,762
閲覧数
jQuery / JavaScriptで、ロード画面を表示させたい
作成したWebサイトのページに含まれるDOM要素が多く、ページの表示が遅い。
また、JavaScriptなどで再レイアウトされる要素が崩れるといった症状がでている。
すべての要素が読み込まれるまでページを表示させず、すべての要素が読み込まれた時点でページを表示させるにはどうすればよいか。
4
票
1
回答
1万
閲覧数
<ul>のlist-styleのスペースを除去するには
<ul>について質問させてください。
デフォルトの<li>の先頭に付く「・」が邪魔でlist-style-type: none;にて非表示させました。
しかし、非表示しているにも関わらず、その部分のスペースは取ってしまっているようです。
これを無くしたいのですがどのようにすれば良いのでしょうか?
li {
list-style-type: none;
}...
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
...
4
票
4
回答
1,984
閲覧数
JavaScriptでライブラリを使わずにカメラのフラッシュのようなアニメーションをする
JavaScript, html, cssでカメラのフラッシュのようなアニメーションをしたいと思っています。
buttonを押したときに画面全体を一瞬だけ白く光らせるにはどうすればいいのでしょうか?
jQueryなどを使えばできるようですが、学習のため、ライブラリを使わずに実現したいと考えています。
<!DOCTYPE html>
<html lang="ja">
...
4
票
2
回答
920
閲覧数
BootstrapのCSSを用いる際にclassを一括指定したい
現在、オフィシャルサイトの記述のような形でclassに値を設定しています:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-...
4
票
1
回答
1,260
閲覧数
Monaca + AngularJS のiOSアプリで、ツールバーの上に空白ができてしまう
Monaca を使ってアプリ開発しているのですが下の画像のようにツールバーの上に空白ができてしまいます。
画面 http://ryo110isa.main.jp/ios.png
Android の場合はこのようなことにはなりません。
いろいろやってみると、 AngularJS を使ったときだけ空白ができるようです。
ちなみに index.html は
<!DOCTYPE HTML&...
4
票
1
回答
317
閲覧数
StackEditからBloggerに投稿したら画像とコードの部分がはみ出る
始めて質問します。
いろいろ調べたことを残すためにブログを始めてみようと思い、StackEditからBloggerに投稿が可能ということで始めてみました。
いざStackEditからtemplateを使って投稿してみましたが、以下のように画像部分とCodeの部分が本文のエリアからはみ出してしまいました。
cssの変更が必要かと思い、css自身をstackeditのgithubからDLし、...
4
票
2
回答
520
閲覧数
HTMLで作成した200×200pxの枠をクリックされた時に回転させたい。
200×200のHTMLで作成した枠をクリックしたときに回転させたいと思っていますがまったく見当が付きません。
イメージ的には、ある写真が並べられているとします。その写真が200×200pxの大きさです。
ユーザはその写真をクリックすると、Z軸とX軸の方向に回転してその写真に関係するタグを入力できるフォームを作成したいと思っています。
Z軸とX軸というととてもわかりにくいですが、...
4
票
1
回答
1,576
閲覧数
ons-listを2列にしたい
タイトル通りですが2列にしたいのですが改行されてしまい、想定と異なった表示になってしまいます。基本的なことで申し訳ありませんがどなたかご教授いただけますでしょうか。
ons.bootstrap()
.controller('main', function($scope) {
$scope.disable = false;
$scope.push = function(...
4
票
1
回答
1万
閲覧数
モバイルブラウザでピンチインしても位置・サイズの変わらない固定要素を作る方法
メニュー付きのコンテンツ表示ページを作ろうと考えています。
ピンチイン・アウトで画像を自由に拡大縮小が可能。画面の上下に常時メニューが表示される。メニューはコンテンツを拡大縮小しても固定位置・サイズである。コンテンツの拡大縮小はブラウザの処理に任せる。
という条件のUIを考えておりまして、以下の様なサンプルを作ってみました。
http://fushi.x0.com/php_system/...
4
票
1
回答
175
閲覧数
テンプレート「Train Catalog」でリストから参照される画像を全画面表示したい
Monaca 新規プロジェクトから選択できるテンプレートの "Train Catalog" で、リストから参照される電車の画像には、上下左右に余白があります。
この余白をなくし画像を表示することは可能でしょうか?
<div data-role="page" id="tokaido-page">
<div data-role="header" data-position=...