CSS

サーバーはお名前.com テーマはLightning Add Costom CSSをインストールしました。 そこにCSSと共に備忘録としてコメントを残したいのですが、/*～～*/で保存したらとエラーが出る。 //～～でコメントアウトすると保存はできるが、CSSが効きません。 WordPressでは、コメントアウトという概念がないのでしょうか？

CSSで目次開閉を作成したのですが、左上に四角いチェックボックスが現れてしまいます。 このチェックボックスを消す方法はありますでしょうか。 HTML <div class="open-menu"> <input id="open-1" type="checkbox"> <label for="open-1">≡目次</label> <div class="open-menu-inside"> <ol class="numbering"> <li><a href="#1"> </a></li> <li><a href="#2"></a></li> <li><a href="#3"></a></li> </ol> </div> </div> CSS .open-menu input { display: none; } .open-menu label { width: 180px; color: #000000; font-size: 20px; line-height: 2; font-weight: bold; text-align: left; margin: 20px; box-shadow: 5px 5px 5px #aaa; padding: 20px; cursor: pointer; position: relative; display: block; } /* ここから追加 */ .open-menu label { border: 2px solid #ff0000; border-radius: 20px; } .open-menu label:hover { background: #ffb8b3; opacity: 0.5; } .open-menu label:after { position: absolute; right: 10px; top: 50%; -webkit-transform : translateY(-50%); transform : translateY(-50%); content: "［開く］"; } .open-menu input:checked ~ label::after { content: "［閉じる］"; } .open-menu div { height: 0; overflow: hidden; opacity: 0; transition: 0.3s; } .open-menu input:checked ~ div { height: auto; max-width: 80%; opacity: 1; padding: 20px; background: #ffeff9; border: 2px solid #ff95d5; box-shadow: 5px 5px 5px #aaa; border-radius: 20px; overflow: hidden; } .open-menu-inside { color: #333333; font-size: 15px; line-height: 2; } チェックボックスを消す方法があれば、教えていただきたいです。 よろしくお願いいたします。

ブログの目次を作成しています。 1.　見出し1 2.　見出し2 　2.1　見出し2-1 　2.2　見出し2-2 3.　見出し3 このようにしたいのですが、上手くいきません。 修正箇所を教えて頂けると助かります。 【html】 <div class="toc-001"> <div> 目次 </div> <ol> <li><a href="#">見出し1</a></li> <li> <a href="#">見出し2</a> <ol> <li><a href="#">見出し2-1</a></li> <li><a href="#">見出し2-2</a></li> </ol> </li> <li><a href="#">見出し3</a></li> </ol> </div> 【css】 .toc-001 { margin-bottom: 30px; padding: 1em 1em 1em 2em; border: 1px solid #999; background-color: #f7f7f7; } .toc-001 div { display: flex; align-items: center; margin: 0; padding: 5px 0; } .toc-001 div::before { display: inline-block; width: 1em; height: 1em; margin-right: 5px; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E'); content: ''; } .toc-001 ol { list-style-type: decimal; margin: 0; padding: 0 1.2em; overflow: hidden; } .toc-001 ol ol { margin-top: 5px; } .toc-001 li { padding: 5px 0; } .toc-001 a { color: #166c9d; } どうぞ、よろしくお願い致します。

CSS初心者です。 1,リスト 1-1,○○○○○ 1-2,○○○○○ 2,モデル 2-1,○○○○○ 2-2,○○○○○ 3,まとめ のような入れ子リストを作成したいのですが 現在の ■HTML <ol class="sample1"> <li>リスト</li> <li>○○○○○</li> <li>○○○○○</li> <li>モデル</li> <li>○○○○○</li> <li>○○○○○</li> <li>まとめ</li> </ol> ■CSS ol.sample1{ counter-reset:list; list-style-type:none; font: 14px/1.6 'arial narrow', sans-serif; padding:0; } ol.sample1 li{ position:relative; margin: 7px 0 7px 0px; padding-left:40px; font-weight: bold; font-size:14px; line-height: 30px; border: solid 1px #F6A38B; border-radius:20px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } ol.sample1 li:before{ counter-increment: list; content: counter(list); position: absolute; left: 0px; width: 30px; height: 30px; text-align: center; color: #fff; line-height:30px; background: #F6A38B; border-radius: 50%; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } ol.sample1 li:hover{ background: #F6A38B; color: #fff; } ol.sample1 li:hover:before{ background: #fff; color: #F6A38B; } をHTMLを下記に変更して上の例のような入れ子にするには 上記のCSSをどのように変更すればいいのでしょか？ ■HTML <ol class="sample1"> <li><a href="">リスト</a></li> <ol> <li><a href="">○○○○○</a></li> <li><a href="">○○○○○</a></li> </ol> </li> <li><a href="">モデル</a></li> <ol> <li><a href="">○○○○○</a></li> <li><a href="">○○○○○</a></li> </ol> </li> <li><a href="">まとめ</a></li> </ol> よろしくお願いいたします。

W3C CSS 検証サービスで 文法解析エラーが発生しました というエラーメッセージが出ます。 cssは次のとおりです。 .qa { color: #ffffff; /* 文字色 */ font-size: 17px; /* 文字サイズ */ font-weight: bold; /* 文字を太く */ text-align: left; .q { background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */ border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */ border-radius: 20px; /* 角を丸く */ height: 60px; padding: 15px 40px 15px 15px; position: relative; cursor: pointer; &:before { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #ffffff; right: 15px; top: 50%; transform: translate(0, -50%); } &:after { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #ffffff; right: 15px; top: 50%; transform: translate(0, -50%) rotate(90deg); } } .q.active { &:after { display: none; } } .a { background-color: #999999; border-radius: 20px; /* 角を丸く */ height: 60px; display: none; padding: 15px; } } 検証したスタイルシートを以下に示します の表示は .qa { color : #ffffff; font-size : 17px; font-weight : bold; text-align : left; } です。 どこをどのようにすれば良いでしょうか？

W3C CSS 検証サービスで 次のプロパティが正しくありません : text-align プロパティ名の前にセミコロン(;)を追加してみて下さい というエラーメッセージが出ます。 cssは次のとおりです。 .open-menu input { display: none; } .open-menu label { width: 180px; color: #ffffff; /* 文字色 */ font-size: 20px; /* 文字サイズ */ line-height: 2; /* 行間 */ font-weight: bold; /* 文字を太く */ text-align: left: 20px; /* 文字を左からの距離 */ box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */ padding: 20px; /* 内側の余白 */ cursor: pointer; position: relative; display: block; } /* ここから追加 */ .open-menu label { border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */ border-radius: 20px; /* 角を丸く */ } .open-menu label:hover { background: #ffb8b3; /* マウスを乗せた時の背景色 */ opacity: 0.5; /* マウスを乗せた時に背景色が薄くなる */ } .open-menu label:after { position: absolute; right: 10px; /* 右からの距離 */ top: 50%; /* 上下中央配置 */ -webkit-transform : translateY(-50%); transform : translateY(-50%); content: "［開く］"; /* アイコン */ } .open-menu input:checked ~ label::after { content: "［閉じる］"; /* クリック後のアイコン */ } .open-menu div { height: 0; overflow: hidden; opacity: 0; transition: 0.3s; /* 開閉スピード */ } .open-menu input:checked ~ div { height: auto; max-width: 80%; opacity: 1; padding: 20px; /* 中身の枠内の余白 */ background: #ffeff9;/* 中身の背景色 */ border: 2px solid #ff95d5; /* 線の太さ 線のタイプ 線の色 */ box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ border-radius: 20px; /* 角を丸く */ overflow: hidden; /* メニューがはみ出ない*/ } .open-menu-inside { color: #333333; /* 中身の文字色 */ font-size: 15px; /* 中身の文字サイズ */ line-height: 2; /* 行間 */ } どこをどのようにすれば良いでしょうか？

Web制作において、他のデバイスでは正常に表示されているものの、iPad OS で見ると バナー部分が下に段々で下がってしまっているのですが、これは何が原因でしょうか？ また、どう調整すれば直りますでしょうか？

HTML･CSS超初心者です。 この方のブログ https://webwork-plus.com/content/design/open-area.html#2 を参考にして、目次の開閉を作成しました。 が、目次を開いている時は問題ありませんが、目次を閉じている場合のみ、その目次直下の文章をクリックすると同じページ内のまったく違う場所に飛んでしまいます。 ソースコードは ■HTML■ <div class="open-box"> <input type="checkbox" id="switch" class="on-off" /> <label for="switch" class="open-label"></label> <div class="open"> <p> <ol class="numbering"> 　 <li><a href="#1">imgにposition:absoluteで文字を重ねる</a> <ol> <li><a href="#2">文字を中央に重ねる</a></li> <li><a href="#3">文字を左上に重ねる</a></li> <li><a href="#4">文字を左下に重ねる</a></li> </ol> </li> 　 <li> <a href="#5"> まとめ</a></li> </ol> <p> </div> </div> ■CSS■ /*inputを非表示*/ input[type="checkbox"].on-off{ opacity: 0; } /*ラベル（「開く」ボタン）*/ .open-label{ width: 200px; margin: 0 1.5em; padding: 0.8em; display: block; color: #ffffff; font-weight: bold; text-align: center; box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */ border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */ border-radius: 20px; /* 角を丸く */ } /*エフェクト*/ .open-label:active{ box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ } .open-label:hover{ background: -webkit-linear-gradient(bottom, #fff4e0 1%,orange 80%); background: #ffb8b3; } /*ラベルに表示するテキスト*/ .open-label::after{ content:'※目次［開く］'; } .on-off:checked ~ .open-label::after{ content: '※目次［閉じる］'; } /*開閉エリア*/ .open{ padding: 0 1em; height: 0; opacity: 0; transition: .5s; width: 500px; box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ background: #ffeff9; border: 2px solid #ff95d5; /* 線の太さ 線のタイプ 線の色 */ border-radius: 20px; /* 角を丸く */ } /*「開く」をタップで表示*/ .on-off:checked ~ .open{ padding: 1.5em 1em; height: auto; opacity: 1; } よろしくお願いいたします。

こんばんは、お世話になります。 背景色が重なる、もしくは色がつかないのですが どのようにしたらよいでしょうか？ 因みにヘッダーのメニューの後ろにも灰色を付けています。 ご教示お願いします。 @charset "utf-8"; body { color: lightblue; } .wrapper { width: 960px; margin: 0 auto; overflow: hidden; padding: 0px 0px 10px 10px; } .wrapper .col { float: left; width: 25%; } .wrapper .col .item { display: block; margin: 5px 5px 5px 5px; padding: 10px; } .imgbox img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; border-radius:15%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } a.header { display: block; text-decoration: none; } .header { background-color: rgba(0,0,0,.1); margin: 0; } ul{ display: flex; flex-wrap: wrap; } .header ul { display: flex; justify-content: center; } .header li { font-size: 15px; list-style-type: none; } .header li:not(:first-of-type) { margin-left: 1rem; } .header a { color: #000; padding: 20px; } .text li{ width: 50%; padding: 20px; box-sizing: border-box; /* 透過・非表示 */ opacity: 0; visibility: hidden; /* 要素の位置指定・アニメーション */ translate: 0 20px; transition: 1s; } img{ width: 100%; height: auto; } /* クラス付与で表示する */ .is-active{ opacity: 1; visibility: visible; translate: 0 0; } header li{ opacity: 1; visibility: visible; display: block; /* 縦に並べる*/ list-style-type: none; padding: 0.5em; background: #ccc; }

こんにちは、お世話になります。 大分レイアウト、アニメーションのjsの仕組みを理解してきたんですが masonry.jsはまだちょっと解りません。 これを使ってサイトいっぱいに画像を敷き詰めるにはどのような記述を追加すればよいでしょうか？ ご教示お願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } $grid.infiniteScroll({ path: getPath, append: '.grid__item', outlayer: msnry, scrollThreshold: 40, hideNav: '.pagination', status: '.page-load-status', }); }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> </ul> <div class="page-load-status"> <p class="infinite-scroll-request"> <i class="fa fa-spinner fa-spin"></i>Loading... </p> <p class="infinite-scroll-last">End of content</p> <p class="infinite-scroll-error">No more pages to load</p> </div> <div class="pagination"> <a href="page2.html" class="pagination__next">もっと見る</a> </div> </body> </html> CSS--------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid.are-images-unloaded .image-grid__item { opacity: 0; } .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .page-load-status { display: none; /* hidden by default */

画像をスクロールした際にアニメーションで表示させるのに、スクロールで画像表示用のjavascriptで大半のdivやli等のクラス属性を使ってしまってしたい事が全部できないのですがどうしたら良いでしょうか？ したい事： １画像表示 ２pinterest風グリッドレイアウトにする ３画像の位置を整える ４スクロールした際に画像をふわっと出現させる。 これらを全部できる様にするにはどのような記述が必要でしょうか ご教示お願いします。

現在、laravel5を使ったウェブサイト作成を勉強しています。 cssを編集してサイトの見栄えを整えているのですが、 laravelのデフォルトのcssを使用してflex box+align-items: centerでの上下中央揃えを行うと、 中央より少し上方にテキスト位置がずれてしまいます。 cssを一から自作した際には正しい表示位置となるので、 元々laravelで用意されているcssに問題があるのではないかと思っています。 一応、p要素やh1~h6要素にmargin-bottomが設定されている部分があることは発見したので、 この部分は0に設定し直したのですが、それでも修正されません。 cssのどこを修正すればよいか教えていただけないでしょうか。 よろしくお願いいたします。

ヘッダーに書いてあるテキストのコメントが消えてしまいます。 ご教示お願いします。 ここからHTML： <!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <head> <script src="code.jquery.com_jquery-3.7.0.min.js"></script> </head> ここら辺から書いてあるa要素のコメントが消えてしまいます。 <body> <header class="header"> <nav> <ul> <li><a href="/index.html" id="link_sample">ABOUT</a</li> <li><a href="#works" id="link_sample">WORKS</a></li> <li><a href="#gallery" id="link_sample">GALLERY</a></li> <li><a href="#service" id="link_sample">SERVICE</a></li> </ul> </nav> </header> ここまで： <ul> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> </ul> <script>const animations = document.querySelectorAll('.js-scroll-animation'); function toggle() { animations.forEach((animation) => { //ウィンドウの高さを取得 const height = window.innerHeight; //スクロール量を取得 const scroll = window.scrollY; //要素の位置を取得 const target = scroll + animation.getBoundingClientRect().top; //スクロール位置を判定して要素にクラスを付与 if (scroll > target - height / 1.5) { animation.classList.add('is-active'); } }); } //ロード時に発火 window.addEventListener('load', toggle); //スクロール時に発火 window.addEventListener('scroll', toggle);</script> </body> </html> ここからCSS： @charset "utf-8"; .header { background-color: lightgray; color: white; } #link_sample ul { display: inline; justify-content: center; } #link_sample li { font-size: 32px; list-style-type: disc; } #link_sample a { padding: 5px; text-align: center; } ul{ display: flex; flex-wrap: wrap; } li{ width: 50%; padding: 20px; box-sizing: border-box; justify-content: space-between; flex-wrap: wrap; /* 透過・非表示 */ opacity: 0; visibility: hidden; /* 要素の位置指定・アニメーション */ translate: 0 20px; transition: 1s; } img{ width: 40%; height: auto; } /* クラス付与で表示する */ .is-active{ opacity: 1; visibility: visible; translate: 0 0; }

@charset "utf-8"; .box { width: 80px; height: 80px; background: pink; animation-name: move-around; animation-duration: 4s; animation-iteration-count: infinite; } ここから意味を知りたい。 @keyframes move-around { 25% { transform: translate(100px, 0); } 50% { transform: translate(100px, 100px); } 75% { transform: translate(0, 100px); } } ここまで ▢　→　▢ ↑　　　　↓ ▢　←　▢ このプログラムを実行すると。 四角がこのように移動するのですが 自分の考えていた命令文と違う気がするのですが ご教示お願いしたいです、宜しくお願いします。 因みにドットインストールのアニメーション編の問題です。

ワードプレスでカスタムHTMLに書いたCSS（タップやクリックしている間、画像が切り替わる）がPC（Windows10）やipadはOKですが なぜかiphoneだけ反映しません。 ipadのOSバージョン14.7.1 iphoneOSバージョン15.3.1 androidスマホはもっていないので検証していません。 iphoneでもOKになる方法をどなたかご教示お願いいたします。

```html index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <section class="section"> <div class="container"> <h1 class="title foreground has-text-centered is-size-1"> 作業用タイマー </h1> <table class="table foreground is-size-1 is-fullwidth has-text-centered"> <tr> <td>現在時刻</td><td>hh:mm:ss</td> </tr> <tr> <td>残り時間</td><td>mm:ss</td> </tr> </table> </div> </section> </body> </html> ``` ```css style.css .foreground{ background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); border-radius: 8px; border: none; border-right: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid #fff; padding: 10px; color: #000 ; } html{ background-image: url('ubuntu-16-04-lts-Desktop-fondo.png'); background-size: cover; } ``` このコードについてなのですが、角丸がうまく反映されません。 h1タグはきちんと四方が角丸になっているのですか、tableは右下が角丸ではなく、右と下に指定した1pxのボーダーも飛び出しています。 edgeとfirefoxどちらも同じです。 どなたか直し方を教えてください。 あと関係ないですけどここでもそろそろmarkdownとシンタックスハイライト対応してくれませんかね?

https://shinsama1980.web.fc2.com/hyakuhoh-data3.htm スマホなどを横向きにした際にホームページの文字のサイズを拡大させないようにするにはどうすれば良いのでしょうか？ 「body{-webkit-text-size-adjust: 100%;}」などを試してみましたが、 アップロードしてからスマホを横向きにしてみても拡大されたままでした。 できればスクロールさせる部分が見えるくらいまで縮小できるのが理想なのですが、 そういう方法があれば是非とも教えてください。 宜しくお願い致します。 Ｐ．Ｓ 当方はＨＴＭＬ、ＣＳＳについては初心者ですので、 回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。 何卒宜しくお願い致します。

http://shinsama1980.web.fc2.com/hyakuhoh-data1.htm このサイトの表の見出しを固定するＣＳＳを書きました。 同サイトをchromeやedgeで見ると見出しが固定されているのですが、 firefoxで見ると固定されておりません。 ＣＳＳにはブラウザごとで見え方が異なるものなのでしょうか？ また、どのブラウザでも同じように表がスクロールさせる方法はあるのでしょうか？ もし、そのような方法があるのであれば、ご教示願います。 Ｐ．Ｓ 当方はＨＴＭＬ、ＣＳＳについては初心者ですので、 回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。 何卒宜しくお願い致します。

写真のように上からテキストが表示されるんですが、常にスクロールを最下部にするにはどうしたらいでしょう？

チャットボットを作成し、メッセージを交互にやり取りするプログラムを書き、そのcssで端が丸くなるように設定しました。 その結果画像のように全体で丸くなってしまいました。 LINEのテキストの様にテキスト一つずつに囲いをつけたいです。 どうしたらいいでしょうか？