[css] タグが付いた質問

CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。

702 件の質問
絞り込み
並べ替え
タグ付けされた
1
3 回答
4,786 閲覧数

2列 50行のテーブルを簡単に作成したいです

現在は下記のようにひとつひとつ行を作っています。 <table id="sampleTable" class="tablesorter"> <thead> <tr> <th>都道府県名</th> <th>読み</th> <...
aspara_prime's user avatar
  • 1,316
0
1 回答
2,342 閲覧数

背景画像をスライドショーしたいのですがwidth指定の方法が分かりません。

背景画像がはみ出てしまうのですが、横幅をマックスにする方法を教えていただけないでしょうか? body { /* margin: 0 10px; padding: 0 0 50px; background: #F2F2F2; color: #222; line-height: 1; font-size: 20px;*/ } .header, ....
アンアン's user avatar
1
1 回答
894 閲覧数

WordPressで新規ページを作成するのに困っています。

今度はWordPressを始めました。 (というかやらざるを得なくなりました・・・) ちなみに私、HTMLもCSSもPHPも超初心者で、さらにWordPressなるものを初めて触ります。 現在制作中のWebサイトですが、基本的にはほぼ全て静的なHTMLとCSSで作成しております。 デザインはWebデザイナーがおりますので、その方にお任せしています。 (一部PHPを使っておりますが、...
Web_beginner's user avatar
0
1 回答
1万 閲覧数

SPANタグの TITLE属性で表示される ToolTipのフォントサイズを変更したいです

SPANタグに TITLE属性を付けておくとマウスオーバーで ToolTipが表示されます。 このとき、表示されるフォントのサイズが少し小さくなるので、これを元の文字と同じサイズで表示したいのですが、どのようなCSSを記述すればよいでしょうか?
backy0175's user avatar
1
2 回答
1,127 閲覧数

IE8で[attribute="value"]セレクターを使用した際に、DOMの属性の変更が画面が反映されない

[data-value="1"]のような要素の属性値によるセレクターでスタイルを指定しているのですが、IE8 (IE Tester使用) で見た時に初期状態は正しく表示されるのですが、JavaScriptからDOMの属性値を変更した際に表示が更新されません。 下記に簡単なサンプルを記載します。ボタンを押すたびにdata-value属性が変わり、Helloの背景色が変わるはずです(IE9以降、...
niu's user avatar
  • 2,010
1
2 回答
460 閲覧数

htmlで画像の変更が適用されません

最初に適用した画像から他の画像に差し替えたのですが、 最初の画像が常に表示されている状態です。 この問題の解決方法が分かる方がいましたら、ご教授お願いします。 対象の画像はCSSにて、下記のように指定しているasc.gifです。 background-image: url(asc.gif); またasc.gifは下記画像のように配置されています。
aspara_prime's user avatar
  • 1,316
4
1 回答
2万 閲覧数

<body>内に<style>を設定したときの動作仕様

<style>タグは通常<head></head>内に置くものといった説明がされていますが、<body> 内に置いたときの動作がどうなるかの説明はどこかにないでしょうか? 対象はメジャーな最新ブラウザのみでよいです。 試しに、Safari8.0.3で以下のhtmlを表示すると、<div>hoge</div>...
pebble8888's user avatar
1
1 回答
3,066 閲覧数

画像の上下に空欄出てしまいます。それを消したいです

ウェブページでどうしても空白ができてしまい困っています。 pタグで囲みたいのですが、pタグを使うとどうしても上下に空白ができてしまいます。 この空白を消したいです。 どうしたらよいのでしょうか? <body> <div id="pc-wrapper"> <div id="pc-header-box"> <p>&...
webman's user avatar
  • 199
1
1 回答
211 閲覧数

代用ボタンのクリックを、本物のボタンに適用したい

代用ボタンのクリックを、本物のボタンに適用したいのですが、 方法が分かりません。 因みに本物のボタンは非表示になっています。 <button type="button">代用ボタン</button> <input type="file" id="本物のボタン" name="fileselect[]" multiple="multiple" />
aspara_prime's user avatar
  • 1,316
1
1 回答
6,620 閲覧数

HTML 文字の隣にあるテキストボックスが一段下がってしまうのを防ぎたい

文字の隣にテキストボックスを配置したいのですが、 画面幅のせいかテキストボックスが文字の下段に移動してしまいます。 これを防ぐ方法はありませんか? 分かる方がいましたらご教授をお願いします。 <span> 文字 <input type="text" style="width:450px;"> </span>
aspara_prime's user avatar
  • 1,316
4
1 回答
270 閲覧数

CSSセレクタの中にある「>」

jQueryのCSSセレクタの中にある「>」の存在理由がわかりません。 元のhtml <div id="button1"> <button>aaa-btn<span class="big"> <span>aaa</span></span></button> css 何かしら適当な色や形状 ...
webman's user avatar
  • 199
1
0 回答
240 閲覧数

Android4.3 以降のデフォルトブラウザでbackground-size:coverは使えない?

Android4.3ブラウザでbackground-size:cover;の適応が確認できなかったため質問させていただきます。 background-size:cover;と、background-size: auto 100%;を使って確認したのですが、適応されていませんでした。 GooglePlayから、GoogleChromeをインストールを行い確認したところ、適応されていました。 ...
名も無いWEB屋's user avatar
1
1 回答
3,400 閲覧数

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>...
akashicrecord's user avatar
1
1 回答
1,097 閲覧数

モバイルデバイスの画面の実寸を把握するには?

http://g.co/racer のように、複数のデバイス間で画面の見た目を揃えるにはどうしたらいいのでしょうか? まずはCSSの実寸指定やviewportを使うことを考えたのですが、これらを使っても画面上でのサイズを正確に指定することはできないようで、失敗。 <!--次のコードでは、画面上に表示される要素のサイズは1cmになりません。--> <div style="...
nandenjin's user avatar
  • 103
9
6 回答
2万 閲覧数

.min のファイルはどうやって作るのですか

jQueryやBootstrapなど .min とついているファイルはスペースやコメントもなくギュウギュウ詰めで書かれているのですが、このようなものはどうやって作成するのでしょうか?
niu's user avatar
  • 2,010
7
4 回答
2,694 閲覧数

img要素の読み込み完了後に非表示要素を表示したい

img要素の読み込み完了を検知し、非表示要素を表示するため、onload=""を使用してCSSの生成を行いたいのですが、いまいち方法が理解できておりません。 <style> セレクタ {display: none;} </style> 上記のCSSを、onloadを使用して <style> セレクタ {display: block;} </...
名も無いWEB屋's user avatar
4
3 回答
3万 閲覧数

DIV要素にonloadの代用になるものはありますか?

div要素にonloadを付けたいのですが、残念ながら現在の時点ではdivにonloadは付けれません。 ですが、divにonloadなる物を付けたいのですが、何か代用できる方法などはございますでしょうか? 私がやりたいことは、「onload指定している箇所が読み込まれた後、他の要素を表示する」事です。 <style> .main_off { display: none; } ....
名も無いWEB屋's user avatar
3
4 回答
3万 閲覧数

CSSで要素内のテキストを上下左右の中央揃えにしたい

下図のように、div要素内のテキストを上下左右の中央揃えにしたいです。 どのようなCSSを書けば良いのでしょうか? width:200px; height:200px;と書いたのは一例です。 特にこの大きさ自体に意味があるわけではありませんが、要素の大きさはCSSで指定したいのです。
niu's user avatar
  • 2,010
0
2 回答
2,677 閲覧数

getFilesDir() でローカルに保存した HTML ファイルが動きません

どなたかご助力下さい。 getFilesDir() で、 data/data/パッケージ名/Files/○○○ の下に css フォルダ javascript フォルダ 画像フォルダ html ファイル を配置しています。 ※ これらは HTML 経由で ZIP ファイルをダウンロード後、こちらに解凍しております。 この HTML ファイルを WebView の loadURL ...
Takahashi's user avatar
4
1 回答
175 閲覧数

テンプレート「Train Catalog」でリストから参照される画像を全画面表示したい

Monaca 新規プロジェクトから選択できるテンプレートの "Train Catalog" で、リストから参照される電車の画像には、上下左右に余白があります。 この余白をなくし画像を表示することは可能でしょうか? <div data-role="page" id="tokaido-page"> <div data-role="header" data-position=...
user8011's user avatar
2
1 回答
1,331 閲覧数

LightBox2 でキャプチャのサイズをそれぞれ指定などしたい

Lightbox2 で小さい画像をクリックして下の画像のように大きく表示させるまではできました。しかし、本来は赤丸の内部にキャプチャを表示させたいですし、 "Go to blog!" のフォントは "Taro Yamada" より小さくしたいです(それぞれフォントサイズをコントロールできるようにしたいです) 現状のプログラムは以下のとおりです。 <!doctype html> &...
webman's user avatar
  • 199
1
1 回答
5,459 閲覧数

height:100%でのoverflow: scrollがスマホでうまく行きません

cssで下記のようにサブのメニューを設定したところ、スマートフォンではサブメニューの途中でスクロールが止まり、 本体部分をスクロールし終わるまで、サブの残りがスクロールできません。 どのように対策すれば良いでしょうか? #submenu{ height:100%; width: 80%; overflow:scroll; }
Taizan Yonetuji's user avatar
7
1 回答
8,451 閲覧数

iOS Safari のメニューバーを常に表示させたい

スマートフォン向け Web サイト制作に関する質問です。 画面の下に固定のナビゲーションを配置しようと思っているのですが、 iOS の Safari で画面下部をタップすると戻るボタン等のメニューバーが現れる動きをします。 これでは 1 回目の操作ではメニューバーが出るだけで、もう一度タップしないとナビゲーションを操作する事ができません。 viewport の minimal-ui ...
shimoda-bw's user avatar
1
1 回答
6,709 閲覧数

divの高さを揃えたい

cssのtableとtable-cellを使ってdivを横に並べ、さらに入れ子にしたdivの高さを揃えたいです。下のsnippetで、赤い枠線の高さを左側と右側で同じにしたい。 左側の高さは内側の要素によって変わるので、heightを明示的に指定することはできません。 JavaScriptを使用せずにcssのみで可能でしょうか? .table { display: table; ...
jirolabo's user avatar
  • 2,224
7
2 回答
1,280 閲覧数

PythonでHTMLメール用にCSSをインラインにする方法

Python2.7を使っています。 HTML HEAD内のCSSファイルやStyle定義を、BODY内のタグにStyleとして埋め込みたい。変換してくれるモジュールを探しています。 変換前 <html><head><style>h1{font-size:20px;}</style></head> <body><h1&...
terapyon's user avatar
  • 223
2
0 回答
967 閲覧数

Chromeで印刷したとき、Tableの行高さがおかしくなる

Tableタグで構成された表をChromeで印刷すると、tdの高さがランダムに倍になってしまいます。 <table> <tr> <td>名前</td> <td>住所</td> <td>電話番号</td> </tr> </...
masashi's user avatar
  • 21
3
1 回答
2,203 閲覧数

jQuery のアコーディオンに、それぞれのコンテンツ縦幅を設定したいです

アコーディオンを使ったウェブページをつくっておりまして、そのアコーディオン自体は正常に動いております。(動作は問題ないです) アコーディオンは5つありまして、その一つ一つにそれぞれのコンテンツをいれたサイトを作りたいのですが、たとえばAのコンテンツを開くと縦幅が長すぎて、下のほうに空欄が出てしまいます。(B,C、D、Eも同様です)。 JavaScript で CSS ...
webman's user avatar
  • 199
4
1 回答
1,290 閲覧数

Monaca + AngularJS のiOSアプリで、ツールバーの上に空白ができてしまう

Monaca を使ってアプリ開発しているのですが下の画像のようにツールバーの上に空白ができてしまいます。 画面 http://ryo110isa.main.jp/ios.png Android の場合はこのようなことにはなりません。 いろいろやってみると、 AngularJS を使ったときだけ空白ができるようです。 ちなみに index.html は <!DOCTYPE HTML&...
user7644's user avatar
1
1 回答
885 閲覧数

jQuery で、スクロール追従型にメニューをカスタマイズしたい

下記サイトの右メニュー下にある、「スポンサードリンク」のように、スクロールしてもページ内の固定位置に残るメニューを実装したいです。 http://www.akb48matomemory.com/archives/1017688632.html ただ、以下のようにもしたいのですがこういった実装は可能なのでしょうか。 下にスクロールした場合はトップ固定 ...
user avatar
3
3 回答
627 閲覧数

Galleriaで高さを指定しないと `Fatal error: Could not extract a stage height from the CSS.` が出てしまう

JavaScript ライブラリの Galleria で画像ギャラリーを実装しましたが、 Fatal error: Could not extract a stage height from the CSS. Traced height: 0px. というエラーが出てしまいます。 #galleria { height: 500px; } のように height ...
aces's user avatar
  • 31
7
1 回答
1,393 閲覧数

Bootstrap の mixin 利用時のライセンスは?

Bootstrap は LESS を使えば、mixin で部分的に利用できます。 では Bootstrap を部分的に利用した LESS を CSS にコンパイルして配布することは、ライセンス上、問題ないのでしょうか。 また、配布できる場合、ライセンス表記はどのようにすれば良いでしょうか。Bootstrap のライセンス (MIT) のほか、自身の選択したライセンス (たとえば Apache2)...
bouzuya's user avatar
  • 353
1
1 回答
3,715 閲覧数

ChromeのDeveloperツールで編集したStyleを一括コピーする方法

スタイルシートを編集するときに添付した画像のようにChromeのDeveloperツールでスタイルシートを編集して、その値をメモしておいてstyle.cssなどに記述するという方法をとっているのですが、この値を一括してコピーする方法はありますか? 今回の場合ですと .wp-caption .wp-caption-text { margin: inherit; font-size: ...
ironsand's user avatar
  • 3,557
3
3 回答
2,575 閲覧数

Javascriptで特定のカラーを全て他の色に置き換えるには?

以下のHTMLとCSSがあるとき、Javascriptで #FF0000 を #0000FF に変更するには すべての要素を繰り返し処理で回し、さらにcolorやborder-color、background-colorの 一つ一つの要素の中を覗いて書き換える方法しか思いつかないのですが、もうすこし 効率の良い方法はありますか? また、:after や :before ...
hojo's user avatar
  • 1,175
3
1 回答
550 閲覧数

iPhone 6 Plus で `box-shadow` が transition 中に レンダリングしない

translate で 移動させている際に box-shadow の描画が消えてしまい transition が終了されると再描画されるという現象に悩んでます。。 box-shadow 自体がレンダリングされないというバグの報告は幾つかあるのですが、 transition 中にだけ消えるので困っています 誰かご助力お願いします。 iOS は 8.0.2 です。
Jun  Mori's user avatar
9
3 回答
1万 閲覧数

iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう

スマートフォンサイトを制作していて発生した問題です。 headerタグにposition:fixed;を指定しスクロール時に画面上部に常に固定配置されるヘッダーを作成しました。 そのヘッダーにinputを利用して検索ボックスを設置したのですがiOS8のsafariで検索ボックスにフォーカスをあてると、...
hojo's user avatar
  • 1,175
18
2 回答
1,932 閲覧数

引用符のガイドライン

htmlタグの属性値 CSSのプロパティ(urlなど) JavaScript の文字列リテラル これらで使用する引用符はシングルクォート、ダブルクォートのどちらも使用できますが、メンテナンス性を考慮してスタイルを統一したいです。 また、 htmlタグのイベント属性(onlickなど)に直接JavaScriptを記述する場合 JavaScriptで属性値付きのhtmlタグを編集する場合 ...
jirolabo's user avatar
  • 2,224
18
4 回答
4,688 閲覧数

要素に適用されている実際のフォントを知るには?

CSS の font-familyプロパティ について、こちらに font-familyプロパティは、フォントの種類を指定する際に使用します。 フォントの種類はカンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 ...
jirolabo's user avatar
  • 2,224
2
2 回答
175 閲覧数

Web Essentials のcssチェック内容をカスタマイズする方法

Visual Studio で .cssファイルに div { border-radius: 5px; } と書いても何も言われないのですが、 div { transition-duration: 1s; } と書くと Browser compatibility: Add missing vendor specific properties to 'transition-...
jirolabo's user avatar
  • 2,224
4
1 回答
1万 閲覧数

モバイルブラウザでピンチインしても位置・サイズの変わらない固定要素を作る方法

メニュー付きのコンテンツ表示ページを作ろうと考えています。 ピンチイン・アウトで画像を自由に拡大縮小が可能。画面の上下に常時メニューが表示される。メニューはコンテンツを拡大縮小しても固定位置・サイズである。コンテンツの拡大縮小はブラウザの処理に任せる。 という条件のUIを考えておりまして、以下の様なサンプルを作ってみました。 http://fushi.x0.com/php_system/...
Fushihara's user avatar
  • 540
6
1 回答
431 閲覧数

ベンダープレフィックスを自動的に付与する方法

Visual Studio 2013(+ Web Essentials)でSass(.scss)ファイルを編集しています。 .scssファイルに div.border { border-radius: 5px; } と書いたらレンダープレフィックスを自動的に付与して、cssに div.border { -o-border-radius: 5px; -moz-border-...
jirolabo's user avatar
  • 2,224
4
1 回答
328 閲覧数

StackEditからBloggerに投稿したら画像とコードの部分がはみ出る

始めて質問します。 いろいろ調べたことを残すためにブログを始めてみようと思い、StackEditからBloggerに投稿が可能ということで始めてみました。 いざStackEditからtemplateを使って投稿してみましたが、以下のように画像部分とCodeの部分が本文のエリアからはみ出してしまいました。 cssの変更が必要かと思い、css自身をstackeditのgithubからDLし、...
takashin10's user avatar
4
2 回答
8,999 閲覧数

overflow: hiddenが指定された要素を持つinline-blockの高さが親の高さと違う理由

下記のようなHTML/CSSの場合に、クラスwrapperとクラスinline・overflowの高さが異なってしまうのはどうしてでしょうか? HTML: <div class='wrapper'> <div class="inline"> <div class="overflow">あいうえお</div> &...
hiro's user avatar
  • 1,074
7
2 回答
510 閲覧数

CSSの遠近効果付き3D回転をするとFirefoxで表示されなくなる

CSSのtransform:perspectiveを利用して要素に遠近法のような効果を与えるとき、ブラウザの画面幅によって要素が表示されなくなります。 (Firefoxで確認。Chrome/IEでは正常でした。) サンプルコード: .text { position: absolute; left: 50%; -moz-transform: translateX(-...
tkrkt's user avatar
  • 187
2
3 回答
1,350 閲覧数

CSSで個数が不定のときに個々の長さが同じ横並びメニューを実装したい

CSSで、メニューの項目数が不定の時に一つ一つの項目の長さが統一されている横並びメニューをulとliを用いた方法で実装したいです。 メニューの項目数が固定ならば項目の長さを統一できるのですが、不定の時にどう実装すればいいかがわかりません。 HTMLは次のような形です。 <div class="menu"> <ul> <li><a href="/...
user avatar
3
5 回答
2万 閲覧数

Tableのヘッダ固定、列固定

Excelの「ウィンドウ枠の固定」のようにTableのヘッダ行や列を固定したいです。 colspanやrowspanを用いてセル結合しているTableでも適用可能な手法やライブラリはあるでしょうか?
jirolabo's user avatar
  • 2,224
2
2 回答
1,335 閲覧数

EclipseでJavaScript、CSSをMinify&Bundleしたい

Eclipse(struts2)でWebアプリケーション開発を行っているのですが、ASP.NET MVCのようにJavaScriptやCSSを実行時にMinify、Bundleするにはどのような方法があるでしょうか?
jirolabo's user avatar
  • 2,224
3
3 回答
5,711 閲覧数

大枠をコーディング不要で作成できる Webオーサリングツール

HTML/CSS を構築するにあたってできればコーディング不要、つまりグラフィカルなツールでの編集・プレビューを行いたいのですが、 何か良いツールはありませんでしょうか。 静的なページというよりは、何かしらのWebフレームワーク (Ruby on Rails, CakePHP, Django 等) と組み合わせるためのデザインを構築する際に使えるグラフィカルツールを必要に感じています。 過去(...
kobake's user avatar
  • 276
3
3 回答
2,233 閲覧数

jQuery / JavaScriptで、ページスクロール時にアクションを起こしたい

ページをスクロールした時に、スクロールした距離に応じて、オブジェクトの移動や透過をさせたい。パララックス効果についても簡潔な例を知りたい。
Yuki TANABE's user avatar
4
3 回答
3,821 閲覧数

jQuery / JavaScriptで、ロード画面を表示させたい

作成したWebサイトのページに含まれるDOM要素が多く、ページの表示が遅い。 また、JavaScriptなどで再レイアウトされる要素が崩れるといった症状がでている。 すべての要素が読み込まれるまでページを表示させず、すべての要素が読み込まれた時点でページを表示させるにはどうすればよいか。
Yuki TANABE's user avatar
1
1 回答
3,507 閲覧数

Bootstrapで動的にフォームを作るとチェックボックスのラベルをクリックしても機能しない

Twitter Bootstrapについてです。 Bootstrapのスタイルは、デフォルトで チェックボックスのラベルをクリックすると(画像の「画像を削除する」のラベル)、 チェックボックスがtoggleされます。 しかし、JSで動的にフォームを挿入した後のチェックボックスは、 ラベルをクリックしてもtoggleされません。 popoverなどの機能であれば、 $('[rel=...
kntmrkm's user avatar
  • 634