[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
93
未回答やベストアンサーなし質問
5
票
0
回答
142
閲覧数
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
回答
613
閲覧数
MonacaでボタンなどのコントロールのCSS変更
現在MonacaのボタンなどのコントロールのCSSを変更したいとおもっているのですが、反映されません。
jquery mobileをプロジェクトに追加前はCSSを変更できたのですが。
コードは以下のようになっています。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<...
3
票
0
回答
255
閲覧数
Masonryを使って画像を一覧表示すると左右にスペースができてしまう
Masonryを使用し画像を一覧表示しています。ヘッダーのサイズに合わせて画像を一覧表示させたいのですが、画像のように両サイドが余ってしまいます。
どのようにすればヘッダーにぴったり合わせることができるでしょうか
cssだけであればぴったり表示されるのですが、masonry.jsを入れるとスペースができます。
読み込みの瞬間は正しく表示されます。(0.1秒くらいですが。。)
css
* {...
3
票
0
回答
346
閲覧数
Rails アプリのCSSが効かなくなります。
Rails4で作成したアプリをHerokuにデプロイすると、CSSが効かなくなります。
デプロイした時はCSSが効いていても、数時間後あるいは翌日にアクセスするとCSSが効かなくなっています。これはどういうことなのでしょうか?ずっとこのような事態が続いています。
また効かないといっても完全に効かないというわけではなさそうです(99.5%のCSSは効いていませんが)。キャッシュの問題なのですかね?...
2
票
4
回答
225
閲覧数
ボタンの中に斜めの線を入れたい
HTML, CSS初心者です。
添付の画像のように、斜め線が入ったボタンの実装をしようと思い、
実装サンプル集を参考に色々試行錯誤しましたが、斜め線をボタンの中に組み込む実装がうまくできませんでした。
cssサンプルをご提示いただけないでしょうか?
よろしくお願いいたします。
2
票
0
回答
173
閲覧数
BEMのmodifierについて
以下のような、レイアウトが共通の色違い要素があったとします。(白黒白黒と続く想定)
<div class="Block">
<div class="Block__element">白</div>
<div class="Block__element">黒</div>
<div class="Block__element"...
2
票
0
回答
1,187
閲覧数
iOS11のtextareaでキャレットがズレるのをCSSだけで修正したい
iOS11のWebkitブラウザにおいて、モーダルウィンドウ内に配置した
textareaのタップ時にキャレットの位置がずれる問題を修正したいと思っています。
下記1の対策は画面構成の事情で見送り、2の対策はエラー発生前から実装済みのため、
CSSで何とか解決できないかと模索しています。
親要素の position: fixed を position: absolute に変更すると直る説
...
2
票
0
回答
201
閲覧数
translate3d transition 終了時onメソッドについて
// 左にあるサムネイル4も左にスライドさせる
$('#slider_thumbnail_4').css({
'transform': 'translate3d(-204%, 0, 0)',
'transition-duration': '0.5s'
}).on('transitionend', function() {// transition終了時処理
$('#...
2
票
0
回答
231
閲覧数
pushPage後のcss変更タイミングを早めるには?
「Onsen UI最小限のテンプレート」を元に、2ページ間を前後に行き来するアプリを作りました。
それぞれのページに異なる画像を1枚ずつ貼り付けていて、page1.htmlのons-buttonのクリックでpage2.htmlに遷移した際に画像を50%に縮小して表示させたいのですが、私が書いたコードでは一旦100%サイズで表示してから一瞬遅れて50%で再描画されます。
pushPage後、...
2
票
0
回答
926
閲覧数
Chromeで印刷したとき、Tableの行高さがおかしくなる
Tableタグで構成された表をChromeで印刷すると、tdの高さがランダムに倍になってしまいます。
<table>
<tr>
<td>名前</td>
<td>住所</td>
<td>電話番号</td>
</tr>
</...
1
票
1
回答
97
閲覧数
ブラウザゲーム上で自作のドット絵フォントを表示する方法
HTML、CSS、JavaScript でドット絵のゲームを作ろうとしているのですが、相手のPCにないフォントを表示する方法がわかりません。ライブラリはp5.jsを使っていて、他にライブラリを使う予定はないです。
1
票
0
回答
2,559
閲覧数
iPhoneでのバウンススクロールを無効にするには
Ruby on Railsの練習でTwitterのようなサイトを作っているのですが、バウンズスクロールを無効にする方法がどうしてもわかりません。
MacOS(Chrome等)ではバウンズスクロールを無効化出来たのですが、iPhoneでのバウンズスクロールがどうしても出来ません。
html, body {
overflow: hidden;
}
で個別の要素にheight: 100%; ...
1
票
0
回答
189
閲覧数
electronで作成したPDFにCSSが適用されない
electronのWebContents.printToPdfのAPIを使って、バックグラウンドで非表示中のページをレンダリング後にPDF化したいです。
Angular2を使ってページを整形しているため、ngAfterViewInitのlifeCycleの後にPDF化を行おうとしたのですが、
PDF化したところ、一部のテキストがレンダリングされない状態でPDFが出力されてしまいました。
(...
1
票
1
回答
202
閲覧数
FooTableの利用について
現在スマホ用の画面構築で、テーブルを可変にする為に
FooTableを利用しようとしています。
以下のサイトを参考にしてます。
http://www.webantena.net/javascriptjquery/plugin-footable/
ところが、肝心のソースが手に入りません。
というのも、ここに限らずどのサイトでも最終的にGithubから
ダウンロードするように誘導されますが、...
1
票
0
回答
535
閲覧数
HTML5 + Bootstrap + IE11 + Windows7にて、フォーカスを当てた時の挙動がおかしい
HTML5、Bootstrapにてページを作成しています。
IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。
1.枠線の影が消える
2.テキストフィールドの左上にグレーの影が表示される
この現象は下記の環境で発生しています。
・Windows7 Professional SP1(32bit)
・IE 11.0.9600.18537 (更新バージョン 11....
1
票
0
回答
219
閲覧数
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
回答
443
閲覧数
MaterializeCSSを使用した場合にRailsのSelectボックスが動作しない
現在、以下の環境で開発を行っています。
Ruby:2.3.1
Rails:5.0.0
MaterializeCSSを使用しているのですが、Selectボックスがどうしても動かない状態です。表示はされるのですが、プルダウンできない状態になります。
調査すると、JavaScriptのコードを追加すれば解決するというものが多いのですが、JavaScriptのコードは追加済みで、...
0
票
0
回答
36
閲覧数
Firefoxで印刷プレビューするとレイアウトが崩れる
現象
以下のサンプル HTML について Firefox で印刷プレビュー(A4用紙)を表示すると、以下の問題が発生しました。
div の背景に設定した縦長画像が分割されます(3ページ目の先頭)。
上記 div の上に配置している四角形の svg が表示されません。
知りたいこと
画像に分割されない方法(余白が入って分割されてしまう理由)。
svgが表示される方法(表示されない理由)。
...
0
票
1
回答
61
閲覧数
JSで日付によって画像の角度を変える
ホロスコープ作成サイトを作っています。
jsを使って現在の日付けを取得し、その日付に応じて画像の角度を変更したいのですが、初心者のため、試行錯誤もできていません。具体性がなく非常に答えにくいとは思うのですが方法を教えてください。
0
票
1
回答
43
閲覧数
Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?
実現したいこと
Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。
キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
0
票
0
回答
38
閲覧数
リキッドレイアウトにする際remでのレイアウト
初めて質問させていただきます。
コーディングの勉強をしています。まだ2か月ちょっとしか勉強もしておらず、見当違いな質問になってしまうかもしれませんが教えていただけると嬉しいです。
リキッドレイアウトを作成中です。これまでvwで作成していましたが初めてremでのコーディングにトライしています。htmlで以下のコードを指定していれば、...
0
票
0
回答
35
閲覧数
ログインフォームの自動補完を選択後の自動遷移について
ログインフォームの自動補完を選択すると自動遷移する現象があるのですが
クライアントから自動補完は残していいのですが自動遷移を止めて欲しいと希望があるのですが
どのようにHTML,CSS、JSなどで対策できますか?
現在は、Wordpressにて利用しているのでいいアイディアや参考になるサイトなどがあればご教授いただければ幸いです。
OSレベルの問題かと思っているのですが、、、
0
票
1
回答
133
閲覧数
table内のborderの太さがバラバラになるバグ
Laravel, Bootstrapを使用してwebサイトの画面を作成しています。
table内のborder(罫線)の太さが画面サイズを変更するとバラバラになってしまうブラウザ側のバグがあるようです。ブラウザの問題なのですが、この現象が起きないよう対応してほしいという要望があり苦戦しております。
100%以外の拡大/縮小で不規則に発生します。 Google Chrome, Microsoft ...
0
票
0
回答
88
閲覧数
作成した web ページを iPhone で開くと固まってしまう
主にHTMLとCSSで作ったウェブサイトを公開しようとしているところです。パソコンだと正常に動くのに対して、iPhoneで確認しようとすると、固まって内容が見られなくなります。下記は作ったウェブサイトの1つのページのコードですが、どうでしょうか?ウェブページが重くてモバイルで上手く動きませんか?
<!DOCTYPE html>
<html lang="ja">
&...
0
票
0
回答
54
閲覧数
Webカメラの顔フレームをブラウザの画面サイズに関係なく表示するには
ReactでWebアプリを作成中の者です。
画面上に表示されたWebカメラに顔のフレームを追加しようとしています。ですので以下のような顔の部分だけ透明化させた画像を使ってそれを実装しようと試みました。
このフレームの画像は16:9の比率で作っていますのでlocalhostを走らせているブラウザがフルスクリーンの時は問題ありません。ちなみにcssでopacity: 0....
0
票
1
回答
553
閲覧数
CSS Modulesの'composes'がVSCodeにてUnknown propertyと表示され有効化されない
とある教材でWebサイト構築を勉強中なのですが
表題の通り'composes'を記述しても
「Unknown property: 'composes'css(unknownProperties)」と表示されてしまいます。
教材の完成版のコードを読み込んでも同じエラーが出るので
VSCode上の設定に問題があるのかなとは考えております。
海外のサイトで検索してみても'composes'...
0
票
0
回答
24
閲覧数
reactのアニメーションするコンポーネントの進行度を同じにしたい
eactでtimerコンポーネントの実装をしています。
+でtimerコンポーネントが1つ増え-ボタンでtimerコンポーネントを1つ減る物と作っています
したい事
+で増やしたtimerコンポーネントを増やす前に動いているアニメーションと同じ進行度にしたい
現在の問題
増やした時にタイマーの進行度が0から始まってしまう
App.tsx
import { useState } from &...
0
票
0
回答
225
閲覧数
Vue3にて、propsでtailwindのclassを動的に指定したい。
Vue3とTailwindCSSを使って、コンポーネントとして、ボタンのカラーを動的に指定したいです。
以下の記事を参考に、付与するクラス名の一部にdataを用いる方法で試しました。
【JS】Vueの:classの書き方3通り
CSSとしては渡ってきたカラー名が入っているのですが、うまく表示に反映されないです。
<HomeButton color="blue" /&...
0
票
0
回答
148
閲覧数
javascriptが効いてないように思います。どこが原因ですか? ハンバーガーメニューを動かしたい。
最終的には、ハンバーガーメニューを交差させてメニュー表示させたいのですが、うまくいきません。
CSSの該当部分はとりあえず、簡易的に背景を青にするだけになってます。
うまくjavascriptが動いていれば、ハンバーガーメニューは青に変化するはずですが、変化すらしないので困っています。
$('.hamburger').on('click', function() {
$('....
0
票
0
回答
81
閲覧数
Safari iOS でth内の縦書きがうまく表示されない(向きが違う、縦文章にならない)
テーブル内に結合した行があり、その中に縦書きの文章を入れております。
Chromeなどで問題なく表示されますが、iPhoneで確認すると、文章が縦書きを90度回転させた表示になります。
spanで囲む、min-heightを持たせる、widthなども指定してみましたが、直りませんでした。
どなたか解決方法を教えていただければ幸いです。
https://codepen.io/toru_kwht/...
0
票
0
回答
38
閲覧数
コメントされたTVとmovieのscoreを降順にすべて表示するにはどのようにすればいいですか?
私たちが達成したいこと。
映画のスコア(星)を降順に表示したい。
現状
tmdb APIは、映画情報を取得するために使用されます。 そして、モデル映画とテレビはIDと星(スコア)しか持っていません。 ここから、星のあるものだけがhtmlに返されます。
私は質問をしたいこと
htmlでスコアを選択した場合、スコアの降順で表示するにはどうすればよいですか?
data = requests.get(f &...
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
回答
105
閲覧数
reactでinstagramの投稿機能のような画像の座標に対してタグを作成する方法を教えてください。
reactでsnsアプリを作成しています。
投稿の際に画像をクリックして、その座標にタグ作成フォームを表示させたいのですが、その方法がわかりません。
ご教授お願いいたします。
また、参考の記事や検索ワードがありましたら教えてください。
投稿ページの参考画像(インスタグラム)を添付します。
0
票
0
回答
68
閲覧数
リンクのアドレスを取得したい
拡張機能を作成しようとしています。
リンクを右クリックし、コンテキストメニューに追加した新しい項目をクリックしたときに、リンクのアドレスを取得したいです。
現時点では、右クリックをしたらコンテキストメニューに項目が追加されるようにはなっているのですが、クリックしたリンクのアドレスを取得する方法が分かりません。わかる方いらしましたら、お手数をおかけしますがよろしくお願いします。
現時点でのコードです↓...
0
票
0
回答
68
閲覧数
ansi art を htmlに表示したい
このサイトの一番下にANSI art をHTMLで出力しているのを見つけました。
https://int10h.org/oldschool-pc-fonts/
ダウンロードをしてソースコードを見てみると、どうやら自動化させてように思えました。
自分も自分で描いたANSIartをhtmlに出力したいのですが、どのようなソフトでどのようにすれば出来ますか?
0
票
2
回答
203
閲覧数
タブの中のボタンを横並びにしたい
タブの中にあるボタンを横並びにして見やすくしたいです
flexとか、display: inline-blockとかやってみたのですができません
ちなみに、余白はバラバラですが大丈夫です
具体的にどうしたらよいのかを教えていただきたいです
html
<!DOCTYPE html>
<html>
<head>
<meta charset="...
0
票
0
回答
102
閲覧数
Reactでスワイプしたら下から飛び出るフォームをtouchendとclickで作成したい
JavaScriptにあるtouchstart, touchmove, touchendを使用してスワイプしたら下から表示される下記のようなフォームを作成しました。下から上にスワイプすると出現する。そこに追加でグレーの横棒がButtonタグになっていてクリックでも開閉をしたいのですが、touchendの処理タイミングが被るのか、上手く現在のフォームの状態を持つ事が出来ないです。
どなたか詳しい方、...
0
票
1
回答
108
閲覧数
インデックス風のタブメニューを作りたい
小学生のタブのところに社会も入れたいのですが、入りません
あと、中学生と高校生の所に理科が入ってしまっています
これをどうにかしたいです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" ...
0
票
1
回答
219
閲覧数
アコーディオンメニューが意図した通り動作しない
ボタンを押すとアコーディオンメニューが開くようにプログラムを組んだつもりなのですが、うまく動きません。
.menu {
max-width: 600px;
}
.menu a {
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
label {
...
0
票
0
回答
64
閲覧数
表形式でチェックボックスか文字をタップすれば、抹線を引かれる、文字の色が変わるようにしたい
画像添付のリストで文字かチェックボックスをタップすれば、文字の色がグレーになり、抹線が引かれるような仕組みにしたいです。
どのようにCSS、またはスクリプトコードを記載すれば良いかご教示頂ければと存じます。
ちなみに、表形式にする以前は、idとforでチェックボックスと、ラベルを紐つけすることで文字タップすれば文字の色がグレーになり、抹線が引かれるような仕組みにできて、...
0
票
0
回答
43
閲覧数
tailwind cssのtypographyプラグインのような、文字の装飾のためのCSSライブラリってありますか?
tailwind cssのtypographyプラグインのような、ブログエディターとかで使われるような文字の装飾のためのCSSライブラリってありますか?
0
票
0
回答
113
閲覧数
react-scripts v5 が正しく機能しない
以前はCRA4を使用していましたが、CRA5にupdateしました。その時に問題となったのは、react-scripts4から5に変更したときです。5にして、react-scripts startをするとサイトは表示されますが、cssがぐちゃぐちゃになります。
antdを使用しているので、antdやcss周りのreact-scriptsのwebpackのcss-...
0
票
0
回答
62
閲覧数
LP作成の効率的な方法が分からない
LPの制作方法がもっと効率的にならないか迷走し始めたため質問いたしました。
■前提
私は現在LPを基本的なコーディングで作成しております。
そのためコーディングのみでLP作成をする際に、
何か別の方法(ツール)を使ったほうが効率的ではないかと考えました。
一例で恐縮ですが、今回の質問では下記のLPを作成した場合でご回答お願いいたします。
https://service.ourly.jp/
■...
0
票
1
回答
173
閲覧数
sassを使いたいのですが、CSSファイルが自動生成されたりしません。
ワードプレスでサイトの制作をしています。
VSCでサイトを作成する場合、sassのファイルを制作すれば、
自動的にcssのファイルが制作されますが、
FileZillaではsassを作っても自動的にcssファイルが出来たりしません。
今までは、VSCでsassファイルを作り、
それで自動生成されたCSSファイルの内容をFileZillaに作ったCSSファイルにコピーしていたのですが、それでは、...
0
票
1
回答
128
閲覧数
Twitter の「検索結果に対応するツイート一覧」を React に埋め込む方法
お世話になります。
Twitter の検索結果に対応するツイート一覧を、できるだけ快適に React に埋め込みたいと思っているのですが、良い方法をご存じの方はいらっしゃいますでしょうか?
動作のイメージとしては、Twitter で hoge と検索した場合に、 https://twitter.com/search?q=hoge に対応する検索結果が描画されることを期待しています。
...
0
票
0
回答
207
閲覧数
親要素にTransformを指定した場合の画面固定について
ウェブサイトの制作初心者、初質問です。
ページのヘッダーを画面の先頭にposition:fixedで固定していたのですが、
サイトがスマホのみのレイアウトのためpcでみた時は少し大きく表示したいとのオーダーがあり、
zoomプロパティはfirefoxで使えないためhtml要素にtransform:scale();を使って画面幅が768px以上の時は1.25倍で表示するようにしました。
@media ...
0
票
0
回答
833
閲覧数
ハンバーガーメニューを開いている最中bodyはスクロールしない設定にしていたが、メニュー内のドロップダウンを開いた時メニュー内だけでなくbodyもスクロールしてしまいます
html、cssがすこし触れる程度でjavascriptは主にコピペで使用している初心者です。
スマホでハンバーガーメニューを作成した際、
メニューを全画面で開いた時に隠れているbody全体はスクロールしないようjQueryで設定していましたが、
メニューの中身がドロップダウンで開くようになるとbodyのスクロールが復活してしまいました。
...
0
票
1
回答
70
閲覧数
height: auto;で設定した範囲が、中途半端なところで途切れます。
画像のように height: auto; がすべての範囲に届きません。
今はタブレット用のデザインを作成しています。
下記コードになります。
<section class="section-article">
<div class="article">
<div class="article-...