HTML・CSS

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

回答数

気になる

ホームページを作っていたらhtmlとhtmのページが混在してしまいました。

問題はありますか？？？修正の時むりやりｈｔｍにＬを付けてもリンクさえ確認すればいいですか？？？

質問日時: 2025/06/13 22:52 質問者: gejigeji1

解決済

1

0
ホームページのサイトでｈｔｍｌの表示がないのがありますが・・・

ｈｔｍｌ以外での制作になりますか？？？

質問日時: 2025/06/07 17:37 質問者: kakagaga1245

解決済

4

0
HTML/CSSを使って写真のようなレイアウトにするにはどのようにすれば良いですか。

写真のように、タイトルといくつかのセクション（A～F)に分けて、各セクションにはリンクを配置するには、どのようにすれば良いでしょうか？要素やタグの説明も合わせて教えて頂けると幸いです。

質問日時: 2025/04/13 22:17 質問者: マスターカッパ

解決済

2

0
HTMLでクロス抽出したい

よろしくお願いします。 HP（wix）で価格を表示させようとしています。縦幅と横幅の組み合わせで価格が決まる商品のため、例えば縦幅が5ｃｍ、横幅が10ｃｍの場合、表の縦と横のクロスのセルの値（880）を表示させたいです。 ※「計算」ボタンをクリックした際に、現在「0」と表示されているテキスト部分に表示させたいです。ご面倒をおかけしますが、ご教示いただけますと幸いです。

質問日時: 2025/04/12 13:12 質問者: みけみけ丸

ベストアンサー

2

0
vscodeにのcssについて質問です。 introduction.cssに背景.pngに保存してあ

vscodeにのcssについて質問です。 introduction.cssに背景.pngに保存してある画像を背景として使いたいのですが、コードはなんて書くべきでしょうか？このとおりにやってみたのですが反映されません。よろしくお願いいたします。

質問日時: 2025/04/08 13:03 質問者: ___まめ

解決済

1

0
レスポンシブで困っています・・

レスポンシブデザインについて勉強中なのですが自作したウェブサイトへの導入で躓いています、、主に画像やテキストの中央揃えなのですが当初、firefoxで作成時はcssにて中央に揃っていたのが googlechromeでレスポンシブを確認したところきちんと反映されているものもあれば効果が出ていないものもあり頭を抱えております、、使うブラウザ、又、pcとスマホ or ipadではそれぞれcss反映に違いが出てくるものなのでしょうか。。下記はhtmlコード画像はcssコードになります。説明が分かりづらくてすみません、、、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1"> <title>〇〇教室</title> <link rel="stylesheet" type="text/css" href="css/project1.css"> <link rel="stylesheet" type="text/css" href="css/project1.responsive.css"> </head> <body> <header id="header"> <div class="inner"> <h1 class="logo"> <a href="file:///C:/Users/81806/Desktop/html/project1.html"><img src="images/project/title1.png" alt=""></a> </h1> <nav> <ul> <li><a href="#cast">講師紹介</a></li> <li><a href="#business-info">教室内容</a></li> <li><a href="#gallery">教室風景</a></li> <li><a href="#news">更新履歴</a></li> <li><a href="#mail">お問い合わせ</a></li> </ul> </nav> <div class="icon"> <a href="https://www.instagram.com/aki4190210/" target="blank" rel="noopener noreferrer"><img src="images/project/instagramkuro.png"></a> <a href="https://x.com/aki4190210" target="_blank" rel="noopener noreferrer"><img src="images/project/twitterkuro.png"></a> </div> </div> </header> <main> <section class="mainvisual"> <img src="images/project/piano1.jpg"> </section> <section id="cast" class="wrapper"> <h2 class="menu-title">講師紹介</h2> <div class="cast-image"> <img src="images/project/project1-cast.png" alt="テキストテキストテキスト"> <div class="cast-info"> <p> <span>名前</span>：田中　太郎<br> <span>誕生日</span>：1991/12/24<br> <span>血液型</span>：Ｂ型<br> <span>出身地</span>：北海道<br> <span>経歴</span>　：北海道出身、昭和音楽大学大学院卒業。<br> 　　　　５歳からピアノを始め、以来、国内のコンクールを多数受賞。 <br> <span>愛車</span>：ＣＢＲ２０００<br> <span>趣味</span>：バイク・料理・旅行・人間観察<br> <span>好きな食べ物</span>：うどん　豚の角煮<br> <span>座右の銘</span>：Be yourself<br> <span>コメント</span>：初心者から経験者までのお子様が<br> 　　　　　楽しみながら上達できるよう指導致します。<br> </p> </div> </div> </section> <section id="business-info" class="wrapper"> <h2 class="menu-title">講座内容</h2> <div class="line"></div> <div class="business-info"> <p> <span>開講日</span>：毎週水曜日<br> <span>時間</span>：１４時～１７時<br> <span>場所</span>：大阪府〇〇市◇◇区☆丁目♡番▢号<br> <span>費用</span>：６,０００円/回<br> <span>参加資格</span>：小学１～６年生対象<br> <span>その他</span>：大阪駅から徒歩５分圏内<br> </p> </div> </section> <section id="gallery" class="wrapper"> <h2 class="menu-title">教室風景</h2> <div class="line"></div> <ul> <li><img src="images/project/piano2.jpg" alt="テキストテキストテキスト"></li> <li><img src="images/project/piano3.jpg" alt="テキストテキストテキスト"></li> <li><img src="images/project/piano4.jpg" alt="テキストテキストテキスト"></li> <li><img src="images/project/piano5.jpg" alt="テキストテキストテキスト"></li> <li><img src="images/project/piano6.jpg" alt="テキストテキストテキスト"></li> <li><img src="images/project/piano7.jpg" alt="テキストテキストテキスト"></li> </ul> </section> <section id="news" class="wrapper"> <h2 class="menu-title">更新履歴</h2> <div class="line"></div> <ul> <li>　　2025.03.01<span></span>ウェブサイトを開設しました。</li> <li>　　2025.03.05<span></span>講師紹介を更新しました。</li> <li>　　2025.03.06<span></span>レッスン風景を更新しました。</li> <li>　　2025.03.07<span></span>教室内容を修正しました。</li> <li>　　2025.03.08<span></span>問い合わせページを作成しました。</li> </ul> </section> <footer> <div class="footer"> <p>©2025 〇〇教室</p> </div> </footer> </body>

