HTML・CSS(3ページ目)

仕事やプライベートで自分でホームページを作成したいと考えた方。初心者でもわかるHTML・CSSの基本についての本やサイトを教えてほしい、ブロックレベル要素について教えてほしい等こちらに投稿して聞いてみましょう。

回答数

気になる

初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。

まずは、添付画像を見ながら質問を見てほしいのですが、画像のような状況からwebブラウザのウィンドウ右端を掴み、幅を縮小していくと、緑部左端がメニューバーに当たると、青部領域が縮んで行き、メニューバーの左端がウィンドウの左端に当たるあたりから、緑領域および文字サイズブロックが隠れていき、ウィンドウの右端がメニューバーの右端を過ぎたあたりからコンテンツが縮小していく動きになるのですが、これをウィンドウ右端から縮小していったときに青部は隠れていってもよく、緑部及び文字サイズブロックは隠れずに縮小して行き、同じくメニューバーおよび会社ロゴ、所在地ブロックも隠れずに縮小させるには、どのようにすればよいのでしょうか？コーディングは全部は載せられないので、だいたいこんな感じで作っているというぐらいを記載します。テキストエディタ等で見てほしいです。 html <body> <div class="out-wrapper-container"> <div class="out-wrapper-left"></div> <div class="wrapper" > <header class="header-container"> <div class="h-left"> <div id="image1"></div> </div> <div class="h-center"> <div id="image2"></div> <div id="image3"></div> </div> <div class="h-right"> <address class="char-no-wrap"> <div><span class="font-adapt1">所在地 : </span><span class="post font-adapt2">***－****</span></div> <div><span class="font-adapt2">*******</span></div> <div> <span class="font-adapt1">受付時間 : </span><span class="colored">AM9:00〜PM5:00</span> <span class="tel colored right">***-***-****</span> </div> <div id="sns"> <ul> 省略 </ul> </div> </address> </div> </header> <div class="main"> <div class="nav-fix-pos"> <nav id="menubar"> <ul> 　　省略 </ul> </nav> </div> </div> </div> <div class="out-wrapper-right">  <div id="fsize"> <p>文字サイズ</p> <ul> 　　省略 </ul> </div> </div> </div> </body> </html> css ******ここから********* /*サイトの設定*/ ul {list-style-type: none;} /* out-wrapperコンテナ */ .out-wrapper-container { display:flex; justify-content: center; } .out-wrapper-left{ width:11vmin; background-color: blue; } .out-wrapper-right{ width:11vmin; background-color: green; } /*文字サイズ変更ボタン*/ /*out-wrapper-rightボタンブロック*/ #fsize { /*out-wrapper-right中央配置*/ margin-right: auto; margin-left: auto; width: 11vmin; /*ブロック幅*/ height:5vmin; background: #fff; /*背景色*/ box-shadow: 0 0 0.8vmin rgba(0,0,0,0.2); padding: 1vmin 0; /*上下、左右へのボックス内の余白*/; } /*wrapperとout-wrapperがある)*/ /* そのうちのwrapperヘッダー部 */ header { opacity: 0.7; height: 15vmin; width:115vmin; margin-left: auto; margin-right: auto; z-index:10; } /*wrapperヘッダー部のcontainer*/ header.header-container { display:flex; align-items: center; flex-wrap: nowrap; } /*ヘッダー部位置*/ header .h-left{ display:flex; align-items: center; height: 15vmin; width: 20%; background:orange; flex-wrap: nowrap; } header .h-center{ display:flex; align-items:center; height: 15vmin; width: 50%; background:yellow; flex-wrap: nowrap; } header .h-right{ height: 15vmin; margin-left: auto; margin-right: auto; width: 30%; z-index: 20; position: relative; } /*ヘッダー部の中身left*/ .h-left #image1{ height: 100%; width: 100%; background-size: contain; background-position:center; background-image:url("../images/会社ロゴ字.png"); background-repeat: no-repeat; } /*ヘッダー部の中身center*/ .h-center #image2{ 省略 } .h-center #image3{ 省略 /*ヘッダー部の中身right*/ /*address部*/ .h-right address { display:flex; flex-wrap:nowrap; flex-direction: column; box-sizing: border-box; height: 15vmin; width: 100%; font-style: normal; line-height: 1.5; /*行間を少し狭く*/ } /*SNSのリンクボタン集*/ #sns{ margin-top: auto; } .h-right #sns{ 　省略 } #sns ul { 　省略 } li#Instagram a{ 　省略 } li#Line a{ 　省略 } li#Facebook a{ 　省略 } /*メインメニュー*/ /*メニューブロックの設定*/ #menubar { margin: 20px auto 20px; height: 45px; } ul{ display:flex; padding:40px; } /*メニュー１個あたりの設定*/ #menubar li { width: 16.66%; line-height: 1; /*行間を少しだけ狭く*/ } #menubar li a { text-decoration: none;display: block; text-align: center; height: 30px; /*高さ*/ padding-top: 15px; /*上に追加する余白*/ color: #fff; /*文字色*/ background: #779eec; /*背景色*/ }

