[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
673
質問
0
票
1
回答
122
閲覧数
HTML,CSS gridなしで画像配置をしたい
画像の配置調整を行いたいです。
大きく2つあります。
1つ目
1段目を2段の両端に揃えて均等配置配置したいです。
→ 現状上手くいっておらず、解決策を教えて頂きたいです。
2つ目
3段目の2枚を2段目の左側に配置したい為、gridを使用して調整しています。
Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。
→ CSS変換など試したのですが、上手くいきません。
...
0
票
1
回答
184
閲覧数
レスポンシブル iOS 横幅が合わない。
レスポンシブル Webページを作ったのですが、iPhoneのみ、なぜか横に幅ができ横スクロールしてししまいます。画像なども見切れる(左よりになる。)
CSSでwidthなどは 100% 等に指定していても 20% ぐらい必ず右に隙間ができてスクロールされてしまう。
解決方法があったら教えてください。
viewportは指定しています。
<meta name="viewport" ...
0
票
1
回答
488
閲覧数
【スクロールすると「ふわっと」スクロールするアニメーション】の実装ができません
質問内容/困っていること
<こちらでもマルチポストさせていただいております>
https://teratail.com/questions/317212
LPを制作しており『スクロールすると「ふわっと」スクロールするアニメーション』を実装しようとしましたが、稼働しません。
発生している問題・エラーメッセージ
⇒グーグルクロームの検証ツールにてConsoleを確認しましたが ...
0
票
1
回答
484
閲覧数
bracketsでjqueryによるbgSwitcherプラグインを使用したいのですが、うまく適用できません
表題の件について、モニターの最上部にてフルスクリーンでの複数画像のスライドを行いたいのですが、
jsの読み込みが原因なのか、複数画像の相対パスの表示方法が違うのか、うまくできない状況です。
以下に、うまく表示されない原因ではないかと思われる箇所を3点表記しました。
js読み込みとして、htmlのheadに<script src="https://ajax.googleapis....
0
票
1
回答
729
閲覧数
flexboxで要素の高さが揃わない
解決したいこと
cssでコーディングをしているのですが、flexboxで要素の高さが揃わないです
状況
下記のコードがHTMLです。
<div class="plans-content">
<div class="plans-content-item">
<h3 class="plans-content-...
1
票
1
回答
246
閲覧数
CSSにおけるpxの使い所を知りたい
今CSSを学んでいるのですが、素朴な疑問として、サイズにおける px の使用するタイミングが知りたいです。
デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
なので、pxより%で指定したほうがいいのかと思ったりします。
pxの使用どころはどういったタイミングなのでしょうか?
...
0
票
0
回答
184
閲覧数
CSSにおいてボックスがはみ出る問題を解決したい
HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか?
気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、
select_test_areaクラスはheaderクラスの高さを選んでいないため、...
0
票
1
回答
5,856
閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
1
回答
485
閲覧数
web上へhtmlは表示されたが、cssが反映されない
<link rel="stylesheet" href="https://hideto7007.github.io/portfolio/portfolio_styl.css" type="text/css">
と変更しましたが、web上ではcssが反映されていません。どのようにコードを変更すれば反映されますでしょうか?
...
0
票
1
回答
133
閲覧数
CSSにおいて正方形に余白がある状態にしたい
今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-...
0
票
1
回答
133
閲覧数
CSSにおいて画像を上下に5つずつ配置したい
今HTML,CSS,Bootstrapでページをデザインしています。
https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。
動きはなくてよくて、配置のみになります。
これを上下2列で5ボックスずつで配置したいです。
どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。
...
1
票
1
回答
1,125
閲覧数
tailwind cssでradioをボタンのように表示したい
tailwind cssをインストールして使っています。
inputのradioをボタンのように装飾表示して、クリックしたら色が変化するようにしたいのでこのようにしました。
@tailwind base;
@tailwind components;
@tailwind utilities;
.radio-button:checked + label {
@apply bg-indigo-...
0
票
1
回答
96
閲覧数
HTML,CSSによるデザインで要素の高さを70%にしたい
html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。
恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。
▼html
<section class="section-box" data-scroll-index=&...
0
票
1
回答
260
閲覧数
画像のリンクをhoverした際に下線が出るのを防ぎたい
現在rails勉強中で、ブログアプリを作成しています。画像アイコンをルートに戻れるリンクにしているのですが、その画像アイコンをホバーすると下線が表示されます。
これを出ないようにするにはどうしたらいいでしょうか?
調べた方法を試したのですが、うまくいきません。
cssを以下のようにするといった内容はよく見ましたが、うまくいきません。
text-decoration: none;
border: ...
0
票
1
回答
71
閲覧数
html css で<p>の色を赤にしたいが適用されない
提示画像はディレクトリ構造のスクショで提示コードはその中身です。
タイトル通りですが「cssで設定した <p> を赤色に設定することが出来ない」ですどうすればいいのでしょうか?
ディレクトリ構造を確認しまたがやはり正しい場所に居るためどうすればいいかわかりません。参考サイト通りにやりましたが適用されません。
https://developer.mozilla.org/ja/docs/...
2
票
1
回答
188
閲覧数
碁盤を css で描写することはできる?
ふと、 html 5 で単純なゲームを作ってみたくなりました。その際、盤面の描写はなるべく css でやってみようと思っています。
以下の画像は、Wikipedia の囲碁のページから取得してきたものです。
碁盤の例:
今、この画像を css でどうにか描写できないかな、と考えています。イメージ、それぞれの石の置くところを div で block として表現して、それぞれのブロックを、...
-1
票
1
回答
5,211
閲覧数
この動作をSwiperで実現したい
解決方法が不明なので質問いたしました。下記のリンクのスライダライブラリを使用して
実現したいスライドがあります。
http://www.idangero.us/swiper/#.VpMcPRWLRsc
その実現したいスライドは下記のサイトにあるようなものです。
・メイン画像はスライド、クリックで変更できる
・その下に配置されたサムネイルからその画像を表示できる
http://black-flag....
0
票
1
回答
118
閲覧数
サンプルコードを組み合わせたところ、リンク(内部、外部)できない
ハンバーガーメニューとスライダーのサンプルコードを組み合わせたところ、ハンバーガーメニューについては問題なく開き、外部へのリンクもできますが、外部への画像リンクや、フッターからトップページへの内部リンクができません。
menu css から以下の部分を削除し、フッターにカーソルを当てると人差し指マークには変わりますが、リンクはしませんでした。
.container {
position: ...
0
票
1
回答
2,937
閲覧数
要素幅がそれぞれ異なるスライダーを作りたい
現在、Webサイトにスライダーを実装しようしているのですが、一つ目の要素が他の要素の約2倍になるようなものを作りたいです。(以下画像のようなイメージです)
有名なjsプラグイン(swiperやslickなど)でできないかやってみましたが、どうにもうまくいきませんでした。動きは下記サイトのような感じで、スムーズにしたいです。
https://liginc.co.jp/
...
0
票
1
回答
581
閲覧数
スクロールバーのつまみの部分を非表示にしてスクロールできないようにしたい
スクロールバーのつまみの部分を非表示にしてスクロールしないようにしたいのですが、どうすればいいのでしょうか。
スクロールバー自体を消すのは overflow: hidden でできますが、消すと消えた領域分だけ画面がガタつくので表示したままでスクロールだけできないようにしたいです。
(instagramがこのガタつく方式)
...
0
票
1
回答
80
閲覧数
display:flex内の文字の縦位置を中央にできません
下記に該当箇所を抜き出します。
こちらのクラスtabBtn内のタブ1~5までの文字を縦位置中央にする方法をご教授ください
HTML
<!-- ヘッダータブ -->
<div id="tab-1" class="switch"></div>
<div id="tab-2" class="...
0
票
2
回答
582
閲覧数
cssで属性を削除する方法を知りたいです。
cssのスタイルで、paddingの属性を削除したいです。
最初にcssの初期化としてbase.scssを読みます。
その後にarticle.scssを読みます。
その時に、article.scssでbase.scssのulのpaddingを削除したいのですが、cssでのやり方ご存知の方いましたら教えていただきたいです。
説明が下手で申し訳ないのですが、よろしくお願いいたします。
base....
0
票
1
回答
626
閲覧数
2倍サイズに書き出した画像が通常ディスプレイでぼやけてしまう
Retinaディスプレイ対応のため、画像、動画を2倍で書き出したのですが、Retinaディスプレイは綺麗に表示されますが、通常ディスプレイではぼやけてしまいます。
何か対応はありますか?
0
票
1
回答
657
閲覧数
javascriptの動的な画面変更とフラグ管理について
以下の内容で表示を押すとメニューの以下の内容を表示非表示するものを作ってみていますが、画面が一瞬ちらついて映るだけで原因を教えていただけないでしょうか?
<div class="menuContents">
<ul class="menuList">
<li>a</li>
<li>...
0
票
1
回答
101
閲覧数
addEventListnerをページ更新後に追加される要素にも適応したい。
Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。
分からない事
同じクラス名の要素に別々の変更を加えるには
作成したい機能
inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。
要素について
.dlcardWrapがあってその子要素として.dlcardがあります。...
1
票
1
回答
3,502
閲覧数
Vue.jsとBootstrapを両方使うのはありですか
フロントエンド開発を勉強しています。BootstrapやVue.jsを両方使うことはありでしょうか?
Bootstrapで見た目を整えて、Vue.jsのトランジションとアニメーションで動きをつけようと思っています
どちらもフロント関係のフレームワークなので両方使っていいのか疑問に思っています
1
票
1
回答
159
閲覧数
区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。
現象
区切り線だけ表示されて「または」というテキストが表示されないです。
期待値
区切り線の途中に「または」というテキストを表示したいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、...
0
票
2
回答
361
閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1
回答
671
閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
1
回答
282
閲覧数
CSSグリッドで画像の位置を指定しても、指定した位置に画像がフィットしません。
現象
CSSグリッドで画像(image_0.svg)の位置を指定しても、指定した位置に画像がフィットしません。
期待値
画像がgrid-column: 3 / -3; grid-row: facebook-logo;で指定した位置にフィットさせたい。
再現手順
下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。
index.html
<...
0
票
0
回答
82
閲覧数
todoのデータが消えてしまう localstorage
すみませんコードの張り方がわからず 変な風になってしまいました、
ご教示いただけると幸いです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>やることリスト</...
0
票
1
回答
1,387
閲覧数
高さが可変の兄弟要素の残りを埋める方法
.hoge2の高さが可変の場合.hoge1のheightを残りでうめたいです。
display:flexを使った方法は出てくるのですが、flexを使わないでやる方法はないでしょうか?
<body>
<div class="hoge1"></div>
<div class="hoge2"></div&...
0
票
1
回答
153
閲覧数
ナビゲーションメニューが横並びになりません。
練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>company</title>
<...
1
票
2
回答
4,627
閲覧数
セレクタにシャープ記号(#)を使う意味と、ドット記号(.)を使う時との違いは?
模写の際CSSのコードを記入していると、#header, #footer のような記述があります。
.header または header, footer を使うことによりHTML要素を指定できるのは知っていますが、# を使った指定方法は知りませんでした。
ぼくは、この # がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。
...
0
票
1
回答
2,179
閲覧数
jqGridでテーブルが表示できない。
jqGridでテーブルを表示したいのですが全くきれいに表示されていません。どこが原因となっているのでしょうか。
jQueryUI、jqGridに関しては下記をダウンロードして使用しています。
・jQueryUI ( http://jqueryui.com/download/ )
・jqGrid ( http://www.trirand.com/blog/?page_id=6 )
...
0
票
1
回答
1,026
閲覧数
SCSSの記法で出てくる $this: & !global; の意味は?
以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか?
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
scss
.p-hoge{
$this: & !global;
display:flex;
background-color:#f00;
&--...
4
票
2
回答
997
閲覧数
BootstrapのCSSを用いる際にclassを一括指定したい
現在、オフィシャルサイトの記述のような形でclassに値を設定しています:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-...
2
票
1
回答
221
閲覧数
Bootstrapのfield.control-groupが干渉するせい?か、上手くcssが適応できませんでした
rails のslimとbootstrapを用いて
webのフロントサイドの実装をしておりました。
field.control-groupの中に、11項目程の入力フォームがある
アンケートフォームを作成しております。
以下のコードには2つしかありませんが、まだ、これが残り9つある状態です。
この実装でbootstrapのデザインがあたったフォームはつくれたのですが、
...
2
票
1
回答
1万
閲覧数
Twitter Bootstrapで、横並びのカラムの高さを「レスポンシブ的に」揃えたい
以下の様なよくあるサンプルだと、添付イメージ1のように、各カラムの高さが同一に書かれる事が多いと思います。
<div class="row">
<div class="col-md-12">ヘッダー</div>
</div>
<div class="row">
<div class="col-md-2">...
0
票
1
回答
78
閲覧数
JavaScript と LocalStorege を使用して背景色をサイト内で共有したい
Webアプリを作成しています。0から始めて間もないので、優しく教えていただけたら嬉しいです。(せめてヒントだけでもお願いしたいです。)
HTMLで作成したボタンを押すとJavaScriptで動的にクラスを変更し背景色が変わるようなプログラムを作成しました。
これをローカルファイル内で作成した別のHTMLへ移動しても背景色を保存できるようにしたいと思っています。...
0
票
2
回答
1,737
閲覧数
foreachで連続するセルを横並びにしたい
以下のようなコードでテーブルを作成すると図のcccとdddがaaaの下に配置されてしまいます。こちらをbbbの右に並べたいのですがどのようにしたらいいでしょうか?
HTML
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</...
0
票
1
回答
120
閲覧数
display:block;でセルを横並びにしたい
display:block;同士横並びにしたい
上記で回答いただきましたが、今度はセルが多くなったときに画像のようにtd2とtd3を横並びにしたいのですがどのようにしたらいいでしょうか?
現状では下記コードで図の上のような形になってしまいます、図の下のようにしたいです。
HTML
<td>
<table>
<thead>
<tr>
...
0
票
1
回答
67
閲覧数
display:block;同士横並びにしたい
以下のようなコードでtd1とtd2の両方にdisplay:blockを適用すると、td1の下にtd2が配置されてしまいます。
td1の右横にtd2を配置したいのですがどうしたらよいですか?
現状では、画像の黒色の配置になっていますが、td2を赤色のところに配置したいです。
<table>
<tr>
<td class = "td1">aaaa&...
1
票
1
回答
300
閲覧数
異なる幅のtrを持つtableで特定のtrに境界線を引く方法
下記の構造のテーブルで、「値3-1」の下部にテーブルの最大幅で境界線を引きたいのですが、可能でしょうか?
条件として、
・CSSは変更できずstyleの変更しかできない
・境界線以外の見た目は変えない
というものがあります。
仮でtbodyのstyleに境界線の設定をしていますが、これは表示されません。
tableのborder-...
0
票
1
回答
150
閲覧数
grid-template で余白を設けるときにドットを使うのはそういう仕様ですか?
【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】 - YouTube で grid-template で余白を設けるのにドットを用いています(解説されているように gap を使うよりわかりやすそうなので使うつもりです)。
ソースコードは下記のようです。
html-css-class/style....
0
票
1
回答
394
閲覧数
ブラウザの横幅によっては、グリッドエリアに隙間ができてしまう
Depending on the width size of the browser, the grid area may not fit でも質問したのですが満足いく回答が得られなかったので、こちらでも質問します。
表題の通りで、ブラウザの横幅を伸ばしたり縮めたりしていると、グリッドエリアに隙間が生じているような動きをします。
確認したブラウザ:Chrome Version 85.0.4183....
0
票
1
回答
72
閲覧数
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
回答
130
閲覧数
CSSグリッドの角括弧で囲まれた部分の意味と使い方はどのようなものなのでしょうか?
grid-template - CSS: カスケーディングスタイルシート | MDN に下記のコードがありました。
#page {
display: grid;
width: 100%;
height: 200px;
grid-template: [header-left] "head head" 30px [header-right]
...
0
票
1
回答
96
閲覧数
ページ全体 (上下左右) の余白を無くすことができません
現象
出張 - Airbnb のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。
ご教授よろしくお願いいたします。
期待値
サイト全体の上下左右の余白を無くしたいです。
再現手順
下記コードを実行すると再現できます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>...
0
票
1
回答
202
閲覧数
IE11で属性セレクタにコロンを含むときスタイルが適用されない
属性セレクタで以下のように指定したいのですが、IE11ではうまく動作しません。
Edge(Chronium)は正しく動作します。
いろいろ試してみるとコロン(:)以降に文字列が入ったところで一致しなくなるようです。
font-size:...OK
font-size:50...NG
コロン(:)をエスケープする必要があるのかと思い、\\:、\:や:...