質問日時: 2025/04/03 17:16 質問者: 謎の訪問者

解決済

2

0
ホームページの制作について教えてください‥cssの指定がブラウザではきちんとなっているのですが

cssの指定がブラウザでは？ではきちんとなっているのですが・・ローカルのパソコンでcssの指定が反映されないのはやはり記述ミスですか？？？？

質問日時: 2025/03/30 15:47 質問者: kakagaga1245

解決済

4

0
GoogleSearchControlにホームページを登録してGoogle検索できるようにしましたが

ホームページのタイトルで検索できるようになったもののタイトルに間違いがあって修正したのですが修正以前のタイトルで検索されてしまいますどうすれば新しいタイトルで検索できるようになるでしょうか？

質問日時: 2025/03/28 15:23 質問者: reiman

ベストアンサー

2

0
Dreamweverは今も主流なんですか？昔使われてたツールだって言う人もいたけど、殆どの会社はこ

Dreamweverは今も主流なんですか？昔使われてたツールだって言う人もいたけど、殆どの会社はこれ使ってるよって言う人もいて、実際はどうなんでしょうか？？ EC業界では皆使っているのかな？

質問日時: 2025/03/07 21:28 質問者: ホルキナ

ベストアンサー

2

0
動画と画像＆タイトル2列を横並びにするにはどうすればよいでしょうか？

動画と画像＆タイトル２列（横に2つ縦に2つの計4個）を横並びにして、入りきれなかった画像＆タイトルを動画の下に回り込ませて表示させたいのですが画像＆タイトルの２列目から動画の下に回り込んでしまいます。アドバイスよろしくお願いいたします。調べてみて動画と並べたい画像＆タイトルの4個と動画の下に回り込ませたい画像＆タイトルのクラスを分ける必要があるのではないかと感じたのですが、CSSのみで対応することは可能でしょうか？ ※ 該当ページ https://imgur.com/a/tTAIVhZ.png ※ 該当コード <div class="inline-player">  <div class="carousel-area" style="">  <div id="carousel" class="carousel" style="--w: 100%; transform: translateX(0%)" > <div class="carousel-container"> <div class="carousel-video-area" style="display: inline-block"> <a href=""> <div class="carousel-video-wrap"> <video class="carousel-video-streaming" src="" type="video/mp4" autoplay="" muted="" loop="" ></video> </div> <div class="carousel-video-title"> <script> document.write( truncate( "テスト1", 19 ) ); </script> タイトルテスト1 </div> </a> </div> </div> </div>  <span id="prev" class="prev"></span> <span id="next" class="next"></span>  <ul class="indicator" id="indicator"> <li class="list active"></li> </ul> </div> <div class="image-card-wrap" style="display: inline-block"> <a href="" ><div class="image-thumbnail-card"> <img src=""/> </div> <div class="image-title-link"> テスト１ </div></a > </div> <div class="image-card-wrap" style="display: inline-block"> <a href="" ><div class="image-thumbnail-card"> <img src=""/> </div> <div class="image-title-link">aaaaa</div></a > </div> <div class="image-card-wrap" style="display: inline-block"> <a href="" ><div class="image-thumbnail-card"> <img src=""/> </div> <div class="image-title-link"> テスト3 </div></a > </div> <div class="image-card-wrap" style="display: inline-block"> <a href="" ><div class="image-thumbnail-card"> <img src=""/> </div> <div class="image-title-link"></div ></a> </div> <div class="image-card-wrap" style="display: inline-block"> <a href="" ><div class="image-thumbnail-card"> <img src=""/> </div> <div class="image-title-link"> テスト1 </div></a > </div> </div> <style> /* ↓ スライドの外枠 */ .carousel-area { margin: 23px 0px 0px 19px; display: inline-block; 　 width: 540px; height: 380px; position: relative; overflow: hidden; /* はみ出したスライドを隠す */ } /* 一覧表示画面本体定義 */ .inline-player .image-card-wrap { width: 260px; margin-top: 23px; margin-left: 19px; vertical-align: top; word-wrap: break-word; zoom: 1; } /* 一覧表示画面の画像配置位置 */ .inline-player .image-card-wrap .image-thumbnail-card { height: 150px; width: 260px; } </style>

質問日時: 2025/03/06 22:51 質問者: 初心者サイト作成

ベストアンサー

2

0
完全素人がノーコードWEB制作のSTUDIO学んだら、稼げますか?

完全素人がノーコードWEB制作のSTUDIO学んだら、稼げますか?

質問日時: 2025/03/05 15:18 質問者: ゴゴ09

ベストアンサー

5

0
YouTubeの動画を自分のホームページに表示させるために、コードをYouTubeからコピーして、自

YouTubeの動画を自分のホームページに表示させるために、コードをYouTubeからコピーして、自分のホームページに貼り付けました。以下のコードがそれですが、 width="252" height="153"の数値を変更しても、高さは変わるものの横幅が変わりません。どのようにしたら横幅も変わるようになるのでしょうか？ーー <iframe width="252" height="153" src="https://www.youtube.com/embed/xxxxxxxx " title="xxxxxxxxxxxx" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> ーー