質問日時: 2023/12/18 19:52 質問者: denpataro

ベストアンサー

1

0
ホームページについて質問です。トキワ劇場https://www.tokiwa-movie.com/P

ホームページについて質問です。トキワ劇場https://www.tokiwa-movie.com/Preview.html のページで画像が枠いっぱいまで大きくなってしまうのですが、どうしたらいいでしょうか？原因はスマホとかに対応しようと、cssを弄りまくってたのがことの発端だとなのですが cssのどこらへんをいじったほうがいいでしょうか？

質問日時: 2023/12/16 16:14 質問者: トキワ

解決済

3

0
かっこいいウェブを作るテク

こんばんはｈｐ自作しています。自営業者では結構頑張ってるほうです。元ウェブデザイナーですし。昔はフラッシュだの、fireworksだの有料ソフト使っていましたが、今のｐｃでは使っておらず無料のソフトだけ使って作ってる感じです^o^; ウェブはエクスプレションウェブ、画像はオープンオフィスドロー。 jabascript難しそうで使えません。それなしでかっこいいの作りたいです。ネットで検索してみたけどジャバスクリプトを大体使っており、なんかの有料ソフトがないとできないようなデザインがたくさん出てきました。無料ソフトでもカッコよくできるテクを紹介しているページか、テクを教えてほしいです。 cssテーブルの枠の太さとか設定して枠むき出しのページを作ってますが、枠無しにするにはどうするんでしたっけ？^o^;　内容の一部で枠も表示したいテーブルもたくさんあるため、全部枠無しにすると都合悪いので今のところ枠ありcss設定になってますが。大枠のテーブルは枠無し、テーブル表示したい時だけ枠ありにしたいんですが。よろしくお願いします。

質問日時: 2023/12/14 19:19 質問者: takeyabeer

解決済

5

0
reuterのScraypingで不思議な現象 hでは見出し出てこずaでは出てくる

Win11でpython3.11をIDLEで利用しています。 requestsとbs4でScraypingを使い、 https://jp.reuters.com/　をScrayping chromeのWebの検証では、下記のように記事のhがあるのに？ html <h1 data-testid="Heading" ***>Ｇ７首脳、ガザ戦闘停止求める　イランにも関与自制を要請</h1> soup.find_all("h1")　では、「上記のｈタグ見出し」が抽出されず、分野名やAdだけ。 soup.find_all("a")　では、a-tagの記事見出しが抽出できる。こんなことって、あるのでしょうか？

質問日時: 2023/12/07 23:35 質問者: momotarojapan

ベストアンサー

1

0
HTMLに背景を追加するやり方を教えてください。

HTMLに背景を追加するやり方を教えてください。

質問日時: 2023/12/03 15:19 質問者: Wohinfahrensie

ベストアンサー

4

0
Chat GTPで、12月のカレンダーと調べて、12月のカレンダーのHTMLを作れたのですが

Chat GTPで、12月のカレンダーと調べて、12月のカレンダーのHTMLを作れたのですが、そこに画像を背景として入れたいのですが、うまくいきません教えてくださいお願いしますすいません Sublime Textです

質問日時: 2023/12/02 14:10 質問者: Wohinfahrensie

解決済

1

0
12月のカレンダーを表すHTMLを教えてください。すいませんお願いします

12月のカレンダーを表すHTMLを教えてください。すいませんお願いします

質問日時: 2023/12/02 13:30 質問者: Wohinfahrensie

解決済

4

0
pythonに自分で作ったHTMLを、入れたいのですが、どうやったらいいのですか？おしえてくださ

pythonに自分で作ったHTMLを、入れたいのですが、どうやったらいいのですか？おしえてください！お願いします

質問日時: 2023/12/02 13:27 質問者: Wohinfahrensie

解決済

1

0
HTMLです次の意味を持つ要素または次の効果を設定するプロパティを選んでください。とい

次の意味を持つ要素または次の効果を設定するプロパティを選んでください。という問題でどれですか？用語説明型のリストは？どれか？教えてくださいお願いします list-style-type ol list-style-position dl list-style-image dd ul li

質問日時: 2023/11/29 15:10 質問者: Wohinfahrensie

解決済

2

0
HTMLです

次の意味を持つ要素または次の効果を設定するプロパティを選んでください。という問題で番号がつくタイプのリストは、次のうちどれですか？教えてくださいお願いします dt list-style-type ol list-style-position dl list-style-image dd ul li

質問日時: 2023/11/29 15:08 質問者: Wohinfahrensie

ベストアンサー

1

0
HTMLです

次の意味を持つ要素または次の効果を設定するプロパティを選んでください。という問題で、リストの行頭記号を画像にするのは、dtですか？

質問日時: 2023/11/29 15:05 質問者: Wohinfahrensie

解決済

2

0
css初心者フレックスボックスの適用を一部適用除外したいですが方法が分かりません。

