[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
644
質問
0
票
0
回答
393
閲覧数
動的にテキストをセットした場合のplaceholderの表示について
jQueryのvalを使ってテキストボックスに動的にテキストをセットした場合にMacのsafariではplaceholderのテキストが非表示にならず、重なって表示されてしまいます。
フォーカス時にplaceholderを非表示にする方法は見つかったのですが、動的に値がセットされた場合にplaceholderを非表示にする方法はありますでしょうか?
...
0
票
1
回答
690
閲覧数
jQueryで、要素の2回目のクリックでうまくbefore()メソッドが働きません。
お世話になります。
青いboxをクリックするたびに、
ピンク色の要素が下に次々と挿入されるようにしたいのですが、
2回目のクリックでうまくbefore()メソッドが働きません。(要素が挿入されません)
どこが間違っているのでしょうか?
試しに、
$('this').before(content)
として、クリックした要素の上に挿入していくようにするとうまくいくのですが。
[scripts....
0
票
1
回答
1,440
閲覧数
transform:translate(10%)とするとずれる。
CSSでtranslate(10%)とすると、期待する移動距離になりません。(画像右端の青い隙間)
translate(50px)とpxで指定するとうまくいきます。
%の指定の際に留意する点などがあるのでしょうか?
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"&...
0
票
1
回答
94
閲覧数
仮想テーブルレイアウトで上下センター揃えができない。
「仮想テーブルレイアウト」で上下センター揃えができないのですが、
以下のCSSでどこががおかしいのでしょうか?
希望のイメージ(上下左右#innerの中央揃え)
子要素のliに
display: table-cell;
を設定し、
親要素のulに
display: table;
を設定しています。
[index.html]
<!DOCTYPE html>
<...
0
票
0
回答
183
閲覧数
jQuery BlackAndWhiteが利用できない
初めまして。
コーディング初心者で現在ホームページ作りをしているのですが、
画像マウスオーバー時に白黒からカラーを切り替えるプラグインのBlackAndWhiteを利用しようとしておりますが、うまくいきません。
念のためマウスオーバー前の画像を添付しておきます。
マウスオーバー前
このような形でマウスオーバー前はalt属性が左上に謎に表示された状態で、...
0
票
1
回答
1,766
閲覧数
子要素の高さが親要素の高さを超えた時という指定について
お世話になっております。
現在シングルページでスクロールするサイトを作っており
常にページごとにブラウザの画面100%で見せるデザインにしています。(cssで親要素のwidth,heightを100%に)
リサイズした際、可変で横並びの要素が縦になったりで、中身の要素がブラウザの表示領域を超えた時に、height:100%をautoにし、ページの100%表示を解除したいのですが、...
0
票
1
回答
232
閲覧数
pタグ間の空白を0にしたい
body {
width: 20rem;
margin: 1rem auto;}
}
p.foo {
width: 10rem;
text-indent: 0rem;
padding-left: 1rem;
margin: 0rem;
}
section.bar {
margin: 1rem;
padding: 0rem;
}
<html>
<...
0
票
1
回答
365
閲覧数
ロールオーバーした要素を起点に(画面全体含めて)マウスに追従させたい
リンクの演出として実現したいことがあり投稿させていただきました。
実現したいことは下記の通りです。
リンク要素にロールオーバーした際に画面全体を拡大表示(アニメーション不要)
拡大された際に該当リンク要素+マウスが画面中央に来るように
リンク要素にマウスが乗っているあいだは(画面全体含めて)マウスの動きに追従(アニメーション不要)
リンク要素からマウスが外れたら標準表示(拡大率1.0)に戻る
...
0
票
2
回答
262
閲覧数
WordPress 投稿の1つめのimgタグをdivで囲いたい
WordPressを使っています。投稿(記事ページなど)内にある1つめのimgタグをdivで囲いたいので以下のようなコードを書いてみましたがどうにこもうにも動きません。どのようにすればいいでしょうか。
function firstimg_add_divtag($content){
global $post, $posts;
$first_img = '';
...
0
票
1
回答
199
閲覧数
IE11 : javascript / jqueryで、cssの-ms-writing-modeの設定値を取得したい
ブラウザはIE11で、javascript/jqueryを用いて、cssの-ms-writing-modeの設定値(tb-lr)を取得したいのですが、
$("#target").css("writing-mode") → undifined ※Chromeでは取得可能
$("#target").css("-ms-writing-mode") → undifined
では、...
0
票
2
回答
1,469
閲覧数
monacaによる画面レイアウトでの画像の中央配置について
標記の件で悩んでおりまして、CSSやHTMLの問題というよりは、モバイルの縦サイズがうまく取れていないのではないか、と考えています。
#wrapper {
display:table; /* 要素をテーブルのようにする */
width:100%;
max-width:600px;
height:300px;
margin:0 auto;
...
0
票
0
回答
2,247
閲覧数
iOS x Safariで画像が表示されない
前提・実現したいこと
以下のサイトのリリースを控えていますが、表題の不具合が解決できずに悩んでいます...
https://magazine.tabitatsu.jp/
発生している問題・エラーメッセージ
iOSのSafariで記事ページにアクセスした際に、画像が表示されません。
https://magazine.tabitatsu.jp/articles/63
しかし、...
0
票
0
回答
419
閲覧数
CSSで画像の位置がうまく調整できない
現在HTMLで↓のように
<body>
<div class="daruma"><div style="position:absolute;top:-20px;left:0px;">
<a href="リンク/"><img src="元の画像" border="0" onMouseOver="this.src='マウスオーバー時画像'" ...
0
票
1
回答
103
閲覧数
formのactionとtextのnameをradioで指定して検索結果を出したい。
前提・実現したい事
formのactionとtextnameをradioで指定して検索する検索サイトを作成して居ます。
発生している問題・エラーメッセージ
actionとtextnameをradioのvalueをJavaScriptのsplitで分割して取得するも検索結果が出ません。
該当のソースコード
JavaScript
<script type="text/javascript"...
0
票
0
回答
4,191
閲覧数
iOSのSafariでvhによるheightの指定が実際より少し大きくなる
iOSのSafariで heightを "vh" で指定した場合、実際より一回り大きなサイズになってしまいます。
例えば、"height:100vh" とすると、表示領域全体より少し大きくなります。
おそらく、iOSのSafariはアドレスバーの領域も含めて100vhとして計算しているのではないかと思います。
このため、他のブラウザと表示に差がでてしまうのですが、...
0
票
1
回答
662
閲覧数
Milligramのデフォルトテーマカラーの紫色を好きな色に変更する方法
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">
上記のタグを<head>〜</head>内に追加すると、CSSフレームワークのMilligramを利用することができますが、...
0
票
0
回答
57
閲覧数
上下の枠に接したところで向きを変える方法
下記のコードは、marqueeタグの代わりにCSSを使って文字(〇)を"ジグザグ走行"させたものです。
しかし、その文字は親要素のdiv(id="container")で設定した背景色の上の枠からははみ出て、
下の枠からは幾分上の方で向きが変わってしまいます。
どうすれば、上下の枠に接したところで向きが変わるようになるでしょうか。ご教示ください。
<style>
#...
0
票
1
回答
1,831
閲覧数
kaminari + bootstrap の色を変えたい
rails で kaminari を用いてページネーションを実装しました。
rails g kaminari:views bootstrap でbootstrapを使ったデザインにしたのですが
cssから配色を変更しようとしています。
それで、文字色を変更するところまではできたのですが、
選択されているページ( http://bit.ly/1niuhcS の「1」のところ)の
...
0
票
1
回答
595
閲覧数
libフォルダに配置したcss,jsをapplication.{js,css}に読み込みたい
Ruby on Railsで管理画面を作っています。
デザインのためAdminLTEというテンプレートを使おうと思って、
Zipファイルをダウンロード、プロジェクト/libフォルダにダウンロードしたものを置きました。
ですが、このフォルダにあるcssファイルとjsファイルをプロジェクト全体に適用するために
以下の各プロジェクトへの設定方法がわからなくて困っています。
/app/assets/...
0
票
0
回答
79
閲覧数
"マウスストーカー"の効果を失わずに、セレクトのoptionにもanimationDURATIONスタイルを設定する方法
下記のソースコードは、 文字マウスストーカーにanimationDURATIONスタイルを設定したのですが、
これを設定したらマウスストーカーの効果が失われてしまいました(*初期状態のみ正常に機能します)。
どのように設定しなおせば、マウスストーカーの効果を失わずに、animationDURATIONスタイルを
セレクトのoptionにも設定できるでしょうか。ご教示ください。
*"...
0
票
1
回答
350
閲覧数
Jqueryを使ったMonacaで画面のどまんなかに文字を表示させる方法について
すみません。質問させてください。
MonacaでjQueryを利用してページを作成しているのですが、1点詰まったことがあります。
画面の縦横の真ん中に文字を表示させように、
htmlで
<div id="startFl" data-role="page" height="100%">
<table width="100%" height="100%" border="0" ...
0
票
1
回答
547
閲覧数
1つの検索欄で、2つの列に検索を掛けたい
下記ソースには、column-Name、column-Positionの検索入力欄があり、それぞれの入力欄はそれぞれの対象列(NameとPosition)に対して検索を掛け、一致した行のみを描画します。
ここで、
この2つの検索欄を1つにし、この1つの検索欄で2つの列(NameとPosition)に対する検索(or検索)が出来るようにしたいのですが方法が分かりません。
ご教授をお願いします。
...
0
票
2
回答
1,042
閲覧数
四角枠内にファイルをドラッグオーバーした際、ドロップ用のエリアを表示させたい または、 innerHTMLを非表示にしたい
現在は下記ソースのように、四角枠内(dropエリア)にdropするとそのファイル情報が表示されます。
しかし、ファイル情報によってdropエリアの範囲が狭くなってしまうので、これを改善したいと考えてます。
そこで、下の①か②の方法で改善しようと考えています。
①四角枠内にファイルをドラッグオーバーしたら、別でdropエリアを四角枠内に表示させるようにする
→javascriptから「...
0
票
1
回答
191
閲覧数
paddihng、marginなどの変数を1ずつ上げていきたい時に下記のようにxを付けるしか方法が思いつかないのですが、どのように対処していますか?
paddihng、marginなどの変数を1ずつ上げていきたい時、下記のようにxを付けるしか方法が思いつかないのですが、どのように対処していますか?
1ずつ上げるまでは行わずにだいたいだけ作って
そこに当てはまらなければ、変数での指定はしないのが一般的なのでしょうか?
/* margin */
--margin-small: 2rem;
--margin-medium: 4rem;
--...
-1
票
1
回答
92
閲覧数
olの番号の縦位置が下になってしまう。上揃えにしたい。
キャプチャのようにliの番号が下揃えになってしまいます。
*キャプチャの赤い位置にしたい。
(safariで下になります。chromeでは上になっています)
次のようにしても上になりません。
ol li {
vertical-align: top;
}
どうすれば良いでしょうか?
-1
票
1
回答
137
閲覧数
画像を画面中央に持っていきたい。テキストテンプレートに文字を記入したい。
HTML ソースコード
<body>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div id="spdayo">
<a href="index.html"><img src="sp1.jpg" alt="...
-1
票
1
回答
87
閲覧数
ブラウザの幅を変えると要素の位置が変わってしまうのを直したいです。
どのようにすれば、ブラウザの幅を変えても1枚目の状態で維持できるようになるのでしょうか?
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport&...
-1
票
1
回答
305
閲覧数
AirPods Proのサイトようなサイトをつくるには
AirPods Proのサイト https://www.apple.com/airpods-pro/ のように動画とスクロールバーが連動して動くサイトを作りたいと思っています。
どうしたらいいんでしょうか?
大まかな制作の方法ご存じの方いますか?
-1
票
2
回答
729
閲覧数
absoluteでは回り込みができない?
bootstrapを使ってサイトを作っているのですがposition:absoluteで配置した要素の隣にdiv要素を配置してブラウザ幅を縮小するとdiv要素の中身がabsolute指定した要素にめり込んでしまいます。ネットでみるとabsoluteした要素にfloatが使えないようなのですがどうにか使える方法をご存じの方はいないでしょうか?
-1
票
1
回答
5,491
閲覧数
要素を左の端からはみ出して表示させたい。
お世話になります。
要素を左の端からはみ出して表示させたいです。
下のコードのように親要素に
overflow:visibleとしてもうまくいかないのですね。
元の状態(画像①)
↓
右にスクロール(画像②)
∧∧∧∧∧ ここの100pxの部分を表示させたい。
こうしたい(画像③)
<body>
<div class="container">
...
-1
票
1
回答
920
閲覧数
monacaにおけるonsen-uiのタブバーを用いたときのcssやjavascriptの有効について。
はじめまして。プログラミングを初めて3日目です。javascriptでゲームを作りたいです。(tmlib.jsフレームワークを使いたいです。)
monacaに登録し、onsen-uiのタブバーとスライディングバーのテンプレートを組み合わせてページ遷移を行うことが出来ました。
しかし、ページ遷移後にcssやjavascriptが実行できず困っています。
リンクを作り、person.html(...
-1
票
1
回答
884
閲覧数
jQueryを使わずにサイドバー固定
サイドバーにfixedを使い、height100%にすればスクロールしても固定できますが、ヘッダーが80pxあった場合、スクロールした時に上に80px分余白が飽きます。
サイドバーにtop0にし、ヘッダーをrelativeにしてzindexをサイドバーより低くすれば空白は飽きませんが上に80px分余白が空きます。paddingも同じです。
どうにかいい案はありませんか?
-1
票
1
回答
1,821
閲覧数
railsでapplication.css以外のscssが反応しない
RailsでWebアプリケーションを作ろうとしています。application.cssの他にHomeコントローラを作成して、home.css.scssを作ってみたんですが、.classといった具合にセレクタ名を打ち込んでも全く反応しません。(文字色が白から変わらない、、)
application.cssはちゃんと読み込まれています。
ググってみるとよく出てくる、*/ = ...
-1
票
1
回答
5,142
閲覧数
この動作をSwiperで実現したい
解決方法が不明なので質問いたしました。下記のリンクのスライダライブラリを使用して
実現したいスライドがあります。
http://www.idangero.us/swiper/#.VpMcPRWLRsc
その実現したいスライドは下記のサイトにあるようなものです。
・メイン画像はスライド、クリックで変更できる
・その下に配置されたサムネイルからその画像を表示できる
http://black-flag....
-1
票
2
回答
191
閲覧数
簡単に数値を選択していれる方法はないでしょうか?
格子状のtableタグで作った表に数値を入れる物を作ったのですが、簡単に数値を選択していれる方法はないでしょうか?
selectタグでプルダウンメニューを入れたのですが、余計なcssが一杯当たっているせいか、サイズが大きくて崩れます。
下記を入れても変わりません。
appearance: none;
また、余計な余白や四角などが邪魔です。
typeにnumberと入れる方法もあるのですが、...
-2
票
2
回答
905
閲覧数
Jsonデータを10行2列に並べて表示したいです
下記ソースの通り、JsonのNameデータが最大20件(最大20件で最小1件が)送られてきます。
そのデータを画面出力する際、10行2列に並べて表示したいのですが、
実装方法が分かりません。ご教授をお願いします。
・java script Jsonデータ取得時
$.get(url, function (jsonData) {
});
・現在のHTMLです
<...
-2
票
1
回答
134
閲覧数
flocssについて
flocssを使っているのですが、
そのサイト固有のcss(margin、padding、width、color)OOCSSのストラクチャに似ている?
と
どのサイトでも共通であろうcss(あまり正直ないですが、display:blockなどでしょうか?)
両方が一つの要素にあると思いますが、
どのように分けるていますか?
例えば.c-btn .p-btn-skinないしはp-...
-2
票
1
回答
515
閲覧数
marqueeをCSS,JAVASCRIPTで代替する(*入れ子がある場合)
下記のソースコードは、marqueeのいくつかの機能をボタンでコントロールさせることを、
CSSとJavascriptで代替させたものです。描写は、ヘビの左右の動きと,移動速度を調節
させるだけのシンプルなものです。これに、"舌を上下にちょろちょろさせる"動きと、
"尻尾(*ここでは、音符記号)を上下にパタパタさせる"動きを加える場合、どのように
ソースコードを書き加えればいいのでしょうか。...
-2
票
0
回答
97
閲覧数
スマホ画面スクロール時にデザイン画面がずれる原因について
解決したいこと
下記サイトをスマートフォンでスクロールする際に、デザインされている画面(ページ)がデバイス画面に固定されていません。
こちらを解消する方法をご教示いただけないでしょうか。
https://www.stock-lab.com/
PCで閲覧する場合は問題なくスクロールされています。
その他、他の関連サイトにおいても同様のずれる事象が発生しており、...
-3
票
1
回答
1,927
閲覧数
z-index: -1;とした要素の子要素の:hoverが反応しなくなる。
お世話になります。
.parent{
position: relative;
z-index: -2;
}
とした要素の子要素の:hoverが反応するようにしたいのですが、どうすればよいでしょうか?
添付画像のように.parentの右下、左下の部分にposition:absoluteでimg画像を配置した時にimg画像がボタンの手前に来てしまうのを変えるために、
...
-3
票
1
回答
277
閲覧数
コードをどのように修正すべきかを教えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset = "UTF-8" />
<title>tekisutogataRPG</title>
<style>
.cell{width:80px;
height:80px;
...
-3
票
1
回答
294
閲覧数
monaca クイズアプリについて
http://matorel.com/archives/754
こちらのサイトも参考にしてクイズアプリを作ったのですが、いざandroidへダウンロードし試してみると、PC上だとできるのですが選択肢のボタンが改行されなくて横に伸びてしまいます。
よって選択肢のボタンが画面外へ行ってしまいます。
どうすればよろしいでしょうか?
LGL23を使用しております。
-4
票
1
回答
626
閲覧数
phpの値にcssを反映したい
phpで変数が入った値にcssを反映させ、変数に入った画像ファイルの出力位置を変更したいのですが、なぜか以下コードでは反映されません。
どなたか、アドバイス頂ければ幸いです。
上記変数の中には5枚のトランプの画像が格納されています。
以下は、phpのコードです。
"<div class='player1_cards'>".$player1."</div>";
"&...
-4
票
1
回答
7,602
閲覧数
埋め込んだYouTube動画を左右中央に配置したい
<div id="wrapper" class="inner clearfix top">
<article class="clearfix">
<div id="content">
<div id="top_btn">
<ul class="clearfix">
<li id="about"><a href="...