質問日時: 2025/02/24 11:49 質問者: sato8888

解決済

1

0
htmlが簡単に作成できるアプリについて

チャットgptに質問して下記回答を得ましたが・・・駅忍ある回答では無かった。それでもと思い、下記3点をDLして確認したのですが、html作成が見えないので、チャットgptに確認すると・・ 1・XnView MP・・・html作成機能が無くなっているようだ（チャットgpt回答） 2・JAlbum（無料版はロゴ付き）　・・・使えそうなんですが、24枚という制限が有有料は30～40＄ 3・digiKam・・・html作成機能が無くなっているようだ（チャットgpt回答）どなたか、1，3についてhtml作成について情報をお持ちでは内でしょうか？ご存知でしたらアドバイスをお願いします。下記は情報だけで、未確認です ThumbsPlus PhotoBulk JGallery

質問日時: 2025/02/06 16:48 質問者: new_hana

ベストアンサー

7

0
html 階層を下げると3分割画面が1画面になる

win11 vix221を使用してhtmlを作成しています。 win11の動作保証はありませんが、使用上の問題はないので使っています。・私はhtml構文についての知識はありませんが、コピー等で引用し使える様に使っているレベルです。相談は、3盤割画面を開いて左の画面にリンクを置いて、右の画面に内容を表示しています。右の画面の表示内容が多い場合、2ページ目も作成されます。この2ページ目に行くと、画面分割が1画面になってしまいます。これを、快勝する方法のアドバイスをお願いしたいのです。判りにくいでしょうが画面遷移を天応します。 html先頭の記述の抜粋です ---------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> 3分割が開く記述です ----------------------- <html> <head> <title>my album</title> </head> <frameset rows="15%,85%"> <frame src="UpperFrame.html">name="upper" <frameset cols="12%,88%"> <frame src="LeftFrame1.html" name="left" scrolling="auto"> <frame src="8月6日/白馬大雪渓を歩く001.html"name="right" name="right" scrolling="auto"> </frameset> </BODY> </HTML> -------------------------- 2ページ目に行く記述です ----------------------- <body> <p class="header">8/6　白馬大雪渓を歩く</p> <p class="sequence"><a href="白馬大雪渓を歩く002.html">次へ</a> </p> ・・・

質問日時: 2025/02/04 23:08 質問者: new_hana

ベストアンサー

5

0
index.htmlがうまく反映されない

クレジットさえ削除しなければ、無料でホームページのテンプレートが使えるサイトがあったので、ダウンロードして自分のサーバーにアップしてみましたが、一部のテキストや画像がうまく反映されません。もちろん、indexに書いてあるテキストはソース上にはありますし、imgのフォルダーにはすべて写真が揃っています。（添付画像を参照ください。上が正常で、下が異常な画面です。）原因が分かる方、すみませんが教えてください。よろしくお願いいたします。

質問日時: 2025/01/28 16:18 質問者: yuiny

解決済

1

0
htmlの<input type=”file”>でアップロードする場合にファイルを設定していないとき

「ファイルが選択されていません。」というメッセージが表示さえますがこの表現を変更する方法を教えてください

質問日時: 2025/01/25 13:18 質問者: reiman

ベストアンサー

1

0
手元のHTMLフォームの検索キーを乗換案内サイトに渡したい

https://transit.yahoo.co.jp/ ここのHTMLソースをsample.htmに保存し、ローカル（Winデスクトップ）で開いて駅名いれましたが、検索を実行すると「ファイルがみつかりません」となるのはなぜしょうか。出発、到着、経由、検索の4つの入力フォーム部品だけを取り出したHTMLを書き出して、サーバーサイドに処理を渡して、検索結果はhttps://transit.yahoo.co.jp/に表示させるということをやりたいです。

質問日時: 2025/01/24 11:30 質問者: litton101

ベストアンサー

2

0
HTML＆CSS メディアクエリについて。