添付画像のように、フレックスボックスを使って、「小」かつ「大」部を横のセンター配置しようとしているのですが、フレックスボックスを使うと、「文字サイズ」部まで一緒に横並びしてしまいます。「文字サイズ」部だけを適用を外したいです。画像は私のコーディングの#fsize でフレックスボックスをコメントアウトしています。 html*********************** div class="out-wrapper" id="fsize"> <p>文字サイズ</p> <ul> <li id="small"><a href="#" onclick="setActiveStyleSheet('default'); return false;" title="文字サイズ「小」"></a></li> <li id="large"><a href="#" onclick="setActiveStyleSheet('change'); return false;" title="文字サイズ「大」"></a></li> </ul> /div> ****************************** css**************************** /*文字サイズ変更ボタン（※文字サイズを「大」にした時の設定はchange.cssで行う） ---------------------------------------------------------------------------*/ /*ボタンブロック全体*/ #fsize { position: absolute; right: 1%; /*ヘッダーブロックに対して右からの配置指定*/ top: 0vmin; /*ヘッダーブロックに対して上からの配置指定*/ width: 120px; /*ブロック幅*/ background: #fff; /*背景色*/ box-shadow: 0px 0px 8px rgba(0,0,0,0.2); /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた border-radius: 0px 0px 5px 5px; /*角丸のサイズ。左上、右上、右下、左下への順。*/ padding: 10px 0px; /*上下、左右へのボックス内の余白*/; /*display: flex; align-items: center; justify-content: center;*/ } /*「文字サイズ」のテキスト*/ #fsize p { font-size: 18px; /*文字サイズ*/ padding: 0 12px; /*上下、左右への余白*/ } /*文字サイズボタン１個あたり*/ #fsize ul { display:flex; background: #fff; align-items: center; } #fsize ul a { overflow: hidden; text-decoration: none; color: #fff; /*文字色*/ height:100%; } #fsize ul li#small a::before { display:inline-flex; align-items: center; justify-content: center; content: "小"; /*「小」の文字を出力*/ font-size: 16px; /*文字サイズ*/ height: 25px; width: 25px; background: #779eec; /*背景色*/ margin-right: 10px; } /*「大」ボタン設定*/ #fsize ul li#large a::before { display: inline-flex; align-items: center; justify-content: center; content: "大"; /*「大」の文字を出力*/ font-size: 20px; /*文字サイズ*/ background: #ccc; /*背景色*/ width: 30px; /*幅*/ height: 30px; /*高さ*/ } /*マウスオン時の「大」ボタン設定*/ #fsize ul li#large a:hover::before { background: #779eec; /*背景色*/ }

質問日時: 2023/11/27 00:13 質問者: denpataro

ベストアンサー

2

0
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。それからの手順で悩んでる

大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。それからの手順で悩んでることがあり、イラレで作ったデータをDreamweaverでHTML化したいのですが、手順がわかりません。詳しい方教えていただけたら本当に幸いです。もし、イラレで作ったシングルページでDreamweaverで作ることができないのでしたら、HTML化は最終的な必須条件なので、他の方法を教えていただけたら有り難いです。要件としては、一つのwebのシングルページを作り、それをHTML化し、indexとcssの２つのファイルを作りたいということです。よろしくお願い致します。

質問日時: 2023/11/21 23:42 質問者: tyuhgghhhg

解決済

2

0
ボタンが押されたらWebページの文字コードを変える、というプログラミングを書きたいです。目的は文

ボタンが押されたらWebページの文字コードを変える、というプログラミングを書きたいです。目的は文字コードを変えることによる文字化け演出を作るためです（作ろうとしてるのはホラー系のウェブサイト）下に現在のコードを書いておきます、どうしたらいいですか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">  <title>``【oaicite:0】``実際に11人で肝試しに行った結果...</title> <link rel="stylesheet" type="text/css" href="kowai.css"> <body> <button onclick="startDisplay()">クリックして開始</button> <audio id="myAudio" src="fuon.mp3"></audio> <div id="text-container"></div> <script src="kowai.js"></script> <button onclick="scrollToTop()" id="buttonEndBGMStop">おわりとBGM停止</button> <p id="changingText"> <script src="kowai.js"></script> </p> <audio id="SandstormAudio" src="砂嵐の音.mp3"></audio> <script> function changeCharset(charset) { document.charset = charset; // Change the character set document.querySelector('meta[charset]').setAttribute('charset', charset); // Change meta element } document.getElementById('buttonEndBGMStop').addEventListener('click', function () { // When the button is clicked, change the character set and update the text content changeCharset('Shift_JIS'); // Change to Shift_JIS (you can modify this) document.getElementById('changingText').innerHTML = '新しいテキストコンテンツ。'; // Replace with your new text }); </script> </body> </html>

質問日時: 2023/11/21 00:33 質問者: とあるゲーマー

解決済

1

1
HTMLでwebサイトを作ってるのですが、ボタンが押された時にjsに書いている文章の文字コードを

