CSS
- css ,videotタグ。ホームページに動画を埋
css ,videotタグ。ホームページに動画を埋め込んだのですが、左右に黒帯ができてしまいます。この黒帯を無くしたいです。 ソースコードは下にあります。object-fit: fill;でも治りません。 動画は元は1280×720サイズで作成し、ホームページ用にサイズを小さくしてｍｐ４に書き出しました。1280×720から896×414に変更、アスペクト比１６：９でＯＫ。 1280×720の時は黒帯はでませんが、サイズを896×414に変更してアップロードすると黒帯が出てしまいます。 動画編集ソフトで書き出しする時アスペクト比は自動で16:9になるので間違ってないと思います。付属画像参考 ●実際のホームページのＵＲＬは以下です （何故かアクセス制限が出て見れなかもしれませんので、ソースコードと付属画像も下に提示してます。） 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>
- スマホの横スクロール画像
料金表のテーブルですが スマホでみると横スクロールになり 横スクロールを示す画像が出てきます。 これ！わりやすくて便利だなぁと思いまして、自分のサイトにもつけたいです。 ただ、やり方がわからず、どうやって表示させているのか お判りになりましたら教えてほしいです。 こちらのサイトを見ています。 tengokutobira.jp/plan/ よろしくお願い申し上げます。
- 横並びにする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>
- datepickerを使ってカレンダーを表示出来た
datepickerを使ってカレンダーを表示出来たのですが、そのカレンダーを付属画像の右側にある カレンダーのようにしたいです。大まかで構いません。 コードは共有サイトwandleboxで下のURLにあります。 styleタグ内のｃｓｓにて 「/* カレンダーの装飾設定 */」にて曜日の日付などは赤や青で表示されるようにコード書いています。 付属画像のように普通の日にちの数字を四角くして、背景に色を付けたいです。また、＜前次＞という 文字を消去して、その下にある2021年と12月のセレクトボックスに色を付けたいです。 大まかで構いません。どうコードを書いたらよいでしょうか？ 回答よろしくお願いいたします。 scriptタグ内で「// カレンダーを日本語化します。以下。」でカレンダーを日本語化しています。 ソースコード共有サイト https://wandbox.org/permlink/QhIxDZ8RwQ3smiOb
- WPで、どちらの表示が速いですか？
Wordpressでトップページを作成するときに １．１ページの中に、２０個の固定ページを表示させる ２．２０個の固定ページの内容（テキストと画像）を、すべて１つのページに含ませる どちらの表示の方が速いですか？
- リセットCSSが効かない
初めてのwebページ作りで困ったことが起こりました。リセットCSSを記述し、まずはFirefoxで表示の確認をしてみました。ところが、本来余白が無くなって詰めて表示されるはずが、なぜか余白が残って表示されてしまいます。（リストマーカーなど他のリセットCSSはなぜか反映されていました。）コードを何度も見直しましたが、これといった間違いは見つからなかったのでおかしいなぁと思い、別のブラウザでも表示させてみました。すると、EdgeとIEでは同じく一部のリセットCSSが反映されていないようでしたが、Google Chromeではすべて正しく反映されており、無駄な余白のないレイアウトしやすい状態になっていました。これでリセットCSSがうまく機能していることは確認できたのですが、なぜGoogle Chromeでしか反映されないのか不思議でなりません。webサイト制作専門の方に聞いても「ブラウザの問題は分かりかねないと」と言われてしまい、困っています。先に進みたいのですが、別のブラウザで正しく表示されないとなると問題だと思うので、なるべく早く解決したくこちらで質問させていただきました。HTML、CSS、ブラウザに詳しい方などにご教示いただけたらと思います。よろしくお願いいたします。
- 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
- KAMEKAMEKAMETAN
- 回答数1
- マウスのロールオーバーについて
ブログのサイトタイトルの下にメニューバーをつけました。 メニューバーにマウスが乗った時、色を変えたいのですが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; } }
- ベストアンサー
- CSS
- noname#253184
- 回答数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; } 宜しくお願い致します！！！！
- ベストアンサー
- CSS
- marimokorin
- 回答数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>
- html幅を広くしたい
Webサイトのレスポンシブ対応をしているのですが、PC版のhtmlは標準のwidth100%の設定になっていてスマホ対応のサイズではhtmlの横幅が狭くなってしまいます。 htmlにwidth100%をあててもなおりません。 なぜこのような現象が起こるのか原因として考えられることが分かれば教えて頂きたいです。
- 画像を 並べる
サイズの違う画像を並べているのですが、 サンブル通りにやると全て並んでしまいます。 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%; }
- 送信ボタンのサイズを変更したいです
入力されたデータを送信するための「送信ボタン」を画像付きのボタンのコードを書いているのですが、付属画像のように、 ボタンの大きさが横一杯に広がって灰色のようになって、しまうのですが、ボタンの大きさの縦幅と横幅の大きさを調節しても、適応されず困っています。 ボタンの画像自体の大きさは適応できています。 困っています。 コードは以下にあります。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" href="senden.css"> <style type="text/css"> /* 送信ボタンの位置 */ .auto-style3 { text-align: center;/* 送信ボタンを中央に配置 */ } /* 送信ボタンの代替画像位置 */ .auto-style4 { text-align: center;/* 画像を中央に配置 */ margin-top:87px ;/* 画像の上の余白 */ } /* 画像の大きさ調節 */ img.example8 { width: 50%; height: 100px; </style> </head> <body> <form action="form1.php" method="post"> <div class="enter"> <button type="submit" name ="submit" class="auto-style4" height="70px" width="40px"> <img src="senden15.png" alt="確認画面へ" class="example8"/></button> </div> </form> </body> </html>