[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
554
質問
0
票
0回答
11 件の閲覧数
CSSにおいてボックスがはみ出る問題を解決したい
HTMLとCSSの勉強をしています。
以下のようなデザインなのですが、グレーの背景をグリーンのボックスがはみ出てしまうので、グレーの背景の底辺とグリーンのボックスの底辺を揃えたいです。そのためにはどうするのがいいでしょうか?
気になっているのが、mainクラスの高さがheaderクラスを含んでいるのに対して、
select_test_areaクラスはheaderクラスの高さを選んでいないため、...
0
票
1回答
39 件の閲覧数
フォームのlabelとinputの位置を揃えたい。
現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。
<div class="song__info-cover">
<div class="song__info">
...
0
票
1回答
57 件の閲覧数
web上へhtmlは表示されたが、cssが反映されない
<link rel="stylesheet" href="https://hideto7007.github.io/portfolio/portfolio_styl.css" type="text/css">
と変更しましたが、web上ではcssが反映されていません。どのようにコードを変更すれば反映されますでしょうか?
...
0
票
1回答
37 件の閲覧数
CSSにおいて正方形に余白がある状態にしたい
今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-...
0
票
1回答
29 件の閲覧数
CSSにおいて画像を上下に5つずつ配置したい
今HTML,CSS,Bootstrapでページをデザインしています。
https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。
動きはなくてよくて、配置のみになります。
これを上下2列で5ボックスずつで配置したいです。
どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。
...
2
票
1回答
64 件の閲覧数
tailwind cssでradioをボタンのように表示したい
tailwind cssをインストールして使っています。
inputのradioをボタンのように装飾表示して、クリックしたら色が変化するようにしたいのでこのようにしました。
@tailwind base;
@tailwind components;
@tailwind utilities;
.radio-button:checked + label {
@apply bg-indigo-...
1
票
1回答
33 件の閲覧数
HTML,CSSによるデザインで要素の高さを70%にしたい
html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。
恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。
▼html
<section class="section-box" data-scroll-index=&...
1
票
1回答
33 件の閲覧数
画像のリンクをhoverした際に下線が出るのを防ぎたい
現在rails勉強中で、ブログアプリを作成しています。画像アイコンをルートに戻れるリンクにしているのですが、その画像アイコンをホバーすると下線が表示されます。
これを出ないようにするにはどうしたらいいでしょうか?
調べた方法を試したのですが、うまくいきません。
cssを以下のようにするといった内容はよく見ましたが、うまくいきません。
text-decoration: none;
border: ...
1
票
1回答
55 件の閲覧数
html css で<p>の色を赤にしたいが適用されない
提示画像はディレクトリ構造のスクショで提示コードはその中身です。
タイトル通りですが「cssで設定した <p> を赤色に設定することが出来ない」ですどうすればいいのでしょうか?
ディレクトリ構造を確認しまたがやはり正しい場所に居るためどうすればいいかわかりません。参考サイト通りにやりましたが適用されません。
https://developer.mozilla.org/ja/docs/...
2
票
1回答
111 件の閲覧数
碁盤を css で描写することはできる?
ふと、 html 5 で単純なゲームを作ってみたくなりました。その際、盤面の描写はなるべく css でやってみようと思っています。
以下の画像は、Wikipedia の囲碁のページから取得してきたものです。
碁盤の例:
今、この画像を css でどうにか描写できないかな、と考えています。イメージ、それぞれの石の置くところを div で block として表現して、それぞれのブロックを、...
-1
票
1回答
5,087 件の閲覧数
この動作をSwiperで実現したい
解決方法が不明なので質問いたしました。下記のリンクのスライダライブラリを使用して
実現したいスライドがあります。
http://www.idangero.us/swiper/#.VpMcPRWLRsc
その実現したいスライドは下記のサイトにあるようなものです。
・メイン画像はスライド、クリックで変更できる
・その下に配置されたサムネイルからその画像を表示できる
http://black-flag....
0
票
1回答
84 件の閲覧数
サンプルコードを組み合わせたところ、リンク(内部、外部)できない
ハンバーガーメニューとスライダーのサンプルコードを組み合わせたところ、ハンバーガーメニューについては問題なく開き、外部へのリンクもできますが、外部への画像リンクや、フッターからトップページへの内部リンクができません。
menu css から以下の部分を削除し、フッターにカーソルを当てると人差し指マークには変わりますが、リンクはしませんでした。
.container {
position: ...
0
票
1回答
703 件の閲覧数
要素幅がそれぞれ異なるスライダーを作りたい
現在、Webサイトにスライダーを実装しようしているのですが、一つ目の要素が他の要素の約2倍になるようなものを作りたいです。(以下画像のようなイメージです)
有名なjsプラグイン(swiperやslickなど)でできないかやってみましたが、どうにもうまくいきませんでした。動きは下記サイトのような感じで、スムーズにしたいです。
https://liginc.co.jp/
...
-1
票
0回答
40 件の閲覧数
Swiper (あるいはJavascript) を使って前と後ろのスライドがかっこよく途切れるものを作りたい
Js 初心者です。下の画像のようなスライドを作成したいと考えています。メインに表示されているスライドの左右に、次のスライドが途切れて見える、(画像の中の赤と黄)というものです。レスポンシブデザイン対応で、できればswiperを使って作りたいと思っています。。どなたかご教示よろしくお願いします。
0
票
1回答
89 件の閲覧数
スクロールバーのつまみの部分を非表示にしてスクロールできないようにしたい
スクロールバーのつまみの部分を非表示にしてスクロールしないようにしたいのですが、どうすればいいのでしょうか。
スクロールバー自体を消すのは overflow: hidden でできますが、消すと消えた領域分だけ画面がガタつくので表示したままでスクロールだけできないようにしたいです。
(instagramがこのガタつく方式)
...
0
票
1回答
59 件の閲覧数
display:flex内の文字の縦位置を中央にできません
下記に該当箇所を抜き出します。
こちらのクラスtabBtn内のタブ1~5までの文字を縦位置中央にする方法をご教授ください
HTML
<!-- ヘッダータブ -->
<div id="tab-1" class="switch"></div>
<div id="tab-2" class="...
0
票
2回答
82 件の閲覧数
cssで属性を削除する方法を知りたいです。
cssのスタイルで、paddingの属性を削除したいです。
最初にcssの初期化としてbase.scssを読みます。
その後にarticle.scssを読みます。
その時に、article.scssでbase.scssのulのpaddingを削除したいのですが、cssでのやり方ご存知の方いましたら教えていただきたいです。
説明が下手で申し訳ないのですが、よろしくお願いいたします。
base....
0
票
1回答
148 件の閲覧数
2倍サイズに書き出した画像が通常ディスプレイでぼやけてしまう
Retinaディスプレイ対応のため、画像、動画を2倍で書き出したのですが、Retinaディスプレイは綺麗に表示されますが、通常ディスプレイではぼやけてしまいます。
何か対応はありますか?
0
票
1回答
63 件の閲覧数
javascriptの動的な画面変更とフラグ管理について
以下の内容で表示を押すとメニューの以下の内容を表示非表示するものを作ってみていますが、画面が一瞬ちらついて映るだけで原因を教えていただけないでしょうか?
<div class="menuContents">
<ul class="menuList">
<li>a</li>
<li>...
0
票
1回答
84 件の閲覧数
addEventListnerをページ更新後に追加される要素にも適応したい。
Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。
分からない事
同じクラス名の要素に別々の変更を加えるには
作成したい機能
inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。
要素について
.dlcardWrapがあってその子要素として.dlcardがあります。...
0
票
0回答
56 件の閲覧数
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
票
2回答
586 件の閲覧数
iphoneでナビゲーションの横スクロールを実現したい
cssでナビゲーションの横スクロールを実装しようとしているんですが、うまくいきません。
環境はiphone5c、iOS 10.3.3、safari 602.1です。
下記のようにコードを書いているんですが、iphoneでは全くスクロールできません。
PCやXperiaでは問題なくスクロールできています。
ご教授よろしくお願い致します。
<div class="navigation">
...
1
票
1回答
97 件の閲覧数
区切り線の途中にテキストを表示したいのですが、区切り線だけ表示されてテキストが表示されないです。
現象
区切り線だけ表示されて「または」というテキストが表示されないです。
期待値
区切り線の途中に「または」というテキストを表示したいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/SEでの画面を表示させて出てきたものを模写コーディングしています。
下記のコードを、...
0
票
2回答
62 件の閲覧数
ログインフォームをグリッドコンテナの横幅いっぱいに広げたいが、widthを100%にしても効かないです。
現象
ログインフォームとログインボタン(class名は.login-form)にwidth: 100%;をCSSで適用しようとしても効かないです。
期待値
ログインフォームとログインボタンをグリッドコンテナの横幅いっぱいに広げたいです。
再現手順
facebookのログイン画面を開いて頂いて、ChromeかEdgeのデベロッパーツールを開いてデバイスエミュレーションでiPhone 5/...
0
票
1回答
59 件の閲覧数
重複があるHTML要素から重複した要素だけを取り除きたい
文字列に重複があるユーザーリスト画面を作っています。ボタンを押すことによって重複が消えるプログラムを作りたいですが、どうすればいいのかわかりません。次のプログラムは使っているHTMLですが、実際のHTMLはもっと複雑になっていてネストが深くなっています。
ご教授よろしくお願いします。
<ul>
<li>
<h3>
Jack
<...
0
票
1回答
50 件の閲覧数
CSSグリッドで画像の位置を指定しても、指定した位置に画像がフィットしません。
現象
CSSグリッドで画像(image_0.svg)の位置を指定しても、指定した位置に画像がフィットしません。
期待値
画像がgrid-column: 3 / -3; grid-row: facebook-logo;で指定した位置にフィットさせたい。
再現手順
下記のコードを実行する。ちなみに、Facebookのモバイルでのログインページを模写コーディングしています。
index.html
<...
0
票
0回答
41 件の閲覧数
todoのデータが消えてしまう localstorage
すみませんコードの張り方がわからず 変な風になってしまいました、
ご教示いただけると幸いです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>やることリスト</...
0
票
1回答
60 件の閲覧数
高さが可変の兄弟要素の残りを埋める方法
.hoge2の高さが可変の場合.hoge1のheightを残りでうめたいです。
display:flexを使った方法は出てくるのですが、flexを使わないでやる方法はないでしょうか?
<body>
<div class="hoge1"></div>
<div class="hoge2"></div&...
0
票
1回答
86 件の閲覧数
ナビゲーションメニューが横並びになりません。
練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>company</title>
<...
1
票
2回答
145 件の閲覧数
セレクタにシャープ記号(#)を使う意味と、ドット記号(.)を使う時との違いは?
模写の際CSSのコードを記入していると、#header, #footer のような記述があります。
.header または header, footer を使うことによりHTML要素を指定できるのは知っていますが、# を使った指定方法は知りませんでした。
ぼくは、この # がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。
...
0
票
0回答
57 件の閲覧数
display:gridで、画像の高さが合わないです。
初めまして、お願いします。
display:gridにして、画像を2列2行で配置したのですが、1枚だけ何故か、高さが合いません。デベロッパーツールで確認しましたが、よくわかりませんでした。
初歩的な質問で申し訳ありません。
HTML
CSS
0
票
1回答
1,750 件の閲覧数
jqGridでテーブルが表示できない。
jqGridでテーブルを表示したいのですが全くきれいに表示されていません。どこが原因となっているのでしょうか。
jQueryUI、jqGridに関しては下記をダウンロードして使用しています。
・jQueryUI ( http://jqueryui.com/download/ )
・jqGrid ( http://www.trirand.com/blog/?page_id=6 )
...
0
票
1回答
76 件の閲覧数
SCSSの記法で出てくる $this: & !global; の意味は?
以下の記事で紹介されているBEM記法に $this: & !global; という記法が見られるのですが、どういう意味でしょうか?
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
scss
.p-hoge{
$this: & !global;
display:flex;
background-color:#f00;
&--...
4
票
2回答
650 件の閲覧数
BootstrapのCSSを用いる際にclassを一括指定したい
現在、オフィシャルサイトの記述のような形でclassに値を設定しています:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-...
2
票
1回答
174 件の閲覧数
Bootstrapのfield.control-groupが干渉するせい?か、上手くcssが適応できませんでした
rails のslimとbootstrapを用いて
webのフロントサイドの実装をしておりました。
field.control-groupの中に、11項目程の入力フォームがある
アンケートフォームを作成しております。
以下のコードには2つしかありませんが、まだ、これが残り9つある状態です。
この実装でbootstrapのデザインがあたったフォームはつくれたのですが、
...
2
票
1回答
9,927 件の閲覧数
Twitter Bootstrapで、横並びのカラムの高さを「レスポンシブ的に」揃えたい
以下の様なよくあるサンプルだと、添付イメージ1のように、各カラムの高さが同一に書かれる事が多いと思います。
<div class="row">
<div class="col-md-12">ヘッダー</div>
</div>
<div class="row">
<div class="col-md-2">...
0
票
1回答
70 件の閲覧数
JavaScript と LocalStorege を使用して背景色をサイト内で共有したい
Webアプリを作成しています。0から始めて間もないので、優しく教えていただけたら嬉しいです。(せめてヒントだけでもお願いしたいです。)
HTMLで作成したボタンを押すとJavaScriptで動的にクラスを変更し背景色が変わるようなプログラムを作成しました。
これをローカルファイル内で作成した別のHTMLへ移動しても背景色を保存できるようにしたいと思っています。...
0
票
2回答
112 件の閲覧数
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&...
1
票
1回答
245 件の閲覧数
異なる幅のtrを持つtableで特定のtrに境界線を引く方法
下記の構造のテーブルで、「値3-1」の下部にテーブルの最大幅で境界線を引きたいのですが、可能でしょうか?
条件として、
・CSSは変更できずstyleの変更しかできない
・境界線以外の見た目は変えない
というものがあります。
仮でtbodyのstyleに境界線の設定をしていますが、これは表示されません。
tableのborder-...
0
票
1回答
57 件の閲覧数
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
コロン(:)をエスケープする必要があるのかと思い、\\:、\:や:...
1
票
1回答
196 件の閲覧数
FooTableの利用について
現在スマホ用の画面構築で、テーブルを可変にする為に
FooTableを利用しようとしています。
以下のサイトを参考にしてます。
http://www.webantena.net/javascriptjquery/plugin-footable/
ところが、肝心のソースが手に入りません。
というのも、ここに限らずどのサイトでも最終的にGithubから
ダウンロードするように誘導されますが、...
0
票
1回答
180 件の閲覧数
GitHub Pages 上で CSS が反映されない
GitHub Pages を用いて作成したHPをアップロードしようとしましたが、CSSだけがうまく反映されませんでした。
対処の仕方を教えてください。お願いします。
以下、コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content=...