[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
557
質問
0
票
0回答
35 件の閲覧数
【スクロールすると「ふわっと」スクロールするアニメーション】の実装ができません
質問内容/困っていること
<こちらでもマルチポストさせていただいております>
https://teratail.com/questions/317212
LPを制作しており『スクロールすると「ふわっと」スクロールするアニメーション』を実装しようとしましたが、稼働しません。
発生している問題・エラーメッセージ
⇒グーグルクロームの検証ツールにてConsoleを確認しましたが ...
0
票
0回答
33 件の閲覧数
bracketsでjqueryによるbgSwitcherプラグインを使用したいのですが、うまく適用できません
表題の件について、モニターの最上部にてフルスクリーンでの複数画像のスライドを行いたいのですが、
jsの読み込みが原因なのか、複数画像の相対パスの表示方法が違うのか、うまくできない状況です。
以下に、うまく表示されない原因ではないかと思われる箇所を3点表記しました。
js読み込みとして、htmlのheadに<script src="https://ajax.googleapis....
0
票
1回答
37 件の閲覧数
flexboxで要素の高さが揃わない
解決したいこと
cssでコーディングをしているのですが、flexboxで要素の高さが揃わないです
状況
下記のコードがHTMLです。
<div class="plans-content">
<div class="plans-content-item">
<h3 class="plans-content-...
2
票
1回答
128 件の閲覧数
CSSにおけるpxの使い所を知りたい
今CSSを学んでいるのですが、素朴な疑問として、サイズにおける px の使用するタイミングが知りたいです。
デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
なので、pxより%で指定したほうがいいのかと思ったりします。
pxの使用どころはどういったタイミングなのでしょうか?
...
0
票
0回答
31 件の閲覧数
CSSにおいてボックスがはみ出る問題を解決したい
HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか?
気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、
select_test_areaクラスはheaderクラスの高さを選んでいないため、...
0
票
1回答
45 件の閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
1回答
60 件の閲覧数
web上へhtmlは表示されたが、cssが反映されない
<link rel="stylesheet" href="https://hideto7007.github.io/portfolio/portfolio_styl.css" type="text/css">
と変更しましたが、web上ではcssが反映されていません。どのようにコードを変更すれば反映されますでしょうか?
...
0
票
1回答
38 件の閲覧数
CSSにおいて正方形に余白がある状態にしたい
今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-...
0
票
1回答
30 件の閲覧数
CSSにおいて画像を上下に5つずつ配置したい
今HTML,CSS,Bootstrapでページをデザインしています。
https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。
動きはなくてよくて、配置のみになります。
これを上下2列で5ボックスずつで配置したいです。
どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。
...
1
票
1回答
34 件の閲覧数
HTML,CSSによるデザインで要素の高さを70%にしたい
html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。
恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。
▼html
<section class="section-box" data-scroll-index=&...
2
票
1回答
74 件の閲覧数
tailwind cssでradioをボタンのように表示したい
tailwind cssをインストールして使っています。
inputのradioをボタンのように装飾表示して、クリックしたら色が変化するようにしたいのでこのようにしました。
@tailwind base;
@tailwind components;
@tailwind utilities;
.radio-button:checked + label {
@apply bg-indigo-...
1
票
1回答
36 件の閲覧数
画像のリンクをhoverした際に下線が出るのを防ぎたい
現在rails勉強中で、ブログアプリを作成しています。画像アイコンをルートに戻れるリンクにしているのですが、その画像アイコンをホバーすると下線が表示されます。
これを出ないようにするにはどうしたらいいでしょうか?
調べた方法を試したのですが、うまくいきません。
cssを以下のようにするといった内容はよく見ましたが、うまくいきません。
text-decoration: none;
border: ...
1
票
1回答
58 件の閲覧数
html css で<p>の色を赤にしたいが適用されない
提示画像はディレクトリ構造のスクショで提示コードはその中身です。
タイトル通りですが「cssで設定した <p> を赤色に設定することが出来ない」ですどうすればいいのでしょうか?
ディレクトリ構造を確認しまたがやはり正しい場所に居るためどうすればいいかわかりません。参考サイト通りにやりましたが適用されません。
https://developer.mozilla.org/ja/docs/...
2
票
1回答
114 件の閲覧数
碁盤を css で描写することはできる?
ふと、 html 5 で単純なゲームを作ってみたくなりました。その際、盤面の描写はなるべく css でやってみようと思っています。
以下の画像は、Wikipedia の囲碁のページから取得してきたものです。
碁盤の例:
今、この画像を css でどうにか描写できないかな、と考えています。イメージ、それぞれの石の置くところを div で block として表現して、それぞれのブロックを、...
0
票
2回答
82 件の閲覧数
cssで属性を削除する方法を知りたいです。
cssのスタイルで、paddingの属性を削除したいです。
最初にcssの初期化としてbase.scssを読みます。
その後にarticle.scssを読みます。
その時に、article.scssでbase.scssのulのpaddingを削除したいのですが、cssでのやり方ご存知の方いましたら教えていただきたいです。
説明が下手で申し訳ないのですが、よろしくお願いいたします。
base....
0
票
1回答
65 件の閲覧数
javascriptの動的な画面変更とフラグ管理について
以下の内容で表示を押すとメニューの以下の内容を表示非表示するものを作ってみていますが、画面が一瞬ちらついて映るだけで原因を教えていただけないでしょうか?
<div class="menuContents">
<ul class="menuList">
<li>a</li>
<li>...
0
票
1回答
152 件の閲覧数
2倍サイズに書き出した画像が通常ディスプレイでぼやけてしまう
Retinaディスプレイ対応のため、画像、動画を2倍で書き出したのですが、Retinaディスプレイは綺麗に表示されますが、通常ディスプレイではぼやけてしまいます。
何か対応はありますか?
0
票
1回答
60 件の閲覧数
display:flex内の文字の縦位置を中央にできません
下記に該当箇所を抜き出します。
こちらのクラスtabBtn内のタブ1~5までの文字を縦位置中央にする方法をご教授ください
HTML
<!-- ヘッダータブ -->
<div id="tab-1" class="switch"></div>
<div id="tab-2" class="...
0
票
1回答
89 件の閲覧数
スクロールバーのつまみの部分を非表示にしてスクロールできないようにしたい
スクロールバーのつまみの部分を非表示にしてスクロールしないようにしたいのですが、どうすればいいのでしょうか。
スクロールバー自体を消すのは overflow: hidden でできますが、消すと消えた領域分だけ画面がガタつくので表示したままでスクロールだけできないようにしたいです。
(instagramがこのガタつく方式)
...
1
票
0回答
59 件の閲覧数
styleの中のwidthの値を可変にしたい
html css初心者です、質問がわかりにくいかと思います、申し訳ございません。
CSSで星のレーティング評価を0.0〜5.0で表示するメモ
上記のページを参考にしながら星の実装を目指しているのですが、widthの50%のところを変数にすることは可能でしょうか。
listの中にこれを入れてfor文で回して、itemによってwidthを可変にすることが目標です。
よろしくお願いいたします。
1
票
1回答
105 件の閲覧数
Vue.jsとBootstrapを両方使うのはありですか
フロントエンド開発を勉強しています。BootstrapやVue.jsを両方使うことはありでしょうか?
Bootstrapで見た目を整えて、Vue.jsのトランジションとアニメーションで動きをつけようと思っています
どちらもフロント関係のフレームワークなので両方使っていいのか疑問に思っています
0
票
1回答
84 件の閲覧数
addEventListnerをページ更新後に追加される要素にも適応したい。
Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。
分からない事
同じクラス名の要素に別々の変更を加えるには
作成したい機能
inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。
要素について
.dlcardWrapがあってその子要素として.dlcardがあります。...
1
票
1回答
97 件の閲覧数
区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。
現象
区切り線だけ表示されて「または」というテキストが表示されないです。
期待値
区切り線の途中に「または」というテキストを表示したいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、...
0
票
2回答
64 件の閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1回答
60 件の閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
1回答
54 件の閲覧数
CSSグリッドで画像の位置を指定しても、指定した位置に画像がフィットしません。
現象
CSSグリッドで画像(image_0.svg)の位置を指定しても、指定した位置に画像がフィットしません。
期待値
画像がgrid-column: 3 / -3; grid-row: facebook-logo;で指定した位置にフィットさせたい。
再現手順
下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。
index.html
<...
0
票
0回答
42 件の閲覧数
todoのデータが消えてしまう localstorage
すみませんコードの張り方がわからず 変な風になってしまいました、
ご教示いただけると幸いです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>やることリスト</...
0
票
1回答
87 件の閲覧数
ナビゲーションメニューが横並びになりません。
練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>company</title>
<...
0
票
1回答
65 件の閲覧数
高さが可変の兄弟要素の残りを埋める方法
.hoge2の高さが可変の場合.hoge1のheightを残りでうめたいです。
display:flexを使った方法は出てくるのですが、flexを使わないでやる方法はないでしょうか?
<body>
<div class="hoge1"></div>
<div class="hoge2"></div&...
0
票
0回答
57 件の閲覧数
display:gridで、画像の高さが合わないです。
初めまして、お願いします。
display:gridにして、画像を2列2行で配置したのですが、1枚だけ何故か、高さが合いません。デベロッパーツールで確認しましたが、よくわかりませんでした。
初歩的な質問で申し訳ありません。
HTML
CSS
1
票
2回答
149 件の閲覧数
セレクタにシャープ記号(#)を使う意味と、ドット記号(.)を使う時との違いは?
模写の際CSSのコードを記入していると、#header, #footer のような記述があります。
.header または header, footer を使うことによりHTML要素を指定できるのは知っていますが、# を使った指定方法は知りませんでした。
ぼくは、この # がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。
...
0
票
1回答
78 件の閲覧数
SCSSの記法で出てくる $this: & !global; の意味は?
以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか?
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
scss
.p-hoge{
$this: & !global;
display:flex;
background-color:#f00;
&--...
0
票
1回答
70 件の閲覧数
JavaScript と LocalStorege を使用して背景色をサイト内で共有したい
Webアプリを作成しています。0から始めて間もないので、優しく教えていただけたら嬉しいです。(せめてヒントだけでもお願いしたいです。)
HTMLで作成したボタンを押すとJavaScriptで動的にクラスを変更し背景色が変わるようなプログラムを作成しました。
これをローカルファイル内で作成した別のHTMLへ移動しても背景色を保存できるようにしたいと思っています。...
0
票
2回答
115 件の閲覧数
foreachで連続するセルを横並びにしたい
以下のようなコードでテーブルを作成すると図のcccとdddがaaaの下に配置されてしまいます。こちらをbbbの右に並べたいのですがどのようにしたらいいでしょうか?
HTML
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</...
0
票
1回答
59 件の閲覧数
display:block;でセルを横並びにしたい
display:block;同士横並びにしたい
上記で回答いただきましたが、今度はセルが多くなったときに画像のようにtd2とtd3を横並びにしたいのですがどのようにしたらいいでしょうか?
現状では下記コードで図の上のような形になってしまいます、図の下のようにしたいです。
HTML
<td>
<table>
<thead>
<tr>
...
0
票
1回答
49 件の閲覧数
display:block;同士横並びにしたい
以下のようなコードでtd1とtd2の両方にdisplay:blockを適用すると、td1の下にtd2が配置されてしまいます。
td1の右横にtd2を配置したいのですがどうしたらよいですか?
現状では、画像の黒色の配置になっていますが、td2を赤色のところに配置したいです。
<table>
<tr>
<td class = "td1">aaaa&...
0
票
1回答
58 件の閲覧数
grid-template で余白を設けるときにドットを使うのはそういう仕様ですか?
【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】 - YouTube で grid-template で余白を設けるのにドットを用いています(解説されているように gap を使うよりわかりやすそうなので使うつもりです)。
ソースコードは下記のようです。
html-css-class/style....
0
票
1回答
62 件の閲覧数
ブラウザの横幅によっては、グリッドエリアに隙間ができてしまう
Depending on the width size of the browser, the grid area may not fit でも質問したのですが満足いく回答が得られなかったので、こちらでも質問します。
表題の通りで、ブラウザの横幅を伸ばしたり縮めたりしていると、グリッドエリアに隙間が生じているような動きをします。
確認したブラウザ:Chrome Version 85.0.4183....
0
票
1回答
64 件の閲覧数
grid-template-columns: minmax(100px, 200px) 1fr 1fr は どのような挙動になりますか?
CSSの関数はどんどん便利になっている!minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス に
.grid {
display: grid;
grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}
とその挙動が載っています。
解説は下記
ビューポートのサイズが変更されると、...
0
票
1回答
56 件の閲覧数
CSSグリッドの角括弧で囲まれた部分の意味と使い方はどのようなものなのでしょうか?
grid-template - CSS: カスケーディングスタイルシート | MDN に下記のコードがありました。
#page {
display: grid;
width: 100%;
height: 200px;
grid-template: [header-left] "head head" 30px [header-right]
...
0
票
1回答
87 件の閲覧数
ページ全体 (上下左右) の余白を無くすことができません
現象
出張 - Airbnb のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。
ご教授よろしくお願いいたします。
期待値
サイト全体の上下左右の余白を無くしたいです。
再現手順
下記コードを実行すると再現できます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>...
1
票
1回答
63 件の閲覧数
IE11で属性セレクタにコロンを含むときスタイルが適用されない
属性セレクタで以下のように指定したいのですが、IE11ではうまく動作しません。
Edge(Chronium)は正しく動作します。
いろいろ試してみるとコロン(:)以降に文字列が入ったところで一致しなくなるようです。
font-size:...OK
font-size:50...NG
コロン(:)をエスケープする必要があるのかと思い、\\:、\:や:...
0
票
1回答
195 件の閲覧数
GitHub Pages 上で CSS が反映されない
GitHub Pages を用いて作成したHPをアップロードしようとしましたが、CSSだけがうまく反映されませんでした。
対処の仕方を教えてください。お願いします。
以下、コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content=...
0
票
0回答
68 件の閲覧数
checkboxを非表示にした時にlabelが効かない。
pc用のヘッダーとスマートフォン用にcssを分けてヘッダーを作成中です。
(max-width: 768px)までは左のトグルバーを押下し
果物のカテゴリーは出てくるのですが、768pxを下回った時点でのヘッダーではカテゴリーを押下してもオレンジは出てこないです。
@media screen and ( min-width: 0px ) and (max-width: 640px){
...
0
票
0回答
48 件の閲覧数
WordPress、子テーマのstyle.cssがFTPツールからエディターを開くと、「style 2.css」と表示されてしまう
表題の通りなのですが、FTPツール(FileZilla)からリモート上の子テーマにあるstyle.cssをエディター(VS code)で開くと、エディター上では、「style 2.css」と表示されてしまいます。
これが原因なのか、実際のサイト画面でもstyle.cssに書いたCSSが反映されていません。
子テーマは有効化できてます。WordPress管理画面のテーマエディター上は、style....
0
票
1回答
82 件の閲覧数
inputのrangeのつまみのデザインを変えたい
質問内容
inputのrangeのつまみのデザインを変えたいのですが、-webkit-slider-thumbにbeforeやafterといった擬似要素が付与できません。
ソースコード
input[type="range"]::-webkit-slider-thumb {
&::before {
//反映されない
}
}
...
0
票
1回答
65 件の閲覧数
検索ボックスをアイコンクリックで表示/非表示にしたい
検索のアイコンを押下したらヘッダーの下に横幅いっぱいで出したいと考えてます。
例えば、stackoverflowの検索ボックスもブラウザの幅を狭くするとアイコンだけになり、アイコンを押すとヘッダーのしたに検索ボックスが出てくる様になっていますが、同じ様な動きを想定してます。
stackoveflowの検索ボックスには関連するタグや、質問するボタンなどは表示されてますが、それは不要で、...
0
票
1回答
140 件の閲覧数
CSS ボタンクリックで表示非表示
ボタンを押した時に検索ボックスを表示したいと思ってます。
/*チェックは見えなくする*/
.hidden_box input {
display: none;
}
検索ボックスもinputを利用しているので、虫眼鏡のアイコンや、検索ボックスに placeholder="キーワード検索"が表示されない状態です。
やりたいこととしては、...
1
票
1回答
114 件の閲覧数
HTMLでGridView部品のような表示・動作がしたい
FirefoxアドオンをChrome拡張に移植中なんですが、Visual StudioなどにあるGUI、GridViewのような表示をしたくて悩んでます。具体的にどんなものかと言うと以下の画像のようなものです。
selectタグだと複数列ができません。
条件としては、
複数列表示ができる
行単位での選択・検知ができる
を満たすようなものです。
0
票
1回答
85 件の閲覧数
サンプルコードを組み合わせたところ、リンク(内部、外部)できない
ハンバーガーメニューとスライダーのサンプルコードを組み合わせたところ、ハンバーガーメニューについては問題なく開き、外部へのリンクもできますが、外部への画像リンクや、フッターからトップページへの内部リンクができません。
menu css から以下の部分を削除し、フッターにカーソルを当てると人差し指マークには変わりますが、リンクはしませんでした。
.container {
position: ...