CSS

wordpress Lightning（無料版）のグローバルメニューの文字サイズを変更したいのですが、いろんなサイトの紹介のCSSを試しても全く変化がありません。ちなみに「外観」→「カスタマイズ」→「追加CSS」に貼り付けました。 お分かりの方がいらっしゃいましたら、お教え下さいませ。 よろしくお願い致します。

CSSのflexを使ってブラウザ上では正しく表現できていますが、印刷するとflexが無効になり、横並びだったのが縦に表示されてしまいます。 さらに中の文字もboxからはみ出して表示されてしまいます。 FirefoxやChromeどちらも同じでした。 印刷時に崩れない方法はあるのでしょうか？ 下記がCSSです。 @media screen and (min-width: 481px){ .parent { display: flex; } .box1 { border: 1px; } .box2 { border: 1px; } }

現在、次のHTML、CSSでひとつ開ければひとつ閉じるアコーディオンを実装しています。 HTML <ul class="menu"> <li> <a href="#">メニュー1</a> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> <li> <a href="#">メニュー2</a> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> </ul> CSS .menu { width: 100%; margin: 0; padding: 0; } .menu li { list-style: none; } .menu li a { display: table; margin-top:1px; padding: 10px 10px; width: 100%; font-weight: bold; /* 文字を太く */ text-align: center; /* 文字を中央に */ box-shadow: 5px 5px 5px #aaa; /* 影を付ける */ background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */ text-decoration: none; vertical-align: middle; color: #ffffff; /* 文字色 */ overflow: hidden; transition:all .5s ease-out; } .menu > li:first-child a { margin-top: 0; } .menu li a:hover { background: #ff8c04; transition:all .5s ease-out; } .menu li ul { margin: 0; padding: 0; } .menu li li a { display: block; margin-top: 0; padding: 0 10px; height: 0; background: #ffccff; color: #000000; transition:all .5s ease-out; } .menu > li > ul > li { margin: 0 !important; } .menu > li:hover li a { display: table; margin-top: 1px; padding: 10px; width: 100%; height: 1em; transition:all .5s ease-out; } .menu > li:hover li a:hover { background: #ffb8b3; transition:all .5s ease-out; } 親要素のホバーを一度離れて、次の親要素をホバーすると問題ないのですが、上から下へ親要素を連続してホバーすると子要素の閉じる時間もあってか、うまく機能しません。 機能しないというのは、子要素が閉じるため次の親要素をホバーしても次の親要素が上へあがっていくので次の親要素のホバー状態が離れてしまいます。 子要素の数が少なければ何とか大丈夫かな？という感じです。 下から上へ親要素を連続してホバーすると子要素の閉じることには関係ないからか、機能しています。 ひとつ開ければ閉じずに開けたままにしておくしかないのでしょうか？ 解決策のわかる方がおられたら教えていただけないでしょうか。

sigilとkindle previewer3を使って、epubファイルの作成にチャレンジしています。 次のcssとhtml構文だと画像とキャプションが別々のページに表示されてしまいます。同一ページに収まるよう修正してください。chat-GPTを使って色々とトライしましたが、上手くできません。 html <figure> <a name="#img_3"><img alt="sample" src="../image/sample.jpg"/></a> <figcaption>これはサンプルです </figcaption> </figure> css img { float: left; object-fit: contain; } figure { display: flex; flex-direction: row; align-items: center; page-break-inside: avoid; /* ページ内での分割を避ける */ break-inside: avoid; /* ページ内での分割を避ける */} figcaption { writing-mode: horizontal-tb; text-align: center; margin-top: 10px; /* 画像とキャプションの間にスペースを作成します。 */ page-break-inside: avoid; /* ページ内での分割を避ける */ break-inside: avoid; /* ページ内での分割を避ける */ }

Lightbox2を設置しましたがローディングするものの先に進みません ■ lightbox.cssはテキストエディタで書き換えたのは次の部分4か所です 【lightbox.css】 background: url(https://blog-imgs-○○○○/loading.gif) no-repeat; background: url(https://blog-imgs-○○○○/prev.png) left 48% no-repeat; background: url(https://blog-imgs-○○○○/next.png) right 48% no-repeat; background: url(https://blog-imgs-○○○○/close.png) top right no-repeat; ■lightbox-plus-jquery.min.jsは lightbox-plus-jquery-min.jsに変更しました ■lightbox.cssとlightbox-plus-jquery-min.jsをアップロードした後 ＜head＞～＜/head＞内に <link rel="stylesheet" href="http://○○○○/lightbox.css"> ＜/body＞の直前に <script src="http://○○○○/lightbox-plus-jquery-min.js"></script> と追記しましたがローディングするものの先に進みません 画像にはdata-lightbox="group"としています 最初は background: url(https://blog-imgs-○○○○/prev.png) left 48% no-repeat; を誤って background: urlhttps://blog-imgs-○○○○/prev.png) left 48% no-repeat; と background: url(の(を消してしまっていたことに気づいて修正しましたが同様です その後、３回程試みましたが同様です ブログはFC2ブログです 誤っている点があれば教えていただけないでしょうか また、チェック方法があれば教えてください

CSS 蚊取り線香のイメージを作る CSS スキルアップのための問題を作りました。 [問題] 添付図のような図形を作ってください。 ＜仕様＞ ・CSSだけで作成のこと ・画像、Canvasを用いないこと ・一辺 400px四方の中に作成する ・線香立に刺す穴も作ること HTMLソースは以下のとおり (追加、変更無し) <div class="outer"> <div class="inner"></div> </div> CSSのコードができたら回答してください。 腕試しをしたい方、ポイ活の方、 スキルアップを望む方の回答をお待ちしています。

CSSスキルアップのための問題を作りました。 次の仕様に基づいたコードを作成してください。 ＜仕様＞ １．スタイルシートだけで作成 ２．画像、Canvasを用いないこと ３．文字盤の半径は100pxで、「１２」という数字を表示 ４．エレメント（要素）は次のものだけを使用のこと 　　<div class="clock"></div>

html cssのことはまったくわかりません 以下のタグクラウドを記事数の多い順に並び替えたいのですが どのように記載すれば良いでしょうか <ul> <!--stag--> <li class="tag_cloud" &align> <a href="<%stag_url>" title="<%stag_count>件"><%stag_name></a> </li> <!--/stag--> </ul> <style> .tag_cloud { position: relative; display: inline-block; font-weight: bold; margin: 0.1em; padding: 0.1em 0.15em; text-decoration: none; color: #ffffff; background: #ececec; border: 1px solid #ff0000; border-radius: 20px; box-shadow: 5px 5px 5px #aaa; -webkit-transition: .4s; transition: .4s; } .tag_cloud:before { content: "#"; } .tag_cloud:hover { background: #ffeff9; color: #000000; } </style> よろしくお願いします

イメージマジックを使っていますが、convertコマンドが廃止になりました。 今後使う場合は「magick convert」と書くといわれています。 自分は「～convert.exe」としてパスで指定していたのですが、この場合はどのように指定すればいいのでしょうか？

CSS Spriteを作成し、その画像をチェックしてもきれいでした。 ところがコードを書いて表示してみるとぼやけます。 このぼやけを解消する方法を教えてください。 .sprite,.icon2,.icon3,.icon4,.icon5{background:url('../../icon/icon1.png');background-repeat:no-repeat;}.icon2{background-position:0 0;}.icon3{background-position:0 -30px;}.icon4{background-position:0 -60px;}.icon5{background-position:0 -90px;}

web、コーディングに詳しいかた助けてください！ 「続きを読む」みたいなかんじで文章を展開させる箇所を、ページ内で複数作りたいと思っています。 下のコードを使いたいのですが、 ひとつの矢印ボタンを押すと、ページ内のすべての矢印が開いてしまいます……。 この見た目の矢印ボタンをページ内に複数置く場合、 どこを書き変えたら、ボタンのひとつずつの実行が可能でしょうか？ 下記のコードをベースにした解決方法をご存知のかた、よろしくお願いいたします。 ————————— 【HTML】 <div id="text-wrap">   <div class="show-text">   吾輩は猫である。名前はまだ無い。 どこで生れたか頓（とん）と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。 吾輩はこゝで始めて人間といふものを見た。然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。           </div>   <div class="hide-text">   此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。 然し其當時は何といふ考（かんがへ）もなかつたから別段恐しいとも思はなかつた。 但（たゞ）彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許（ばか）りである。 掌の上で少し落ち付いて書生の顔を見たのが所謂（いはゆる）人間といふものゝ見始（みはじめ）であらう。 此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐（やくわん）だ。其後猫にも大分逢つたがこんな片輪には一度も出會（でく）はした事がない。 加之（のみならず）顔の眞中が餘りに突起して居る。そうして其穴の中から時々ぷうぷうと烟（けむり）を吹く。 どうも咽（む）せぽくて實に弱つた。是が人間の飲む烟草（たばこ）といふものである事は漸く此頃（このごろ）知つた。           </div>           <button class="readmore">READ MORE</button> </div> <div id="text-wrap">   <div class="show-text">   あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。           </div>   <div class="hide-text">   またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。           </div>           <button class="readmore">READ MORE</button> </div> ————————— 【CSS】 p {     text-align: center;     font-size: 16px;     color: #666;     line-height: 2.5;     margin: 0; }   #text-wrap {     width: 50%;     height: 100%;     display: block;     margin: 0 auto;     padding: 70px; }   .hide-text {     display: none; }     button.readmore {     position: relative;     height: 80px;     width: 90px;     margin: 40px auto;     display: block;     background-color: transparent;     color: #666;     padding-bottom: 40px;     border: none;     outline: 0;     transition: .5s;     -erbkit-transition: .5s; }   button.readmore::after {     content: " ";     position: absolute;     width: 30px;     height: 30px;     border-top: solid 3px #666;     border-right: solid 3px #666;     transform: rotate(135deg);     -webkit-transform: rotate(135deg);     right: 28px;     top: 25px;     transition: .5s;     -erbkit-transition: .5s; }   button.readmore:hover::after {     top: 40px; }   .on-click {     color: transparent!important; }   .on-click {     transform: rotate(-180deg);     -webkit-transform: rotate(-180deg); } ————————— 【jQuery】 $(function(){     $(".readmore").on("click", function() {         $(this).toggleClass("on-click");         $(".hide-text").slideToggle(1000);     }); }); ————————— なにか不躾でしたらすみません、よろしくお願いいたします！ 参考にしたサイト https://achiyochi.jp/web/readmore-js/

web、コーディングに詳しいかた助けてください！ 「続きを読む」みたいなかんじで文章を展開させる箇所を、ページ内で複数作りたいと思っています。 https://achiyochi.jp/web/readmore-js/ アコーディオンメニューでよく見るdetailsやsummaryでなく、こちらの方法で実現したいと思っているのですが、 複数使った場合、ひとつの矢印をクリックしただけで、ページ内の全ての矢印が開閉されていまいます。 class名を変えるとひとつずつ開閉ができるのですが、同じ要素にいちいち同じCSSを書くのもややこしくなりそうで……。 どこを書き変えたら、ボタンのひとつずつの実行が可能でしょうか？ よろしくお願いいたします。 webデザイン HTML JavaScript jQuery

スタイルシートにフォントを設定していて、「游ゴシック体」というのは知っていましたが、「遊ゴシック体」というのも書体が変換されて表示されました。 ということは、「游ゴシック体」とは別に「遊ゴシック体」というフォントがあるということでしょうか? あまり違いのなさそうなフォントですが、OS側で「遊ゴシック体」は「游ゴシック体」の打ち間違いだと勝手に判断して処理をしている……なんてことはないでしょうか？ HTML <p class="f_other1">あいうえお</p> <p class="f_other2">あいうえお</p> CSS .f_other1{ font-family: '游ゴシック体'; font-size: 30px; font-weight: bold; } .f_other2{ font-family: '遊ゴシック体'; font-size: 30px; font-weight: bold; }

BASEショップでblogアプリにて、記事を投稿する際、左寄せのデフォルトをセンタリングにカスタマイズする方法を教えていただけましたら有り難いです。HTML編集アプリはインストールしました。初心者につき、その後の操作をご教示いただけましたら幸いです。 何とぞよろしくお願いいたします。

【HTML】 <main class="base_color"> <div class="test1">あいうえお</div> <div class="test4"> <div class="test2">かきくけこ</div> </div> <div class="test3">さしすせそ</div> </main> 【CSS】 .base_color{ background-color: yellowgreen; color:#fff; font-weight: bold; font-size: 20px; } .test1{ height:100px; background-color: blue; } .test2{ height:150px; background-color: blueviolet; margin: 30px; } .test3{ height:200px; background-color: royalblue; } .test4{ /*background-color: yellow;*/ } この状態で表示させると、「かきくけこ」のコンテンツの周囲が<main>のbase_colorクラスで指定したyellowgreenになるのは予想できました。 そこで、test4の注釈を外して表示させると……。 予想では「かきくけこ」のコンテンツの周囲が親要素に存在するtest4クラスの影響でyellowになると思ったのですが、一部（横側）しか変わりませんでした。 なぜこのようなことになるのでしょうか？ よろしくおねがいします。

ハーフ・レディング問題でつまづいています。 HTML <div class="test"> <p>あいうえおかきくけこさしすせそたちつてと</p> </div> CSS .test{ width:200px; } p { font-size: 16px; line-height: 36px; /* margin: -10px 0; */ margin-block: calc((1em - 1lh) / 2); background-color: yellowgreen; } これで先頭の行の上の余白と最後の行の下の余白が消えて、divタグのボーダーにぴったり重なる配置になる……と思っていたら、最後の行の下の余白が残ったままになっていました。 余白を消す方法はないでしょうか？ ブラウザはクロームを使用 OSはWindowsです。 よろしくおねがいします。 ※ line-heightの値は、余白をよく分かるようにするため極端な値を設定しています

下記のHTML文を中央揃えにするには、どうクラスを設定して、スタイルシートを編集すべきでしょうか？ <div> <div> <img src="./img/abc.png"> <p class="title">あいうえおかきくけこさしすせそ</p> </div> </div> 中央揃えというのは、タイトル（あいうえおかきくけこさしすせそ）の上に、画像（abc.png）が乗っており、左右に均等の余白のある状態です。 凸のようなかたちですね。 タグ、クラスの追加は可能とします。 よろしくお願いします。

Wordpressについて質問です。 使用テーマ「cocoon」 ヘッダーにサイト内を検索できる検索窓を入れたいと思っています。 さらに、その検索窓が下へスクロールした時にそのまま追従する形が理想です。 設定方法お分かりになる方がいらっしゃいましたらご教授いただければ幸いです。 この2日間、Google検索やChatGPTを使って、やり方をいろいろと試行錯誤しましたがわからず。 お手数ですが、丁寧に教えていただければとても助かります。

HTML CSS初心者です。 囲み枠内の画像横にテキストを配置したく 【HTML】 <div style="border: #ff8c04 solid 2px; border-left: #ff8c04 solid 10px; padding: 20px; background: #ffffff; box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); font-size: 100%;"> <p style=" margin: 0; padding: 0;"> <div class="flex"> <figure class="image">画像</figure> <div class="right"> <p class="title"><img src="https://187288_20240715191851c11.png" alt="肉球" width="46" height="35" />アイアンマン / Iron Man (2008)</p> <p class="text">【評価】：<span style="color:#FFCC33">★★★★★★★★★★</span> 10<span style="font-size:x-small;">/10</span> <br> 【ストーリー】：……。</p> </div> </div> </p></div><p></p> 【CSS】 .flex { display: flex; } .flex .image { width: 130px; /*画像サイズ指定*/ margin: 0; padding: 0; } .flex .image img { width: 100%; height: auto; } .flex .right { margin: 0 0 0 20px; padding: 0; } .flex .title { margin: 0; padding: 0; font-weight: bold; font-size: 16px; } .flex .text { margin: 10px 0 0; padding: 0; font-size: 15px; } body { margin: 20px; padding: 0; } としたのですが、下部に余白ができてしまいます。 body { margin: 20px; を0にしてみましたが、改善されません。 余白を限りなく無くすにはどうすればよいでしょうか。 よろしくお願いいたします。

CSSのskew関数を用いると、四角形を平行四辺形のように変形させることができます。 これをヒントに、次のようにすると 中心角が150°までの扇形を描けます。 では、どうしたら skew関数を用いてそれ以上の中心角の扇形を描けますか？ [サンプルコード] <style> #en { position: relative; width: 100px; height: 100px; background-color: orange; border-radius: 50%; /* overflow: hidden; */ } #fan { position: absolute; left: 50px; top: -50px; width: 100px; height: 100px; background-color: green; opacity: 0.5; transform-origin: left bottom; transform: skewY(60deg); } </style> <div id="en"> <div id="fan"></div> </div>