CSS

CSS 異なる行数がある表を作れますか？ CSS スキルアップのための問題を作りました。 [問題] HTMLとCSSで 添付図のようなテーブルを作ってください。 Ａ,Ｃ列は５行、Ｂ,Ｄ列は４行のテーブルです。 作れたら「ｍ行ｎ列の表」という概念が変わるかも知れません。 ＜仕様＞ ・CSSだけで作成のこと (JS 不要) ・画像、Canvasを用いないこと ・使えるタグは TABLE関連のみ CSSのコードができたら回答してください。 腕試しをしたい方、ポイ活の方、 スキルアップを望む方の回答をお待ちしています。

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>

CSSの背景画像のソースでどちらが正しいのか教えてください。 【Aパターン】 body{ background-image:url(images/＊＊＊.jpg); } 【Bパターン】 body{ background-image:url("images/＊＊＊.jpg"); } の（　）内に" "（ダブルクォーテーション）を付ける・付けないで関係なく、結果としてはどちらも背景画像が表示されます。　 背景画像の指定するサイトを見ても、付いてたり・付いてなかったり…書籍でも特に具体的に""←について詳しく載ってないのですが、実際どちらを使う方がが正しいですか？

amebablogハムスター恋愛andアタシの日記のcss3D回転キューブアメーバピック広告透明キューブボックスにテキストを透明に配置して、シャドウに広告の画像を配置して左下から右にカーブしながら大きくなりながら上がってきてスマホ画面の左にボックスの角でポンッと軽くつつかせてクリックするとボックスが止まってバラバラになって跳ね返る様に右にカーブしながら小さくなりながら左下にボックスの角で着地しています 難易度はどれぐらいですか？ なかなか出来ません 作り方を教えて下さい https://ameblo.jp/asuka1395000

現在、目次リストを以下のように設定しています 【html】 <div class="open-menu-inside"> <ol class="contents2"> <li><a href="#1"><strong>【ア】</strong></a></li> <li><a href="#2"><strong>【イ】</strong></a></li> <li><a href="#3"><strong>【ウ】</strong></a></li> <li><a href="#4"><strong>【エ】</strong></a></li> <li><a href="#5"><strong>【オ】</strong></a></li> </ol> </div> 【css】 ol.contents, ol.contents ol{ counter-reset: list; list-style: none; padding: 0; max-width: 100%; font: 14px/1.6 'arial narrow', sans-serif; } ol.contents ol{ margin: 0 0 0 35px; max-width: 100%; } .contents a{ position: relative; display: block; text-decoration: none; padding: 3px 3px 3px 8px; margin: 8px 0 8px 30px; background: #f0ffff;/* 背景色 */ color: #000000; font-weight: bold; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .contents a:hover{ background: #ccffff;/* マウスを乗せた時の背景色 */ } .contents a:before{ content: counter(list); counter-increment: list; position: absolute; left: -35px; top: 50%; height: 28px; width: 28px; margin-top: -1em; background: #ff8c04;; line-height: 28px; text-align: center; font-weight: bold; color: #fff; } .contents a:after{ content: ''; position: absolute; left: -28px; top: 50%; margin-top: -6px; border: 6px solid transparent; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .contents a:hover:after{ left: -6px; border-left-color: #ff8c04;; } これを一部のページでできれば5段で複数行表示したいのですが ネットで検索して flex-wrap: wrap; を入れれば良いことはわかったのですが どのように設定すればいいのかわかりません また、前述のcssはそのまま使いたいので その場合はol.contents,の部分をすべて ol.contents2, のように書き換えれば良いのでしょうか htmi css 超初心者です わかる方がおられたらお教えいただけないでしょうか よろしくお願いします

[Q] CSSで正六角形の作図ができますか？ CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 前回の「作図 (9)」では３つのDIV要素それぞれに CSSで２個ずつ正三角形を作成して正六角形を完成させました。 今回は、「rokkaku要素」の子要素２つで正六角形を実現させよう、というものです。 （添付図参照） [仕様] 1.ＣＳＳだけで整形・動作のこと　(JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを１つ用意する 5.「回転させる」にチェックインすると回転アニメーションする 6.チェックを外すと回転アニメーションが止まって原状復帰する [参考] ・DIV要素が１つあれば、疑似要素で２つとそれ自体で、 　合計３つの正三角形が作れます。 ・正三角形の頂点から垂線を引いてできた直角三角形の３辺の比は 　１：２：√3 になります。 ・Canvasが使えなくても、borderまたは polygonで正三角形が作れます。 CSSだけでこのような作図とアニメーションができますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* ６つの色 red, blue, orange, green, violet,chocolate */ .container { position: relative; width: 120px; height: 120px; border: solid 1px red; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> </div> </div>