CSS

全5355件中1~20件表示
  • cssのfont-sizeとは

    例えば font-size:14px; と指定した場合、何が(どこの部分が)14pxなんでしょうか?

    • ベストアンサー
    • 暇なときにでも
    • muuming2001
    • CSS
    • 回答数 2
  • ブログスキン編集

    標記は具体的にどういうことですか。 回答はテキストのみでお願いします。

    • 締切済み
    • 困ってます
    • nada
    • CSS
    • 回答数 1
  • Codepen ビュー欄の記述を削除したい

    添付参照してください。 左のペインになにも入力していないのに右欄を削除するにはどのようにすればいいのでしょうか

    • 締切済み
    • 困ってます
    • nada
    • CSS
    • 回答数 1
  • css ,videotタグ。ホームページに動画を埋

    css ,videotタグ。ホームページに動画を埋め込んだのですが、左右に黒帯ができてしまいます。この黒帯を無くしたいです。 ソースコードは下にあります。object-fit: fill;でも治りません。 動画は元は1280×720サイズで作成し、ホームページ用にサイズを小さくしてmp4に書き出しました。1280×720から896×414に変更、アスペクト比16:9でOK。 1280×720の時は黒帯はでませんが、サイズを896×414に変更してアップロードすると黒帯が出てしまいます。 動画編集ソフトで書き出しする時アスペクト比は自動で16:9になるので間違ってないと思います。付属画像参考 ●実際のホームページのURLは以下です (何故かアクセス制限が出て見れなかもしれませんので、ソースコードと付属画像も下に提示してます。) https://rensyuu.s205.xrea.com/rensyuu12.tokyo/PHPMailer/201.html ★参考にしたサイト動画の大きさ(デバイス別とアスペクト比)の参考サイト https://www.somethingfun.co.jp/video_tips/movie_resolution#:~:text=%E7%94%BB%E9%9D%A2%E3%81%AE%E8%A7%A3%E5%83%8F%E5%BA%A6%E4%BB%A5%E4%B8%8A%E3%81%AE,%E8%80%83%E3%81%88%E3%82%8B%E3%81%A8%E3%82%88%E3%81%84%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82 ★ソースコードは以下です。 <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ビデオ調節</title> <style> .test{ text-align: center; object-fit: fill; } </style> </head> <body> <div class="test"> <video autoplay="" loop="" muted="" playsinline="" id="videosize"> <source src="hgh.mp4" type="video/mp4"> </video> </div> </body> </html>

    • ベストアンサー
    • すぐに回答を!
    • hayosat
    • CSS
    • 回答数 1
  • 要素の影 (1)

    下記の黄色の箇所に何を入力したらいいでしょうか https://gyazo.com/51da5abd71a953a6c50d143788e1cb69

    • ベストアンサー
    • 困ってます
    • nada
    • CSS
    • 回答数 1
  • スマホの横スクロール画像

    料金表のテーブルですが スマホでみると横スクロールになり 横スクロールを示す画像が出てきます。 これ!わりやすくて便利だなぁと思いまして、自分のサイトにもつけたいです。 ただ、やり方がわからず、どうやって表示させているのか お判りになりましたら教えてほしいです。 こちらのサイトを見ています。 tengokutobira.jp/plan/ よろしくお願い申し上げます。

    • ベストアンサー
    • すぐに回答を!
    • u2122
    • CSS
    • 回答数 1
  • 横並びにするCSS

    以下のdivタグ内のimgタグを横並びに表示するCSSは .container{ display:flex; } で合っていますか? <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>

    • ベストアンサー
    • 困ってます
    • OBAKEI
    • CSS
    • 回答数 2
  • datepickerを使ってカレンダーを表示出来た

    datepickerを使ってカレンダーを表示出来たのですが、そのカレンダーを付属画像の右側にある カレンダーのようにしたいです。大まかで構いません。 コードは共有サイトwandleboxで下のURLにあります。 styleタグ内のcssにて 「/* カレンダーの装飾設定 */」にて曜日の日付などは赤や青で表示されるようにコード書いています。 付属画像のように普通の日にちの数字を四角くして、背景に色を付けたいです。また、<前次>という 文字を消去して、その下にある2021年と12月のセレクトボックスに色を付けたいです。 大まかで構いません。どうコードを書いたらよいでしょうか? 回答よろしくお願いいたします。 scriptタグ内で「// カレンダーを日本語化します。以下。」でカレンダーを日本語化しています。 ソースコード共有サイト https://wandbox.org/permlink/QhIxDZ8RwQ3smiOb

    • ベストアンサー
    • すぐに回答を!
    • hayosat
    • CSS
    • 回答数 2
  • WPで、どちらの表示が速いですか?

    Wordpressでトップページを作成するときに 1.1ページの中に、20個の固定ページを表示させる 2.20個の固定ページの内容(テキストと画像)を、すべて1つのページに含ませる どちらの表示の方が速いですか?

    • ベストアンサー
    • 困ってます
    • 20191129
    • CSS
    • 回答数 1
  • CSSの基本的な事

    A Stylus 使うにせよ、useContent.css 使うのと同様にCSSを書かないといけないということです。 質問:StylusとuseContent.cssはどう違いますか。Stylusは拡張機能 であることしか知りません。 B ユーザースタイルシートの場合はCSS、ユーザースクリプトの場合はjavascriptの知識が必要 質問:ユーザースタイルシートとはデベロッパーツールを元にして、 ユーザーが記述するものと解釈しました。javascriptはユーザースタイルシートでなく、ユーザースクリプトに関連するのはなぜですか

    • 締切済み
    • 困ってます
    • nada
    • CSS
    • 回答数 2
  • リセットCSSが効かない

    初めてのwebページ作りで困ったことが起こりました。リセットCSSを記述し、まずはFirefoxで表示の確認をしてみました。ところが、本来余白が無くなって詰めて表示されるはずが、なぜか余白が残って表示されてしまいます。(リストマーカーなど他のリセットCSSはなぜか反映されていました。)コードを何度も見直しましたが、これといった間違いは見つからなかったのでおかしいなぁと思い、別のブラウザでも表示させてみました。すると、EdgeとIEでは同じく一部のリセットCSSが反映されていないようでしたが、Google Chromeではすべて正しく反映されており、無駄な余白のないレイアウトしやすい状態になっていました。これでリセットCSSがうまく機能していることは確認できたのですが、なぜGoogle Chromeでしか反映されないのか不思議でなりません。webサイト制作専門の方に聞いても「ブラウザの問題は分かりかねないと」と言われてしまい、困っています。先に進みたいのですが、別のブラウザで正しく表示されないとなると問題だと思うので、なるべく早く解決したくこちらで質問させていただきました。HTML、CSS、ブラウザに詳しい方などにご教示いただけたらと思います。よろしくお願いいたします。

    • 締切済み
    • 困ってます
    • yuuri09
    • CSS
    • 回答数 2
  • div要素と横並び

    htmlとcssについての質問です。div要素とdiv要素を横に並べて、画面の中央に表示させたいのですが、どのようにCSSを表示すればいいですか?「1 2」 のように画面中央に表示したいです。 <div class="abc">  <div class="def">   1  </div>  <div class="ghi">   2  </div> </div>

    • ベストアンサー
    • 困ってます
    • OBAKEI
    • CSS
    • 回答数 1
  • WPでaタグを使った横並びリストがカラム落ちしない

    WP・css初心者です。 aタグを使って、ページの上部にボタンを並べた横並びリストを作製したいのですが、たくさん並べたときに、スマホのときだけカラム落ちせずに、一行表示で見切れてしまいます。どうしたらいいかアドバイスいただけますと幸いです。 a.btn-ss { white-space: nowrap; color: #999999; font-size: 14px; font-weight: bold; padding: 3px 15px; border: solid 1px #999999; border-radius: 3px; } a.btn-ss:hover { color: #fff; background: #999999; border: solid 1px #999999; text-decoration: none; border-radius: 3px; }

  • マウスのロールオーバーについて

    ブログのサイトタイトルの下にメニューバーをつけました。 メニューバーにマウスが乗った時、色を変えたいのですがCSSを書いたどの箇所に、 a:hover {   color:#999; text-decoration:underline;   } などのタグを入れたらいいのが分かりません。 どなたかお教えお願いします。 /*HTML*/ <div id="global"> <button class="button"> <span> </span> <span> </span> <span> </span> </button> <nav class="items"> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> </nav> </div> <div id="overlday"> </div> /*CSS */ #global { display: block; width: 100%; box-sizing: border-box; margin-top: 0px; background-color: #000000; } #global .button, #overlday { display: none; } #global .items { display: flex; justify-content: center; } #global .items > .item { display: block; color: #fff; text-decoration: none; box-sizing: border-box; padding: 30px 30px; border-right: 1px solid #fff; border-left: 1px solid #fff; } #global .items > .item:last-of-type { border-right: 1px solid #fff; } @media only screen and (max-width: 768px) { #overlday { display: none; position: fixed; z-index: 9; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .65); } #overlday.active { display: block; } #global { position: fixed; z-index: 10; left: 0; top: 0; text-align: right; margin-top: 0; background-color: transparent; } #global .button, #global .button > span { display: inline-block; transition: all .4s; box-sizing: border-box; } #global .button { position: relative; width: 40px; height: 30px; border: none; cursor: pointer; background: transparent; margin: 10px; } #global .button > span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #ffffff; border-radius: 4px; } #global .button > span:nth-of-type(1) { top: 0; } #global .button > span:nth-of-type(2) { top: 13px; } #global .button > span:nth-of-type(3) { bottom: 0; } #global.active .button > span { background-color: #fff; } #global.active .button > span:nth-of-type(1) { transform: translateY(13px) rotate(-45deg); } #global.active .button > span:nth-of-type(2) { opacity: 0; } #global.active .button span:nth-of-type(3) { transform: translateY(-13px) rotate(45deg); } #global .items { display: none; flex-wrap: wrap; text-align: left; background-color: #9c9c9c; } #global.active .items { display: flex; } #global .items > .item { width: 100%; padding: 10px; border-right: none; border-bottom: 1px solid #fff; } #global .items > .item:last-of-type { border-bottom: none; } }

    • ベストアンサー
    • 困ってます
    • id8gimon
    • CSS
    • 回答数 3
  • a:hover 時にテキストが表示されません。

    コード初心者です。 コピペしたものを若干数字を変えて使用しようとしましたが、テキストが表示されません。他の解説をみましたが、自分との違いがよく分からないため質問させていただきました。 以下htmlとcssを記載しますので、どなたかご教授いただけないでしょうか・・・・。 html <a href="#" class="button"> <section id="news"> <h2>お知らせ</h2> <p> 9月10日㈭ 遊びに来てね!! </p> </section> </a> css #news{ width: 100%; height: 180px; margin: 0px auto 50px; border-radius: 10px; background-color: rgb(204, 160, 160); } .button{ position: relative; display: block; width: 90%; margin: 0 auto; transition: .3s; color: rgb(41, 35, 35); } .button:hover{ color: aliceblue; } .button::before { position: absolute; width: 100%; height: 180px; border-radius: 10px; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ''; background: rgb(37, 59, 26); transform-origin: right top; transform: scale(0, 1); transition: transform .2s; } .button:hover::before { transform-origin: left top; transform: scale(1, 1); color: ghostwhite; } 宜しくお願い致します!!!!

    • ベストアンサー
    • すぐに回答を!
    • marimokorin
    • CSS
    • 回答数 3
  • CSSで横並び

    divタグ内のimgタグを横並びに表示するCSSは、 .container cf{ display:flex; } で合っていますか? <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>

    • ベストアンサー
    • 困ってます
    • OBAKEI
    • CSS
    • 回答数 1
  • html幅を広くしたい

    Webサイトのレスポンシブ対応をしているのですが、PC版のhtmlは標準のwidth100%の設定になっていてスマホ対応のサイズではhtmlの横幅が狭くなってしまいます。 htmlにwidth100%をあててもなおりません。 なぜこのような現象が起こるのか原因として考えられることが分かれば教えて頂きたいです。

    • ベストアンサー
    • 困ってます
    • iku25683
    • CSS
    • 回答数 1
  • Chromeの画面

    Chromeの画面で、 700px以上なら二カラム、以下なら1カラムとしました。 スマホで見ると(700px以下です) 当然ながら1カラムでしたが。メニューで「pc版を表示」を選択すると 二カラムになりました。 pc版を表示にすると、ブラウザの幅が広がるのでしょうか? 具体的何ピクセル広がるかとか分かれば教えてください。

    • ベストアンサー
    • 困ってます
    • dhtfyjh
    • CSS
    • 回答数 1
  • html

    Amazonの入力フォームみたいに少しinputの囲みを曲げたいのですが、どのようにすればいいですか?

    • ベストアンサー
    • 困ってます
    • dhtfyjh
    • CSS
    • 回答数 1
  • 画像を 並べる

    サイズの違う画像を並べているのですが、 サンブル通りにやると全て並んでしまいます。 3.4個おきに折り返したいのですが、cssを教えてください。 html <div class="flex-container"> <div class="flex-item"> <div class="image-wrap"> <img src="image1.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image2.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image3.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image4.jpg"> </div> </div> </div> css htmlflex-container { display: flex; } .flex-item { flex-basis: 100%; } .image-wrap{ position: relative; overflow: hidden; padding-top: 60%; margin: 10px 5px; } .image-wrap img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; }

    • ベストアンサー
    • 困ってます
    • dhtfyjh
    • CSS
    • 回答数 1