修正版htmlとcssは下記の通り /* PC用のデフォルトスタイル */ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Campus Art</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Campus Art</h1> </header> <div class="container"> <aside> <p>サイドバーの内容がここに入ります。</p> </aside> <main> <p class="visual"><img src="art.jpg" alt="バラのアート"></p> <h2>あなたの好みに合わせたキャンバスアートを3ヶ月ごとにお届け</h2> <p> 世界各国で現在活動中のアーティストたちからお預かりした原画から、あなたの好みに合うアート作品を定期的にお届けします。 </p> </main> </div> <footer> <small>© Campus Art.</small> </footer> </body> </html> 次がcss /* 全体のスタイル */ body { margin: 0; } /* ヘッダーのスタイル */ header { background-color: #505050; color: white; padding: 20px; text-align: center; width: 100%; } /* コンテナのスタイル（修正済み） */ div.container { display: flex; /* フレックスボックスで横並びに */ } /* サイドバーのスタイル */ aside { width: 300px; /* サイドバーの幅 */ background-color: #f0f0f0; padding: 20px; } /* メインコンテンツのスタイル */ main { padding: 20px; width: 700px; /* 固定幅 */ } /* フッターのスタイル */ footer { background-color: #505050; color: white; text-align: center; padding: 10px; width: 100%; /* 修正済み */ } /* スマホ用メディアクエリ */ @media (max-width: 599px) { body { display: block; /* 縦並び */ } aside { display: none; /* サイドバー非表示 */ } main { width: 90%; /* メインコンテンツの幅を調整 */ margin: 0 auto; } main img { width: 100%; /* 画像を画面幅いっぱいに */ } } 以上のコードで、課題のメディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるはクリアしているのでしょうか?教えて頂けると幸いです。ちなみに、チャットGPTに聞きました。

質問日時: 2025/01/21 09:32 質問者: メラゾーム

ベストアンサー

4

0
HTML＆CSS メディアクエリについて。

修正版htmlとcssは下記の通り /* PC用のデフォルトスタイル */ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Campus Art</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Campus Art</h1> </header> <div class="container"> <aside> <p>サイドバーの内容がここに入ります。</p> </aside> <main> <p class="visual"><img src="art.jpg" alt="バラのアート"></p> <h2>あなたの好みに合わせたキャンバスアートを3ヶ月ごとにお届け</h2> <p> 世界各国で現在活動中のアーティストたちからお預かりした原画から、あなたの好みに合うアート作品を定期的にお届けします。 </p> </main> </div> <footer> <small>© Campus Art.</small> </footer> </body> </html> 次がcss /* 全体のスタイル */ body { margin: 0; } /* ヘッダーのスタイル */ header { background-color: #505050; color: white; padding: 20px; text-align: center; width: 100%; } /* コンテナのスタイル（修正済み） */ div.container { display: flex; /* フレックスボックスで横並びに */ } /* サイドバーのスタイル */ aside { width: 300px; /* サイドバーの幅 */ background-color: #f0f0f0; padding: 20px; } /* メインコンテンツのスタイル */ main { padding: 20px; width: 700px; /* 固定幅 */ } /* フッターのスタイル */ footer { background-color: #505050; color: white; text-align: center; padding: 10px; width: 100%; /* 修正済み */ } /* スマホ用メディアクエリ */ @media (max-width: 599px) { body { display: block; /* 縦並び */ } aside { display: none; /* サイドバー非表示 */ } main { width: 90%; /* メインコンテンツの幅を調整 */ margin: 0 auto; } main img { width: 100%; /* 画像を画面幅いっぱいに */ } } 以上のコードで、課題のメディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるはクリアしているのでしょうか?教えて頂けると幸いです。ちなみに、チャットGPTに聞きました。

質問日時: 2025/01/19 19:31 質問者: メラゾーム

ベストアンサー

1

0
HTML&CSS メディアクエリについて。

修正版htmlとcssは下記の通り /* PC用のデフォルトスタイル */ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Campus Art</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Campus Art</h1> </header> <cont> <aside> <p>サイドバーの内容がここに入ります。</p> </aside> <main> <p class="visual"><img src="art.jpg" alt="バラのアート"></p> <h2>あなたの好みに合わせたキャンバスアートを3ヶ月ごとにお届け</h2> <p> 世界各国で現在活動中のアーティストたちからお預かりした原画から、あなたの好みに合うアート作品を定期的にお届けします。 </p> </main> </cont> <footer> <small>© Campus Art.</small> </footer> </body> </html> 次がcss body { margin: 0; } header { background-color: #505050; color: white; padding: 20px; text-align: center; width:100%; } cont{display: flex;} aside { width: 300px; /* サイドバーの幅 */ background-color: #f0f0f0; padding: 20px; } main { /* flex: 1; メインコンテンツが余った幅を使用 */ padding: 20px; width:700px; } footer {background-color: #505050; color: white; text-align: center; padding: 10px; width::100%; } /* スマホ用メディアクエリ */ @media (max-width: 599px) { body { display: block; /* 縦並び */ } aside { display: none; /* サイドバー非表示 */ } main { width: 90%; /* メインコンテンツの幅を調整 */ margin: 0 auto; } main img { width: 100%; /* 画像を画面幅いっぱいに */ } } 以上が、チャットGPTの回答ですが、contタグを調べてもネットにも載ってなくて。どういう意味なのか教えていただけると幸いです。

質問日時: 2025/01/09 18:06 質問者: メラゾーム

ベストアンサー

4

0
HTML＆CSS メディアクエリについて。

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？マンガでわかるHTML＆CSSです。赤松公太郎著です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。 respon.html 〈!DOCTYPE html〉〈html lang＝″ja″〉〈head〉〈meta charset＝″utfー8″〉〈meta name＝″viewport″ content＝″width＝deviceーwidth,initialーscale＝1″〉〈title〉Campus Art〈/title〉〈link rel＝″stylesheet″ href＝″style.css″〉〈/head〉 style.css @media (maxーwidth: 599px){ main{ width: 90%; } main img width: 100%; } } です。メディアクエリに関するのは。教えて頂けると幸いです。スマートフォンの幅は、400〜600pxと書いてあるのですが、画面幅が、最小600pxと仮定し、ブレークポイントを599pxにしているで、なぜ、最小になっているのでしょうか?最大の間違いだと思うのですが。あなた様はどう思いますか?すみません。話がズレました。ですが、追加で書かれていたのです。で、チャットgptに聞いて以下の回答が合っているかどうか教えて頂けると幸いです。すみません。修正版のrespon.htmlです。教えて頂けると幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Campus Art</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Campus Art</h1> </header> <aside> <p>サイドバーの内容がここに入ります。</p> </aside> <main> <p class="visual"><img src="art.jpg" alt="バラのアート"></p> <h2>あなたの好みに合わせたキャンバスアートを3ヶ月ごとにお届け</h2> <p> 世界各国で現在活動中のアーティストたちからお預かりした原画から、あなたの好みに合うアート作品を定期的にお届けします。 </p> </main> <footer> <small>© Campus Art.</small> </footer> </body> </html> 次は、style.cssの修正版を載せます。 @charset "UTF-8"; /* PC用のデフォルトスタイル */ body { margin: 0; display: flex; /* 横並び */ } header { background-color: #505050; color: white; padding: 20px; text-align: center; } aside { width: 300px; /* サイドバーの幅 */ background-color: #f0f0f0; padding: 20px; } main { flex: 1; /* メインコンテンツが余った幅を使用 */ padding: 20px; } footer {background-color: #505050; color: white; text-align: center; padding: 10px; } /* スマホ用メディアクエリ */ @media (max-width: 599px) { body { display: block; /* 縦並び */ } aside { display: none; /* サイドバー非表示 */ } main { width: 90%; /* メインコンテンツの幅を調整 */ margin: 0 auto; } main img { width: 100%; /* 画像を画面幅いっぱいに */ } } 教えて頂けると幸いです。これで、いいのでしょうか?アドバイス頂けると幸いです。

質問日時: 2025/01/05 17:31 質問者: メラゾーム

ベストアンサー

4

0
HTML＆CSS メディアクエリについて。

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？マンガでわかるHTML＆CSSです。赤松公太郎著です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。 respon.html 〈!DOCTYPE html〉〈html lang＝″ja″〉〈head〉〈meta charset＝″utfー8″〉〈meta name＝″viewport″ content＝″width＝deviceーwidth,initialーscale＝1″〉〈title〉Campus Art〈/title〉〈link rel＝″stylesheet″ href＝″style.css″〉〈/head〉 style.css @media (maxーwidth: 599px){ main{ width: 90%; } main img width: 100%; } } です。メディアクエリに関するのは。教えて頂けると幸いです。スマートフォンの幅は、400〜600pxと書いてあるのですが、画面幅が、最小600pxと仮定し、ブレークポイントを599pxにしているで、なぜ、最小になっているのでしょうか?最大の間違いだと思うのですが。あなた様はどう思いますか?すみません。話がズレました。ですが、追加で書かれていたのです。

質問日時: 2025/01/04 12:42 質問者: メラゾーム

ベストアンサー

2

0
webデザインの会社の現実を教えてください

webデザインの会社の現実を教えてください

質問日時: 2025/01/01 21:33 質問者: はなはな0701

ベストアンサー

2

0
メディアクエリについて。

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？マンガでわかるHTML＆CSSです。赤松公太郎著です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。 respon.html 〈!DOCTYPE html〉〈html lang＝″ja″〉〈head〉〈meta charset＝″utfー8″〉〈meta name＝″viewport″ content＝″width＝deviceーwidth,initialーscale＝1″〉〈title〉Campus Art〈/title〉〈link rel＝″stylesheet″ href＝″style.css″〉〈/head〉 style.css @media (maxーwidth: 599px){ main{ width: 90%; } main img width: 100%; } } です。メディアクエリに関するのは。教えて頂けると幸いです。

質問日時: 2025/01/01 17:46 質問者: メラゾーム

ベストアンサー

3

0
メディアクエリについて。

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？マンガでわかるHTML＆CSSです。赤松公太郎著です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。 respon.html 〈!DOCTYPE html〉〈html lang＝″ja″〉〈head〉〈meta charset＝″utfー8″〉〈meta name＝″viewport″ content＝″width＝deviceーwidth,initialーscale＝1″〉〈title〉Campus Art〈/title〉〈link rel＝″stylesheet″ href＝″style.css″〉〈/head〉 style.css @media (maxーwidth: 599px){ main{ width: 90%; } main img width: 100%; } } です。メディアクエリに関するのは。教えて頂けると幸いです。

