CSS
- ワードプレスでCSSがiphoneのみ反映しない
ワードプレスでカスタムHTMLに書いたCSS（タップやクリックしている間、画像が切り替わる）がPC（Windows10）やipadはOKですが なぜかiphoneだけ反映しません。 ipadのOSバージョン14.7.1 iphoneOSバージョン15.3.1 androidスマホはもっていないので検証していません。 iphoneでもOKになる方法をどなたかご教示お願いいたします。
- ベストアンサー
- 困ってます
- sazanami2010
- CSS
- 回答数 1
- tableに角丸がうまく反映されない
```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とシンタックスハイライト対応してくれませんかね?
- ベストアンサー
- 困ってます
- shameimaru_aya
- CSS
- 回答数 4
- デバイスを横向きにした際の書式設定について
https://shinsama1980.web.fc2.com/hyakuhoh-data3.htm スマホなどを横向きにした際にホームページの文字のサイズを拡大させないようにするにはどうすれば良いのでしょうか？ 「body{-webkit-text-size-adjust: 100%;}」などを試してみましたが、 アップロードしてからスマホを横向きにしてみても拡大されたままでした。 できればスクロールさせる部分が見えるくらいまで縮小できるのが理想なのですが、 そういう方法があれば是非とも教えてください。 宜しくお願い致します。 Ｐ．Ｓ 当方はＨＴＭＬ、ＣＳＳについては初心者ですので、 回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。 何卒宜しくお願い致します。
- ベストアンサー
- 困ってます
- katsufutaba
- CSS
- 回答数 3
- 表の見出しをどのブラウザでも固定する方法は？
http://shinsama1980.web.fc2.com/hyakuhoh-data1.htm このサイトの表の見出しを固定するＣＳＳを書きました。 同サイトをchromeやedgeで見ると見出しが固定されているのですが、 firefoxで見ると固定されておりません。 ＣＳＳにはブラウザごとで見え方が異なるものなのでしょうか？ また、どのブラウザでも同じように表がスクロールさせる方法はあるのでしょうか？ もし、そのような方法があるのであれば、ご教示願います。 Ｐ．Ｓ 当方はＨＴＭＬ、ＣＳＳについては初心者ですので、 回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。 何卒宜しくお願い致します。
- ベストアンサー
- 困ってます
- katsufutaba
- CSS
- 回答数 3
- 縦横スクロール時の固定セルの重ね順について
http://shinsama1980.web.fc2.com/jishin2303.htm このＨＰの「令和５年春場所自信一番集計表」の下にある表の上５行と左２列を固定したのですが、 縦方向にスクロールさせると左２列のセルが上５行の部分に行った時に最前面に表示させたい左上の３セルよりも前面に移動されてしまいます。 左２列を縦スクロールさせても左上３セルよりも下に表示されるようにするにはどうすれば良いのでしょうか？ Ｐ．Ｓ 当方はＣＳＳについてはズブの素人ですので、 回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。 何卒宜しくお願い致します。
- ベストアンサー
- 困ってます
- katsufutaba
- CSS
- 回答数 1
- ブログのCSSについて
はてなブログで大見出しのデザインを変えたくて .entry-content h3 { padding: 4px 10px; color: #111; background-color: #f0f0f0; border-left: 8px solid #2d70a4; } これをコピペしてCSSに貼り付けました。 しかし…文字が黒になって、もう少し小さくなるはずなんですがどこを直したらいいんでしょうか？ このサイトをお手本にしてます。 https://dearbrother.hatenablog.com/entry/blog-midashi
- 締切済み
- 困ってます
- dadadagajmed
- CSS
- 回答数 5
- 埋め込んだgoogleカレンダーの文字サイズを変更
ブログにgoogleカレンダーを埋め込んだのですが、文字サイズがとても小さくて予定が見にくくて困っています。 埋め込みコードのiframeの中に文字サイズに関する記述はなく、自分でstyle="font-size:30px;"などを書き加えても変化なしでした。widthやheightの数値は自分で書き換えればその通りに変化しました。 文字サイズを変える方法はないのでしょうか？
- テキストがaタグの外にある場合のCSS指定方法
noteというサービスに公開されている記事について、 既に読んだ記事が分かるように既リンクの色を変えたい（a:visited） と思っています。（現状はリンクを踏んでも変わりません。） stylusというCSSのChromeアドオンを使って実現しようとしています。 HTMLの構成を見てみると下記のように、 タイトルと本文がaタグの外にいる状態なのですが、 このような構成で既リンクのタイトル（もしくは本文）の文字色を 変えたい場合はどのようなCSSを記述したら良いでしょうか。 分かる方居られましたら宜しくお願いいたします。 既読が分かるようになれば、stylusを使う以外の方法でも結構なので、 何かやり方知っている方居られたらご教授お願いいたします。 <div> <a class="link"></a> <div></div> <div> <div> ::before <div></div> <h3 class="title">タイトル</h3> <p class="main">本文</p> <div></div> ::after </div> </div> </div>
- 表組のヘッダー，フッターの方法
下記サイトの表組上部の緑の部分をヘッダー、下部の黄緑の部分をフッターとして固定するにはどうすればよいのでしょうか？ http://shinsama1980.web.fc2.com/katsufutaba-data.htm 至急宜しくお願い致します。
- ベストアンサー
- すぐに回答を！
- katsufutaba
- CSS
- 回答数 2
- bxSliderの画像の外枠を消したいです。
カラーミーショップを利用しています。 「スライドショーの設定」を利用し、画像をアップしますと、画像に外枠とシャドーが付きます。 これを消して写真のみにしたいので「bxSliderの外枠を消す」等を検索しましたら、下記のコードを見つけたので、共通CSSのトップページの項目の所にコピペしてみたのですが、枠が消えず、うんともすんともなりません。 .bx-wrapper { background-color: transparent; margin: 0px auto; border: none; box-shadow: none; } .bx-wrapper img { display: block; margin: 0px auto; } 独学で、必要な箇所だけ調べてサイトをカスタマイズしているので、基本が全くなっていません。 今日1日ずっとトライしているのですが、全然出来ないので、情けないやら、悲しくなって来ました。 解決方法をご存知の方がいらしたら、教えて頂けますか。 すみません、どうぞよろしくお願いします。 因みに、HTMLは下記コードです。 <{if $slideshow_html}> <div class="slider"> <{$slideshow_html}> </div> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#slider').bxSlider({ auto: true, pause: 2000, speed: 1000, controls: false, captions: true, mode: 'fade' }); }); //]]> </script> <{/if}>
- ソースの長いコードについて
https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css このような長いURLにはどんな意味があってどこで入手できるのですか？
- 長いCSSコードについて
https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css このコードはどうやって作成されたのですか？
- cssが反映されない
head内にURLに格納されたcssがあるのですが、htmlファイルをブラウザに読み込ませてもそのcssが反映されません。htmlだけが映ります。どうしたらcssを反映させられるでしょうか
- 【stylus拡張機能】既リンクに色をつけたい
Chromeでstylusという拡張機能を使って、 既リンクの場合に色をつけたい（CSSを上書きしたい）と思っています。 つけたいのがnoteというページの記事一覧で、HTMLは添付画像のような構造になっています 既リンクとなった際に色をかえたいのは、h3が指定されている「タイトル」の文字の色です。（もし無理なら「本文」） a:visited {color: #FFEEFF !important ;} a:visited h3 {color: #FFEEFF !important ;} a:visited div {color: #FFEEFF !important ;} a:visited div h3 {color: #FFEEFF !important ;} みたいな感じ指定してみたのですが、どの形でも、タイトルの文字色は変わりませんでした。（aタグとh3タグが別の層にあるから？） 他のサイトでは上手くいっているので、stylus自体は正常に動いていると思います。 CSSを理解しておらず、指定の仕方がおかしいからだと思うので、どのように指定したら良いか、分かる方居られましたら教えて頂けますでしょうか。 宜しくお願いいたします。
- CSS レスポンシブサイトでヘッダー画像の調節
レスポンシブサイトでヘッダー画像の調節をしたいのですが なぜかPCとスマホでヘッダー画像の表示が異なります 同じように表示するにはどうすればいいでしょうか？ 参考用ですが、こちらは同じように表示されています https://f-tpl.com/tpl_096/ 添付画像は上がPCで下がスマホです このように半分しか表示されず、PCのものを縮小して表示させられません
- 締切済み
- 困ってます
- masterkentaros
- CSS
- 回答数 1
- CSSでヘッダー画像の調節
レスポンシブサイトを作っているのですが、スマホで見るとヘッダー画像がPCと同じになりません。 どうしたらPCとスマホのヘッダー画像を同じ位置やサイズで表示できますか？
- 締切済み
- 困ってます
- masterkentaros
- CSS
- 回答数 2
- wordpress ヘッダーの追加
wordpress初心者です。 テーマはLightningを使ってます。 ヘッダーのタイトルの下にサブタイトルを追加したいのですが、 やり方をご存じの方、ご教授をお願い致します。
- CSSで文字と文字の間に空白を入れる方法
<p></p> この中が２文字だったら ◯ ◯ （間に全角スペース分） ３文字だったら ◯◯◯ と表示するCSSはどうすればいいですか？
- ベストアンサー
- 困ってます
- yukazu2123
- CSS
- 回答数 1