[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
643
質問
0
票
0
回答
48
閲覧数
ansi art を htmlに表示したい
このサイトの一番下にANSI art をHTMLで出力しているのを見つけました。
https://int10h.org/oldschool-pc-fonts/
ダウンロードをしてソースコードを見てみると、どうやら自動化させてように思えました。
自分も自分で描いたANSIartをhtmlに出力したいのですが、どのようなソフトでどのようにすれば出来ますか?
-2
票
0
回答
97
閲覧数
スマホ画面スクロール時にデザイン画面がずれる原因について
解決したいこと
下記サイトをスマートフォンでスクロールする際に、デザインされている画面(ページ)がデバイス画面に固定されていません。
こちらを解消する方法をご教示いただけないでしょうか。
https://www.stock-lab.com/
PCで閲覧する場合は問題なくスクロールされています。
その他、他の関連サイトにおいても同様のずれる事象が発生しており、...
0
票
1
回答
42
閲覧数
検証ツールで選択した場所のコードの位置をsassで確認する方法
ワードプレスでホームページの作成をしています。
初心者です。
マルチポストです。
リンク
検証ツールで選択した部分が、style.css:2と記入されます。
これは、ワードプレスのプラグインの、
WP-SCSSを使用しています、そして、これでsassをcssに直すと、
2行目に一列にずっとコードが並んでいるようになるからなのですが。
これをstyle.css:2ではなく、sassのファイルで、...
0
票
2
回答
100
閲覧数
タブの中のボタンを横並びにしたい
タブの中にあるボタンを横並びにして見やすくしたいです
flexとか、display: inline-blockとかやってみたのですができません
ちなみに、余白はバラバラですが大丈夫です
具体的にどうしたらよいのかを教えていただきたいです
html
<!DOCTYPE html>
<html>
<head>
<meta charset="...
0
票
0
回答
28
閲覧数
Reactでスワイプしたら下から飛び出るフォームをtouchendとclickで作成したい
JavaScriptにあるtouchstart, touchmove, touchendを使用してスワイプしたら下から表示される下記のようなフォームを作成しました。下から上にスワイプすると出現する。そこに追加でグレーの横棒がButtonタグになっていてクリックでも開閉をしたいのですが、touchendの処理タイミングが被るのか、上手く現在のフォームの状態を持つ事が出来ないです。
どなたか詳しい方、...
0
票
1
回答
66
閲覧数
インデックス風のタブメニューを作りたい
小学生のタブのところに社会も入れたいのですが、入りません
あと、中学生と高校生の所に理科が入ってしまっています
これをどうにかしたいです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" ...
0
票
1
回答
89
閲覧数
アコーディオンメニューが意図した通り動作しない
ボタンを押すとアコーディオンメニューが開くようにプログラムを組んだつもりなのですが、うまく動きません。
.menu {
max-width: 600px;
}
.menu a {
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
label {
...
0
票
0
回答
54
閲覧数
表形式でチェックボックスか文字をタップすれば、抹線を引かれる、文字の色が変わるようにしたい
画像添付のリストで文字かチェックボックスをタップすれば、文字の色がグレーになり、抹線が引かれるような仕組みにしたいです。
どのようにCSS、またはスクリプトコードを記載すれば良いかご教示頂ければと存じます。
ちなみに、表形式にする以前は、idとforでチェックボックスと、ラベルを紐つけすることで文字タップすれば文字の色がグレーになり、抹線が引かれるような仕組みにできて、...
0
票
1
回答
543
閲覧数
HTMLのインライン修飾機能:elements.style
2つの画像を参照してください。
Aをお手本にしてb要素を付け加えたいのですが、Bのようにうまいこといきません。
どのようにすればb要素を追加することができるのでしょうか。
A
[![画像の説明をここに入力][1]][1]
B
[![画像の説明をここに入力][2]][2]
画像を追加します。
[![画像の説明をここに入力][3]][3]
...
1
票
4
回答
152
閲覧数
ボタンの中に斜めの線を入れたい
HTML, CSS初心者です。
添付の画像のように、斜め線が入ったボタンの実装をしようと思い、
実装サンプル集を参考に色々試行錯誤しましたが、斜め線をボタンの中に組み込む実装がうまくできませんでした。
cssサンプルをご提示いただけないでしょうか?
よろしくお願いいたします。
0
票
0
回答
25
閲覧数
tailwind cssのtypographyプラグインのような、文字の装飾のためのCSSライブラリってありますか?
tailwind cssのtypographyプラグインのような、ブログエディターとかで使われるような文字の装飾のためのCSSライブラリってありますか?
0
票
0
回答
46
閲覧数
react-scripts v5 が正しく機能しない
以前はCRA4を使用していましたが、CRA5にupdateしました。その時に問題となったのは、react-scripts4から5に変更したときです。5にして、react-scripts startをするとサイトは表示されますが、cssがぐちゃぐちゃになります。
antdを使用しているので、antdやcss周りのreact-scriptsのwebpackのcss-...
1
票
1
回答
64
閲覧数
scssで特定の親がある時だけ効くセレクタを書く方法
以下のようなスタイルシートがあります。
.a .b .c .d .eの中の文字は赤色ですが、
.a .b.active .c .d .eとbにactiveが付与された時のみ青色になります。
ですがこの書き方ですと.a .bと.c .d .eの記述が重複してしまっています。
.a .b{
.c .d .e{
color:red;
}
}
.a .b.active{
...
0
票
0
回答
57
閲覧数
LP作成の効率的な方法が分からない
LPの制作方法がもっと効率的にならないか迷走し始めたため質問いたしました。
■前提
私は現在LPを基本的なコーディングで作成しております。
そのためコーディングのみでLP作成をする際に、
何か別の方法(ツール)を使ったほうが効率的ではないかと考えました。
一例で恐縮ですが、今回の質問では下記のLPを作成した場合でご回答お願いいたします。
https://service.ourly.jp/
■...
0
票
1
回答
102
閲覧数
sassを使いたいのですが、CSSファイルが自動生成されたりしません。
ワードプレスでサイトの制作をしています。
VSCでサイトを作成する場合、sassのファイルを制作すれば、
自動的にcssのファイルが制作されますが、
FileZillaではsassを作っても自動的にcssファイルが出来たりしません。
今までは、VSCでsassファイルを作り、
それで自動生成されたCSSファイルの内容をFileZillaに作ったCSSファイルにコピーしていたのですが、それでは、...
0
票
1
回答
40
閲覧数
Twitter の「検索結果に対応するツイート一覧」を React に埋め込む方法
お世話になります。
Twitter の検索結果に対応するツイート一覧を、できるだけ快適に React に埋め込みたいと思っているのですが、良い方法をご存じの方はいらっしゃいますでしょうか?
動作のイメージとしては、Twitter で hoge と検索した場合に、 https://twitter.com/search?q=hoge に対応する検索結果が描画されることを期待しています。
...
0
票
1
回答
117
閲覧数
ddタグの文頭を揃えたい
画像の値段の部分の文頭を揃えたいのですが調べてもいまいちやり方が出てきませんでした。
解決方法わかる方いらっしゃいましたらよろしくお願いいたします。
.menu{
margin: 50px 60px;
}
.menu-box,.menu-box2{
width: 100%;
display: flex;
position: relative;
}
....
0
票
0
回答
43
閲覧数
親要素にTransformを指定した場合の画面固定について
ウェブサイトの制作初心者、初質問です。
ページのヘッダーを画面の先頭にposition:fixedで固定していたのですが、
サイトがスマホのみのレイアウトのためpcでみた時は少し大きく表示したいとのオーダーがあり、
zoomプロパティはfirefoxで使えないためhtml要素にtransform:scale();を使って画面幅が768px以上の時は1.25倍で表示するようにしました。
@media ...
0
票
0
回答
177
閲覧数
ハンバーガーメニューを開いている最中bodyはスクロールしない設定にしていたが、メニュー内のドロップダウンを開いた時メニュー内だけでなくbodyもスクロールしてしまいます
html、cssがすこし触れる程度でjavascriptは主にコピペで使用している初心者です。
スマホでハンバーガーメニューを作成した際、
メニューを全画面で開いた時に隠れているbody全体はスクロールしないようjQueryで設定していましたが、
メニューの中身がドロップダウンで開くようになるとbodyのスクロールが復活してしまいました。
...
0
票
1
回答
58
閲覧数
height: auto;で設定した範囲が、中途半端なところで途切れます。
画像のように height: auto; がすべての範囲に届きません。
今はタブレット用のデザインを作成しています。
下記コードになります。
<section class="section-article">
<div class="article">
<div class="article-...
0
票
0
回答
49
閲覧数
IMG タグに指定した CSS の float right が効かない
html38行目の img src="img/medical-time-pc-1.png に対する float right が効かない (画像を右に置きたいのだが)
$color-main: #1391E6;
$color-sub01: #0060A0;
$color-sub02: #DFF1FD;
$color-accent: #EE5A6D;
$color-text: #...
0
票
0
回答
85
閲覧数
javascriptでの時間差の設定をしたい
何の作業中か
模写コーディングをしています。
目標のサイト https://linew.co.jp/
問題
時間差でfadeInさせたいができない。
現在は、同じタイミングで出てきてしまう。
試した事として、animation-delay などで設定を試みてみた。
目標
時間差でのfadeInをすること。
html
<!DOCTYPE html>
<html>
<...
0
票
1
回答
318
閲覧数
input date の日付ピッカーの表示をカスタマイズしたい
左下の「削除」を消したいのですが方法がわかりません。
また、カレンダーの祝日を赤文字で表示もわかりません。
0
票
1
回答
52
閲覧数
cssのmarginが効いていない
問題
指している所にmarginが反映されていない
###目 標
marginを反映させる
news other-service➡の部分
目標画像
現在
HTML
<section>
<div class=our-service>
<div class="content1">
<div class="Our-...
1
票
1
回答
70
閲覧数
cssの設定を行っているがmarginで間が出来ていない
問題
今回の課題として、other-service➡の部分を下のour visionとを余白空けるためにmarginで設定してありますができていません。
目標
前者の画像が現在の画像です。
結果として、後者の画像のようにしたいです。
現在、自分でも問題の追及していますが解決出来ていません。
#our-service{
z-index: 9;
}
.content1{
...
0
票
0
回答
121
閲覧数
ピクセルパーフェクトの正しいやり方がわかりません。
ウェブデザイナー(コーディングもできる)を目指しています。
ピクセルパーフェクトが重要だと聞き、やり方を調べると、
XDやフォトショップの見本のデザインをスクショで撮り、拡張機能のパーフェクトピクセル、で当てはめて調節するやり方と、
XDやフォトショップの数値通りにデザインするだけでもピクセルパーフェクトというようだとわかりました。
どっちがほんとうのピクセルパーフェクトのやり方なのでしょうか?
...
0
票
0
回答
34
閲覧数
sublimeText livestyleが動かない
やりたいこと
livestyleを動かしたいです。
しかし私がテストしたいHTMLファイル (index_java4) ではlivestyleが動きません。
index_java4以外のページでは
Enable LiveStyle for current page with editor browser update はあらわれ,
おそらく正常に作動しているようです。...
0
票
0
回答
75
閲覧数
Stylus 不要なものを表示しない
貼付を参照してください。
1.1の画像を削除するにあたって、それに対応するコードは青い枠があってその箇所がDOMからですか
2.Stylusの記述に.this-article-author {となっていますが、その前に.myblocksを付け加えたらだめでしょうか
識者からの回答をお待ちしています。
0
票
1
回答
51
閲覧数
WordPressプラグインの「CustomFieldSuite」に挿入した値をパーマリンクに設定したい
WordPressプラグインの「CustomFieldSuite」を使用したサイトを構築しています。
カスタム投稿はCPTUIを使用し「merchandise」としていまして
そこにCFSを適用して、「num」というフィールドを作成したのですが、そのnumフィールドに設定した値をスラッグにしたいのです。
例)https://xxx.com/merchandise/numの値
...
0
票
1
回答
78
閲覧数
Stylusに記述するまでの流れ
画像を参照してください。
ここで質問ですが
左の枠で囲ったコードに対応するのは右の青枠で囲んであるDOMの事か
これが記述されていれば、下にStylesがあり、その中から変更すべきCSSを変える
Stylusに記述するコードは下記の事ですが、
.myblocks p {
font-size: 1.1em;
line-height: 2;
color: #111111;
}
....
0
票
1
回答
111
閲覧数
要素のclassはどのようにして決めるか
消したい要素の上で右クリックして「検証」を選びます。
HTMLの要素が青枠で示され、さらにStylusに消したい要素を記述します。
.entry-card-content {display: none;}
その要素はdivに設定されているclass「entry-card-content」らしいですが、なぜ、entry-card-content となるのでしょうか。
.entry-card-...
0
票
1
回答
83
閲覧数
javascriptでフェードインさせたい
目標
htmlの74~87行の部分をスクロールして見えてきた時にフェードインさせることです。
・Our Serviceが下に
・image/black.png が上に
・image/educure01.jp DXを推進するエンジニア育成
IT事業参入をご検討中の事業者様向けのサービスです。 が上に
faideinさせたいです。
問題点
一部設定してみました。...
0
票
1
回答
100
閲覧数
要素の横並びが指定通りになりません(float:left;)
rightcontentに配置した二枚の画像を右側の枠に広告のような形で入れたいです。
mainとrightcontentのグループに分けてfloat:left;を用いて右への回り込みをさせようと思いましたがサルの画像のブロックが下にずれてしまい二枚の画像も横へ行きません。
marginによる横幅の問題かとも思いましたがmarginを消しても変化しませんでした。原因と解決方法を知りたいです。
...
0
票
2
回答
103
閲覧数
.noscroll { overflow: hidden; position: relative; } が適用されず、スクロールできてしまう
以下のコードが機能しません。自分のパソコン以外だとうまくいくのかもしれません。
body.noscroll {
overflow: hidden;
実際の表示例
スクロール前の画像
スクロール後の画像
現状のソースコード
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity=&...
0
票
2
回答
225
閲覧数
画像を横3列にして、画面の幅に応じて列数を変えたいです。
画像を横3列にして、画面の幅に応じて列数を変えたいです。
■やりたいこと
・画像を3列表示にして、画面の幅が狭くなると3列から2列になるような感じにしたいです。
・コードでは画像の順番は固定になっていますが、動的にする予定なので、画像の大きさは入れ変わるので、画像が入れ替わっても隙間なくいい感じにしたいです。
→”いい感じ”とは言語化が難しいので、添付画像を載せました。
...
0
票
1
回答
76
閲覧数
border-radiusのサイズを指定したい
navバーの作成をしているのですが、リンクに対してborder-radiusを使用して枠線をつけたいです。
枠線をつけるところまでは行いましたが文字数によるサイズ・幅の違いをそろえたいです。
この場合、枠線のみに対して別にheightを指定することは可能なのでしょうか。
解決方法のご回答よろしくお願いします。
<!DOCTYPE html>
<html lang="en&...
0
票
0
回答
53
閲覧数
line-heightによってできた上下の余白を詰めるやり方が分かりません
line-heightによってできた上下の余白を詰めるやり方が分かりません、
今現在ホームページを作成していますが、実際のページで見てみると、見本と大きなずれがあります。
これを何とかするべく、line-heightの余白を詰めたいと考えています。
今現在取り組んでる余白の詰め方
line-height で生まれる要素の上下の隙間をなくす方法
上記URLのやり方でやろうとしていますが、calc() ...
0
票
0
回答
102
閲覧数
ピクセルパーフェクトのやり方が分からず、文章が一文字ずつずれてしまう
ピクセルパーフェクトで、サイトの制作をしようとしていますが、
文章の文字一文字一文字の位置を一回一回調節しないと、出来ないのでしょうか?
<div class="header-outer">
<p class="header-time"><span class="header-time-second">...
0
票
0
回答
156
閲覧数
Chromeのデベロッパーツールでスマホ画面を見ると一部反映されていない
製作中のwebサイトを確認するため、Chromeのデベロッパーツールでスマホ画面を見ると一部反映されていないのですが、どうしてでしょうか?表示されないのは動画の上に配置したSNSとハンバーガーメニューのボタンです。因みにPC用の画面では表示されます。
【全文】
HTML
!-- ハンバーガーメニュー 丸が左上から拡大 -->
<div class="openbtn"&...
0
票
1
回答
88
閲覧数
マウスの動きについてくる線を引く方法
画面の横幅いっぱいに線を引きたいと思います。
その線はマウスの動きに付いてくるようにしたいです。やり方、参考になりそうなリンクをご存知でしたら教えてください。
やりたいことのイメージはこんな感じです
https://www.fetchingfields.com
Accessibillity options のアイコンをクリック
Reading Line をクリック
...
0
票
0
回答
241
閲覧数
position:absolute;の後のブロックが重なる
list16及びlist17のブロックが重なってしまい困っています。
list16の要素に指定したposition:absolute;をコメントアウトすると二つの要素が離れることからこれが原因だと思うのですがこれはどうして起こるのでしょうか。
list17にmarginを指定してもtopのmarginが効かず重なったままです。解決方法をが回答よろしくお願いします。
<!DOCTYPE ...
0
票
1
回答
68
閲覧数
3D アニメーション
YouTubeのtutorialビデオ https://youtube.com/watch?v=NSWr6dkc_Xw&t=418s を見て そっくりそのままコピーしながら3Dアニメーションを作ろうとしています。
ある所まで順調にできました。そこまで出来上がったhtmlとscssが下記の通りです。
html
<div class="banner">
...
0
票
1
回答
114
閲覧数
二つの要素が重なってしまう
二つの要素が重なってしまい困っています。
1.list16-1, list16-2にそれぞれmarginを設定しているのですがlist16-2の要素がlist16-1に重なってしまい、全画面で表示すると上の画像の横にしたの画像が表示されるようになってしまいます。これはmarginの指定の問題ではないのでしょうか。この画像をlist16-...
1
票
1
回答
97
閲覧数
StylusでCSSの属性値を複数指定する方法はありますか?
あるサイトのユーザアイコン画像をchrome拡張機能のStylusで非表示にしたいと考えています。
下記属性値の、thumb-"数値"-200-"ユーザごとのランダムな英字"がユーザを識別する値のようです。
このように記述することで非表示にすることはできたのですが、多くのユーザを非表示にする場合
何十行も書く必要がありますので、...
0
票
1
回答
89
閲覧数
div間の隙間が埋まらない
div間の空白を消したいのですがmargin,paddingを設定しても消えません。この空白はどこからきているのでしょうか。解決方法をご回答よろしくお願いします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<...
0
票
1
回答
153
閲覧数
HPを作成中ですが、CSSとSCSSが反映されません。
現象
作成中のHPをVS CodeのLive Serverでプレビューとして見た。
CSSとSCSSが反映されない。
期待値
logo.svgをwidth: 120px;、height: 40px;に設定したい。
再現手順
下記のコードをGoogle Chromeで実行する。
index.html
<!DOCTYPE html>
<html lang="ja"&...
0
票
0
回答
52
閲覧数
スマホのsafariで開いた場合、videoタグの動画、文章が表示されません。
pcでディベロッパーツールで見た場合はスマホのサイズでも表示されるのですが、スマートフォンで実際に見たときに空白となっています。
pタグの文章すら表示されません。
videoタグの中にsrc=""の表記を入れてみても変わりませんでした。
どなたか教えていただけますでしょうか。
0
票
0
回答
76
閲覧数
スタイルシートが反映されない
CSSが反映されず文字と写真が別々に表示されてしまいます。また、firefoxで開くと Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content....
0
票
0
回答
118
閲覧数
HTML input 検索ボックス半角英数字が反応しない。
検索ボックスで半角英数字を入力し検索をしても検索ができない。
ひらがなや漢字であれば検索文字を受け取って検索するのですが、半角英数字だと反応しません。
半角英数字の判定などは特に入れていないのですが、反応しなくなる理由がわからずにいます。
どなたかご教授いただける方いらっしゃいますでしょうか?
よろしくお願いします。
<div class="menu-search-wrap&...
1
票
1
回答
789
閲覧数
VSCodeでCSS等にカラーコード記述するとその色を示すアイコンが欲しい
VSCode使い例えばCSSにカラーコードを打ち込んだ場合
以下の画像のように「カラーコードの前にその色を示す四角形のアイコンが表示され、これを押すとカラーピッカーが出てくる」というシンプルな形式にしたいと思っています。以前Bracketsを使っておりデフォルトでこのような形式だったと思います。
ウェブサイトなどでVSCodeのお勧めの拡張機能を探してみると”Color Highlight”...