[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
669
質問
0
票
0
回答
28
閲覧数
GitHub Pages で CSS がうまく反映されない [重複]
GitHub Pages を用いて作成したHPをアップロードしようとしましたが、CSSだけがうまく反映されませんでした。
調べてみたらcssのパスを書き換える必要があるとわかり、他の方のコードとも見比べて色々試してみたのですが、どうしてもうまくいきません。申し訳ございませんが、どなたかご指導よろしくお願いします。
以下、コード
<!DOCTYPE html>
<html lang=...
1
票
2
回答
76
閲覧数
HTMLでVideoを画面中央に全体表示させたい。
例えば以下のようにCSSを書くと概ね望み通りの表示が行えるのですが、フルスクリーン(F11)表示をさせた際に、ビデオの位置がtop50%を受けたように画面の中央より下に表示されてしまいます。(スニペットを最大化後にフルスクリーンで確認出来ます。)
どのようにすれば問題を解決出来ますでしょうか。
video {
min-width: 100%;
min-height: 100vh;
...
0
票
1
回答
39
閲覧数
background-image が指定された div で、自動的に height を指定する方法を知りたい
やりたいこと
background-image, max-width が指定された div で、自動的に height を明示する方法を知りたい。
max-width を超える場合は、 max-width まで縮小したい。
できれば css だけで実現したい。
前提条件
画像のサイズは不定で、小さいこともあれば大きいこともある。
div の max-width は 400px を指定。
...
0
票
1
回答
40
閲覧数
縦長画像を含むWebページを印刷すると、画像が2ページ目に出力されてしまう。
以下のHTMLを印刷すると、.test-2(ピンク部分)は1ページ目に出力されますが、
.test-3(パープル部分)の画像は2ページ目に出力されてしまいます。
1枚目の画像(ブラウザでの表示)のように、1ページ目の.test-2(ピンク部分)の直下に、
.test-3(パープル部分)の画像をくっつけて出力したいです。
CSS の記述方法を教えていただけないでしょうか。
※ ...
0
票
1
回答
59
閲覧数
JSで日付によって画像の角度を変える
ホロスコープ作成サイトを作っています。
jsを使って現在の日付けを取得し、その日付に応じて画像の角度を変更したいのですが、初心者のため、試行錯誤もできていません。具体性がなく非常に答えにくいとは思うのですが方法を教えてください。
0
票
1
回答
43
閲覧数
Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか?
実現したいこと
Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。
キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、...
0
票
0
回答
35
閲覧数
リキッドレイアウトにする際remでのレイアウト
初めて質問させていただきます。
コーディングの勉強をしています。まだ2か月ちょっとしか勉強もしておらず、見当違いな質問になってしまうかもしれませんが教えていただけると嬉しいです。
リキッドレイアウトを作成中です。これまでvwで作成していましたが初めてremでのコーディングにトライしています。htmlで以下のコードを指定していれば、...
0
票
0
回答
34
閲覧数
ログインフォームの自動補完を選択後の自動遷移について
ログインフォームの自動補完を選択すると自動遷移する現象があるのですが
クライアントから自動補完は残していいのですが自動遷移を止めて欲しいと希望があるのですが
どのようにHTML,CSS、JSなどで対策できますか?
現在は、Wordpressにて利用しているのでいいアイディアや参考になるサイトなどがあればご教授いただければ幸いです。
OSレベルの問題かと思っているのですが、、、
1
票
1
回答
73
閲覧数
GitHub PagesでCSSが反映されない
VSCodeで書いたコードを使ってGitHubで自作HPを公開しようとしています。
コードはHTMLとCSSのみ。CSSが反映されずに困っています。
VSCodeのプレビューでは問題なく反映されているのですが、原因がわかりません。
試したこと
1. <link rel="stylesheet" href="css/home.css"> を
<...
0
票
1
回答
127
閲覧数
table内のborderの太さがバラバラになるバグ
Laravel, Bootstrapを使用してwebサイトの画面を作成しています。
table内のborder(罫線)の太さが画面サイズを変更するとバラバラになってしまうブラウザ側のバグがあるようです。ブラウザの問題なのですが、この現象が起きないよう対応してほしいという要望があり苦戦しております。
100%以外の拡大/縮小で不規則に発生します。 Google Chrome, Microsoft ...
0
票
0
回答
87
閲覧数
作成した web ページを iPhone で開くと固まってしまう
主にHTMLとCSSで作ったウェブサイトを公開しようとしているところです。パソコンだと正常に動くのに対して、iPhoneで確認しようとすると、固まって内容が見られなくなります。下記は作ったウェブサイトの1つのページのコードですが、どうでしょうか?ウェブページが重くてモバイルで上手く動きませんか?
<!DOCTYPE html>
<html lang="ja">
&...
-3
票
1
回答
493
閲覧数
テキスト画面をコピーしてHTMLで表示したい [クローズ済み]
Linuxでコンソールアプリを実行した画面をコピーしてHTMLで表示したところ、綺麗に表示されません。
どうすれば綺麗に表示できるのでしょうか?
再現手順
Ubuntu20.04で以下のコードを実行して出てきた画面を、gnome-terminalの「HTMLとしてコピー」を使ってhtmlファイルとして保存します。
テキストアプリ(bash)
selected=$(
for i in `...
1
票
1
回答
95
閲覧数
ブラウザゲーム上で自作のドット絵フォントを表示する方法
HTML、CSS、JavaScript でドット絵のゲームを作ろうとしているのですが、相手のPCにないフォントを表示する方法がわかりません。ライブラリはp5.jsを使っていて、他にライブラリを使う予定はないです。
1
票
1
回答
190
閲覧数
max-height がきかない
外側に大きさの決まってるブロック要素が合って
その中に bootstrap の card を配置して
中に大きなコンテンツがあっても card 内でスクロールしたいです
以下のように max-height 100% を内側に順に指定していったのですが
card-body のところで max-height がきかずにはみ出してしまいます
container の max-height を ...
0
票
2
回答
175
閲覧数
Web開発のポートフォリオ作成手順と学習内容について
プログラミング初心者です。現在、HTML,CSS,Pythonを学習中で、同時にポートフォリオ作成を進めようと考えています。Webアプリを作成するときには、
フロントエンドでHTML,CSS,Javascript
バックエンドでPython
そして、SQLとAWSを学ぶ必要があると調べた結果わかりました。
しかし、ポートフォリオを作成するさいに、SQLやAWSの知識はどこで必要になるのでしょうか?
...
0
票
2
回答
116
閲覧数
Htmlでinputタグから受けとった値の処理の方法を教えてください。
プログラミング初心者です。HTMLでinputタグでワードを受け取り、その結果をもとにおすすめの映画を紹介するというサービスを考えています。HTMLでinputタグから入力フォームは作成したのですが、ここからどのように進めればいいかわかりません。
web開発の手順では、HTML・CSSを作成してからPythonなどのバックエンドの作り方を紹介されていますが、このような仕組みの場合、...
1
票
2
回答
115
閲覧数
あるセレクタの直下かつ先頭というCSSセレクタはありますか?
こちらのspanには適用させず、
<div>テキスト<span>テスト1</span>テキスト<div>
こちらのspanには適用できるセレクタを探しています。
<div><span>テスト2</span>テキスト<div>
divの直下かつ先頭(テキストを除く)という擬似クラス等はないのでしょうか。...
0
票
1
回答
85
閲覧数
inview.jsでスクロールした際に文字を浮かび上がらせたい
実現したいこと
こちらのサイトを参考にスクロールしたときに文字を浮かび上がらせたいです。
「1.【サンプル】フェードイン(ふわっと)」をまねしたいです。
現状は表示させたい文字が現れません。
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
解説をいただきたい部分
①なぜ最初に$(なのか
②...
0
票
1
回答
59
閲覧数
iPhone での表示時、ul の左側に変な空白ができてしまう
現在作成中のサイトで、トップのメニューバーがおかしくなってしまいます。
PCで見るときはいいのですが、スマホ(iPhone SE)で見ると ul タグの左側 (li タグの左側?)に空白が入ってしまいます。
どのCSSが原因なのかChromeのDevToolsでいくつかCSSを消してみたのですが、どれを消してみても空白が消えません。どうすれば消えますか?
...
0
票
0
回答
47
閲覧数
Webカメラの顔フレームをブラウザの画面サイズに関係なく表示するには
ReactでWebアプリを作成中の者です。
画面上に表示されたWebカメラに顔のフレームを追加しようとしています。ですので以下のような顔の部分だけ透明化させた画像を使ってそれを実装しようと試みました。
このフレームの画像は16:9の比率で作っていますのでlocalhostを走らせているブラウザがフルスクリーンの時は問題ありません。ちなみにcssでopacity: 0....
1
票
1
回答
136
閲覧数
inputタグにてplaceholderの文字サイズを小さくした時の、Chromeの挙動がおかしい
背景
inputタグのplaceholder文字サイズを、通常の入力文字サイズより小さくしたかった。
そこで、以下のようなcssを適用した。
input {
max-height: 40px;
padding: 8px;
font-size: 32px;
}
input::placeholder {
font-size: 16px;
}
...
0
票
1
回答
512
閲覧数
CSS Modulesの'composes'がVSCodeにてUnknown propertyと表示され有効化されない
とある教材でWebサイト構築を勉強中なのですが
表題の通り'composes'を記述しても
「Unknown property: 'composes'css(unknownProperties)」と表示されてしまいます。
教材の完成版のコードを読み込んでも同じエラーが出るので
VSCode上の設定に問題があるのかなとは考えております。
海外のサイトで検索してみても'composes'...
-1
票
1
回答
152
閲覧数
スマホ時に 横幅いっぱいにならず、困っています。
https://y-sasakik.github.io/web/web3/
上のサイトでスマホ時に横幅いっぱいにならず、困っています。
どこを変えれば直りますか?
ソースは検証ツールまたは GitHub のリポジトリを参照してください。
https://github.com/y-sasakik/web/tree/main/web3
(追記)
...
0
票
1
回答
124
閲覧数
CSSで ul を flex から block に書き換えたが、Chromeのモバイル表示で縦並びにならない
初心者で質問の要領も得ません。助けていただけたらありがたいです。
まず、HTMLでメニュー設定、次にCSSでメニューを横並びにする、さらに、モバイル用(幅が800px以下の場合)にはメニューを縦並びにする、ということをやりたい。
Chromeの「検証」のモバイル表示では字が小さくなって横並びのままです。しかし、普通の表示でウインドウを800px以下に縮めたら、縦に見えます。何がおかしいのでしょうか?...
1
票
2
回答
278
閲覧数
CSSで日本語の文字のみ別のフォントにしたい
Chromeではデフォルトのフォントがメイリオになってるのですが、メイリオは日本語は斜体が存在しないためemタグで囲んでも斜体になりません。
日本語の時のみ別のフォントに変更したいと思うのですが、通常のCSSでは単純にどのフォントを優先するかしか指定できないようです。
ただ、もし英数などは存在せず日本語だけ存在するフォントがあれば、...
0
票
1
回答
51
閲覧数
colgroupにborderが反映されない
背景色は適用できるのですが、borderが反映されません。
MDNのborderのページ には適用対象はすべての要素となっているのですが、なぜなのでしょうか?
環境
Chrome (103)、Firefox (103)
HTML
<table>
<caption>テーブルの練習</caption>
<colgroup span="4&...
0
票
0
回答
24
閲覧数
reactのアニメーションするコンポーネントの進行度を同じにしたい
eactでtimerコンポーネントの実装をしています。
+でtimerコンポーネントが1つ増え-ボタンでtimerコンポーネントを1つ減る物と作っています
したい事
+で増やしたtimerコンポーネントを増やす前に動いているアニメーションと同じ進行度にしたい
現在の問題
増やした時にタイマーの進行度が0から始まってしまう
App.tsx
import { useState } from &...
0
票
0
回答
212
閲覧数
Vue3にて、propsでtailwindのclassを動的に指定したい。
Vue3とTailwindCSSを使って、コンポーネントとして、ボタンのカラーを動的に指定したいです。
以下の記事を参考に、付与するクラス名の一部にdataを用いる方法で試しました。
【JS】Vueの:classの書き方3通り
CSSとしては渡ってきたカラー名が入っているのですが、うまく表示に反映されないです。
<HomeButton color="blue" /&...
0
票
0
回答
144
閲覧数
javascriptが効いてないように思います。どこが原因ですか? ハンバーガーメニューを動かしたい。
最終的には、ハンバーガーメニューを交差させてメニュー表示させたいのですが、うまくいきません。
CSSの該当部分はとりあえず、簡易的に背景を青にするだけになってます。
うまくjavascriptが動いていれば、ハンバーガーメニューは青に変化するはずですが、変化すらしないので困っています。
$('.hamburger').on('click', function() {
$('....
0
票
0
回答
76
閲覧数
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
票
3
回答
363
閲覧数
javascriptで同じ処理をまとめる方法
javascriptで同じ処理をまとめるにはどのようにすればいいでしょうか。
const but = document.getElementById("but");
const trend = document.getElementById("trend");
but.addEventListener("click", function ...
4
票
1
回答
144
閲覧数
使われていないCSS指定を自動で検出するには?
困りごと
php や html や css を書いて作業をしていたときのことです.
html の中で,レイアウトを変えようと思って,<div class="hoge"></div> を table に変更しました.
それに伴って CSS の中での
div.hoge {
text-align: center;
}
というような指定は不要になるわけです....
1
票
1
回答
71
閲覧数
レスポンシブ画面にしたときに要素を間に入れる方法
左のPCサイズの画面を右のスマホサイズにしたときに、緑色の要素を赤と青の間に入れたいです。
やり方を教えてください。ちなみにまだコードはありません。
1
票
1
回答
83
閲覧数
Bootstrap Icons の Code Point とは何か?
問題の要約
Bootstrap Icons のページからアイコンの情報を見ると,次のような画面が表示されます.
Code point とは何のことでしょうか?
Unicode や CSS や JS, HTML などと書かれていますが,これをそのまま書いても当然ながら反映されるわけではありません.
どのような使い方を想定したものなのでしょうか?
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
回答
104
閲覧数
reactでinstagramの投稿機能のような画像の座標に対してタグを作成する方法を教えてください。
reactでsnsアプリを作成しています。
投稿の際に画像をクリックして、その座標にタグ作成フォームを表示させたいのですが、その方法がわかりません。
ご教授お願いいたします。
また、参考の記事や検索ワードがありましたら教えてください。
投稿ページの参考画像(インスタグラム)を添付します。
0
票
2
回答
102
閲覧数
addEventListenerにより発生したcontextmenuが一度目の右クリックで表示されない
実現したいこと
下記ソースコードは、それぞれJavascript,css,HTMLとなっています。
このHTML内のid属性のcontextmenu1とcontextmenu2を右クリック表示させたいです。
contextmenu1は class="japan" 上で右クリックした際に、contextmenu2 はそれ以外の場所(id="menu"内)...
0
票
0
回答
66
閲覧数
リンクのアドレスを取得したい
拡張機能を作成しようとしています。
リンクを右クリックし、コンテキストメニューに追加した新しい項目をクリックしたときに、リンクのアドレスを取得したいです。
現時点では、右クリックをしたらコンテキストメニューに項目が追加されるようにはなっているのですが、クリックしたリンクのアドレスを取得する方法が分かりません。わかる方いらしましたら、お手数をおかけしますがよろしくお願いします。
現時点でのコードです↓...
1
票
1
回答
169
閲覧数
inline-blockの要素を縦幅いっぱいに広げたい
現在ちょっとしたプロトタイプを作成しておりヘッダー部分を作っていたのですが、要素にhoverしたときに縦幅いっぱいに広がってほしいinline-blockの要素がうまく機能せずに、行き詰まっています。
例えば「要素1」の部分にhoverすると以下のような結果になり、
ご覧の通り上のborder-top:3px dotted red;の一番上までホバーしたときの色が変わらずに、...
0
票
2
回答
166
閲覧数
画像のような矢印をCSSだけで表示する方法
CSSでこのような矢印を作成するには、縦棒のCSSと斜めの棒を足すようなCSSを書けばできるのでしょうか?
1
票
1
回答
124
閲覧数
position:fixed の上でスクロールさせたい
以下のように、それぞれスクロール可能な2カラムの構成の時、中央のピンクの部分のものを配置したいのですが、その上だけマウスでスクロールできなくなってしまいます。
黄色の上なら黄色、水色の上なら水色をスクロール、難しければ、水色をスクロールさせたいです。JavaScript を使わずに何か対策はありますか?
https://codepen.io/23gv4u23v5u2/pen/PoQavVm
...
0
票
0
回答
67
閲覧数
ansi art を htmlに表示したい
このサイトの一番下にANSI art をHTMLで出力しているのを見つけました。
https://int10h.org/oldschool-pc-fonts/
ダウンロードをしてソースコードを見てみると、どうやら自動化させてように思えました。
自分も自分で描いたANSIartをhtmlに出力したいのですが、どのようなソフトでどのようにすれば出来ますか?
0
票
1
回答
130
閲覧数
検証ツールで選択した場所のコードの位置をsassで確認する方法
ワードプレスでホームページの作成をしています。
初心者です。
マルチポストです。
リンク
検証ツールで選択した部分が、style.css:2と記入されます。
これは、ワードプレスのプラグインの、
WP-SCSSを使用しています、そして、これでsassをcssに直すと、
2行目に一列にずっとコードが並んでいるようになるからなのですが。
これをstyle.css:2ではなく、sassのファイルで、...
0
票
2
回答
198
閲覧数
タブの中のボタンを横並びにしたい
タブの中にあるボタンを横並びにして見やすくしたいです
flexとか、display: inline-blockとかやってみたのですができません
ちなみに、余白はバラバラですが大丈夫です
具体的にどうしたらよいのかを教えていただきたいです
html
<!DOCTYPE html>
<html>
<head>
<meta charset="...
0
票
0
回答
97
閲覧数
Reactでスワイプしたら下から飛び出るフォームをtouchendとclickで作成したい
JavaScriptにあるtouchstart, touchmove, touchendを使用してスワイプしたら下から表示される下記のようなフォームを作成しました。下から上にスワイプすると出現する。そこに追加でグレーの横棒がButtonタグになっていてクリックでも開閉をしたいのですが、touchendの処理タイミングが被るのか、上手く現在のフォームの状態を持つ事が出来ないです。
どなたか詳しい方、...
0
票
1
回答
103
閲覧数
インデックス風のタブメニューを作りたい
小学生のタブのところに社会も入れたいのですが、入りません
あと、中学生と高校生の所に理科が入ってしまっています
これをどうにかしたいです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" ...
0
票
1
回答
210
閲覧数
アコーディオンメニューが意図した通り動作しない
ボタンを押すとアコーディオンメニューが開くようにプログラムを組んだつもりなのですが、うまく動きません。
.menu {
max-width: 600px;
}
.menu a {
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
label {
...
0
票
0
回答
64
閲覧数
表形式でチェックボックスか文字をタップすれば、抹線を引かれる、文字の色が変わるようにしたい
画像添付のリストで文字かチェックボックスをタップすれば、文字の色がグレーになり、抹線が引かれるような仕組みにしたいです。
どのようにCSS、またはスクリプトコードを記載すれば良いかご教示頂ければと存じます。
ちなみに、表形式にする以前は、idとforでチェックボックスと、ラベルを紐つけすることで文字タップすれば文字の色がグレーになり、抹線が引かれるような仕組みにできて、...
0
票
1
回答
554
閲覧数
HTMLのインライン修飾機能:elements.style
2つの画像を参照してください。
Aをお手本にしてb要素を付け加えたいのですが、Bのようにうまいこといきません。
どのようにすればb要素を追加することができるのでしょうか。
A
[![画像の説明をここに入力][1]][1]
B
[![画像の説明をここに入力][2]][2]
画像を追加します。
[![画像の説明をここに入力][3]][3]
...