[css] タグが付いた質問

CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。

702 件の質問
絞り込み
並べ替え
タグ付けされた
1
1 回答
183 閲覧数

safari で contenteditable 内の要素が削除されてしまう

teratailにも同様の質問 をしましたが回答が得られなかったためこちらに質問させていただきます。 どなたかわかる方、教えていただけると嬉しいです。 現象の説明 safariのみで起こる現象です。 contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。 ユーザが改行するなどして新しく生成された要素 position:relative;が指定されている ...
KimTom's user avatar
  • 11
0
1 回答
81 閲覧数

codepenのデモをコピペしたが画像に隙間ができる原因

初心者で初めて質問します。 下記のURLのcodepenによるCSS のみでサムネイルナビ付きスライダーをコピペしたのですが 画像に隙間ができてしまう原因をご教示頂ければ幸いです。他の動作には問題は有りません。 宜しくお願いします。 https://digipress.info/tech/pure-css-slider-with-thumbnails/ body { ...
よっこらしょ's user avatar
1
1 回答
1,069 閲覧数

VS Codeのツールバー?の名称

Visual Studio Codeのテーマカラーを変更しています。 このツールバーの正式名称はなんでしょうか? こちらのドキュメント内にプロパティが定義されていますか? https://code.visualstudio.com/api/references/theme-color
kmyeeeee's user avatar
1
1 回答
916 閲覧数

CSSで空白を挿入する方法

