[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
86
未回答やベストアンサーなし質問
5
票
0
回答
176
閲覧数
Sassに複数の条件を適用する方法は?
[主旨]
WebのプロジェクトでXMLからHTML5への変換を担当しております.世界各国語向けのCSSを生成しなければならないので、LTR/RTL(アラビア語、ヘブライ語)を分けて.scssファイルから.cssファイルをコンパイルして生成してます.今度更にコンテンツの製品のブランドをパラメータとして導入しなければならなくなりました....
4
票
0
回答
160
閲覧数
Outlook2007/2010はHTMLメールのstyleブロック内のCSSを無視する?
HTMLメールのコーディングで困っており、質問させてください。
https://www.campaignmonitor.com/css/
こちらの情報によればoutlook2007/2010はhead内でのCSSの定義およびクラス名セレクタをサポートしているはずなのですが、以下のHTMLでは無視されてしまいます。
何か記述間違いなどありますでしょうか。よろしくお願いいたします。
<!...
3
票
0
回答
680
閲覧数
MonacaでボタンなどのコントロールのCSS変更
現在MonacaのボタンなどのコントロールのCSSを変更したいとおもっているのですが、反映されません。
jquery mobileをプロジェクトに追加前はCSSを変更できたのですが。
コードは以下のようになっています。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<...
3
票
0
回答
256
閲覧数
Masonryを使って画像を一覧表示すると左右にスペースができてしまう
Masonryを使用し画像を一覧表示しています。ヘッダーのサイズに合わせて画像を一覧表示させたいのですが、画像のように両サイドが余ってしまいます。
どのようにすればヘッダーにぴったり合わせることができるでしょうか
cssだけであればぴったり表示されるのですが、masonry.jsを入れるとスペースができます。
読み込みの瞬間は正しく表示されます。(0.1秒くらいですが。。)
css
* {...
3
票
0
回答
350
閲覧数
Rails アプリのCSSが効かなくなります。
Rails4で作成したアプリをHerokuにデプロイすると、CSSが効かなくなります。
デプロイした時はCSSが効いていても、数時間後あるいは翌日にアクセスするとCSSが効かなくなっています。これはどういうことなのでしょうか?ずっとこのような事態が続いています。
また効かないといっても完全に効かないというわけではなさそうです(99.5%のCSSは効いていませんが)。キャッシュの問題なのですかね?...
2
票
4
回答
301
閲覧数
ボタンの中に斜めの線を入れたい
HTML, CSS初心者です。
添付の画像のように、斜め線が入ったボタンの実装をしようと思い、
実装サンプル集を参考に色々試行錯誤しましたが、斜め線をボタンの中に組み込む実装がうまくできませんでした。
cssサンプルをご提示いただけないでしょうか?
よろしくお願いいたします。
2
票
0
回答
184
閲覧数
BEMのmodifierについて
以下のような、レイアウトが共通の色違い要素があったとします。(白黒白黒と続く想定)
<div class="Block">
<div class="Block__element">白</div>
<div class="Block__element">黒</div>
<div class="Block__element"...
2
票
0
回答
1,247
閲覧数
iOS11のtextareaでキャレットがズレるのをCSSだけで修正したい
iOS11のWebkitブラウザにおいて、モーダルウィンドウ内に配置した
textareaのタップ時にキャレットの位置がずれる問題を修正したいと思っています。
下記1の対策は画面構成の事情で見送り、2の対策はエラー発生前から実装済みのため、
CSSで何とか解決できないかと模索しています。
親要素の position: fixed を position: absolute に変更すると直る説
...
2
票
0
回答
209
閲覧数
translate3d transition 終了時onメソッドについて
// 左にあるサムネイル4も左にスライドさせる
$('#slider_thumbnail_4').css({
'transform': 'translate3d(-204%, 0, 0)',
'transition-duration': '0.5s'
}).on('transitionend', function() {// transition終了時処理
$('#...
2
票
0
回答
233
閲覧数
pushPage後のcss変更タイミングを早めるには?
「Onsen UI最小限のテンプレート」を元に、2ページ間を前後に行き来するアプリを作りました。
それぞれのページに異なる画像を1枚ずつ貼り付けていて、page1.htmlのons-buttonのクリックでpage2.htmlに遷移した際に画像を50%に縮小して表示させたいのですが、私が書いたコードでは一旦100%サイズで表示してから一瞬遅れて50%で再描画されます。
pushPage後、...
2
票
0
回答
958
閲覧数
Chromeで印刷したとき、Tableの行高さがおかしくなる
Tableタグで構成された表をChromeで印刷すると、tdの高さがランダムに倍になってしまいます。
<table>
<tr>
<td>名前</td>
<td>住所</td>
<td>電話番号</td>
</tr>
</...
1
票
1
回答
148
閲覧数
スマホからサイトを確認するとフォントが変更されていない
wordpressのaffinger5を使ってwebページを作成しました。
pcから開発者モードでスマホ用の画面で確認するとフォントは設定した通りに表示されております。
しかし、実際のスマホで確認すると機種を問わず、デフォルトのフォントになってしまいます。
なにかプラグインが影響していたりするのでしょうか?
2枚目がインストールしたプラグイン一覧です。
どうか、ご教示いただけると幸いです。
1
票
1
回答
125
閲覧数
ブラウザゲーム上で自作のドット絵フォントを表示する方法
HTML、CSS、JavaScript でドット絵のゲームを作ろうとしているのですが、相手のPCにないフォントを表示する方法がわかりません。ライブラリはp5.jsを使っていて、他にライブラリを使う予定はないです。
1
票
0
回答
2,732
閲覧数
iPhoneでのバウンススクロールを無効にするには
Ruby on Railsの練習でTwitterのようなサイトを作っているのですが、バウンズスクロールを無効にする方法がどうしてもわかりません。
MacOS(Chrome等)ではバウンズスクロールを無効化出来たのですが、iPhoneでのバウンズスクロールがどうしても出来ません。
html, body {
overflow: hidden;
}
で個別の要素にheight: 100%; ...
1
票
0
回答
201
閲覧数
electronで作成したPDFにCSSが適用されない
electronのWebContents.printToPdfのAPIを使って、バックグラウンドで非表示中のページをレンダリング後にPDF化したいです。
Angular2を使ってページを整形しているため、ngAfterViewInitのlifeCycleの後にPDF化を行おうとしたのですが、
PDF化したところ、一部のテキストがレンダリングされない状態でPDFが出力されてしまいました。
(...
1
票
1
回答
211
閲覧数
FooTableの利用について
現在スマホ用の画面構築で、テーブルを可変にする為に
FooTableを利用しようとしています。
以下のサイトを参考にしてます。
http://www.webantena.net/javascriptjquery/plugin-footable/
ところが、肝心のソースが手に入りません。
というのも、ここに限らずどのサイトでも最終的にGithubから
ダウンロードするように誘導されますが、...
1
票
0
回答
552
閲覧数
HTML5 + Bootstrap + IE11 + Windows7にて、フォーカスを当てた時の挙動がおかしい
HTML5、Bootstrapにてページを作成しています。
IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。
1.枠線の影が消える
2.テキストフィールドの左上にグレーの影が表示される
この現象は下記の環境で発生しています。
・Windows7 Professional SP1(32bit)
・IE 11.0.9600.18537 (更新バージョン 11....
1
票
0
回答
223
閲覧数
Monacaでposition:fixedを使用するには
お世話になっております。
Monacaでハイブリッドアプリを作成しております。
iOSの仕様
webkit-transparentが設定されている時
position:fixedが使用できず全てposition:staticになるため、
固定したいブロック要素が固定できずにいます(Android)では固定できています。
このような場合、どういった設定でブロック要素を固定すればよいのでしょうか?...
1
票
0
回答
240
閲覧数
Android4.3 以降のデフォルトブラウザでbackground-size:coverは使えない?
Android4.3ブラウザでbackground-size:cover;の適応が確認できなかったため質問させていただきます。
background-size:cover;と、background-size: auto 100%;を使って確認したのですが、適応されていませんでした。
GooglePlayから、GoogleChromeをインストールを行い確認したところ、適応されていました。
...
1
票
1
回答
459
閲覧数
MaterializeCSSを使用した場合にRailsのSelectボックスが動作しない
現在、以下の環境で開発を行っています。
Ruby:2.3.1
Rails:5.0.0
MaterializeCSSを使用しているのですが、Selectボックスがどうしても動かない状態です。表示はされるのですが、プルダウンできない状態になります。
調査すると、JavaScriptのコードを追加すれば解決するというものが多いのですが、JavaScriptのコードは追加済みで、...
0
票
0
回答
27
閲覧数
LaravelMix、LaravelVIteでMaterializeCSSのAutoInitがエラーになる
概要
Laravelでmaterializecss( https://materializeweb.com/ )を使いたいのですが、
エラーになります。
この解決方法がわかりません。
エラー内容
Uncaught TypeError: can't access property "AutoInit", ...
0
票
0
回答
71
閲覧数
【ラジオボタンの選択保持】「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。
実現したいこと
ラジオボタンの選択保持
前提
この質問はマルチポストです。
下記URLでも質問しています。
https://teratail.com/questions/9pkuzcnadxkgq6
プラグイン「WCFM」商品編集画面の「金額」の項目をテキストボックスからラジオボタンに変更しています。
「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。
...
0
票
1
回答
90
閲覧数
ボタンのhoverが効かない
hoverが効きません。
デベロッパーツールで、要素の状態を強制にすると適応はされますが
実際にカーソル当てるだけでは効きません。
また、.cartの要素をクリックしてもトップページに移動しないので
.cart a:hoverやz-indexで手前にくるように指定なども試しましてみましたが、効きませんでした。
よろしくお願いいたします。
.cart {
display: block;
...
0
票
0
回答
115
閲覧数
HTML内にscriptを記載して思っているようにしたいのですが、どうしても上手くいきません。どなたかご教授よろしくお願いします。
以下の四つの事が出来るようになりたいのですが、HTMLのタグの中のscriptタグの中にコードを書いてるのですがどうしてもどのようなコードを書けば良いかわかりません。
どなたかご教授ください。
1つ目:名前とニックネームを3回追記したらボタンを非表示(削除ではないのでDisplayではないとは思いますが)にし、それ以降は追記できない。
2つ目:tableタグとそれに関連するタグを利用し、登録した ...
0
票
0
回答
137
閲覧数
HTMLでボタンの表示位置を変更したい
この時ボタンの位置を上にしたいのですがどのようにすれば良いでしょうか?
ファイルフォルダ
├test.html
├video
├back.mp4
├back.ogv
├back.webm
└css
__└setting.css
/*============== 背景動画設定 ===============*/
/*header設定*/
#header{
position: ...
0
票
0
回答
71
閲覧数
Visual Studio Codeで.scssファイルを作成および保存する際に、複数の.cssファイルが自動的に生成されるのを防ぎたい
VScode上でsassを使用したプロジェクトがあったため.scssに.cssから変更しコマンド+Sで保存したところ以下のような複数の.cssファイルが生成されました。
保存したファイル
.global.scss
自動生成されたファイル
.global.css
.global.css.map
.global.min.css
.global.min.css.map
...
0
票
1
回答
69
閲覧数
リンクの色がバックグラウンドと被って変えたい
リンクの色がバックグラウンドと被って変えたいです。
以下で color:skyblue になりません。答えていただける方よろしくお願いします。
<a style="color:skyblue;"
href="https://www.salk.edu/">Sark Institute for Biological Studies ...
0
票
1
回答
92
閲覧数
flexが効かない
均等に横並びに配置するために、下記のようにコードを書いたのですがflexが適用されません。もしこのコードをみて改善策がわかる方がいたら教えてください。
よろしくお願いします。
<nav class="global-nav_items">
<ul class="nav-list">
<li><...
0
票
1
回答
120
閲覧数
アコーディオンの開閉によって変わる高さをgsapに伝えたい
test1をスクロールに合わせて、画面内にでてきたらfadeInさせたいです。
ブラウザを読み込み、そのままスクロールするだけでしたら問題ないですが、
スクロールしたい要素の上にある.accordion-title 詳しくはこちら を開いた状態でスクロールすると、開閉により高さが変わり、test1がブラウザに出て来る前にfadein済みになってしまいます。
...
0
票
0
回答
82
閲覧数
レスポンシブ対応のドロップダウンメニューがうまく作れません。
コーディング初心者です。レスポンシブ対応のドロップダウンメニューがうまく作れません。
どこを直せば添付した画像の通りSP版PC版整ったかたちになるでしょうか?
$(function(){
// ハンバーガーメニュー
$("#drawer_toggle").click(function(){
$(this).toggleClass("...
0
票
0
回答
87
閲覧数
prismjsで、コードを行ごとに交互色で表示したい
prismjsで、コードを行ごとに交互色で表示したい。
試したこと
・オプションを見たのですが、見つかりませんでした。
・prismjs実行後のhtmlソースコードを見たのですが、(少なくとも見た目上は行単位ではなく)<code><span></span><span></span><span></span><...
0
票
0
回答
77
閲覧数
JavaScriptでこのLoader作れますか?
Willstyle.co.jpのヘッダーの要素を塗りつぶすローダーの作り方をご存じの方は教えてください。
自分が考えるに登録された要素に操作をかけているのだと思うのですが()
0
票
0
回答
97
閲覧数
リキッドレイアウトにする際remでのレイアウト
初めて質問させていただきます。
コーディングの勉強をしています。まだ2か月ちょっとしか勉強もしておらず、見当違いな質問になってしまうかもしれませんが教えていただけると嬉しいです。
リキッドレイアウトを作成中です。これまでvwで作成していましたが初めてremでのコーディングにトライしています。htmlで以下のコードを指定していれば、...
0
票
0
回答
54
閲覧数
ログインフォームの自動補完を選択後の自動遷移について
ログインフォームの自動補完を選択すると自動遷移する現象があるのですが
クライアントから自動補完は残していいのですが自動遷移を止めて欲しいと希望があるのですが
どのようにHTML,CSS、JSなどで対策できますか?
現在は、Wordpressにて利用しているのでいいアイディアや参考になるサイトなどがあればご教授いただければ幸いです。
OSレベルの問題かと思っているのですが、、、
0
票
1
回答
370
閲覧数
table内のborderの太さがバラバラになるバグ
Laravel, Bootstrapを使用してwebサイトの画面を作成しています。
table内のborder(罫線)の太さが画面サイズを変更するとバラバラになってしまうブラウザ側のバグがあるようです。ブラウザの問題なのですが、この現象が起きないよう対応してほしいという要望があり苦戦しております。
100%以外の拡大/縮小で不規則に発生します。 Google Chrome, Microsoft ...
0
票
1
回答
1,270
閲覧数
CSS Modulesの'composes'がVSCodeにてUnknown propertyと表示され有効化されない
とある教材でWebサイト構築を勉強中なのですが
表題の通り'composes'を記述しても
「Unknown property: 'composes'css(unknownProperties)」と表示されてしまいます。
教材の完成版のコードを読み込んでも同じエラーが出るので
VSCode上の設定に問題があるのかなとは考えております。
海外のサイトで検索してみても'composes'...
0
票
0
回答
67
閲覧数
Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい
現状
・Chromeで任意URLを閲覧
・右クリック後検証ページ開いた後、新規CSSルール追加
html{font-size:0.1em!important;}
やりたいこと
・毎回追加するCSSルールが同じなので、もっと簡単に(閲覧時のみ適用される)CSSルールを追加したい
その他
・元のソースコード自体には、変更を加えない前提です
・任意のURLに対してこちらの任意のタイミングで、...
0
票
0
回答
179
閲覧数
リンクのアドレスを取得したい
拡張機能を作成しようとしています。
リンクを右クリックし、コンテキストメニューに追加した新しい項目をクリックしたときに、リンクのアドレスを取得したいです。
現時点では、右クリックをしたらコンテキストメニューに項目が追加されるようにはなっているのですが、クリックしたリンクのアドレスを取得する方法が分かりません。わかる方いらしましたら、お手数をおかけしますがよろしくお願いします。
現時点でのコードです↓...
0
票
2
回答
324
閲覧数
タブの中のボタンを横並びにしたい
タブの中にあるボタンを横並びにして見やすくしたいです
flexとか、display: inline-blockとかやってみたのですができません
ちなみに、余白はバラバラですが大丈夫です
具体的にどうしたらよいのかを教えていただきたいです
html
<!DOCTYPE html>
<html>
<head>
<meta charset="...
0
票
1
回答
130
閲覧数
インデックス風のタブメニューを作りたい
小学生のタブのところに社会も入れたいのですが、入りません
あと、中学生と高校生の所に理科が入ってしまっています
これをどうにかしたいです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" ...
0
票
1
回答
451
閲覧数
アコーディオンメニューが意図した通り動作しない
ボタンを押すとアコーディオンメニューが開くようにプログラムを組んだつもりなのですが、うまく動きません。
.menu {
max-width: 600px;
}
.menu a {
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
label {
...
0
票
0
回答
63
閲覧数
LP作成の効率的な方法が分からない
LPの制作方法がもっと効率的にならないか迷走し始めたため質問いたしました。
■前提
私は現在LPを基本的なコーディングで作成しております。
そのためコーディングのみでLP作成をする際に、
何か別の方法(ツール)を使ったほうが効率的ではないかと考えました。
一例で恐縮ですが、今回の質問では下記のLPを作成した場合でご回答お願いいたします。
https://service.ourly.jp/
■...
0
票
1
回答
208
閲覧数
sassを使いたいのですが、CSSファイルが自動生成されたりしません。
ワードプレスでサイトの制作をしています。
VSCでサイトを作成する場合、sassのファイルを制作すれば、
自動的にcssのファイルが制作されますが、
FileZillaではsassを作っても自動的にcssファイルが出来たりしません。
今までは、VSCでsassファイルを作り、
それで自動生成されたCSSファイルの内容をFileZillaに作ったCSSファイルにコピーしていたのですが、それでは、...
0
票
1
回答
164
閲覧数
Twitter の「検索結果に対応するツイート一覧」を React に埋め込む方法
お世話になります。
Twitter の検索結果に対応するツイート一覧を、できるだけ快適に React に埋め込みたいと思っているのですが、良い方法をご存じの方はいらっしゃいますでしょうか?
動作のイメージとしては、Twitter で hoge と検索した場合に、 https://twitter.com/search?q=hoge に対応する検索結果が描画されることを期待しています。
...
0
票
0
回答
328
閲覧数
親要素にTransformを指定した場合の画面固定について
ウェブサイトの制作初心者、初質問です。
ページのヘッダーを画面の先頭にposition:fixedで固定していたのですが、
サイトがスマホのみのレイアウトのためpcでみた時は少し大きく表示したいとのオーダーがあり、
zoomプロパティはfirefoxで使えないためhtml要素にtransform:scale();を使って画面幅が768px以上の時は1.25倍で表示するようにしました。
@media ...
0
票
0
回答
1,089
閲覧数
ハンバーガーメニューを開いている最中bodyはスクロールしない設定にしていたが、メニュー内のドロップダウンを開いた時メニュー内だけでなくbodyもスクロールしてしまいます
html、cssがすこし触れる程度でjavascriptは主にコピペで使用している初心者です。
スマホでハンバーガーメニューを作成した際、
メニューを全画面で開いた時に隠れているbody全体はスクロールしないようjQueryで設定していましたが、
メニューの中身がドロップダウンで開くようになるとbodyのスクロールが復活してしまいました。
...
0
票
1
回答
94
閲覧数
height: auto;で設定した範囲が、中途半端なところで途切れます。
画像のように height: auto; がすべての範囲に届きません。
今はタブレット用のデザインを作成しています。
下記コードになります。
<section class="section-article">
<div class="article">
<div class="article-...
0
票
0
回答
285
閲覧数
ピクセルパーフェクトの正しいやり方がわかりません。
ウェブデザイナー(コーディングもできる)を目指しています。
ピクセルパーフェクトが重要だと聞き、やり方を調べると、
XDやフォトショップの見本のデザインをスクショで撮り、拡張機能のパーフェクトピクセル、で当てはめて調節するやり方と、
XDやフォトショップの数値通りにデザインするだけでもピクセルパーフェクトというようだとわかりました。
どっちがほんとうのピクセルパーフェクトのやり方なのでしょうか?
...
0
票
1
回答
191
閲覧数
WordPressプラグインの「CustomFieldSuite」に挿入した値をパーマリンクに設定したい
WordPressプラグインの「CustomFieldSuite」を使用したサイトを構築しています。
カスタム投稿はCPTUIを使用し「merchandise」としていまして
そこにCFSを適用して、「num」というフィールドを作成したのですが、そのnumフィールドに設定した値をスラッグにしたいのです。
例)https://xxx.com/merchandise/numの値
...
0
票
1
回答
107
閲覧数
javascriptでフェードインさせたい
目標
htmlの74~87行の部分をスクロールして見えてきた時にフェードインさせることです。
・Our Serviceが下に
・image/black.png が上に
・image/educure01.jp DXを推進するエンジニア育成
IT事業参入をご検討中の事業者様向けのサービスです。 が上に
faideinさせたいです。
問題点
一部設定してみました。...