[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
647
質問
1
票
1
回答
67
閲覧数
Bootstrap Icons の Code Point とは何か?
問題の要約
Bootstrap Icons のページからアイコンの情報を見ると,次のような画面が表示されます.
Code point とは何のことでしょうか?
Unicode や CSS や JS, HTML などと書かれていますが,これをそのまま書いても当然ながら反映されるわけではありません.
どのような使い方を想定したものなのでしょうか?
0
票
0
回答
52
閲覧数
Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい
現状
・Chromeで任意URLを閲覧
・右クリック後検証ページ開いた後、新規CSSルール追加
html{font-size:0.1em!important;}
やりたいこと
・毎回追加するCSSルールが同じなので、もっと簡単に(閲覧時のみ適用される)CSSルールを追加したい
その他
・元のソースコード自体には、変更を加えない前提です
・任意のURLに対してこちらの任意のタイミングで、...
-1
票
0
回答
103
閲覧数
test問題でございます [クローズ済み]
3つのバッククォートでコードを囲む、又は Ctrl + Kでコードフェンスを作成
そのまま
単一のバックフォートの間にテキストを配置してインラインコードスパンを作成
そのまま
スペース8個でリスト内に書式設定済みのブロックを追加
これは通常のテキストです
これはリストアイテムです
行をスキップして8個のスペースでインデントします。
8個のスペースがコードブロックをトリガーします。
0
票
0
回答
26
閲覧数
reactでinstagramの投稿機能のような画像の座標に対してタグを作成する方法を教えてください。
reactでsnsアプリを作成しています。
投稿の際に画像をクリックして、その座標にタグ作成フォームを表示させたいのですが、その方法がわかりません。
ご教授お願いいたします。
また、参考の記事や検索ワードがありましたら教えてください。
投稿ページの参考画像(インスタグラム)を添付します。
0
票
2
回答
69
閲覧数
addEventListenerにより発生したcontextmenuが一度目の右クリックで表示されない
実現したいこと
下記ソースコードは、それぞれJavascript,css,HTMLとなっています。
このHTML内のid属性のcontextmenu1とcontextmenu2を右クリック表示させたいです。
contextmenu1は class="japan" 上で右クリックした際に、contextmenu2 はそれ以外の場所(id="menu"内)...
0
票
0
回答
55
閲覧数
リンクのアドレスを取得したい
拡張機能を作成しようとしています。
リンクを右クリックし、コンテキストメニューに追加した新しい項目をクリックしたときに、リンクのアドレスを取得したいです。
現時点では、右クリックをしたらコンテキストメニューに項目が追加されるようにはなっているのですが、クリックしたリンクのアドレスを取得する方法が分かりません。わかる方いらしましたら、お手数をおかけしますがよろしくお願いします。
現時点でのコードです↓...
1
票
1
回答
107
閲覧数
inline-blockの要素を縦幅いっぱいに広げたい
現在ちょっとしたプロトタイプを作成しておりヘッダー部分を作っていたのですが、要素にhoverしたときに縦幅いっぱいに広がってほしいinline-blockの要素がうまく機能せずに、行き詰まっています。
例えば「要素1」の部分にhoverすると以下のような結果になり、
ご覧の通り上のborder-top:3px dotted red;の一番上までホバーしたときの色が変わらずに、...
0
票
2
回答
133
閲覧数
画像のような矢印をCSSだけで表示する方法
CSSでこのような矢印を作成するには、縦棒のCSSと斜めの棒を足すようなCSSを書けばできるのでしょうか?
1
票
1
回答
74
閲覧数
position:fixed の上でスクロールさせたい
以下のように、それぞれスクロール可能な2カラムの構成の時、中央のピンクの部分のものを配置したいのですが、その上だけマウスでスクロールできなくなってしまいます。
黄色の上なら黄色、水色の上なら水色をスクロール、難しければ、水色をスクロールさせたいです。JavaScript を使わずに何か対策はありますか?
https://codepen.io/23gv4u23v5u2/pen/PoQavVm
...
0
票
0
回答
54
閲覧数
ansi art を htmlに表示したい
このサイトの一番下にANSI art をHTMLで出力しているのを見つけました。
https://int10h.org/oldschool-pc-fonts/
ダウンロードをしてソースコードを見てみると、どうやら自動化させてように思えました。
自分も自分で描いたANSIartをhtmlに出力したいのですが、どのようなソフトでどのようにすれば出来ますか?
0
票
1
回答
55
閲覧数
検証ツールで選択した場所のコードの位置をsassで確認する方法
ワードプレスでホームページの作成をしています。
初心者です。
マルチポストです。
リンク
検証ツールで選択した部分が、style.css:2と記入されます。
これは、ワードプレスのプラグインの、
WP-SCSSを使用しています、そして、これでsassをcssに直すと、
2行目に一列にずっとコードが並んでいるようになるからなのですが。
これをstyle.css:2ではなく、sassのファイルで、...
0
票
2
回答
138
閲覧数
タブの中のボタンを横並びにしたい
タブの中にあるボタンを横並びにして見やすくしたいです
flexとか、display: inline-blockとかやってみたのですができません
ちなみに、余白はバラバラですが大丈夫です
具体的にどうしたらよいのかを教えていただきたいです
html
<!DOCTYPE html>
<html>
<head>
<meta charset="...
0
票
0
回答
34
閲覧数
Reactでスワイプしたら下から飛び出るフォームをtouchendとclickで作成したい
JavaScriptにあるtouchstart, touchmove, touchendを使用してスワイプしたら下から表示される下記のようなフォームを作成しました。下から上にスワイプすると出現する。そこに追加でグレーの横棒がButtonタグになっていてクリックでも開閉をしたいのですが、touchendの処理タイミングが被るのか、上手く現在のフォームの状態を持つ事が出来ないです。
どなたか詳しい方、...
0
票
1
回答
70
閲覧数
インデックス風のタブメニューを作りたい
小学生のタブのところに社会も入れたいのですが、入りません
あと、中学生と高校生の所に理科が入ってしまっています
これをどうにかしたいです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" ...
0
票
1
回答
103
閲覧数
アコーディオンメニューが意図した通り動作しない
ボタンを押すとアコーディオンメニューが開くようにプログラムを組んだつもりなのですが、うまく動きません。
.menu {
max-width: 600px;
}
.menu a {
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
label {
...
0
票
0
回答
58
閲覧数
表形式でチェックボックスか文字をタップすれば、抹線を引かれる、文字の色が変わるようにしたい
画像添付のリストで文字かチェックボックスをタップすれば、文字の色がグレーになり、抹線が引かれるような仕組みにしたいです。
どのようにCSS、またはスクリプトコードを記載すれば良いかご教示頂ければと存じます。
ちなみに、表形式にする以前は、idとforでチェックボックスと、ラベルを紐つけすることで文字タップすれば文字の色がグレーになり、抹線が引かれるような仕組みにできて、...
0
票
1
回答
546
閲覧数
HTMLのインライン修飾機能:elements.style
2つの画像を参照してください。
Aをお手本にしてb要素を付け加えたいのですが、Bのようにうまいこといきません。
どのようにすればb要素を追加することができるのでしょうか。
A
[![画像の説明をここに入力][1]][1]
B
[![画像の説明をここに入力][2]][2]
画像を追加します。
[![画像の説明をここに入力][3]][3]
...
2
票
4
回答
168
閲覧数
ボタンの中に斜めの線を入れたい
HTML, CSS初心者です。
添付の画像のように、斜め線が入ったボタンの実装をしようと思い、
実装サンプル集を参考に色々試行錯誤しましたが、斜め線をボタンの中に組み込む実装がうまくできませんでした。
cssサンプルをご提示いただけないでしょうか?
よろしくお願いいたします。
0
票
0
回答
28
閲覧数
tailwind cssのtypographyプラグインのような、文字の装飾のためのCSSライブラリってありますか?
tailwind cssのtypographyプラグインのような、ブログエディターとかで使われるような文字の装飾のためのCSSライブラリってありますか?
0
票
0
回答
56
閲覧数
react-scripts v5 が正しく機能しない
以前はCRA4を使用していましたが、CRA5にupdateしました。その時に問題となったのは、react-scripts4から5に変更したときです。5にして、react-scripts startをするとサイトは表示されますが、cssがぐちゃぐちゃになります。
antdを使用しているので、antdやcss周りのreact-scriptsのwebpackのcss-...
1
票
2
回答
90
閲覧数
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
回答
60
閲覧数
LP作成の効率的な方法が分からない
LPの制作方法がもっと効率的にならないか迷走し始めたため質問いたしました。
■前提
私は現在LPを基本的なコーディングで作成しております。
そのためコーディングのみでLP作成をする際に、
何か別の方法(ツール)を使ったほうが効率的ではないかと考えました。
一例で恐縮ですが、今回の質問では下記のLPを作成した場合でご回答お願いいたします。
https://service.ourly.jp/
■...
0
票
1
回答
112
閲覧数
sassを使いたいのですが、CSSファイルが自動生成されたりしません。
ワードプレスでサイトの制作をしています。
VSCでサイトを作成する場合、sassのファイルを制作すれば、
自動的にcssのファイルが制作されますが、
FileZillaではsassを作っても自動的にcssファイルが出来たりしません。
今までは、VSCでsassファイルを作り、
それで自動生成されたCSSファイルの内容をFileZillaに作ったCSSファイルにコピーしていたのですが、それでは、...
0
票
1
回答
53
閲覧数
Twitter の「検索結果に対応するツイート一覧」を React に埋め込む方法
お世話になります。
Twitter の検索結果に対応するツイート一覧を、できるだけ快適に React に埋め込みたいと思っているのですが、良い方法をご存じの方はいらっしゃいますでしょうか?
動作のイメージとしては、Twitter で hoge と検索した場合に、 https://twitter.com/search?q=hoge に対応する検索結果が描画されることを期待しています。
...
0
票
1
回答
160
閲覧数
ddタグの文頭を揃えたい
画像の値段の部分の文頭を揃えたいのですが調べてもいまいちやり方が出てきませんでした。
解決方法わかる方いらっしゃいましたらよろしくお願いいたします。
.menu{
margin: 50px 60px;
}
.menu-box,.menu-box2{
width: 100%;
display: flex;
position: relative;
}
....
0
票
0
回答
50
閲覧数
親要素にTransformを指定した場合の画面固定について
ウェブサイトの制作初心者、初質問です。
ページのヘッダーを画面の先頭にposition:fixedで固定していたのですが、
サイトがスマホのみのレイアウトのためpcでみた時は少し大きく表示したいとのオーダーがあり、
zoomプロパティはfirefoxで使えないためhtml要素にtransform:scale();を使って画面幅が768px以上の時は1.25倍で表示するようにしました。
@media ...
0
票
0
回答
271
閲覧数
ハンバーガーメニューを開いている最中bodyはスクロールしない設定にしていたが、メニュー内のドロップダウンを開いた時メニュー内だけでなくbodyもスクロールしてしまいます
html、cssがすこし触れる程度でjavascriptは主にコピペで使用している初心者です。
スマホでハンバーガーメニューを作成した際、
メニューを全画面で開いた時に隠れているbody全体はスクロールしないようjQueryで設定していましたが、
メニューの中身がドロップダウンで開くようになるとbodyのスクロールが復活してしまいました。
...
0
票
1
回答
62
閲覧数
height: auto;で設定した範囲が、中途半端なところで途切れます。
画像のように height: auto; がすべての範囲に届きません。
今はタブレット用のデザインを作成しています。
下記コードになります。
<section class="section-article">
<div class="article">
<div class="article-...
0
票
0
回答
53
閲覧数
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
回答
93
閲覧数
javascriptでの時間差の設定をしたい
何の作業中か
模写コーディングをしています。
目標のサイト https://linew.co.jp/
問題
時間差でfadeInさせたいができない。
現在は、同じタイミングで出てきてしまう。
試した事として、animation-delay などで設定を試みてみた。
目標
時間差でのfadeInをすること。
html
<!DOCTYPE html>
<html>
<...
0
票
1
回答
571
閲覧数
input date の日付ピッカーの表示をカスタマイズしたい
左下の「削除」を消したいのですが方法がわかりません。
また、カレンダーの祝日を赤文字で表示もわかりません。
0
票
1
回答
53
閲覧数
cssのmarginが効いていない
問題
指している所にmarginが反映されていない
###目 標
marginを反映させる
news other-service➡の部分
目標画像
現在
HTML
<section>
<div class=our-service>
<div class="content1">
<div class="Our-...
2
票
1
回答
72
閲覧数
cssの設定を行っているがmarginで間が出来ていない
問題
今回の課題として、other-service➡の部分を下のour visionとを余白空けるためにmarginで設定してありますができていません。
目標
前者の画像が現在の画像です。
結果として、後者の画像のようにしたいです。
現在、自分でも問題の追及していますが解決出来ていません。
#our-service{
z-index: 9;
}
.content1{
...
0
票
0
回答
141
閲覧数
ピクセルパーフェクトの正しいやり方がわかりません。
ウェブデザイナー(コーディングもできる)を目指しています。
ピクセルパーフェクトが重要だと聞き、やり方を調べると、
XDやフォトショップの見本のデザインをスクショで撮り、拡張機能のパーフェクトピクセル、で当てはめて調節するやり方と、
XDやフォトショップの数値通りにデザインするだけでもピクセルパーフェクトというようだとわかりました。
どっちがほんとうのピクセルパーフェクトのやり方なのでしょうか?
...
0
票
0
回答
35
閲覧数
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
回答
57
閲覧数
WordPressプラグインの「CustomFieldSuite」に挿入した値をパーマリンクに設定したい
WordPressプラグインの「CustomFieldSuite」を使用したサイトを構築しています。
カスタム投稿はCPTUIを使用し「merchandise」としていまして
そこにCFSを適用して、「num」というフィールドを作成したのですが、そのnumフィールドに設定した値をスラッグにしたいのです。
例)https://xxx.com/merchandise/numの値
...
0
票
1
回答
80
閲覧数
Stylusに記述するまでの流れ
画像を参照してください。
ここで質問ですが
左の枠で囲ったコードに対応するのは右の青枠で囲んであるDOMの事か
これが記述されていれば、下にStylesがあり、その中から変更すべきCSSを変える
Stylusに記述するコードは下記の事ですが、
.myblocks p {
font-size: 1.1em;
line-height: 2;
color: #111111;
}
....
0
票
1
回答
113
閲覧数
要素のclassはどのようにして決めるか
消したい要素の上で右クリックして「検証」を選びます。
HTMLの要素が青枠で示され、さらにStylusに消したい要素を記述します。
.entry-card-content {display: none;}
その要素はdivに設定されているclass「entry-card-content」らしいですが、なぜ、entry-card-content となるのでしょうか。
.entry-card-...
0
票
1
回答
85
閲覧数
javascriptでフェードインさせたい
目標
htmlの74~87行の部分をスクロールして見えてきた時にフェードインさせることです。
・Our Serviceが下に
・image/black.png が上に
・image/educure01.jp DXを推進するエンジニア育成
IT事業参入をご検討中の事業者様向けのサービスです。 が上に
faideinさせたいです。
問題点
一部設定してみました。...
0
票
1
回答
103
閲覧数
要素の横並びが指定通りになりません(float:left;)
rightcontentに配置した二枚の画像を右側の枠に広告のような形で入れたいです。
mainとrightcontentのグループに分けてfloat:left;を用いて右への回り込みをさせようと思いましたがサルの画像のブロックが下にずれてしまい二枚の画像も横へ行きません。
marginによる横幅の問題かとも思いましたがmarginを消しても変化しませんでした。原因と解決方法を知りたいです。
...
0
票
2
回答
106
閲覧数
.noscroll { overflow: hidden; position: relative; } が適用されず、スクロールできてしまう
以下のコードが機能しません。自分のパソコン以外だとうまくいくのかもしれません。
body.noscroll {
overflow: hidden;
実際の表示例
スクロール前の画像
スクロール後の画像
現状のソースコード
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity=&...
0
票
2
回答
274
閲覧数
画像を横3列にして、画面の幅に応じて列数を変えたいです。
画像を横3列にして、画面の幅に応じて列数を変えたいです。
■やりたいこと
・画像を3列表示にして、画面の幅が狭くなると3列から2列になるような感じにしたいです。
・コードでは画像の順番は固定になっていますが、動的にする予定なので、画像の大きさは入れ変わるので、画像が入れ替わっても隙間なくいい感じにしたいです。
→”いい感じ”とは言語化が難しいので、添付画像を載せました。
...
0
票
1
回答
78
閲覧数
border-radiusのサイズを指定したい
navバーの作成をしているのですが、リンクに対してborder-radiusを使用して枠線をつけたいです。
枠線をつけるところまでは行いましたが文字数によるサイズ・幅の違いをそろえたいです。
この場合、枠線のみに対して別にheightを指定することは可能なのでしょうか。
解決方法のご回答よろしくお願いします。
<!DOCTYPE html>
<html lang="en&...
0
票
0
回答
54
閲覧数
line-heightによってできた上下の余白を詰めるやり方が分かりません
line-heightによってできた上下の余白を詰めるやり方が分かりません、
今現在ホームページを作成していますが、実際のページで見てみると、見本と大きなずれがあります。
これを何とかするべく、line-heightの余白を詰めたいと考えています。
今現在取り組んでる余白の詰め方
line-height で生まれる要素の上下の隙間をなくす方法
上記URLのやり方でやろうとしていますが、calc() ...
0
票
0
回答
111
閲覧数
ピクセルパーフェクトのやり方が分からず、文章が一文字ずつずれてしまう
ピクセルパーフェクトで、サイトの制作をしようとしていますが、
文章の文字一文字一文字の位置を一回一回調節しないと、出来ないのでしょうか?
<div class="header-outer">
<p class="header-time"><span class="header-time-second">...
0
票
0
回答
193
閲覧数
Chromeのデベロッパーツールでスマホ画面を見ると一部反映されていない
製作中のwebサイトを確認するため、Chromeのデベロッパーツールでスマホ画面を見ると一部反映されていないのですが、どうしてでしょうか?表示されないのは動画の上に配置したSNSとハンバーガーメニューのボタンです。因みにPC用の画面では表示されます。
【全文】
HTML
!-- ハンバーガーメニュー 丸が左上から拡大 -->
<div class="openbtn"&...
0
票
1
回答
95
閲覧数
マウスの動きについてくる線を引く方法
画面の横幅いっぱいに線を引きたいと思います。
その線はマウスの動きに付いてくるようにしたいです。やり方、参考になりそうなリンクをご存知でしたら教えてください。
やりたいことのイメージはこんな感じです
https://www.fetchingfields.com
Accessibillity options のアイコンをクリック
Reading Line をクリック
...
0
票
0
回答
359
閲覧数
position:absolute;の後のブロックが重なる
list16及びlist17のブロックが重なってしまい困っています。
list16の要素に指定したposition:absolute;をコメントアウトすると二つの要素が離れることからこれが原因だと思うのですがこれはどうして起こるのでしょうか。
list17にmarginを指定してもtopのmarginが効かず重なったままです。解決方法をが回答よろしくお願いします。
<!DOCTYPE ...
0
票
1
回答
71
閲覧数
3D アニメーション
YouTubeのtutorialビデオ https://youtube.com/watch?v=NSWr6dkc_Xw&t=418s を見て そっくりそのままコピーしながら3Dアニメーションを作ろうとしています。
ある所まで順調にできました。そこまで出来上がったhtmlとscssが下記の通りです。
html
<div class="banner">
...