質問日時: 2024/12/30 14:52 質問者: メラゾーム

ベストアンサー

1

0
HTML＆CSS メディアクエリ

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？マンガでわかるHTML＆CSSです。赤松公太郎著です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。

質問日時: 2024/12/28 20:29 質問者: メラゾーム

ベストアンサー

7

0
htmlで"start-|"から"|-stop"までを"->"で埋めたいのですが両端の位置は不変にし

たいのですがどうしたらいいでしょうか？ <span style="display:inline-block;width:50%"><span>strart-|</span>...</span><span>|-stop</span> において...を"->"多く埋めすぎると幅が大きくなります自動的に幅が変わらないように埋める"->"の数をできるだけ多く設定する方法はあるでしょうか？

質問日時: 2024/12/28 12:56 質問者: reiman

ベストアンサー

5

0
メディアクエリについて。

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?教えて頂けると幸いです。

質問日時: 2024/12/28 12:28 質問者: メラゾーム

解決済

2

0
HTML、javascriptでウェブサイトを制作してガチャシステムを導入したいと考えております。

HTML、javascriptでウェブサイトを制作してガチャシステムを導入したいと考えております。ボタンをクリックして、アニメーションが流れて、結果が出るというシステムを制作したいのですが、景品がAの場合にはAのアニメーション、Bの場合にはBのアニメーションが流れて、結果画面にA、Bの景品が付与されるシステムを構築したいと考えております。この場合のHTMLコード、Javascriptの書き方、仕組み等を教えて頂きたいです。ホームページ制作は初心者なため、理解できてない点も多いですが、よろしくお願いします。

質問日時: 2024/12/27 12:37 質問者: esla

解決済

5

0
HTML＆CSSについて。

〈img src＝″images/heart.png″ alt＝″ハートマーク″ class＝″love″〉という感じです。教えて頂けると幸いです。また、分からなければ、聞き返して下さい。ここのclass名がlove要素とはどういう事でしょうか?

質問日時: 2024/12/27 09:17 質問者: メラゾーム

ベストアンサー

7

0
Webサイトの「デザインのみ(コーディング不要)」を依頼されました。「レスポンシブデザイン」を希望

Webサイトの「デザインのみ(コーディング不要)」を依頼されました。「レスポンシブデザイン」を希望された場合、PC版とスマホ版の両方のレイアウトを作成すればよいのでしょうか？コーダーさんとのコミュニケーションは取れないという状況です。

質問日時: 2024/12/25 14:56 質問者: wafdjt

