CSS
- ホームページで動画の上にテキストを表示させたい。
ホームページデザイン勉強中の者です。 こんな感じの、動画とテキストを重ねて、PCでもスマホでもバランスよく見えるトップページを作成したいです！ https://sp.elle.co.jp/beauty/chanel/2103/ 質問１：wordpress等のCMSでは作成不可能でしょうか？ 質問２：不可能な場合、HTMLとCSSを勉強して作成することになると思うのですが、ヒントを教えていただければ幸いです。
- ameba ownd アメーバオウンド CSS
アメーバオウンドにてアコーディオンを使ったサイトを作りたいのですが、どうしても反映されません。 他のサイトのテンプレをそのまま貼り付けるだけ、でも反映されず… だれか助けていただけないでしょうか？ ちなみにその一例が下記になります。 【HTML】 <div class="qa-list mts"> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> </div> 【ＣＳＳ】 .qa-list dl { position: relative; margin: 30px 0 0; cursor: pointer; border: 1px solid #DDD; } .qa-list dl:first-child { margin-top: 0; } .qa-list dl::after { position: absolute; top: 27px; right: 26px; display: block; width: 7px; height: 7px; margin: auto; content: ''; transform: rotate(135deg); border-top: 2px solid #000; border-right: 2px solid #000; } .qa-list .open::after { transform: rotate(-45deg); } .qa-list dl dt { position: relative; margin: 0; padding: 20px 20px 20px 60px; font-weight: bold; background: #DDD; } .qa-list dl dt::before { font-size: 22px; line-height: 1; position: absolute; top: 20px; left: 20px; display: block; content: 'Q.'; color: #3285bf; } .qa-list dl dd::before { font-size: 22px; line-height: 1; position: absolute; left: 20px; display: block; content: 'A.'; font-weight: bold; color: #3285bf; } .qa-list dl dd { position: relative; margin: 0; padding: 20px 20px 20px 60px; } .qa-list dl dd p { margin: 30px 0 0; } .qa-list dl dd p:first-child{ margin-top: 0; } @media screen and (max-width: 767px) { .qa-list dl { margin: 10px 0 0; } .qa-list dl:after { top: 20px; right: 20px; width: 7px; height: 7px; } .qa-list dl dt { padding: 16px 16px 16px 50px; font-size: 14px; } .qa-list dl dt::before { font-size: 14px; top: 20px; left: 20px; } .qa-list dl dd::before { font-size: 14px; left: 20px; margin-top: 5px; } .qa-list dl dd { margin: 0; padding: 16px 16px 16px 50px; font-size: 14px; } .qa-list dl dd p { margin: 30px 0 0; } .qa-list dl dd p:first-child{ margin-top: 0; } } ご指摘いただけると幸いです。 よろしくお願い致します。
- 締切済み
- Android2222
- CSS
- 回答数1
- htmlの表を調整したい
以下のようなコードの時、「c」がはみ出てしまいます。 訳あってrowspanは外せませんが、「2」と「b」を重ねて表示したいです。 どの様にしたらよいでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> </head> <body> <table border=""> <tbody> <tr> <td> 1 </td> <td rowspan="2"> 2 </td> <td> 3 </td> </tr> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> </tbody> </table> </body> </html>
- htmlについて
cssで以下のように書くと形が添付画像のように崩れてしまいます。 どこが作用しているのでしょうか？ 他に必要な箇所があれば教えてください。すぐ用意します。 ilは5回出力しています。 .article-tag li{ text-align: center; display: inline-block; } .article-tag a{ font-weight: bold;/*太字に*/ font-size:16px; text-decoration: none;/*下線消す*/ background: skyblue;/*背景を水色に*/ padding:3% 0; color:white;/*文字を白に*/ border-radius: 20px;/*角を丸くする*/ font-family: 'Avenir','Arial';/*フォントをいい感じに*/ } <div class="article"><ul> <li> 14</li><div class="article-tag"> <li> <a href="article">ハンマー</a></li> <li> <a href="article">キャリー依頼</a></li> <li> <a href="article">apex</a></li> <li> <a href="article.php">フォートナイト</a></li> <li> <a href="article">ハンマー#キャリー依頼#apex#フォートナイト</a></li></li></div>
- htmlについて
.article-tag li{ text-align: center; display: inline-block; } .article-tag a{ font-weight: bold;/*太字に*/ font-size:16px; text-decoration: none;/*下線消す*/ background: skyblue;/*背景を水色に*/ padding:3% 0; color:white;/*文字を白に*/ border-radius: 20px;/*角を丸くする*/ font-family: 'Avenir','Arial';/*フォントをいい感じに*/ }
- CSS スマホで横スクロールバーが出現する
https://jdsasurf.jp/news/ トップページ以外どのページにもスマホで横スクロールが出現します。 トップページは出現しないのですが… body { overflow-x: hidden; } body { box-sizing : border-box; } と記述してもダメでした。 宜しくお願いします。
- css calcの100%はどこの幅の事？
幅を24分割したくてcalc(100% / 24)としましたが効きません。 ↓のようになってます。 <tr><td></td>~~</tr> tr { width : 100% } td { width : calc(100% / 24) } なぜでしょうか？
- <label><input>|後者の先頭を揃えたい
いくつかの「label要素[input要素]」を、リスト要素等を使って単純な縦並びにするとします。すると、label要素の文字数が異なるため、input要素の先頭が揃いません。この状態から先頭を揃えた表示に変更したい場合、適切な改善方法(html要素変更やcss指定)を教えていただけませんか。 よろしくお願いします。
- 締切済み
- noname#247225
- CSS
- 回答数1
- 【css】異なる種類の要素を横並びに表示する方法
たとえば見出し要素<h1>とリスト要素<ul>を横並びに表示したい場合、cssでは何をどれに対して指定すれば良いのか教えていただけませんか。 よろしくお願いします。
- 締切済み
- noname#247225
- CSS
- 回答数1
- htmlでスプリットデザイン
htmlでスプリットデザインは左に分けたほうが指定したピクセル以下になると上になるようなのですが、 左に分けたほうを下にする方法はありませんか？
- 410エラーについて
インターネットで存在しないURLは "404 Not Found" は知っていますが、 410 Gone とは一体なんでしょうか。 引用先のリンクでは、"ウェブ管理者が二度と使わないURLを自分で指定する場合" と説明にありましたが、一つ疑問に思いました。 URLを主入力してタイプミスで410エラーが発生したとき、元のリンクは消えてしまうのでしょうか。 例えば辞書サイトのページURLが、 example.com/meaning/remove というURLは "remove" という単語の意味のページですが、 example.com/remove/meaning と間違えて、"404 Not Found" ではなく、 "410 Gone" が発生した場合、 example.com/meaning/remove というページは消えてしまうのでしょうか。 delete を含ませて 410 Gone が発生した場合も含みます。 404 と 410 は、何が違うのでしょうか。 回答宜しくお願いします。 引用: https://www.webmaster-guide.com/410error/#toc2
- ベストアンサー
- noname#246835
- CSS
- 回答数1
- ソフト404エラーについて
"404エラー"と"ソフト404エラー"の違いを教えてください。 ニュース記事のURLのページ変数を変えてアクセスしたら、画面が真っ白になる現象が、ソフト404エラーなのでしょうか。 例えば example.com/news?p=1 を example.com/news?p=11 とアクセスして、11ページ目が無いので画面が真っ白で、"404 not found"という文言が無い現象のことでしょうか。 また、この現象で管理人が11ページ目を上げる時に11ページ目が欠番になるという現象でしょうか。 調べてみてもよく分かりませんでした。回答お願いします。
- ベストアンサー
- noname#246835
- CSS
- 回答数4
- ページの変数？について
サイトでページを進めるのに手間がかかってしまうので、URLのページの数字部分を変えて楽に進めているのですが、 存在しないページにアクセスしたら、勝手にそのデータは作られてしまって、 管理者がそのページを作った際に削除されて、欠番になってしまいますか？ 例えば、 一気に80ページに進みたいから、 example.com/news?page=1 を page=80 に変えて、80ページ目に行く、という感じです。 しかし、間違えて page=800 とアクセスして、画面上に全く無い(200 OK返答)ページに飛んでしまった、というケースです。 仮に、管理人が800ページ目に作成してUPする時、800ページ目が削除されてしまうのでしょうか？ 1ページ目の所を間違えて11ページにしてしまい、 wikiwikiのバックアップページでも、写真のように表示されましたが、 管理人が11ページ目にバックアップ取る時に、 11ページ目が削除される事はあるのでしょうか？
- ベストアンサー
- noname#246835
- CSS
- 回答数2
- パーセントエンコードは必要ですか？
検索結果のURLを貼るときに、ひらがながパーセントの文字列でいっぱいあるのですが、 これは必ずエンコードする必要があるのでしょうか。 そもそも、何のためにあるのでしょうか。 システムの誤作動を防ぐ※為なのでしょうか？ ※ここでいう誤作動とは "削除コマンド"などを指します。
- ベストアンサー
- noname#246835
- CSS
- 回答数4
- TablePressの文字サイズ
TablePressのCSSでフォントサイズを変更したいのですが、例えばcolumnでサイズを２０で指定すると一番上の行、つまりヘッダーまで２０の変更が適用されてします。 どうすれば１行目を除外できますか？ ヘッダーの方でサイズを指定してもなぜかcolumnの設定が優先されるようです。
- URLのアンドマークについて
検索結果のURLを手入力でシェアする際に、アンドマークに「clear」や「delete」「finish」などの単語が入ってしまった場合、全てのデータが消されてしまう事ってあるのでしょうか？ 例えば、検索結果で「delete 意味」と検索結果URLは example.com/search?q=delete%20意味 だったのですが、 この%20 の部分をアンド検索にしたいので、 example.com/search?q=delete&意味 という感じでシェアする時です。 これはタグ付きのサイトなどで、「#意味」と付けられたページは全削除されてしまう恐れはありますか？ 回答宜しくお願いします。
- ベストアンサー
- noname#246835
- CSS
- 回答数2
- URLのアンドが認識されません。
検索結果のURLを手入力してシェアする時にアンドを入れているのですが、検索結果に反映されません。 buhitterの検索結果のURLが、 buhitter.com/search?q=質問Q&A と入れたはずなのに、 なぜか検索結果が「質問Q」のみしか表示されませんでした。 なぜ &A が省かれたのでしょうか？ 検索結果のURLの後ろに &offsetや&=start などがありますが、 &clearや&delete で対象ページの削除を防ぐ為なのでしょうか？
- ベストアンサー
- noname#246835
- CSS
- 回答数2
- youtubeのリピート再生が出来ません。
以前から、youtubeをリピート再生する際に listen on repeat というサイトにリダイレクト出来ましたが、 いつの間にかできなくなりました。 リピート再生をするためには、 youtube.com?/watch?v=〇〇〇 に repeatを加えて、 youtberepeat.com/watch?v=〇〇〇 と検索すると、 listen on repeat にアクセスできる、というものです。 iPhoneで試してみたら。 「ページを開けません、サーバが応答を停止しています」 PCでは 「このウェブページにアクセスできません (中略) 応答時間が長すぎます」 と表示されできなくなっていました。 再起動や履歴の削除も試してみましたが、ダメでした。 これは何が原因なのでしょうか。 ですが、listen on repeat というサイト自体はアクセスできました。 https://www.listenonrepeat.com iPhoneのバージョンは 14.3 です。 PCは Windows10です。 プログラミングに詳しい方、回答をよろしくお願いします。 参考↓ https://jisakupc-technical.info/web-survice/4464/
- ベストアンサー
- noname#246835
- CSS
- 回答数3
- 縦型 レスポンシブ対応 多階層プルダウンウンリスト
www.oct.ac.jp こちらの専門学校と同じ体裁のサイトを作りたいです。 左は固定（可変でも可）、右は可変 にしたい。 ＜HTML＞ <div class="content"> <div class="frame-left"> <div class="aaa"> <ul class="nav"> プルダウンリスト </ul> </div> </div> <div class="frame-right"> メイン記事内容 </div> </div><!--.content--> ＜ＣＳＳ＞ ここでつまずきました。 .content{ display: -webkit-flex; display: flex;} .frame-left{ width:20%; } .frame-right{ width:80%; } .aaa { overflow: hidden; width: 750px; height: 300px; margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; } .nav { width: 150px; margin: 0; padding: 0; } .nav li { position: relative; width: 150px; height: 40px; } .nav > li { border-bottom: none; } .nav li:last-child { border-bottom: none; } .nav li:hover > ul > li { border-bottom: none; } .nav li > ul > li:last-child { border-bottom: none; } .nav li a { display: block; width: 150px; height: 40px; color: #fff; font-size: 14px; line-height: 2.8; padding: 0 5px; background: #9fb7d4; border-bottom: 1px solid #eee; box-sizing: border-box; text-decoration: none; transition: 0.5s; } .nav > li:hover > a {/*layer-1*/ color: orange; background: #afc6e2; transition: 0.5s; } .nav > li li:hover > a {/*layer-2*/ color: olive; background: #afc6e2; } .nav li:hover > ul > li { overflow: visible; top: -40px; left: 110px; height: 40px; } .nav li ul li { overflow: hidden; height: 0; left: 110px; list-style: none; transition: 0.2s; } .nav li ul li a { background: #9fb7d4; transition: 0.5s; } .nav li ul:before { position: absolute; content: ""; top: 14px; left: 140px; border: 5px solid transparent; border-left: 5px solid #fff; } 1）これだと2階層目が上から下までの全幅にならない 2）画面を縮小すると、プルダウンメニューがはみ出す width:auto; などにしてみましたが、上手くいきませんでした。 やり方を教えていただきたく、よろしくお願い致します。 ※できればＣＳＳだけでなんとかしたいですが、無理ならJavaScriptや jQueryなどを使って実現したいです。
- HTMLとCSSで軽いWEBサイトを作るには？
HTMLとCSSでWEBサイトを作ったのですが、 読み込みに時間がかかることがあります。 画像をいれたりしてないのになぜこんなに重いかわかりません。 どのようなことに気を付ければ読み込みの早いWEBサイトがつくれますか？ HTMLやCSSで読み込みが遅くならないサイト作りのアドバイスを よろしくお願いいします。(*´ω｀)
- ベストアンサー
- tasukete2018
- CSS
- 回答数7