[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
718 件の質問
0
票
2
回答
352
閲覧数
background-image プロパティで指定した CSS が反映されない
HTML,CSSの基本について学習しているのですが、background-imageプロパティを使用して画像を設置したいのですが、cssが反映されません。
ファイルパスの設置に問題あると思い、何度も参考書やYouTubeなどで調べてもやっても、反映されません。記述ミスはありません。
以下、実際に書いてるパスとコードです。(参考書に沿って進めてるファイル名)
絶対パスだと反映することができました。...
- 1
0
票
0
回答
59
閲覧数
横スクロール対応のテーブルのヘッダーをページ全体でスティッキー表示
横スクロール対応のテーブルのヘッダーをページ全体でスティッキー表示する方法を教えて下さい。
横スクロールのために設定したoverflow-x: autoが原因でヘッダーがページ全体でスティッキー表示されないです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=&...
0
票
0
回答
97
閲覧数
iOS 15 Safari で背景の線の間隔が崩れる問題（linear-gradient 使用）
状況
現在、background-image: linear-gradient を使用して、テキスト全体に等間隔の水平線を引くレイアウトを実装しています。
しかし、iOS 15 の Safari でのみ線の間隔が崩れる現象が発生しています。
問題の現象
iOS 15 の Safari でのみ、等間隔の線が崩れてしまう
他のブラウザ（Chrome, Edge, Firefox, 最新の ...
- 1
-1
票
1
回答
359
閲覧数
HTML＆CSS メディアクエリ
質問文に挙げたHTML＆CSSで記述された物は、課題のメディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるはクリアしているのでしょうか?教えて頂けると幸いです。
修正版htmlとcssは下記の通り。
/* PC用のデフォルトスタイル */
<!DOCTYPE html>
<html lang="ja&...
- 21
0
票
1
回答
249
閲覧数
HTML＆CSS メディアクエリについて。
メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?
出典元は「そろそろ常識？マンガでわかるHTML＆CSS (赤松公太郎 著)」の第6章、最後のページです。
メディアクエリに関するコードは以下になります。教えて頂けると幸いです。
respon.html
<!DOCTYPE ...
- 21
0
票
3
回答
222
閲覧数
デスクトップ用の背景画像を適用させたい
mediaの中にデスクトップ用の背景画像を指定しているのですが、反映されません。
画像のpathは合っていました。
<div class="sub-cover cover-news">
<header class="page-header wrapper">
<h1 ...
0
票
1
回答
94
閲覧数
GitHub PagesでCSSが反映されない
GitHub Pagesでwebサイトを作ったのですが、cssがどうしても反映されません。
要因と対策を教えてください。よろしくお願いします。
HTML側のコードはこれにしてあります
<link rel="stylesheet" href="https://kongou173.github.io/Coresync-bot/css/style.css" /...
- 1
1
票
1
回答
198
閲覧数
HTMLに埋め込んだGoogle Mapの上部に余白が生まれるのをなくしたい
ポートフォリオ用の架空のWebサイトを作成しています。
住所と埋め込んだGoogle Mapを横並びにしたいのですが、アクセス欄をdivで囲み display:inline を指定すると、添付した画像のように、地図が横には配置されますが上部に余白ができてしまいます。
画像内の矢印で示したように、Google Mapを「アクセス」に引いてある下線のすぐ下に持っていきたいのですが、...
- 11
0
票
1
回答
114
閲覧数
cssのpositionにstickyを設定したが、緑色のボックスが動かない
positionにstickyを選択したのですが、画像のRelative以下の緑色のボックスが動きません。
Google Chromeを使用しています。
div {
width: 100px;
height: 100px;
background-color: #3d405b;
border: 2px solid black;
margin: 10px;
...
- 1
0
票
2
回答
1,988
閲覧数
VSCode で「デバッグ開始」を実行してもブラウザが起動しない
VSCodeでHTMLの学習をしている際、デバック開始を押したらlaunch.jsonが出てきて
削除して再度デバック開始を押してもまた出てきます。
なんとかchromeで開く方法はありませんか？
下記のファイルが勝手に作られます。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// ...
user66789
0
票
1
回答
120
閲覧数
htmlのdivとtextのサイズについての質問です
初歩的な質問で恐縮ですが、div要素に囲われたtextなのですが、検証ツールで確認すると、サイズがdivは200x300なのに対して、textは381.36x536になりました。しかし見た目ではtextがdivの中に囲われています。
サイズがtextの方が大きいのにdivからはみ出さないのはなぜですか？
お手数をおかけしますが回答いただけますと幸いです。
以下コードです。
HTML
<...
- 1
1
票
1
回答
865
閲覧数
画像をクリックしたら表示されるモーダルウィンドウを実装したい
写真掲載サイトを作っています。
元々はクラス名に連番がついていないコードだったのですが、載せた写真全てに対してそれぞれ異なるモーダルウィンドウを表示させたかった
(写真１にはモーダルウィンドウ１、２には２・・・)ので連番を付与しました。
その結果、写真が一枚しかない状態ならば下記コードでも問題なく動くのですが、
画像が複数枚ある場合、２枚目以降はクリックしても反応しなくなってしまいました。
（追記....
- 13
0
票
1
回答
268
閲覧数
cssのdisplay:gridで文字がはみ出てしまう
「りんご」の文字がはみ出て変な位置に表示されてしまいます。
lineクラスのheight指定を消すと正しい位置に出力されるのですが、垂直線をboxの上から下まで引きたいので、height指定を消す事はできません。
垂直線を上から下まで表示し、りんごを正しい位置に表示するにはどうすれば良いでしょうか？
(grid layoutもそのまま使いたいです)
.container {
...
0
票
1
回答
383
閲覧数
HPに絞り込み検索結果数を表示したい。
jQuery初心者です。
下記のjQueryの検索機能（絞り込み検索）を自社サイトに��入しようとしています。
このスクリプトにコードを追加して、絞り込み表示件数を表示したいのですが、スクリプトの知識もなく、どうすれば良いのかわかりません。
ご教授いただけると大変助かります。何卒よろしくお願いします。
参考サイト：
https://www.atelier-sunko.info/entry/...
- 1
-1
票
1
回答
225
閲覧数
背景画像の上に要素を並べたい
header部分の背景画像の上に<h1>の要素と<ul>の要素を配置したいのですが、position:relative;をbg-imgに適用し、position:absolute;を背景画像上に置きたい<h1>や<ul>要素に適用したのですが反映されません。どうしたら良いでしょうか？下記がheader部分のHTMLとCSSのコードです。...
- 15