CSS

[Q] CSSで正六角形の作図ができますか？ CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 前回の「作図 (8)」では６つのDIV要素それぞれに正三角形のCSSを適用しました。 今回は、DIV要素３つで同等の表示を実現させよう、というものです。 （添付図参照） [仕様] 1.ＣＳＳだけで整形のこと　(JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 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> </div> </div>

[Q] CSSで正六角形の作図ができますか？ CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 正六角形を正三角形の集合体とみれば、CSSで正三角形の基本形を１つ作り、 それを利用して、表示位置・向き・配色を決めれば正六角形が作れます。 （添付図参照） [参考] 下辺が水平で頂点が上にある正三角形において、 頂点からの垂線で２分された直角三角形の３辺の比は、 １：２：√３ となる。 したがって、一辺が 100(px)の三角形を作る時、 高さ＝100／2 ⅹ √３＝ 50√３ ≒ 86.60(px) [仕様] 1.ＣＳＳだけで整形のこと　(JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図ができますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* ６つの色 */ red, blue, orange, green, violet,chocolate /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>

[Q] CSSで作図とアニメーションができますか？ CSSのスキルアップのための問題を作りました。 [課題] チェックボックスを１つ用意しておきます。 CSSで、下辺が水平で頂点が上にある正三角形を作ります。 チェックインしたら、右回転して茶色の水平線上で停止します。 （添付図参照） [動作] 1.チェックインすると、アニメーションで正三角形が右回転します。 　・回転軸は、右下の頂点です。(点Ｃ) 　・右回転は、茶色の水平線上で停止します。 2.チェックアウトすると、アニメーションで元の状態に戻ります。 3.チェックボックスのラベルについて 　・アニメーション開始時は「正三角形を転がす」 　・アニメーション終了時には「元に戻る」 [仕様] 1.ＣＳＳだけで整形のこと　(JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図と動作ができますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> .container { position: relative; width: 220px; height: 160px; background-color: skyblue; border-bottom: 2px solid brown; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <input id="task" type="checkbox"> <label for="task">正三角形を転がす</label> <div class="container"> <div class="sankaku"></div> </div>

[Q] CSSで作図とアニメーションができますか？ CSSのスキルアップのための問題を作りました。 [課題] CSSで、下辺が水平で頂点が上にある正三角形を作ります。 一辺が100pxで緑色の正三角形、頂点に「Ａ」と表示させておきます。 その外接円を灰色で、その中心を赤色で描きます。 （添付図参照） [動作] 1.円にホバーした時、 　・正三角形が青色に変わる 　・３秒後、右回りにアニメーションで一回転する 2.マウスアウトすると、アニメーションで元の状態に戻る [仕様] 1.ＣＳＳだけで整形のこと　(JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる CSSだけでこのような作図と動作ができますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="sankaku"></div>

htmlで画面外に伸びた際も親の横幅が広がって欲しいのですが やり方わかりますでしょうか？ 添付画像のように、長い文字やwidthで子供の要素が画面を超え、横スクロールさせると親の背景が画面幅で切れてしまいます。 そうではなく、親も子供の横幅に合わせて広がって欲しいと思います。 こちら方法はありませんか？(親の要素にmin-widthをつけるなどはNGでお願いいたします)

[Q] CSSで作図とアニメーションができますか？ CSSのスキルアップのための問題を作りました。 CSSでツートーンの六角形を作ります。 1.六角形にマウスダウンすると、右回りに一回転します。 2.マウスアップすると、六角形が元の位置に戻ります。 3.アニメーションで回転します。 [仕様] 1.ＣＳＳだけで整形のこと　(JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる 5.配色はつぎのとおり　gray, black CSSだけでこのような作図できますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="rokkaku"></div>

[Q] CSSで添付したような作図ができますか？ CSSのスキルアップのための問題を作りました。 一辺が200pxの青い正方形があります。 1.青い正方形に内接する黄色い円を描きます。 2.黄色い円に内接する赤い正三角形を描きます。 3.赤い正三角形に内接する水色の円を描きます。 [仕様] 1.ＣＳＳだけで整形のこと 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.配色はつぎのとおり　blue, yellow, red, skyblue CSSだけでこのような作図できますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="square"></div>

CSSのスキルアップのための問題を作りました。 ・フランス国旗にホバーするとベルギー国旗に変わります。 ・ベルギー国旗からマウスアウトするとフランス国旗に戻ります。 ・国旗の下にある国名のためのタグは不要です。 (ＪＳ無用) 　　 [仕様] 　　1.２とおりの国旗を切り替え表示します。 　　2.ＣＳＳだけで整形のこと 　　3.ベンダープレフィックスも追記のこと 　　4.タグは変更、追加、削除ができない 　　5.画像やリンクによる表示は無効 　　6.配色はつぎのとおり 　　　・フランス：青、白、赤 　　　・ベルギー：黒、黄、赤 CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> body { background-color: skyblue; } .flag { width: 150px; height: 75px; border: solid 1px gray; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="flag"></div>

[Q] CSSだけで添付図のように表示できますか？ CSSのスキルアップのための問題を作りました。 　　 [仕様] 　　・ＣＳＳだけで整形のこと 　　・タグは変更、追加、削除ができない 　　・画像やリンクによる表示は無効 　　・配色、配置はピッタリでなくてもよい 　　・一辺が200pxの正方形内にあるもの 　　　青い四角形、薄茶色の円、赤系のボール状のもの CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="shape"></div>

CSSだけで添付図のように整形できますか？ CSSのスキルアップのための問題を作りました。 　　 [仕様] 　　・商品には 括弧付き番号が振ってある 　　・点線の下線が引いてある 　　・元値は 青色文字で 薄い桃色の背景色になっている 　　・売値は 赤色文字で 黄色の背景色になっている 　　・タグは変更、追加、削除ができない 　　・ＣＳＳだけで整形のこと [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <ul id="Product_List"> <li>商品A<p><del>345円</del> 234円</p></li> <li>商品B<p><del>2,000円</del> 1,234円</p></li> <li>商品C<p><del>1260円</del> 850円</p></li> <li>商品D<p><del>100円</del> 80円</p></li> <li>商品E<p><del>150円</del> 120円</p></li> <li>商品F<p><del>500円</del> 450円</p></li> </ul> CSSのスキルアップに励んでいる方の回答をお待ちしております。

CSSまったくの素人です。 こちらのサイトからコピペした https://jajaaan.co.jp/css/css-headline/ 上下線グラデーションの見出しの文字の大きさを変更したいのですが 方法がわかりません。 HTML <h3>CSS見出しデザイン</h3> CSS h3 { position: relative; padding: 1.5rem 2rem; color: #000000; text-shadow: 0px 15px 10px #ff8c04; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); } h3:before, h3:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); } h3:before { top: 0; } h3:after { bottom: 0; } font-size:をどこへ記載すれば良いのでしょうか？ よろしくお願いいたします。

お世話になります 5年前まで有効だった作用が放置したためか、このたび作用しなくなり、調べてみたのですが、Javaに頼らずにはいられないのか、 わからず困っております 左側サブhidariと右側メインmigiと名前をつけたフレームを未だに 設定しておりますが、ともあれ、CSS（のみではありませんでした）で動いていたので、、、 右migiページに作ったプルダウン一覧（リンクなし）に 新たにリンクボタン（Ｊｕｍｐ！と反映はできています）を表示し、別ページの「特定箇所」にリンクし、 migiページに反映させたいのです ジャンプボタンを出現させ、リンクも飛ばしも特定箇所ジャンプも 可能だったのに、なぜなのでしょう 元ページ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <～～～～ <select name="プルダウンメニュー" size="1"> <option style="font-family:MS UI Gothic;background-color:#d3d3d3;color:#8b668b"align="center"> 　　　　　*　～～～～～～～～～～～～</option> <option style="background-color:#000044;color:#f0fff0"> ～～～～～～～～～～～～～～　</option> <option style="background-color:#000044;color:#f0fff0"> ～～～～～～～～～～～～～～　</option> <option value="#"> <option value="000_new2018diary.html#diary_0043">　 ～～～～～～～～～～～～～～　</option> ジャンプ先ページ <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01Frameset//EN"> <HTML> <HTML lang="ja"> <HEAD> <TITLE>diary_title~2018</TITLE> <meta name="robots" content="index"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-jp"> <META http-equiv="Content-style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <META NAME="auther" content=""> <META NAME="copyright" content="c2018 ."> <Style Type="text/css"> <!-- /*style*/ body {line-height:130%; font-family:MS UI Gothic; /*background-image:url(n_kabe.png);*/ background-image:url(film.jpg); background-repeat:no-repeat; background-position:right top; background-attachment:fixed; scrollbar-face-color:#000033; background-color:#000022; } A{text-decoration:none; cursor:w-resize; } A:HOVER{ text-decoration:none; border-width:1px 1px 1px 1px; border-style:solid solid solid solid; border-color:#7868ee; } --> </Style> </HEAD> <BODY onContextmenu="return false" text="#b0e0e6" Link="#f5fffa" ALink="#EE82EE" VLink="#d8bfd8" basefontsize="2"> <table width="700"border="0"cellpadding="0"cellspacing="0"align="center"valign="top"> <tbody> <br> <br> <div align="left"><small><font color="#6090ef"> <address> </address> <font color="#ffffff"> ～～～　　　<br> ～～～～～～</small></font></div><br> <br><br> <tr<td>width="500"height="3"border="0"cellpadding="0"cellspacing="0"align="left"bgcolor="#191970"valign="top"> <font color="#c0c0c0"> ～～～～～～～～～～～～ </td></tr> <div align="left"> <br> <a name="4top"><br><br> <a href="#diary_0043">　～～　</a><br> <a href="#diary_0042">　～～　</a><br> <a href="#diary_0041">　～～　</a><br> </div><br><br> </font> </tbody></table> <span align="left">　　　　<img src="ico_bulb.gif"border="0"> 　～～～～～　<a name="diary_0043"></a> </span> <table width="85%"border="1"cellpadding="5"cellspacing="3"align="center"fontcolor="#ffffff"> <tr><td class=a> <b> 　 ～～～～～～～～　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 </b></td> <td style="background:url(～～.jpg) no-repeat center top" rowspan="3"></td> </tr> <tr><td> ～～～～～～～　<td></tr> <tr><td> <pre> ～～～～～～～～ </pre> </td></tr> <tr> <td class=a> <pre> ～～～～～～～ </pre> </td> <td><div align="center"><small>～～～～</small></div></td></tr> <tr><td colspan="2"class=a> <p onclick="document.all.nodiary_0043.style.visibility=document.all.nodiary_0043.style.visibility=='hidden' ? 'visible' : 'hidden' " style="cursor : pointer;"> click on</p> <p id="nodiary_0043" style="visibility:hidden"align="left"> <!--ここに書き込む--> <font color="#c0c0c0"> ～～～～～～～～～　 </p> </td></tr> <tbody> </table> <br><br> <a href="#4top">↑リストに戻る</a><br><br> <br><div align="center"> <a href="new_home.html"target="migi"style="cursor:e-resize;"> <img src="ico_bird_r.gif"border="0"title="　　ホーム表紙　まで戻ります　　">　　HOME　　</a></div> <br> </body> </html> 何ゆえ、統一性のないタグだと承知しておりますが、 不能になったタグなどあるか、 何か書き落としがあるか、設定が間違っているのか？ 教えてください よろしくお願いいたします

<div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50％の幅に均一の大きさで表示したです． CSSわかる方，教えてください！お願いします！

head内に<link type="text/css……>でスタイルシートを3つ読み込んでいて ①reset.css ②style.css ③content.css の順で上から下に並べてるのですが②が後で読み込まれます。 !importantはどのスタイルシート内にもついてませんし、リンクの指定ミス等もありませんでした、メディアクエリのミスもありません。 一体なにが原因として考えられるでしょうか…お知恵を貸していただけますと嬉しいです。

１．背景 HTML、CSS、Java Script学習のため、VS codeでユーザースニペットを作成しようとし、試しにCSSでテスト登録し、うまくいかず、試行錯誤しています。登録方法はネット記事やYou tubeで解説があるので、それらを参照し、「ファイル」->「ユーザー設定」->「ユーザースニペットの構成」から。Jason形式での登録も留意しました。ところが登録しても反映されません。最初はVS codeが最新でないのが原因と思い、インストールし直しました。VS versionは昨日インストールし直したので最新（1.85.1)です。VScodeの再インストールだけではダメという結論です。 2.　settings.jasonの変更 (1) settings.jasonの変更（一回目） webで調べるとVS codeで「setthings.jason」から設定する必要があるとのことです。この「setthings.jason」は変更していなかったので、そのことが原因と思い、変更を試しました。左下の歯車→右上から検索。「settings.jason」にいき、編集可能なのは分かりました。下記は修正前のデフォルト。 { "python.linting.flake8Enabled": true, "editor.formatOnSave": true, "workbench.statusBar.visible": false, "editor.unicodeHighlight.nonBasicASCII": false, "settingsSync.ignoredExtensions": [], "settingsSync.ignoredSettings": [ "workbench.settings.openDefaultSettings" ], "workbench.settings.openDefaultSettings": true } となっていました。どのように記載すれば良いか調べたWEBは下記です。「VSCodeでPythonのユーザースニペット設定」 [ [https://qiita.com/tachiyu/items/27931cda3658e216133c](https://okwave.jp/jump?url=https%3A%2F%2Fqiita.com%2Ftachiyu%2Fitems%2F27931cda3658e216133c) ]( https://okwave.jp/jump?url=https%3A%2F%2Fqiita.com%2Ftachiyu%2Fitems%2F27931cda3658e216133c ) となります。ここでの例は言語はpythonです。これに従うとcssの場合は "[css]": { "editor.suggest.showSnippets": true, "editor.snippetSuggestions": "top" }, となりますが、結果はダメでした。[css]の方は下に赤い波線が出ていました。 (2) settings.jasonの変更（二回目） ChatGPTによると、アドバイスは "editor.snippetSources": の箇所でパスを入力しなければいけないこと。そして、このパスの下にはcssであれば、css.jasonがあることでした。そこで、下記のように入力。しかし、それでも結果はダメでした。 "[css]": { "editor.suggest.showSnippets": true, "editor.snippetSuggestions": "top", "editor.snippetSources": [ "｛C:$hoge/hoge/省略｝/User/snippets" ] }, （注1）explorerで｛C:$hoge/hoge/省略｝/User/snippetsの箇所を打ち込むと、その下にcss.jasonが出てくるのは確認済み。 3．質問 ここにどのように打ち込めばユーザースニペットが有効になるかご教示ください。またはこの方法でも根本的な間違いあり、ダメという場合であれば、他の解決策をご教示ください。 4．補足（css.jasonへの登録内容） css.jasonへの入力内容。あくまでユーザースニペットが反応すれば良いので試しです。style.cssにおいてデタラメ要素の下にtestxxと入力してもダメでした。 候補も全く出てきません。 "display inline-flex":{ "prefix": "testxx", "body": [ "display:inline-flex;" ], "description": "display inline-flex" },

cssの初心者です。ここ一週間位前からcodePenでHTML、CSS、Java Scriptの学習を開始したのですが、codePenはメディアクエリーに対応しているのか教えていただけますか。デスクトップファーストでコードを記載しており、class="gallery"はdisplay:flex; flex-direction:row;をしており、CSSコードの後半で @media(max-width:800px){ .gallery{ flex-direction: column-reverse; }} と記載してcodePenの画面を小さくしたら、その画面が小さくなるだけで、メディアクエリーは効かなそうでしたので質問しました。コーディングの学習はVS Codeで行っていますが、codePenに記載する場合にはgoogleフォント設定や、共有画像の読み込みの様に何か特別な記載の方法があれば、ご教示くださるようお願いします。

cssでpotionプロパティを使用して要素の位置をしているのですが、iphoneで見た時どのブラウザもposition:relative, absoluteの時に不適切な位置にいます。reset.css等の設定はしています。このようなiphoneではうまくいかないということは初めてであったためとても困惑しています。わかる方がいらっしゃいましたら、ぜひ教えていただきたいです。よろしくお願い致します。

cssの初心者です。html、cssにおいて、メディアクエリを用いて、画面横サイズで600pxではfont size:1.0rem、1000pxでは1.5rem、中間の画素横サイズは比例計算として、calc関数を用いて実装したいと思っていますが、戸惑っています。 ① font-size: calc(1rem + 0.5rem * ((100vw - 600px) /400px)); では機能しません。 　　1rem=18pxとして、 　　➁font-size: calc(18px + 9 * (100vw - 600px) /400); では機能します。①の（100vw-600px)/400pxの箇所は例えば、画面横幅が800pxの際は値と単位が約分されて単位無の1/2となり、括弧の前の0.5remと掛け合わされ0.25rem。＋記号の前の1remと足し算され、結果1.25remとの理解ですが、結果として適用されていません。①がなぜ機能しないのか、remを基本で書き表すとどのように数式を作った方がよいのか教えてください。一応、➁でうまくいっていますので、calcを理解するための質問です。　

<html class="h-full"> <head> <script src="https://cdn.tailwindcss.com"></script> <script> const maxItems = 10; </script> </head> <body class="flex h-full"> <div class="flex flex-col flex-grow"> <div class="bg-blue-200">header</div> <div class="h-full max-h-full bg-red-500"> <div class="container mx-auto flex flex-col h-full max-h-full bg-orange-300" > <h1 class="text-4xl">title</h1> <div id="contentsItems" class="max-h-full overflow-y-auto bg-green-300"> <script> for (let i = 0; i < maxItems; i++) { document.write('<div>item</div>'); } </script> </div> </div> </div> <div class="bg-blue-200">footer</div> </div> </body> </html> maxItems の値を増やすと footer が画面外へ行ってしまうのですが、id=contentsItems に height固定値を与える以外の方法で改善する方法はありましたらご教授頂けたらと思います。よろしくお願いします。

次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 但し、テスト1が表示されている間は、テスト2と3は消えており、 テスト2、3が表示されている間はテスト1が消えている状態にしたいです。 なぜか、反復の意味を持つdurationタグの後ろに連結して、duration:blinkはできませんでした。 <div class="test"> <span class="brinking1">テスト1</span> <span class="brinking2">テスト2</span> <span class="brinking3">テスト3</span> </div> <style> .test { margin: auto; background-color: white; position: relative; } .test blinking { width: 50%; animation-name: test; -webkit-animation-name: test; animation-duration:blink 10s; -webkit-animation-duration: 10s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; opacity: 0;} .test .brinking1 { display: block; margin: 0 auto; } .test .brinking2,.test .brinking3 { animation-delay:5s; -webkit-animation-delay:5s; position: absolute; top: 0; left: 25%; } @keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } </style>