解決済

4

0
HTML &CSSとHTML5&CSS3 違い

HTML &CSSとHTML5&CSS3は同じと考えても良いのでしょうか？後、それを実行するには、どうすれば良いのでしょうか？後、HTML &CSSを勉強するのに、HTML5&CSS3を勉強しても問題ないのでしょうか？教えて頂けると幸いです。

質問日時: 2024/12/14 17:04 質問者: メラゾーム

解決済

2

0
HTML＆CSSとHTML5＆CSS3の違いについて。

すみません。HTML＆CSSのプログラムを組むのとHTML5＆CSS3のプログラムを組むのとでは何か違いがあるのでしょうか? 例えば、VSCODEでインストールするものが違うとか。教えて頂けると幸いです。

質問日時: 2024/12/14 08:43 質問者: メラゾーム

解決済

1

0
HTML＆CSSとHTML5＆CSS3の違いについて。

すみません。HTML＆CSSのプログラムを組むのとHTML5＆CSS3のプログラムを組むのとでは何か違いがあるのでしょうか? 例えば、VSCODEでインストールするものが違うとか。教えて頂けると幸いです。

質問日時: 2024/12/13 19:39 質問者: メラゾーム

解決済

3

0
jQueryプラグイン（LightBox）について詳しい方

jQueryプラグイン（LightBox）で、 HP上のサムネイル写真をクリックすると写真が大きく表示されるようになってます。サムネイル及び大きな写真を入れ替えたのですが、スーパーリロード(Ctrl+F5)をしても、サムネイルは新しい写真になりましたが、クリック後にポップアップされる大きな写真が古いまま表示されてしまうのです。写真は上書きしたのでサイト上に古い写真は存在しませんのでキャッシュが残ったままなのです。スーパーリロードしても消せない場合どうしたら良いでしょうか？

質問日時: 2024/12/11 23:49 質問者: tanapyondai

解決済

2

0
EJSを仕事でなんとなくで使っているので、もっと体系的に学びたいのですが、おすすめの本やサイトを教え

EJSを仕事でなんとなくで使っているので、もっと体系的に学びたいのですが、おすすめの本やサイトを教えていただけると嬉しいです。よろしくお願いいたしますm(_ _)m

質問日時: 2024/10/27 14:23 質問者: reo96319

解決済

1

0
レイアウトが異なる別のワークブックからデータを転記する方法を教えてください

ExcelのVBAで画像のように4個のレイアウトから6個のレイアウトの別ブックへ番号を基準に赤枠内の関連するデータを転記したいです。転記するページも百ページ以上になるのでコードを含めご教授いただきたいです。色々と試してみましたが見様見真似では今の自分にはどうにもならず、、、よろしくお願いいたします。

質問日時: 2024/10/10 11:14 質問者: モノルル

解決済

2

0
webディベロッパーについて詳しい方教えてくたまに…詳しく書かれているサイトでもいいので教えてくださ

webディベロッパーについて詳しい方教えてくたまに…詳しく書かれているサイトでもいいので教えてくださると嬉しいです。去年知り合いにhtml とcssについて教えてもらい，コーダーという仕事に興味を持ちプロゲートというサイトで練習しましたが難しいなと感じてました。最近オンライン授業でも受けようかと思って調べてたら，WEBデザイナーの5日間無料講座というのがあり、とりあえず受けてみました。受けながら，WEBデザイナーとコーダーの関係についてわかってきたと同時に，WordPressというサイトでもWebページがつくれ、それではコーダーとしての知識はそんなにいらない、あったほうがいいけど自分でかける必要はないとしりました。しかし、WEBデザイナーが作ったサイトを再現したいならコーダーの知識が必要ということでしょうか？ WordPressについて解説しているYouTubeの動画を見ると，WordPressで作られたホームページはインターネットページの3割以上を占めるからやれて損はない！とよく主張してますが、実際はWebデザイン以上のスキルをつけたいならコーダーとしても実践的に働けるようになったほうがいいのでしょうか？フリーランスで働く場合は，顧客によって使い分けるって感じですかね？

質問日時: 2024/09/30 09:13 質問者: こんにちは。さん

ベストアンサー

7

0
CSSを教えて下さい webデザイナーの職業訓練に通うコーディング初心者です。サイトを作っていまし

CSSを教えて下さい webデザイナーの職業訓練に通うコーディング初心者です。サイトを作っていまして divにhover→filter:brightnessで暗くなるようにしたのですが divの中に入っている a (colorは白)も一緒にfilterが効いて暗くなり、グレーになってしまいます。 divの背景だけにfilterを効かせる方法はないでしょうか？参考にサイト見ていると、マウスを載せると中の文字はそのままで、背景だけ暗く変わるサイトがいっぱいありますが、検証画面見てもhoverのスタイルがでてこないのでわかりません。 htmlはざっくりこんな感じです。↓ 〈div class=○○〉〈a〉ここも暗くなってしまいます。〈/a〉〈/div〉 CSSは基本しか習っていないのでプロパティや擬似クラス？等知らないものが多いです。よろしくお願いします。

質問日時: 2024/09/19 07:39 質問者: ホルキナ

ベストアンサー

2

0
CSSを教えて下さい webデザイナーの職業訓練に通うコーディング初心者です。サイトを作っていまし

CSSを教えて下さい webデザイナーの職業訓練に通うコーディング初心者です。サイトを作っていまして divにhover→filter:brightnessで暗くなるようにしたのですが divの中に入っている a (colorは白)も一緒にfilterが効いて暗くなり、グレーになってしまいます。 divの背景だけにfilterを効かせる方法はないでしょうか？参考にサイト見ていると、マウスを載せると中の文字はそのままで、背景だけ暗く変わるサイトがいっぱいありますが、検証画面見てもhoverのスタイルがでてこないのでわかりません。 htmlはざっくりこんな感じです。↓ 〈div class=○○〉〈a〉ここも暗くなってしまいます。〈/a〉〈/div〉 CSSは基本しか習っていないのでプロパティや擬似クラス？等知らないものが多いです。よろしくお願いします。