<div class='a'> <span class='b'>1</span> <span class='c'>いい天気</span> <div> このようなhtmlがあって 1いい天気 と表示されます。 これをCSSを編集することで 1 いい天気 のように間にスペースほどの間隔を空けることは可能ですか? (...
sapcal000's user avatar
  • 445
0
1 回答
366 閲覧数

事前に変更できないHTMLに対して、後付けで(class名を付与する等して)CSS装飾を加えたい

最終的にやりたいこと 下記で、・で開始されない文字列(「あいうえお」と「かきくけこ」)に対して強調表示したい <p>あいうえお<br> <br>かきくけこ<br> ・さし<br> ・たち<br> ・なに<br> ・はひ<br> ・まみ</p> 条件 ・...
re9's user avatar
  • 6,714
5
0 回答
182 閲覧数

Sassに複数の条件を適用する方法は?

[主旨] WebのプロジェクトでXMLからHTML5への変換を担当しております.世界各国語向けのCSSを生成しなければならないので、LTR/RTL(アラビア語、ヘブライ語)を分けて.scssファイルから.cssファイルをコンパイルして生成してます.今度更にコンテンツの製品のブランドをパラメータとして導入しなければならなくなりました....
tmakita's user avatar
  • 1,088
0
1 回答
148 閲覧数

グローバルナビゲーションが表示されません

以下のようにHTML、CSSを書きましたが、WEB上でグローバルナビゲーションが表示されません。 何が原因でしょうか? 対処方法も含めて、教えて頂きたいです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta name="viewport" content="width=device-width, ...
ちびくろ's user avatar
0
2 回答
501 閲覧数

@font-faceのlocalに指定すべき文字列を知るには?

CSS の @font-face の src には url() の他に local() を指定することができます。たとえば src: local("MS ゴシック") と書けばローカルのMSゴシックを指定できます。 ここで、手元にある有名でないフォントについて、local に指定する名前をどう知れば良いのか知らないことに気付きました。CSS Fonts Module Level 3 には ...
nekketsuuu's user avatar
  • 2.4万
1
1 回答
94 閲覧数

画像だけ拡大したいですが文字まで拡大する

animationで説明文章の背景画像だけ大きくしたいですが、できません 説明にだけ1.1の逆数を掛けましたがこれでもうまく動きません 簡単にできると思ったんですが、できず、助けてください(T_T) できればJavascriptは使わずに済ませたいです .container-panel { width: 500px; height: 500px; overflow: ...
user37046's user avatar
  • 287
1
0 回答
2,792 閲覧数

iPhoneでのバウンススクロールを無効にするには

Ruby on Railsの練習でTwitterのようなサイトを作っているのですが、バウンズスクロールを無効にする方法がどうしてもわかりません。 MacOS(Chrome等)ではバウンズスクロールを無効化出来たのですが、iPhoneでのバウンズスクロールがどうしても出来ません。 html, body { overflow: hidden; } で個別の要素にheight: 100%; ...
user37422's user avatar
1
1 回答
975 閲覧数

imgタグで、アスペクト比を保ちつつ長辺の長さを指定したい [重複]

CSS を使って img タグで表示される画像のサイズを以下のように指定したいです。 長辺の長さは 128 ピクセル、かつ、 縦横の長さの比は維持。 たとえば具体的には以下のように表示したいです。 256×256 → 128×128 256×128 → 128x64 128×64 → 128×64 64×128 → 64×128 64×64 → 128×128 32×64 → 64×128 ...
nekketsuuu's user avatar
  • 2.4万
0
0 回答
1,220 閲覧数

IEの「イントラネット サイトを互換表示で表示する」について

IEの「イントラネット サイトを互換表示で表示する」について教えてください。 今回作成したアプリをIE11で開こうとすると、「イントラネット サイトを互換表示で表示する」の設定のせいだと思われるのですが、IE7のモードで表示されてレイアウトが乱れてしまいます。 よって試しに「イントラネット サイトを互換表示で表示する」のチェックを外してみると、期待しているレイアウトになりました。 そこで X-...
yukinko's user avatar
4
1 回答
419 閲覧数

IE 11では思ったように星の色が変わりません。

星にマウスを乗せた時、色がつくように実装をしております。 Chrome, Edge, Firefox, Safariでは問題なく期待通りに動きますが、 なぜかIE11では星が1つのサイズしか色がつかないです。 下記がソースコードになります。 <html> <style> .select-star-rating { font-size: 0; ...
sangjun's user avatar
  • 43
0
2 回答
285 閲覧数

フォーカスのデフォルトを設定するには

フォーカスのデフォルトを設定するにはどうすればいいですか? first-childを試しましたがこれだと他をフォーカスしても最初のフォーカスが残っていまいます これをフォーカスするたびにフォーカスが変わるようにしたいです ul { vertical-align: middle; text-align: center; font-size: 0; } li { ...
user37046's user avatar
  • 287
0
1 回答
28 閲覧数

フォーカスしてフォントサイズを変えると他とliの位置が変化するのを直したい

フォーカスしてフォントサイズを変えると他とliの位置が変化しますがこれをどうにか一律に揃えたいです vertical-alignとtext-alignを試してみましたがうまくいきませんでした なので何か別の原因だと思いますが調べてもわかりませんでした ul { vertical-align: middle; text-align: center; } li { ...
user37046's user avatar
  • 287
0
1 回答
711 閲覧数

特定のアニメーションだけ無効化したい

ボタンをクリックしてダークモード化するスクリプトを作っています 枠線もボタンクリックで変化させたいですが、これだけアニメーションの時間をなくしたい(ぱっとすぐに切り替えるアニメーション方法にしたい)です transition: all 1s;の下にtransitionを書いてみましたが、アニメーション全部が上書きされてしまいます 一つだけのアニメーションを変えることはできますか? $("...
user37046's user avatar
  • 287
0
1 回答
88 閲覧数

transformで斜めにならない

先ほど質問した際 に回答頂いたものを用いて課題に取り組んでいましたが、塗りつぶした部分を斜めにしたいのですが、斜めにすることができません。 書き方はこちらの参考にしましたので間違いないと思いますが、よろしくお願い致します。 <p>アリスは川辺でおねえさんの<span class="marker">よこ</span>にすわって、なんにもすることがないのでとても&...
user37046's user avatar
  • 287
3
1 回答
138 閲覧数

文章の一部を黒く塗りつぶしたい

こちらの文章で文字の一部だけ黒く塗りつぶしておきたいのですが、何か方法はありますでしょうか。 jqueryをつかった方法はありましたが、できればcssだけでやりたいと思っています。 <p>アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈(たいくつ)しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。&...
user37046's user avatar
  • 287
1
1 回答
239 閲覧数

flexbox で整列しているリストを5個刻みで改行したい

実装したいこと リストを5個刻みで改行したい。 今は画像の借り入れだが、本来はeachforでデータを取得し必要分をリストに入れたい。 現在の状況 10個のliタグがある。 それぞれはラジオボタンにlabelされている。 liタグはflexboxにより横並びしている。 試したこと 5個刻みでulタグを生成していたが、foreachでデータベースにある分だけ、  リストを作る際に、...
k0727's user avatar
  • 15
0
1 回答
378 閲覧数

ラジオボタンの選択状況の可視化について

現在の状況 複数の画像を表示し、それらをラジオボタンとして機能させています。 ラジオボタン自体の<input type='radio'>は{display: none;}で非表示にして、<ravel>で囲まれた画像がボタンとして機能しています。 現在クリックしても、ユーザー視点でクリックしたかが分からない。 実装したいこと 画像が選択された際に選択状況が分かるように、...
k0727's user avatar
  • 15
0
1 回答
1,747 閲覧数

GitHub Pagesでcssとhtmlをアップしても、cssが反映されて表示されない

プログラミング初心者です。 GitHub Pages上でhtmlファイルとcssファイルを公開したのですが、以下のリンクをみる限りどうもcssが反映されません。 https://shogonino.github.io/myblog/ デバックするために、以下のことをやってみました。 ・CSSの階層指定の変更 ・<base href="{{site.github.url}}"> ...
Shogo's user avatar
  • 3
0
1 回答
226 閲覧数

メガメニューのトグルがうまく行かない

ヘッダーにメガメニューを実装しようとしています。 下記スニペットのような実装をしているのですが、 初めて.nav(または.nav__item)をホバーした場合はslideDownで開く .nav内でかつ.nav__itemを行き来する場合はfadeInとhideで切り替え .navのエリアから出た場合はslideUpで閉じる ということがやりたいです。 .nav内にいる場合は.navに....
Aroma's user avatar
  • 121
0
1 回答
9,051 閲覧数

画像の高さを親要素の残りの高さに合わせる

画像の大きさを 親要素の残りの残りの高さに合わせて自動で縮小したいです。 方法はある程度問いませんが、特殊な条件なのもあってどうしたらいいか迷っています。 現状の説明をします。 親要素のdivの中に子要素のdivがあり、子要素のdivの中にテキストや画像などのインライン要素が入っています。 body部分は別のプログラムから自動生成されます。 ...
hato's user avatar
  • 3
2
1 回答
421 閲覧数

画像の一部を pointer-events: none; で反応しないようにすることは可能か?

以下の画像の左側50pxだけを pointer-events: none; で反応しないようにしたいのですが可能でしょうか? ダミーを作ってリンクを貼らないで作るしかないのでしょうか?
荻原大地's user avatar
2
1 回答
2万 閲覧数

cssのセレクタで、divタグ内部の文字列が指定した文字列と一致するときだけ指定する方法を知りたい

下記のやりたいことをjavascriptを使わずにcssだけで実現したい場合、 cssのセレクタはどのように指定すればよいのか教えていただきたいです。 やりたいこと 次のようなdivタグがあったとします。 <div class="hoge">りんご</div> <div class="hoge">ばなな</div> このときに、...
Akiyama Nao's user avatar
1
1 回答
185 閲覧数

olの行頭番号をboldにするには??

XMLアーキテクチャにDITA(Wikipediaへのリンク)というのがありまして、それをPDFにしたりHTMLにしたりする仕事をしています.今回はHTML5への変換の質問です. 簡単に言いますと、表題のとおりolの行頭番号にfont-weight:bold;を適用したいのですがやり方がわかりません. まずDITAには作業の手順を示すsteps/stepという要素があります....
tmakita's user avatar
  • 1,088
-1
1 回答
361 閲覧数

AirPods Proのサイトようなサイトをつくるには

AirPods Proのサイト https://www.apple.com/airpods-pro/ のように動画とスクロールバーが連動して動くサイトを作りたいと思っています。 どうしたらいいんでしょうか? 大まかな制作の方法ご存じの方いますか?
atsushi_kane's user avatar
0
1 回答
192 閲覧数

レスポンシブル iOS 横幅が合わない。

レスポンシブル Webページを作ったのですが、iPhoneのみ、なぜか横に幅ができ横スクロールしてししまいます。画像なども見切れる(左よりになる。) CSSでwidthなどは 100% 等に指定していても 20% ぐらい必ず右に隙間ができてスクロールされてしまう。 解決方法があったら教えてください。 viewportは指定しています。 <meta name="viewport" ...
ponta's user avatar
  • 11
0
1 回答
643 閲覧数

同じ画面内で特定のエリアのみcssを反映させたい

以下HTMLで、titile_area,body_areaのみCSSを反映させたいが、どうしたらいいか? 現状は、titile_area,body_area以外の部分にも適用されてしまう。 <div class="title_area"> <table> <tr> <th>A</th> <th>B</...
user9779345's user avatar
0
1 回答
3,083 閲覧数

jQueryを使ってテーブルの複数行を表示、非表示にしたい

表を作成していて初期は隠し行ありの状態でその行をクリックすれば隠し行すべてが表示されるものを作成しております。 現状下記サイトを参考にして作成したのですが、1行しか開閉できません。(初期状態で残りの行も見えてしまう) http://kachibito.net/snippets/expand-table-rows-using-jquery-html-and-css ...
user36297's user avatar
0
1 回答
2,170 閲覧数

VSCodeでCSSの補完がしたい

CSSファイルで.を入力すると VSCodeで開いているHTMLファイルから 使用されているClass名が補完されるプラグインはありませんか?
shiba's user avatar
  • 3
0
1 回答
270 閲覧数

アイコンをマウスホバー時に滑らかに別アイコンに、マウスアウトした際に滑らかに元アイコンに変化させたい

『スニペットを実行』を押して、動作サンプルをご確認いただけますでしょうか。 html { text-align: center; } #check, .fas.fa-check-circle { display: none; } i { cursor: pointer; font-size: 64px; } #check:...
Tiamante's user avatar
  • 169
0
1 回答
1,831 閲覧数

Javascriptで検索ボタンありの絞り込みを作りたい

チェックボックスにチェックを入れたら、リアルタイムでクラスが付与されてdisplay:noneになったりdiplay:blockになったりするものは多いのですが、いちいち画面がチラつくのでチェックをつけ終えて「検索」を押すとクラスが付与されてほしいです。 下記を参考にしましたが、 https://www.mitsue.co.jp/knowledge/blog/frontend/201709/...
メロン's user avatar
3
1 回答
133 閲覧数

ブロック要素とインライン要素について質問があります

お世話になります。 CSSとHTMLでブロック要素インライン要素の違いを学習しています。 https://60pablog.com/html-block-inline/#CSS http://www.htmq.com/htmlkihon/005.shtml 上二つのサイトを参考にしていますが、ブロック要素インライン要素をCSSで変えられるとかかれていました。 ...
kazt0's user avatar
  • 31
0
1 回答
178 閲覧数

CSS headerに設定したulのクラスが下の階層のulにも反映されてしまうため、反映されないようにする方法

header-dropmenuに設定しているul/li aのcssが下層にも反映されてしまい、 control-sidebar-menuのcssを反映させることができません。 control-sidebar-menuのul/liのcssを反映させるためにはどのようにしたらよいか教えていただけないでしょうか。 .header-dropmenu { list-style: none; ...
goodtime1234's user avatar
0
1 回答
113 閲覧数

divタグとasideタグの間のスタイルシートを用いて間隔を空けるためにどうすれば良いでしょうか?

いつもお世話になっています。 下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。 【質問の主旨】 上記の画像はこちらの記事の画面下部を表しています。(ネイビー色の)タグの箇所はdivタグで囲んでいて、「のんさん関連記事」はasideタグで囲んでいます。divタグとasideタグの間隔がつまりすぎているように見えますので、両者に適当な間隔つけたいと考えています。...
echizenya_yota's user avatar
0
1 回答
70 閲覧数

Gridの表示場所を切り替えられない

グリッドをつかって画面がスマホとパソコンで分岐します メディアクエリでgrid-template-areaを再定義しして上書してメインレイアウトとサイドレイアウトの変更を行ないますが この再定義が長いのでもう少しスマートにできないかと悩んでいます どなたか方法をご存知でありませんでしょうか? <div class="top"> <div class="side">...
sho_kr's user avatar
  • 3
1
1 回答
958 閲覧数

横並びのアイコンの縦位置を中央揃えにしたい

4つのアイコンを横に並べて、各アイコンをボーダーで囲っています。 また、アイコンはチェックボックスとボタンが混ざっています。 下記コードの下の「スニペッドを実行」を押すと、状態をご確認いただけます。 チェックボックスのアイコン(下記コードで言うとAとDのアイコン)はクリックすると色が変わります。 html { text-align: center; } /* リセット *...
Tiamante's user avatar
  • 169
1
1 回答
681 閲覧数

CSS animationで初期描画に含まれない要素がうまく表示されない

CSSアニメーションについての質問です。 両面に文字が書かれたカード(div.card)に回転するアニメーションを付けたいと思っています。 このときに、裏面(div.back)にはbackface-visibility: hiddenを指定していると、回転して表を向いても、Backの文字がうまく表示されません。 おそらく初期描画時にはレンダリングされないためだと思うのですが。。。 ...
トルコぷに's user avatar
0
1 回答
237 閲覧数

jQuery の :visible に相当するセレクタ

jQuery の :visible に相当するセレクタを CSS で記述する方法はありますか。 たとえば、ボタンが横に複数並んでいる状態で右端のボタンのみ角丸にしたい場合 last-of-type { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } と記述したりしますが、条件によってボタンの表示/...
jirolabo's user avatar
  • 2,224
2
1 回答
3,061 閲覧数

チェックボックスの非チェック時、チェック時、disabled時のデザインを変更する方法

現状 fontawesomeを使用したチェックボックスを作っています。 document.getElementById("disabled").onclick = function () { var obj = document.getElementById("check"); if (obj.disabled === true) { obj....
Tiamante's user avatar
  • 169
3
1 回答
3,027 閲覧数

border-spacingをtableの一部の範囲に適用しない

table.ex2 { border-collapse:separate; border-spacing:10px 50px; } <table class="ex2" border="1"> <tr> <td>Cleveland</td> <td>Brown</td> </tr> <tr&...
user25636's user avatar
0
1 回答
162 閲覧数

JavaScriptの関数で使われる仮引数がCSSのidセレクタとして使える理由を教えてください

いつもお世話になっています。 下記の質問についてご教示を願います。 【質問の主旨】 JavaScriptの関数で使われる仮引数がCSSのidセレクタとして使えることはどういう理由に基づくのでしょうか? 【質問の補足】 1. 【質問の主旨】に関するコードは以下のjsファイルとindex.htmlに基づいています。form_list.jsの1行目で使われているnameがidセレクタの名前(...
echizenya_yota's user avatar
0
1 回答
1万 閲覧数

Swiper.jsによるスライダーのレイアウトが崩れてしまう

実現したいこと 下記キャプチャのように中心にスライダーのアクティブ画像を表示し、左右にアクティブ画像に隣接する前後の要素の画像を1枚づつ見切らせて表示したい。 https://gyazo.com/c86fcc89613d7e7efe3bf351a578a49f 現在の状況 アクティブ画像の位置が中心からかなりズレてしまい、レイアウトが崩れてしまっている https://gyazo.com/...
genki's user avatar
  • 23
0
1 回答
81 閲覧数

リサイズしてもヘッダーの高さはブラウザに合わせたい

やりたいこと <header>の要素をどのブラウザで見てもファーストビューのように一画面に収まるようにしたいです。 現状ではブラウザの高さを変えると<header>が下のコンテンツに重なってしまい崩れてしまいます。タブレットで見たときは<header>の要素が上部にあって、下が空きすぎています。 いい感じに収まるようにしたいです。 <header id=...
user avatar
0
0 回答
1,131 閲覧数

イメージマップのレスポンシブ対応がうまくいかない

既存サイトで固定横幅で正常なイメージマップをレスポンシブ対応しようとしているのですが、以下のようにやってもブラウザの横幅を変えた時にイメージマップの縮小に対応してリンクエリアが追従されません。(以下書き直します) ■script部分 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/...
makapapa's user avatar
0
1 回答
88 閲覧数

画像スクロールでスマホで見たときに折り重ならないようにしたい

CSSのみで画像を無限スクロールしたのですが、スマホで見たときに画像どうしが折り重なってしまいます。 2つめのul要素が前に出てきているのが原因だと思うのですが、スマホの時のみliやimgの幅を変更してみても解決できません。 これを折り重ならずに画像1枚分が幅いっぱい表示されるようにしたいです。 どこをどう直せばよいでしょうか。 参考にしたサイトはこちらです。 https://chocolat5....
user avatar
0
0 回答
77 閲覧数

メガナビゲーションの高さ、グローバルナビのマウスオーバ時の色について

お世話になっております。 掲題の件で質問させていただきます。 メガナビゲーション内を左右に分けたい場合、以下のコードで実施しましたが高さを固定しないとロード時に背景色が表示されないことがあります。 この場合の回避方法をご教示お願いいたします。 また、グローバルナビのリストにマウスオーバ時に色が変化しますが、メガナビゲーション内にカーソルを移動すると色が保持できません。 ...
biginner_web's user avatar
0
1 回答
185 閲覧数

追従するフッターをcanvas領域の下まで下げたい。

現状 キャンバスに任意の画像をアップロードし、キャンバスに描画する機能を実装しています。 下記リンク先で動作をご確認いただけます。 demo キャンバスに画像を読み込むと、キャンバスとフッターがフェードインします。 フッターはスクロールに追尾します。 使用しているライブラリ ・jQuery ・Fabric.js 問題点 一番下までスクロールしても、...
Tiamante's user avatar
  • 169
0
1 回答
3,950 閲覧数

chrome のバージョンアップでスクロールバーが消える謎!!!

今日 chrome を最新の 76.0.3809.100 にアップデートしたら 下記のような構成のページでスクロールバーが表示されなくなりました すでに旧バージョンでの確認方法がないので再現できてるかわからないのですが .sub の中の長い form をスクロールできていたのが 現在スクロールが表示されずにスクロールできません (位置関係のCSSでのみ抜き出して わかりやすいように ...
user avatar

1
4 5
6
7 8
15