CSS

全5403件中1~20件表示
  • フレーム中プルダウンJumpボタン別ページの箇所に

    お世話になります 5年前まで有効だった作用が放置したためか、このたび作用しなくなり、調べてみたのですが、Javaに頼らずにはいられないのか、 わからず困っております 左側サブhidariと右側メインmigiと名前をつけたフレームを未だに 設定しておりますが、ともあれ、CSS(のみではありませんでした)で動いていたので、、、 右migiページに作ったプルダウン一覧(リンクなし)に 新たにリンクボタン(Jump!と反映はできています)を表示し、別ページの「特定箇所」にリンクし、 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> 何ゆえ、統一性のないタグだと承知しておりますが、 不能になったタグなどあるか、 何か書き落としがあるか、設定が間違っているのか? 教えてください よろしくお願いいたします

    • ベストアンサー
    • a_flat
    • CSS
    • 回答数1
  • HTML・CSS ボタンの表示

    <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わかる方,教えてください!お願いします!

    • ベストアンサー
    • ko0405
    • CSS
    • 回答数2
  • css、スタイルシートの読み込み順について

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

  • VS codeにおけるユーザースニペットの初期設定

    1.背景 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" },

  • codePenでメディアクエリーは対応していますか

    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フォント設定や、共有画像の読み込みの様に何か特別な記載の方法があれば、ご教示くださるようお願いします。

    • ベストアンサー
    • masamu1029
    • CSS
    • 回答数1
  • CSS iphone時うまく機能しない

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

  • cssのcalcについて教えてください

    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を理解するための質問です。 

    • ベストアンサー
    • masamu1029
    • CSS
    • 回答数2
  • スクロール状態で高さが保たれない

    <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内の文字を点滅させる

    次の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>

  • WordPress

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

  • CSS目次開閉でチェックボックスが現れる

    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; } チェックボックスを消す方法があれば、教えていただきたいです。 よろしくお願いいたします。

  • 階層番号について(CSS、html)

    ブログの目次を作成しています。 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; } どうぞ、よろしくお願い致します。

    • ベストアンサー
    • syusyu1008
    • CSS
    • 回答数1
  • CSS入れ子リストを作成したい

    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> よろしくお願いいたします。

    • ベストアンサー
    • musicchan
    • CSS
    • 回答数1
  • W3C CSSで文法解析エラーが発生しました

    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; } です。 どこをどのようにすれば良いでしょうか?

  • text-alignエラー

    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; /* 行間 */ } どこをどのようにすれば良いでしょうか?

    • ベストアンサー
    • musicchan
    • CSS
    • 回答数2
  • iPadOSでの表示乱れについて

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

    • 締切済み
    • sucoon5
    • CSS
    • 回答数1
  • HTML・CSS 目次を閉じている時のみ不具合

    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; } よろしくお願いいたします。

    • ベストアンサー
    • musicchan
    • CSS
    • 回答数6
  • 背景色が重なるもしくはつかない

    こんばんは、お世話になります。 背景色が重なる、もしくは色がつかないのですが どのようにしたらよいでしょうか? 因みにヘッダーのメニューの後ろにも灰色を付けています。 ご教示お願いします。 @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; }

  • masonry.jsで並べた画像を綺麗に敷き詰める

    こんにちは、お世話になります。 大分レイアウト、アニメーションの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等のクラス属性を使ってしまってしたい事が全部できないのですがどうしたら良いでしょうか? したい事: 1画像表示 2pinterest風グリッドレイアウトにする 3画像の位置を整える 4スクロールした際に画像をふわっと出現させる。 これらを全部できる様にするにはどのような記述が必要でしょうか ご教示お願いします。