質問日時: 2024/09/18 23:15 質問者: ホルキナ

ベストアンサー

1

0
CSSでinputのテキストカラーを変えたのですがパソコンで確認すると色が変わっているのですがiPh

CSSでinputのテキストカラーを変えたのですがパソコンで確認すると色が変わっているのですがiPhoneで確認すると色が変わっていませんなぜでしょうか

質問日時: 2024/09/18 01:26 質問者: こーえいいあ

解決済

2

0
2カラム、左メニュー、特定パーツのインクルド化

HTML5 左メニュー全体のインクルドはできましたが、左メニューの特定パーツ(BOX:プールダウンメニュー)のみインクルドできないものか調べましたが、分かりません。 HTMLにお詳しい方どうぞご教授宜しくお願い致しますm(__)m ※参：画像 <!DOCTYPE html>   <script src="content2.js"></script> </head> <body>    <div class="content1"> BOX① ＜/div>  <div class="content2">  <script>include("content2"); </script> <p>インクルドHTMLは別に用意:content2.html</p> ＜/div> 左メニューの省略「BOX②のパーツ」のみ、インクルド化する方法はありますでしょうか？サイトを色々調べましたが、左メニュー特定BOX(プールダウンメニュー)だけのインクルド化は分かりませんでした。 ※また色々試しましたが、左メニューが「横並び」になります。 <div class="content2"> CSS、HTMLの記述の問題ありかと思っております。 HTML・CSSにお詳しい方、 2カラム・左メニュー縦並びで「BOX②のみインクルド化」する方法があるようでしたら、是非宜しくお願い致します。

質問日時: 2024/09/17 12:57 質問者: Fkujusou

ベストアンサー

2

0
このサイトのカテゴリのチェックボックスを横並びで綺麗な配置する方法を教えてください。 <dt>のジャ

このサイトのカテゴリのチェックボックスを横並びで綺麗な配置する方法を教えてください。 <dt>のジャンルはそのままで、 <dd>の要素だけを横並びにしたいです。チェックボックスのテキストは3文字や、10文字などを10個くらい入れる予定です。それが視認しやすく綺麗に横並びで配置できたら嬉しいです。 https://codepen.io/kojiWebCode/pen/QWJzmLV

質問日時: 2024/09/06 21:57 質問者: 彩いろどり

解決済

4

0
HTMLについて教えてください。 WEBサイトの運営を行っているのですが、前任者が飛んでしまい引継ぎ

HTMLについて教えてください。 WEBサイトの運営を行っているのですが、前任者が飛んでしまい引継ぎもなく大変困っております。弊WEBサイトの会員情報でログイン後、外部ページに飛ばしたいです。意図としては、会員限定で公開するページがあり、そのページに飛ばしたいのです。今の状態だと、ログイン後弊社WEBサイトのマイページに飛ぶのですが、それを外部ページにしたいのです。 <input type="hidden" name="redirect_to"/mypage/"> というタグを変更するのかなと思って、 <input type="hidden" name="redirect_to"/https://www.google.co.jp//"> に変更したのですが、ログイン後 https://○○○.jp/https:/www.google.co.jp/ というURLに飛んでエラーになってしまいました。（○○○.jpは弊社ウェブサイト）どうしたら外部のURLに飛ばすことができるのでしょうか？全く別の部分を変えなきゃいけないのでしょうか？全くの初心者でとんちんかんな事を言っているかと思いますが、どうか助けてください。

質問日時: 2024/09/06 13:06 質問者: ひなたまる

解決済

3

0
HTML CSSの勉強のポートフォリオを作りたいんですが、どうしたらいいですか？

今プログラミング学習サイトのprogateでWeb開発コース(Ruby on Rails)をやっています。まだ、HTMLの中級編ですが、Webサイトのポートフォリオを作るにはどうしたらいいでしょうか？

質問日時: 2024/08/22 18:31 質問者: 1220yuki1018

解決済

1

0
スライダーの枠に動画を収めるにはどのように修正すれば良いでしょうか？