HTMLでwebサイトを作ってるのですが、ボタンが押された時にjsに書いている文章の文字コードを変更するコードってどう書いたらいいんでしょうか？文字コードを変更する目的は、文字コードを変えることで書いた文章をわざと文字化けさせるためです。（ホラー用なので）通ってるプログラミング教室の発表会で出す予定なので他にも怖い演出などが作れるものがあったりしたら教えて欲しいです。よろしくお願いします。今のコードはこちら ↓↓↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【2ch怖いスレ】実際に11人で肝試しに行った結果...</title> <link rel="stylesheet" type="text/css" href="kowai.css"> </head> <body> <button onclick="startDisplay()">クリックして開始</button> <audio id="myAudio" src="fuon.mp3"></audio> <div id="text-container"></div> <script src="kowai.js"></script> <button onclick="scrollToTop()" id="buttonEndBGMStop">おわりとBGM停止</button> <audio id="SandstormAudio" src="砂嵐の音.mp3"></audio> <script> function changeCharset(charset) { document.charset = charset; // 文字コードを変更 document.querySelector('meta[charset]').setAttribute('charset', charset); // meta要素も変更 } document.getElementById('buttonEndBGMStop').addEventListener('click', function () { // 終了と停止ボタンが押されたら文字コードを変更 changeCharset('Shift_JIS'); // Shift_JISに変更する例 }); </script> </body> </html>

質問日時: 2023/11/16 23:21 質問者: とあるゲーマー

解決済

1

0
Windows環境下のHTML内部リンクでルートを指定してもindex.htmlを表示させたい

ごく簡単なHTMLだけのページを作り公開しているのですが SEOの観点で内部リンクを修正したいと思い、URLの正規化に合わせて <a href="index.html">home</a>　というような記述を <a href="/">home</a> に変更してみました。本番環境はこれで問題ないのですが、自分のテスト環境は普通のWindowsフォルダに置いているだけなので、当然ですがindex.htmlの代わりにフォルダ配下のファイルが一覧表示されてしまいます。手間をかけず回避できるよい方法があればお教えいただけないでしょうか？

質問日時: 2023/11/09 08:35 質問者: chcloc

ベストアンサー

1

0
プログラミングの勉強が進みません

閲覧ありがとうございます。職業訓練で、プログラミングの勉強を始めました。先生の言う通りのことはできるのですが、「では、このような表示になるように一から作ってみて」と言われると全く、わかりません。HTMLとCSS、どちらに書くのか迷うことも少なくないです。予習復習を続けてもわからなくて、情けなくて泣きそうです。練習あるのみでしょうか。いい勉強方法があればぜひ、教えてください。

質問日時: 2023/11/08 22:33 質問者: lecider

解決済

3

0
htmlの修正方法を教えていただきたいです。

下記のhtmlを入れると、添付ファイルのようにブラウザで表示され「Copy」を押すとテキストをコピーできます。この「Copy」を「サイト」に変えて、ボタンを押すとコピーでなくサイトへ新しいタブでページを開くようにしたいのですが、どのように直せばよろしいでしょうか？ <p>サイト名<br><input type="text" value="" style="width:70%" id="text1"><button class="btn" type="button" data-clipboard-demo data-clipboard-target="#text1">Copy</button></p>

質問日時: 2023/11/07 09:11 質問者: asdfxz

解決済

2

0
htmlの修正方法を教えていただきたいです。

下記のhtmlを入れると、添付ファイルのようにブラウザで表示され「Copy」を押すとテキストをコピーできます。この「Copy」を「サイト」に変えて、ボタンを押すとコピーでなくサイトへ新しいタブでページを開くようにしたいのですが、どのように直せばよろしいでしょうか？ <p>サイト名<br><input type="text" value="" style="width:70%" id="text1"><button class="btn" type="button" data-clipboard-demo data-clipboard-target="#text1">Copy</button></p>

質問日時: 2023/11/07 08:11 質問者: asdfxz

解決済

1

0
執筆者の名前や関連文書へのリンク，Copyrightの表記などはfooterですか？

執筆者の名前や関連文書へのリンク，Copyrightの表記などはfooterですか？

質問日時: 2023/11/01 15:28 質問者: Wohinfahrensie

ベストアンサー

2

0
フロントエンジニアで一人前といわれるレベルの画面

フロントエンジニアで一人前の画面作成とはどの様な画面作成ができたら一人前と呼べますか？できればサンプル画面のURLを教えてください。また、その画面を何日ぐらいで作成できてほしいですかちなみにCSSとかすごい苦手意識があるのですが、何か良い独学方法を教えてください。 ※模写して作ってみるというのはわかっておりますが、他にも良い方法ありましたらお願いします

質問日時: 2023/10/30 17:37 質問者: Tank-you

解決済

1

0
疑似クラスは，ある要素が特定の状態にあるときに限定して適用するセレクタである。a要素（リンク）で良く

疑似クラスは，ある要素が特定の状態にあるときに限定して適用するセレクタである。a要素（リンク）で良く使用される。例えば，リンク先をまだ見ていない状態のa要素は，a:( ) と，カーソルが上にある状態のa要素は，a:( ) と指定する。 ( )に入るのは何ですか?教えてくださいお願いしますすいません

質問日時: 2023/10/30 16:46 質問者: Wohinfahrensie

ベストアンサー

1

0
「IDセレクタ」は，HTMLで特定のタグに ( ) 属性をつけておき，その属性値を使って指定する ↑

「IDセレクタ」は，HTMLで特定のタグに ( ) 属性をつけておき，その属性値を使って指定する ↑( )に入るのは何ですか?教えてくださいお願いします

質問日時: 2023/10/30 16:45 質問者: Wohinfahrensie

ベストアンサー

2

0
特定の要素だけに適用させることができるセレクタもある。「クラスセレクタ」は，HTMLで特定のタグに

特定の要素だけに適用させることができるセレクタもある。「クラスセレクタ」は，HTMLで特定のタグに ( )属性をつけておき，その属性値を使って指定する ( )の中に入るのは何ですか? 教えてくださいお願いします

質問日時: 2023/10/30 16:41 質問者: Wohinfahrensie

ベストアンサー

2

0
text-alignは、行の高さですか？

text-alignは、行の高さですか？ HTMLです

質問日時: 2023/10/25 14:49 質問者: Wohinfahrensie

ベストアンサー

2

0
text-decorationは、行揃えですか？

text-decorationは、行揃えですか？

質問日時: 2023/10/25 14:47 質問者: Wohinfahrensie

ベストアンサー

1

0
text-indentは、要素全体の透明度ですか？

text-indentは、要素全体の透明度ですか？ HTMLです

質問日時: 2023/10/25 14:45 質問者: Wohinfahrensie

ベストアンサー

1

0
スマホで、左右にスワイプしてウェブページを読み込ませる方法は？

スマホの画面を指で左右にスワイプして、ウェブぺ―ジ（HTML）を切り替えたいです。 HTML、CSS、JavaScripit を使用して、実装可能でしょうか。教えてください。お願いします。

質問日時: 2023/10/16 17:39 質問者: Chown

解決済

1

0
HTMLのbody内に<style>～</style>定義は作法的にOKでしょうか？

現在のHTMLの仕様にお詳しい方アドバイスを頂けないでしょうか？タイトルの通りなのですが、HTMLのbody内に<style>～</style>を定義し、そこにstyleの内容を定義していくことは、現在のHTMLの仕様としてありでしょうか？実際に試してみると、問題無く動作するのを確認しています。出来れば、CSSの設置してある外部ファイルに記述するのがお作法的には正しいと思うのですが、サイトの構成がパーツごとにincludeされていたり、ほんの少しの、または一時的にCSSを定義する際に、大元のSCSSから書き直して、コンパイルしてCSSに設定して、また戻して…。とやっていると作業に時間がかなりかかってしまいます。なので、特定のincludeされているHTML部分に、ちょこっと<style>～</style>を記述しています。大変便利な方法なのですが、何か問題はありますでしょうか？ HTML5は終わったと伺っています、これからはWHATWGが仕様を管理されると思うのですが、WHATWG的には、このような方法はどうなのでしょうか？調べてみるのですが、明確な回答が見つけれず…。この辺りお詳しい方いらっしゃいましたら、ご助言を頂けますと幸いです。なお、その方法はNGとなる場合、何か簡易的に行える良き代替案は御座いますでしょうか？宜しくお願いいたします。

質問日時: 2023/10/05 21:52 質問者: oneday77

ベストアンサー

3

0
CSS中で，/*と*/で囲まれた範囲を教えてくださいお願いします！！

CSS中で，/*と*/で囲まれた範囲を教えてくださいお願いします！！コメント属性開始タグ宣言

質問日時: 2023/10/04 15:24 質問者: Wohinfahrensie

ベストアンサー

1

0
HTML中で，で囲まれた範囲はどれですか？教えてくださいお願いします

HTML中で，で囲まれた範囲はどれですか？教えてくださいお願いしますコメント属性開始タグ宣言

質問日時: 2023/10/04 15:20 質問者: Wohinfahrensie

ベストアンサー

1

0
URLにアクセスした際に指定した箇所に飛ぶようにしたいです。

URLにアクセスした際に指定した箇所に飛ぶようにしたいです。 HTMLのコード以下のURLにアクセスすると▼▼のHTML部分直接飛ぶようにしたいのですが、下記のコードでは上手く飛びません。なぜでしょうか？ idもきちんと記載されています。#16 #17　飛ばしたい先のHTML id="16" id="17" <div class="category"> <ul> <li><a href="https://●●categorypage2.php#16">家庭用ゲーム機</a></li> <li><a href="https://●●categorypage2.php#17">家庭用ゲームソフト</a></li> </ul> <ul> </div> ▼▼飛ばしたい箇所のHTML以下。 <div class="title3" id="16"><i class="fa-solid fa-pen-to-square"></i>家庭用ゲーム機</div> <div class="title3" id="17"><i class="fa-solid fa-pen-to-square"></i>家庭用ゲームソフト</div>

質問日時: 2023/09/28 11:41 質問者: hayosato

ベストアンサー

1

0
どの印をつけた範囲の何をどう表示させるといった指定をするファイルは何ですか？ CS

どの印をつけた範囲の何をどう表示させるといった指定をするファイルは何ですか？ CSS（Cascading Style Sheet） .css HTML（HyperText Markup Language） .html 教えてくださいお願いします

質問日時: 2023/09/27 12:55 質問者: Wohinfahrensie

解決済

1

0
HTML電卓で1文字消す方法

https://jp-seemore.com/web/3142/ このページの最初のコードで、1文字消す（末尾）方法を教えてほしいです。よろしくお願いします。

質問日時: 2023/09/23 09:51 質問者: 優里さん

解決済

1

0
ワードプレスで事前定義されたclassの一覧を見たいです

お世話になっております。ワードプレスには、事前定義されたclassがあると知りました。例えば、画像を丸く表示したいときは、画像を選択して「追加cssクラス」に「is-style-circle-mask」と入力すれば、自分でcssを記述しなくても画像が丸く表示されます。このようにワードプレスで事前定義されているclassの一覧を見たいのですが、検索してもヒットしません。どこかで一覧があれば教えていただけますか。よろしくお願いいたします。

質問日時: 2023/09/21 14:27 質問者: poqwpoq

ベストアンサー

1

1
web制作をしているのですが、ページ内リンクを押すとidを指定しているブロックより上の方に飛んでしま

web制作をしているのですが、ページ内リンクを押すとidを指定しているブロックより上の方に飛んでしまいます。原因がわからず困っています。考えられる理由を教えていただけると幸いです。よろしくお願いいたします。

質問日時: 2023/09/21 13:16 質問者: reo96319

ベストアンサー

1

0
align-itemsの使い方。本が間違っている？

お世話になっております。 align-itemsの使い方について調べていたら、いくつかの本やサイトではflexアイテムの縦方向を決めるとあります。これが正解なように思えます。しかし、HTML&CSS全辞典という本では、「align-itemsプロパティは、配置されるすべてのボックスに対して既定となるalign-selfプロパティの値を定義します。」と書いてあり、さらに「適用される要素」は「すべての要素」と書いてあります。これって、本が間違いですよね？詳しい方がいらっしゃいましたらよろしくお願いいたします。

質問日時: 2023/09/20 11:23 質問者: poqwpoq

ベストアンサー

3

0
ボックスを中央配置したいです。

青みどりの全体の背景の上に薄いグレー色のボックスがあり、さらにそのボックスの上に３つボックスを配置するコードを書いているのですが、３つのボックスが均等に中央配置されず困っています。一見PCのデバイス幅では中央配置に見えますが、デバイス幅を縮小するにつれて中央配置にならず、それが目立ってしまいます。３つのボックスを中央配置するにはどうしたらよいでしょうか？　 ●HTMLのコード以下 <div class="zentai"> <div class="box"> <div class="box2"> <div class="title3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ </div> </div> <div class="box1"><div class="title2">入力フォーム内に以下の項目を記載して下さい。</div></div> <div class="box2"> <div class="title5">テキストテキストテキストテキストテキストテキストテキストテキストテ</div> </div> <div class="box3"> </div> </div> </div> ●CSSのコード .zentai{ background-color:#299CA4; } .box{ position: relative; max-width: 1106px; width: 88%; height: auto; margin-right: auto; margin-left: auto; margin-top: 100px; margin-bottom: 80px; padding: 10px 30px 16px 30px; background-color: #f9f9f9; color: #006666; z-index: 1; } /*ボックス２*/ .box2{ position: relative; display: inline-block;/*テキストと背景を同じ長さに*/ width: 94%; height: auto; margin-right: auto; margin-left: auto; margin-bottom: 30px; padding-right: 20px; padding-left: 20px; padding-top: 5px; padding-bottom: 10px; background-color: #d4ebeb; border-radius: 0 12px 12px 12px; z-index: 9999; } /*３つ目のボックス*/ .box3{ position: relative; width: 94%; height: auto; margin-right: auto; margin-left: auto; margin-bottom: 16px; padding-right: 20px; padding-left: 20px; padding-top: 12px; padding-bottom: 10px; background-color: #FFFFFF; border-radius: 12px 12px 12px 12px; border: 1.5px solid #ddd; } /* ボックス３の中にフォーム */ .auto-style15{ letter-spacing: -0.04em; width: 90%; max-width: 600px; }

質問日時: 2023/09/19 17:09 質問者: hayosato

ベストアンサー

2

0
CSSで謎の現象

お世話になっております。ワードプレスのcocoonテーマでWEBサイトを作成しています。テーマのデフォルトではヘッダーロゴが中央寄せになっています。ヘッダーロゴを左寄せにしたかったので以下のコードを追加CSSに記述して左寄せにしていました。 /*ヘッダーロゴ左寄せ*/ .logo{ text-align:left; } しかし、1ヶ月くらい経過してからやはり中央寄せが良いと思い、上記を削除しました。ところが、ヘッダーロゴは左寄せのまま戻らないんです。四苦八苦していたところ、ある発見をしました。削除する前の元々の記述があった位置に「.」を記述すると中央寄せになるんです。この「.」はもともとあった場所に記述しないとダメなんです。違う位置に記述しても左寄せのままです。「.」を記述しなくても中央寄せに戻したいのです。「.」だけというのは気持ち悪いので。この現象がわかる方、解決できる方がいましたらお願いいたします。

質問日時: 2023/09/12 00:52 質問者: poqwpoq

ベストアンサー

1

0
CSS初心者です。わかる方教えてください。

画像の左上の背景色(plum－親要素)に重なるように、同位置で子要素の画像(xxx.png)を同高さ左詰め中央で配置したいのですが、表示できません。原因と対処法がしりたいです。htmlに<img src=xxx は避けたいです。よろしくお願いいたします。 html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> 省略 <title>ホームページ</title> <link rel="stylesheet" href="cssA/styleA.css"> </head> <body> <div class="wrapper" > <header class="container"> <div class="header-left">h-left <div id="image1">image1</div> </div> <div class="header-center">h-center</div> <div class="header-right">h-right</div> </header> <div class="main">main</div> <footer class="footer">footer</footer> </div> </body> </html> CSS @charset "utf-8"; /*全体の設定 ---------------------------------------------------------------------------*/ .wrapper { max-width: 1200px; margin: 0 auto; } header { background: tomato; opacity: 0.7; max-width: 1200px; height: 150px; margin-left: auto; margin-right: auto; } .container { display:flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } .header-left{ height: 150px; width: 40%; background:plum; position: relative; } .header-center{ margin-left: auto; margin-right: auto; height: 150px; width: 40%; background:gold; } .header-right{ margin-left: auto; margin-right: auto; display:flex; height: 150px; width: 20%; background:lime; } header-left #image1{ position:absolute; top:0; bottom:0; margin:auto; background-image:url("../images/xxx.png"); background-position:center; background-size: contain; background-repeat: no-repeat; } .main { margin: 0 auto; /* 外側の余白:上下左右; auto で左右センタリング */ box-sizing: border-box; /* 幅を padding も含めた幅にする */ max-width:1200px; background: blue; } footer { background:olive; }

質問日時: 2023/09/08 22:04 質問者: denpataro

ベストアンサー

3

0
アコーディオンメニューが思うように動作しません。

HPを作っています。メニューの大項目をクリックすると、フワッと小項目がフェードインしながら下へスライドして表示されるようにしました。ところが、この動作が一度クリックすると二度目以降は普通に小項目がドン！っと表示されるだけになってしまいます。画面を再読み込みすると一度目のクリックでは動作が復活するのですが、二度目以降はやはり動作しません。おおまかなコードは以下の通りです。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>MENU</title> <style type="text/css"> a { text-decoration: none; }  /* Chrome、Safari以外 */ summary { display: block;} /* Chrome、Safari */ summary::-webkit-details-marker { display: none;} summary { cursor: pointer; transition: 0.5s; /* 変化を滑らかに */} /* ホバー時のスタイル */ summary:hover { background-color: #EFEFEF;} details[open] summary { color: #000000; background-color: #EFEFEF;} /* オープン時にアニメーションを設定 */ details[open] .details-content { animation: fadeIn 0.5s ease;} @keyframes fadeIn { 0% { opacity: 0; /* 透明 */ transform: translateY(-10px); /* 上から表示 */} 100% { opacity: 1; transform: none;} </style> </head> <body link="#000000" vlink="#ffffff" alink="#008b8b"> <body bgcolor="#ff8000"> <p align="center"> <br><br><details><summary><font size="1"><p align="center"><span title="〇〇">〇〇</span></summary> <ul style="list-style: none; padding-left: 0"> <font face="ＭＳ明朝" size="4" color="#000000"> １２３</font><p align="center"></li> <li><div class="details-content"><p align="center"><span style="border:1px solid;">〇〇</span></p> <font face="ＭＳ明朝" size="4" color="#000000"> 〇〇</font></li> <li><div class="details-content"><font size="1"><p align="center"><span style="border:1px solid;">〇〇</span><br></p> <font face="ＭＳ明朝" size="4" color="#000000"> １２３</font><br></li> <font size="1"><p align="center">〇〇<br></p></font> <font face="ＭＳ明朝" size="4" color="#000000"> １２３</font><br></li> <p align="center">〇〇<br></p> <font face="ＭＳ明朝" size="4" color="#000000"> １２３</font><br></li> </a> </ul> </div> </details> <br> <font size="1"><details><summary><p align="center">〇〇</p></summary> <font face="ＭＳ明朝" size="4" color="#000000"><ul style="list-style: none; padding-left: 0"> <li><div class="details-content">１２３ <li><div class="details-content"><p align="center"><font face="ＭＳ　ゴシック" size="1"><span style="border:1px solid;">〇〇</span></font></p> １２３ </font><br></li></ul> </details> <br> <font size="1"><details><summary><p align="center">〇〇</p></summary> <font face="ＭＳ明朝" size="4" color="#000000"><ul style="list-style: none; padding-left: 0"> <li><div class="details-content"> １２３</font><br><br></li></ul> </details> </body> </html> 改善策はありますか？どなたかお分かりになる方がいらっしゃいましたらご教授お願い致します。

質問日時: 2023/08/20 16:48 質問者: M-KINOKO

ベストアンサー

1

0
HTMLとCSS

プログラミングをするにあたってHTMLとCSSは別ファイルにするというのと織り交ぜるのとはどっちが多いのでしょうか

質問日時: 2023/08/11 07:30 質問者: norakurotodoroki

解決済

6

0
backgroundの上下1ピクセルを透明にする一番簡単な方法

いつもお世話になっています。 backgroundの上下1ピクセルを透明にする一番簡単な方法を教えてください。例えば次のような、分量を表示するコードで各分量の上下1ピクセルは親要素と同じ背景色になるようにするにはどうすれば良いですか。 <div>砂糖:<span>30g</span> 醤油:<span>10cc</span></div> <style>div { background: #0ff } span { background: #ff0 }</style>

質問日時: 2023/08/02 10:57 質問者: zyousuke

ベストアンサー

3

0
メモ帳の段落の揃え方

Windowsのメモ帳で、全角スペースと半角スペースを使い分けて段落をキレイに揃えても、それを保存して再度開くと段落がガタガタになっていてガッカリします。ガタガタにならないでキレイに保存できる方法はありますでしょうか？

質問日時: 2023/08/01 08:15 質問者: shimurakentaro

解決済

2

0
プログラムの関連性を教えて下さい。

<link rel="stylesheet" href="style.css" /> <style> body { color: #000; } a:link { color: #339933; } a:visited { color: #ff0000; } a:active { color: #999900; } </style> 以上ですが<link rel="stylesheet" href="style.css" />と <style> body { color: #000; } a:link { color: #339933; } a:visited { color: #ff0000; } a:active { color: #999900; } </style> の関連性を教えて下さい。よろしくお願いいたします。

質問日時: 2023/07/19 03:50 質問者: Campus_1986

ベストアンサー

1

0
htmlについて質問ですコードを打ったあと画像が表示されないので調べる svg ファイルが写真のよ

htmlについて質問ですコードを打ったあと画像が表示されないので調べる svg ファイルが写真のようにリソースを読み込み中にエラーが発生しました。とでます。 macのアップデートをしていなかったのが原因だと思い、試してみたものの無理でした。ほかにどんな原因があげられますか？

質問日時: 2023/07/11 10:53 質問者: amgdt

解決済

1

1
htmlについて質問です！写真のように写真の部分が?になってしまいます。ファイルもしっかり選べて

htmlについて質問です！写真のように写真の部分が?になってしまいます。ファイルもしっかり選べてると思うのですが、何がおかしいですか？ <body> <header class="page-header"> <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> </body>

質問日時: 2023/07/09 21:17 質問者: amgdt

解決済

1

0
画像横の余白をなくしたいんですけどどうすればいいですか？よろしくお願いします。 margin pad

画像横の余白をなくしたいんですけどどうすればいいですか？よろしくお願いします。 margin paddingのrightは、設定してないです。

質問日時: 2023/07/03 10:25 質問者: ごま太

ベストアンサー

2

0
HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。下記、「前」

HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。下記、「前」という単語だけを赤色にしたいのになぜか全く違う色になってしまいます。どうすればいいでしょうか？ <div style="text-align: center," ›span style="font-size: 30pt,"> font color = "#GE6666" span style="background: linear- gradient(transparent 70%, #8ED7DA 0%);">利用開始<font color=" #F28585”＞前く/font>についてく/span></font＞</span></div>

質問日時: 2023/06/27 12:08 質問者: ひなたまる

解決済

5

0
角丸画像の背景色を透明にしたいです

角丸画像の背景色を透明にしたいです。figureタグに角丸のjpg画像を入れて表示したところ角丸の四隅の余白部分が白くなり透明になりません。 img要素にbackgroun-color:transparentを書いたのですが反映されませんでした。pngではなくjpgを使いたく、また mix-blend-mode: multiply;を書けば透明化されますが、なぜtransparetでは透明にならないのか教えて頂きたいです。img要素ではなく親要素に書いても反映されませんでした。検証ツールにはbackgroun-color:transparentが記載されています。キャッシュクリアも行いシークレットウィンドウでも反映されませんでした。よろしくお願いします。

質問日時: 2023/06/23 23:15 質問者: cafesweets

解決済

1

0

←前の結果
1
2
3
4
5
6
7
8
9
10
11
...
20
次の結果→

【プログラミング・Web制作】に関するカテゴリ

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

【HTML・CSS】に関するコラム/記事

釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...
なぜ批判コメントをするの？その心理と向き合い方をカウンセラーにきいた！

今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
大麻の使用罪がなかった理由や法改正での変更点、他国との違いを弁護士が解説

ドイツで2024年4月に大麻が合法化され、その2ヶ月後にサッカーEURO2024が行われた。その際、ドイツ警察は大会運営における治安維持の一つの方針として「アルコールを飲んでいるグループと、大麻を吸っているグループ...