ファイルアップロードが可能な質問掲示板から投稿された動画を横スライダーで５件表示させたいと考えております。初めは object-fit: cover; により拡大することで動画をスライド１枚の横幅に合わせるように調整したのですが、動画を横に拡大したことで画質を高く拡大が荒くなる問題が生じた為、修正方法についてアドバイスをお聞きいたしました。 ※頂いたアドバイス親要素に対して適切に寸法指定がなされていない場合には予期しない表示になることがあるようなので、動画の width, height に関係する CSS は全て指定したうえで、一番上の親要素に横幅を指定した方が良い。上記の通りに修正したところ上手くいっていたのですが、動画の数を５件からアップロードされた数に変更したところ、スライド１件目の領域にスライド２件目が表示されるようになってしまいました。何故このようなことが起こるのか原因は分かりますでしょうか？ ※現在のスクロール https://imgur.com/UCv4Sxu.gif ※該当コード https://wandbox.org/permlink/3zqZGcHoVl0Yk3q7 ※横スライダーHTML <div class="carousel-area">  <div id="carousel" class="carousel" style="transform: translateX(-20%);"> <div class="carousel-container"> <div class="carousel-video-area" style="display: inline-block;"> <a href=""> <div class="carousel-video-wrap"> <video class="carousel-video-streaming" src="" type="video/mp4" autoplay="" muted="" loop=""></video> </div> <div class="carousel-video-title"><script>document.write(truncate("タイトルテスト2タイトルテスト2タイトルテスト2タイトルテスト2タイトルテスト2タイトルテスト2タイ",19));<script>タイトルテスト2タイトルテスト2タイト...</div> </a> </div> </div> <div class="carousel-container"> <div class="carousel-video-area" style="display: inline-block;"> <a href=""> <div class="carousel-video-wrap"> <video class="carousel-video-streaming" src="" type="video/mp4" autoplay="" muted="" loop=""></video> </div> <div class="carousel-video-title"><script>document.write(truncate("タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイ",19));<script>タイトルテスト１タイトルテスト１タイト...</div> </a> </div> </div> </div>  <span id="prev" class="prev"></span> <span id="next" class="next"></span>  <ul class="indicator" id="indicator"> <li class="list"></li><li class="list active"></li> </ul> </div> ※横スライダーCSS <style> li { list-style: none; } /* ↓ スライドの外枠 */ .carousel-area { width: 50%; height: 300px; position: relative; overflow: hidden; /* はみ出したスライドを隠す */ } /* ↓ スライド（コンテンツ） */ .carousel { /*スライド全体 */ width: 500%; /*スライドが5枚なので100%に5をかける */ height: 100%; display: flex; transition: all 4s; } /* ↓ スライドの内枠 */ .carousel-container { width: 100%; /*スライド1枚分なので100％ */ height: 300px; } .carousel-video-area { position: relative; width: 300px; height: 300px; } .carousel-video-wrap { width: 100%; height: 300px; } .carousel video { /* 質問掲示板　一覧表示画面の動画配置位置 */ width: 100%; height: 100%; object-fit: cover; } .next, .prev { /* スライド */ position: absolute; width: 15px; height: 15px; bottom: 50%; z-index: 10; cursor: pointer; border-top: solid 3px #fff; border-right: solid 3px #fff; } /* ↓ 左右のボタン */ .next { right: 10px; transform: rotate(45deg) translateY(50%); } .prev { left: 25px; transform: rotate(-135deg) translateY(-50%); } /* ↓ インジケーター */ .indicator { width: 100%; position: absolute; bottom: 20px; display: flex; column-gap: 18px; z-index: 10; justify-content: center; align-items: center; } .indicator li { width: 14px; height: 14px; border-radius: 50%; background-color: rgba(255,255,255,.4); border: 2px #000 solid; cursor: pointer; } .indicator li.active { background-color: #fff; } .carousel-video-title { position: absolute; top: 75%; left: 50%; white-space: nowrap; transform: translateX(-50%); font-size: 25px; font-weight: 700; color: #fff; } </style>

質問日時: 2024/08/10 20:23 質問者: 初心者サイト作成

解決済

1

0
スマホで特定のサイトを表示させないやり方。 view-source:をhttps野前に入力するとスマ

スマホで特定のサイトを表示させないやり方。 view-source:をhttps野前に入力するとスマホでもそのサイトのhtmlを表示出来ました。そこにnoindex robotsのようなコードを入力すると表示出来なくさせられるようです。しかしhtmlの編集が出来ません。ストアのアプリで編集出来ますが元のサイトに貼り付けられないのでダメでした。どなたかご教示お願いします！

質問日時: 2024/08/04 07:48 質問者: たろう。太郎。

解決済

2

0
excelをhtmlに変換した途端、一部フォントが変わるのはなぜでしょうか。

excelをhtmlに変換した途端、一部フォントが変わるのはなぜでしょうか。理由も添えてください。もしかして、excelとhtmlで利用できるフォントが違うとか。また、当該フォントは、html側で外部URLを使用しても使えませんでした。ちなみにフォントは、frutigerです。サイトは、https://jp.maisfontes.com/です。

質問日時: 2024/07/29 07:17 質問者: 福本英一

ベストアンサー

2

1
HTML ul li で横並びにナビゲーションを設置したが、背景色がきっちり横幅に合わない

ul li で横並びにナビゲーションを設置したが、背景色がきっちり横幅700pxに合いません。どうしたらいいでしょういか？　700pｘの背景画像を入れてもだめです。 https://nihonjinji.jp/index.php/servicemuke/ HTML <ul class="umuke"> <li>   研修コース </li> <li ><a href="https://nihonjinji.jp/index.php/kangomuke/">< 訪問介護サービス事業向け </li> <li><a href="https://nihonjinji.jp/index.php/eventmuke/">< イベントプロデュース企業向け</a> </li> <li ><a href="https://nihonjinji.jp/index.php/servicemuke/">< サービス事業向け   </a> </li> </ul> CSS ul.umuke { list-style:none; margin: 0 auto; padding: 0px; width: 700px; color: #ffffff; /*background: #03006b;背景色*/ background-image: url(images/var_muke.jpg); } ul.umuke li{ float: left; background: #03006b;/*背景色*/ color: #ffffff; margin-bottom: 3px;/*下のバーとの余白*/ border-bottom: solid 1px #dadada;/*下に灰色線*/ list-style-type: none!important;/*ポチ消す*/ text-align: left; padding-left: 10px; padding-right: 5px; line-height: 30px; vertical-align: middle; } ul.umuke a { color: #ffffff; } ul.umuke a :hover{ color: #ffff00; }

質問日時: 2024/07/26 18:56 質問者: kurobon619

解決済

2

0
HTMLです。画像をHTMLで表したいですどうすれば良いですか？教えてください。お願いします

HTMLです。画像をHTMLで表したいですどうすれば良いですか？教えてください。お願いします

質問日時: 2024/07/26 14:09 質問者: WhereMonthName

ベストアンサー

3

0

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

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

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

質問する（無料）

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

弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

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

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