HTML・CSS ランキング(2ページ目)

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

回答数

気になる

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

ファイルアップロードが可能な質問掲示板から投稿された動画を横スライダーで５件表示させたいと考えております。初めは 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
4

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
5

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

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

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

ベストアンサー

3

0
6

HTMLでこの画像を表示したいです教えてください。

HTMLでこの画像を表示したいです教えてください。

質問日時: 2024/07/21 16:54 質問者: WhereMonthName

ベストアンサー

5

0
7

サイトにコンテンツを並べる際の CSS についてアドバイスお願い致します。

現在Q&A掲示板を作成しておりコンテンツを横に４列並べているのですが、ブラウザの横幅が変わる際にどう対応すべきか悩んでおります。 2つの方法で悩んでいて参考サイトを探してみたところYoutubeの動画一覧表示は➀の方法でコードが書かれているという記事を見つけました。こちらのコードで CSS を設定した場合並べることは出来たのですが、ブラウザの横幅でコンテンツが右端に追加される仕組みなので、スペースが足りない場合に間隔が空いてしまいデザインが崩れるのではないかと心配しております。どのように複数のブラウザ用に CSS を書くべきでしょうか？ ➀ブラウザによって横に並べるコンテンツ数を変化させる（減らす・増やす） ➁横に並べるコンテンツ数は維持して横幅を広げる ※参考サイト https://ecsiter.com/limage ※該当コード <html> <div class="image-inline-player"> <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タイトルテスト1タイトル... </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">タイトルテスト2タイトルテスト2タイトル... </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タイトルテスト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">タイトルテスト3タイトルテスト3タイトル... </div> </a> </div> </div> </html> <style> /* 雑談掲示板　一覧表示画面本体定義 */ .image-inline-player { width: 1140px; margin: 0 auto 50px; background-color: #fff; border: 2px solid #999; clear: both; } /* 雑談掲示板　一覧表示画面本体定義 */ .image-inline-player .image-card-wrap { width:260px; /* 枠の横幅 */ margin: 23px 0px 23px 19px; /* 枠のスペース */ vertical-align:top; /* 上端に揃える */ word-wrap:break-word; /* 文字を改行し枠内に収める */ display:inline-block; /* <li>要素を横に並べる */ /* display:inline; */ zoom:1; } /* 雑談掲示板　一覧表示画面配置位置 */ .image-inline-player .image-card-wrap .image-title-link { font-size: 150%; font-weight: 700; letter-spacing: .1em; } /* 雑談掲示板　一覧表示画面の画像配置位置 */ .image-inline-player .image-card-wrap .image-thumbnail-card { height: 150px; /* 画像の高さ */ width: 260px; /* 画像の横幅 */ } </style>

質問日時: 2024/07/08 21:39 質問者: 初心者サイト作成

ベストアンサー

5

0
8

webデザインの勉強で、HTML/CSSから勉強するかPhotoshop/Illustratorかは

webデザインの勉強で、HTML/CSSから勉強するかPhotoshop/Illustratorかは勉強か、どちらを最初にするのがおすすめですか？

質問日時: 2024/06/14 12:36 質問者: あめはれの

解決済

4

1
9

私、Paiza Cloudやっているのだけど上手くいきませんどこかが間

私、Paiza Cloudやっているのだけど上手くいきませんどこかが間違ってますよね？教えてください。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>正規表現情報取得・表示</title> </head> <body> <?php $val=$_POST['val'];//regex1.phpからvalを受け取り if(preg_match('/123|/',$val)){//もし,$valが123という数字ではあったら} echo"入力された数字"$val.は、123と一致しました。<br/>"; echo '<a href="regex1.php">再度,入力</a>'; }else{ //そうでなかった場合 echo "入力された数字".$val."は,123とは一致しません。再度,入力してください.<br />"; echo'<a href="regex1.php">再度,入力入力</a> } ?> </body>

質問日時: 2024/06/08 13:44 質問者: WhereMonthName

ベストアンサー

1

0
10

WEBサイトの作成で、imgタグには現在もwidthとheightの指定が推奨ですか？

お詳しい方アドバイスを頂けないでしょうか？タイトルの通りなのですが、現在サイトの作成を行っているのですが、何やらSEO対策の一環として、すべての画像へwidthとheightの指定を行うとのことなのですが、ここで質問です。現在でもwidthとheightの指定を行うことは、HTMLのマークアップの観点、SEOの観点からして有効、また推奨されていることなのでしょうか？（GoogleやMozillaはこれらについて公式に何か出されていますでしょうか？）というのが、現在レスポンシブでの設定が一般的なので、PCでwidthとheightの指定を行っても、スマホサイトではこの指定した数字の意味はなくなると思います、その逆もしかりだと思います。特にスマホサイトの場合には、親要素に対しての相対的な数字の指定が一派的ですし、それら多くの指定はHTMLの数字を上書きするという意味でもCSS側で行っていることがほとんどだと思います。こういった状況を踏まえたうえでも、やはり画像へwidthとheightの指定は行うのが良いのでしょうか？必要かつ有効ということであればすべてに定義したいと思いますが、その際はPCの際の画像として表示する際のサイズを指定した方がよいのでしょうか？逆に、現在は記載しないのが一般的、推奨や指定しない分容量が少なくなるので記載しない方がよいなど、逆のご意見等ございましたら合わせてお伺いできればと思います。宜しくお願いいたします。

質問日時: 2024/06/07 17:16 質問者: 404not_found

ベストアンサー

1

1
11

先日ウェブデザイン技能検定三級を受けたのですが、公式の解答では答えが②となっているのですがその理由が

先日ウェブデザイン技能検定三級を受けたのですが、公式の解答では答えが②となっているのですがその理由がわかりません。わかる方答えていただけないでしょうか。 Q.次のHTMLのリンク部分の表示についての適切な説明はどれか。以下より1つ選択しなさい。 HTML ----------------------------------------------------------------------- <! DOCTYPE html> <html lang="ja"> < head> <meta charset="utf-8"> <title>ウェブデザイン技能検定</title> ‹style > body { background-color: #FFF; } h1｛ color: rgb (255, 0, 0); text-decoration: none; ｝ a ｛color: rgb(0, 255, 0); ｝ </style> </head> < body> <h1> <a href="index.html">ウェブデザイン技能検定</a> </h1> </body> </html> ----------------------------------------------------------------------- ①文字色は赤色で下線が引かれる。 ②文字色は緑色で下線が引かれる。 ③文字色は赤色で下線は引かれない。 ④文字色は緑色で下線は引かれない。

質問日時: 2024/05/27 13:04 質問者: tam_pp

解決済

3

0
12

X の仕様変更？埋め込みフレーム、アカウントないと中身表示されない？

X サイトガイドでは、公開設定しとけばアカウントない誰のアクセスでも表示されると書いてあるけど。。インフレーム設置側でどういう設定を確認すればいいですか？

質問日時: 2024/05/26 19:10 質問者: odasaga09

ベストアンサー

2

0
13

指定した演算を実施の結果を表示させるにはどうしたらいいですか？

指定した演算を実施の結果を表示させるにはどうしたらいいですか？

質問日時: 2024/05/25 13:37 質問者: WhereMonthName

ベストアンサー

1

0
14

指定した演算を実施の結果を表示させるにはどうしたらいいですか？HTMLです

指定した演算を実施の結果を表示させるにはどうしたらいいですか？HTMLです <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>指定した演算を実施の結果を表示</title> </head> <body> <?php $num1 = $_POST['num1']; $num2 = $_POST['num2']; $res = $num1+$num2; echo $num1.'+'.$num2.'='.$res."です。"; ?> </body> </html>

質問日時: 2024/05/25 13:34 質問者: WhereMonthName

ベストアンサー

1

0
15

htmlソース編集で、各タグを何かアイコン表示一覧クリック一つで自動で生成してくれるソフト？

現在さくらエディター常用ですが、タグ打ちをキーボード入力変換ではなく、よく使う主要なタグ（テキスト）一覧をあらかじめツールバーで常灯表示させておいてクリック一つで自動生成するエディターをどこかで1回試用した記憶があるのですが・・もういちどそういうの使い勝手試したいのですが。。オススメのありますでしょうか？

質問日時: 2024/05/21 11:43 質問者: odasaga09

ベストアンサー

1

0
16

<!DOCTYPE html>あってますか？スペル間違ってませんか？

あってますか？スペル間違ってませんか？ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>学籍番号チェック</title> </head> <body> <?php $stunum = $_POST['stunum']; // request1.phpから学籍番号を受け取り echo"あなたの学籍番号は".$stunum."です。 ", ?> </body> </html>

質問日時: 2024/05/12 18:59 質問者: WhereMonthName

ベストアンサー

3

0
17

<!DOCTYPE html>あってますか？スペル間違いしてませんか？

あってますか？スペル間違いしてませんか？ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>学籍番号チェック</title> </head> <body> <form method="=POST" action="request2.php"> 学籍番号 : <input type="text" name="stunum" /> <input type="submit" value="送信" /> </form> </body> </html> 教えてください。

質問日時: 2024/05/12 18:52 質問者: WhereMonthName

ベストアンサー

2

0
18

<!DOCTYPE html>あってますか？↑

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>学籍番号チェック</title> </head> <body> <?php $stunum = $_POST['stunum']; // request1.phpから学籍番号を受け取り echo"あなたの学籍番号は".$stunum."です。 ", ?> </body> </html> あってますか？↑

質問日時: 2024/05/07 10:05 質問者: Wohinfahrensie

解決済

1

0
19

Duolingo のソースコードの名前、教えてください。

学習ソフト Duolingo のソースコードを、「Ctrl+U」で表示させたのですが、このソースコードの名前、教えてください。 <!doctype html><html dir="ltr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="robots" content="NOODP"><noscript><meta http-equiv="refresh" content="0; url=/nojs/splash"></noscript><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style"

質問日時: 2024/04/29 09:28 質問者: 五体投地

ベストアンサー

2

0
20

Webページのリンクの貼り方を教えてください

Webページのリンクの貼り方を教えてください

質問日時: 2024/04/28 15:11 質問者: Wohinfahrensie

ベストアンサー

2

0
21

goo は、放置？

https://beginreturnonassets.com/products/auric-spreader?utm_term=nPlamFeL3J0HqcrUAs9iU&adset_name=23&fbclid=IwAR3vJIHfh6Q-OYP4zgmMOIgABsh_s_PAJ45_XpJALqrB7EHIqnpQiiCtaGk_aem_AWoGuN07iOJhJpN0WYEf58C8Z-7ikE29METVt51SlKw2aH4sIMiohRnY5rizC6wLjuYvh5kl-WAHXk1VOatawuZx

質問日時: 2024/04/24 19:30 質問者: odasaga09

ベストアンサー

1

0
22

CSSについて教えてください。こちらのサイトを参考にしているのですが、ナンバーを自動で付けているの

CSSについて教えてください。こちらのサイトを参考にしているのですが、ナンバーを自動で付けているのを解除して、ナンバーではなく直接任意のテキストを表示したいです。 spanに入れただけだと白枠の中に表示されてしまうのですが、どうすれば良いかご教授いただけないでしょうか。画像の上に要素を重ねるレイアウトの実装方法 https://tips-log.com/css-layout/ （コード貼り付けようとしたのですが文字数が足りませんでした） <span class="p-textImgBox__number"></span> .p-textImgBox__number::before { position: absolute; font-size: 70px; letter-spacing: 0.1em; line-height: calc(84/70); color: var(--base-color); right: 25px; font-weight: 100; content: "0"counter(number) " "; top: 0; } content: "0"counter(number) " "; を消せばいけるかと思いましたが、ダメでした…。

質問日時: 2024/04/19 17:23 質問者: 彩いろどり

ベストアンサー

3

0
23

CSS、Bootstrapについて containerはなんのためにあるのですか？単にレイアウトする

CSS、Bootstrapについて containerはなんのためにあるのですか？単にレイアウトするならrowとcolだけでいいですよね？

質問日時: 2024/04/18 19:03 質問者: だいぬ

ベストアンサー

3

0
24

HPレイアウトが同じページのヘッダー画像だけ変えたい

ホームページの作成にあたって、ホームページビルダーでレスポンシブルも出来るタイプのテンプレートを利用しました。おおよその全体の作成が出来たのですが、メインページ以外のページでタイトル画像を入れ替えたいと思ったのですが、うまく行きません。 CSSを見て、メインページ用の「layout01」　と　サブページ用の「layout02」でページのデザインが作られていると分かりました。（私はその程度の素人です…）この layout02 の中の「title2.jpg」を、ページ２・３・４で titie_2・3・4.jpgとして入れ替えたいのですが、どのようにCSSを変えれば可能でしょうか？一応、CSSエディターで layout02 が関係していそうなあちこちの箇所を layout03としてコピペして、HTMLのbodyでclassをlayout03に変えてみたのですが、それでは画像すら出なかったり、何とか画像が出てもレスポンシブルではサイズが小さくならなかったりメニューが出なかったりと、うまく行きません… できれば layout02 を基本としたまま、各ページの画像だけが変わるように出来れば、今後ページが増えても対策しやすいのですが、可能でしょうか？みなさんは、どのように各ページを作られているのでしょうか… ネットで検索しても希望のものが見つからず、こちらでアドバイスを頂ければと思い投稿しました。よろしくお願いいたします。

質問日時: 2024/04/14 14:41 質問者: RG_yoshi

ベストアンサー

2

0
25

htmlソース文の各行改行位置や行頭位置タグがばらっばらになるのはどうして？

terapad　やサクラ、またwysiwygのbluegrifonなんかの、その時々ばらばらアプリで開いてソース編集してるから？？特にちょいめんどくさい時 wysiwyg でいじっちゃうから？　の影響がでかいような気が・・

質問日時: 2024/04/09 22:06 質問者: odasaga09

ベストアンサー

3

0
26

静止画画像をクリックすると音楽が鳴るスクリプトってありますか？

<audio>タグを使わないで、リンクもつけないで、演奏動画にしないで、その場で音楽再生音のみが聴けるような表示をつくりたいのですが・・

質問日時: 2024/03/31 22:49 質問者: odasaga09

ベストアンサー

1

0
27

テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい

いつもお世話になっています。テーブルで、スマホ等の横幅が狭い画面で見た場合には、自動改行するのでなく、1行で表示できるように後尾を非表示にするには、どうすれば良いですか。一番簡単な方法をご教示ください。

質問日時: 2024/03/31 05:19 質問者: zyousuke

ベストアンサー

15

0
28

コードを書いて下さい（ ; ; ）写真有り

添付している写真の html cssのコードを書いていただきたいです白長方形の幅は1200px 画像の大きさ幅600px 縦408px テキスト内につきましてタイトルはh3 上部の余白56px 右側の余白75px(写真との余白) 下側の余白134px 左側の余白100px ノーコードで作成していたのですが、うまくいかず、、、分かる方コードを手入力しようと思っています…よろしくお願いします（ ; ; ）

質問日時: 2024/03/28 18:55 質問者: Jijtmdp745j

解決済

2

0
29

CSSデータの作成方法について（FTP内）

専門の方にショップページを作成していただき、その後ちょっとしたページのレイアウト編集は、自力でしております。 FTP内に、CSSデータが組み込まれていますが、一部デザインの色を変更したいと考えております。 FTPをのぞいてみると、CSSファイルがあったのですが、そちらはメモ帳で開くことができました。メモ帳でCSSデータを作成することは可能でしょうか。ファイル名は「カスケードスタイルシートドキュメント」と記載されています。どうぞ、よろしくお願いいたします。

質問日時: 2024/03/26 15:55 質問者: mikaco333

ベストアンサー

5

0
30

htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避

する方法はあるでしょうか？ <html><head></head><body> <form><button>ok</button></form> <form><button>ng</button></form> <form><button>xy</button></form> </body></html>

質問日時: 2024/03/18 06:24 質問者: reiman

ベストアンサー

3

0
31

HTML入門でもう躓いてしまった。

https://www.tohoho-web.com/wwwbeg1.htm#Display 上記サイトを参考にメモ帳ファイル（ファイル名はtest.html）に下記のコードをコピペした。 <!DOCTYPE html> <html> <head> <title>HTMLの練習</title> </head> <body> 初めてのWebページです。 </body> </html> 保存後、再度test.htmlファイルをダブルクリック。すると、「初めてのWebページです。」とブラウザで表示された。ここまでは順調だったけど、これ以降前に進みません。サイトの説明では、「初めてのWebページです。」という文章を修正してみましょう。メモ帳で、「初めてのWebページです。」を、「私の初めてのWebページです。」に変更してください。と説明してありますが、テキスト変更する画面がありません。「私の」という文字を追加したいですが、どこで追加すればいいですか？　この参考サイトにはそこまで説明していません。全然前に進めなくなってしまった。

質問日時: 2024/02/16 14:19 質問者: hまる子

解決済

10

0
32

青い枠のみのHTML

ログインとか、検索とかフチなしの青い枠（窓）がありますが、この枠（窓）のHTMLを教えてくれませんか？言うまでもなく、ログイン等、テキス文字が入っていても構いません。

質問日時: 2024/01/28 15:45 質問者: toufu-mental

ベストアンサー

4

0
33

列のどこをクリックしてもソートできるようにするには

いつもお世話になっています。テーブルの先頭行(タイトル行)をクリックしたときにソートできるようにしていたのですが、行数が増えてきて先頭行をクリックするのがしんどくなってきたので、列中のどこをクリックしてもソートするサンプルコードをご教示ください。

質問日時: 2024/01/27 16:54 質問者: zyousuke

ベストアンサー

7

0
34

CSSでつくったメニューのアニメーションがうまく動かない・変えたい

このHTMLでは、Widthが500px以下の場合、チェックボックスにチェックが入れられたらアニメーションで<ul id="topnav">を表示するのですが、チェックボックスのチェックを外した時にもアニメーションで消えていくようにできません。アニメーションが始まる（表示される範囲）をチェックボックスより下にしたいです。どうしたらいのか教えていただきたいです。フルのHTMLも教えていただきたいです。よろしくお願いいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Menu Example</title> <style> /* メニューボタン */ .menu-button { display: none; } /* 横幅が500px以下の場合にul要素を非表示にする */ @media only screen and (max-width: 500px) { #topnav { display: none; } .menu-button { display: block; } } /* メニューボタンをクリックしたらul要素を表示する */ @media only screen and (max-width: 500px) { .menu-button:checked ~ #topnav { display: block; animation: slide-down 0.5s ease-out; } } /* スライドダウンアニメーション */ @keyframes slide-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } /* メニューボタンをクリックしたらul要素を非表示にする */ @media only screen and (max-width: 500px) { .menu-button:not(:checked) ~ #topnav { display: none; animation: slide-up 0.5s ease-out; } } /* スライドアップアニメーション */ @keyframes slide-up { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } </style> </head> <body> <input type="checkbox" class="menu-button"> <ul id="topnav"> <li><a>Home</a></li> <li><a href="about">About</a></li> <li><a href="contact">Contact</a></li> </ul> </body> </html>

質問日時: 2024/01/21 11:48 質問者: 優里さん

ベストアンサー

2

0
35

スマホ(android）のタッチパネル、指以外で反応させる方法ありますか？

なんらかの肉体接触、静電気反応という仕組みらしいですけど、体から離れた何かの物体で鍵盤アプリの長音を通低音として維持したいのですが。。

質問日時: 2024/01/18 17:14 質問者: odasaga09

ベストアンサー

2

0
36

ホームページのＵＲＬをコピーしてエクセルのシートに張り付けるとＵＲＬの文字が変わる場合があるのはナゼ

・ホームページのＵＲＬをコピーしてエクセルのシートに張り付けるとＵＲＬの文字が変わる場合があるのはナゼですか。変わる場合は貼り付け後のＵＲＬの文字に「％」が多数付き文字数がとても長くなります。 ↓イメージ ’https://bkgr.sharepoint.com/%A767-F1%7D&file=%E2%98%85%E7%89%B9%E6%B3% ・また、変わる場合と変わらない場合は何が違うか教えて下さい。

質問日時: 2024/01/14 11:53 質問者: ニックネーム船長

ベストアンサー

1

0
37

pythonのコードについてご教示ください

ネットバンキングのログインする際のテキストボックスにワンタイムパスワード用のカードリーダーを使用してそのテキストボックスに入力した値を取得したいのですがうまくいきません。テキストボックスになっている要素が下記です。 <input type="password" size="23" class="number-m otpinput" name="otp"> Selectorをコピーしたものが下記です body > form > div > table:nth-child(1) > tbody > tr:nth-child(2) > td.otpbg3 > table > tbody > tr > td > table > tbody > tr:nth-child(2) > td > table > tbody > tr > td:nth-child(2) > input JSパスのコピーが下記です document.querySelector("body > form > div > table:nth-child(1) > tbody > tr:nth-child(2) > td.otpbg3 > table > tbody > tr > td > table > tbody > tr:nth-child(2) > td > table > tbody > tr > td:nth-child(2) > input") ちなみに要素の画面で見ると、input type="password" のinputに下のところに赤い波線のようなラインが入っています。 valueがないので、.get_attribute("value")が使えないかと思います。この場合のヒントを是非ともどなかた教えてください。どうぞよろしくお願い致します。

質問日時: 2024/01/14 05:39 質問者: 太郎です

ベストアンサー

1

0
38

パソコンのマイク機能

この前までﾁｬﾄGPTでマイク機能で音声入力できたが　どうしたか使えなくなった　設定をみたがマイクが使えるようになっているはずなんだが使えないどうして

質問日時: 2024/01/11 18:07 質問者: norakurotodoroki

解決済

2

0
39

HTMLで画像をポップアップで表示するようにする方法

HTMLで、この画像のように画像をポップアップでタイトル付きで表示するようにする方法をおしえてほしいです。　https://toretama.jp/click-big-image-floaty.html　これにタイトルをつける方法です。画像は　http://www.lifecorp.jp/　の2024/01/08 17:00時点のものです。

質問日時: 2024/01/08 18:52 質問者: 優里さん

解決済

4

0
40

HTMLで表をつくったのですがウィンドウの大きさを変化させると、表の真ん中の列だけ補足なり、表の中の

HTMLで表をつくったのですがウィンドウの大きさを変化させると、表の真ん中の列だけ補足なり、表の中の文字も段落が下になります。それ以外のセルは文字も大きさもその縮図のまま小さくなりますが、そこの烈だけ細く、文字も下へ下へとなってしまいます。原因が分かりません。

質問日時: 2024/01/03 21:57 質問者: Rai.4

解決済

4

0
41

HTMLの CSSのファイルというのは、 .cssにするとメモ帳が出てくるのですが大丈夫でしょうか

HTMLの CSSのファイルというのは、 .cssにするとメモ帳が出てくるのですが大丈夫でしょうか？

質問日時: 2023/12/27 15:14 質問者: Wohinfahrensie

ベストアンサー

3

0
42

HTMLです画像のように表せますか？すいませんお願いします・店主のこだわり・メニューは、紫で、

HTMLです画像のように表せますか？すいませんお願いします・店主のこだわり・メニューは、紫で、下線を入れてください T.U.Cafe こだわりの１杯をあなただけのために・店主のこだわり・メニュー

質問日時: 2023/12/27 00:23 質問者: Wohinfahrensie

ベストアンサー

1

0
43

HTMLです画像のように表したいですどうすれば良いですか？教えてくださいお願いします！↓ あと、

HTMLです画像のように表したいですどうすれば良いですか？教えてくださいお願いします！↓ あと、h2なので、二番目にいれるやつですお願いします！↓ 店主のこだわりご来店ありがとうございます。 T.U.Cafeは，ご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして店主のこだわりご来店ありがとうございます。

質問日時: 2023/12/27 00:23 質問者: Wohinfahrensie

ベストアンサー

1

0
44

下のやつをHTMLで表せますか？すいませんこれは最後に付け加えたいです最後にお願いします Co

下のやつをHTMLで表せますか？すいませんこれは最後に付け加えたいです最後にお願いします Copyright © T.U.Cafe. All Rights Reserved.

質問日時: 2023/12/27 00:12 質問者: Wohinfahrensie

ベストアンサー

2

0
45

HTMLですすいません教えてくださいお願いします色の点せんは関係ないので色の点線は作らなく

HTMLですすいません教えてくださいお願いします色の点せんは関係ないので色の点線は作らなくていいですどうやりますか？教えてくださいおねがいします！！！画像のようにお願いします！！！ T.U.Cafe こだわりの１杯をあなただけのために・店主のこだわり・メニュー店主のこだわりご来店ありがとうございます。 T.U.Cafeは，ご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。メニューホットコーヒー hot_coffee.png \5,000- 当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。もっと見るアイスコーヒー ice_coffee.png \8,000- 暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。もっと見るアイスカフェオレ ice_cafe_au_lait.png \8,000- ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。もっと見る Copyright © T.U.Cafe. All Rights Reserved.

質問日時: 2023/12/26 15:18 質問者: Wohinfahrensie

ベストアンサー

1

0
46

HTMLです店主のこだわりというのを画像のように表せますか？背景は茶色で文字は白で点線と白四

HTMLです店主のこだわりというのを画像のように表せますか？背景は茶色で文字は白で点線と白四角お願いします

質問日時: 2023/12/25 20:14 質問者: Wohinfahrensie

ベストアンサー

2

0
47

HTMLですCSSですこの画像のように文字を打ち込みたいのですが、下の３この四角にを画像のよ

HTMLですCSSですこの画像のように文字を打ち込みたいのですが、下の３この四角にを画像のように入れたいのですがどうすればいいですか？教えてくださいお願いしますすいませんおしえてください！ホットコーヒー \5,000- 当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。もっと見るアイスコーヒー \8,000- 暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。もっと見るアイスカフェオレ \8,000- ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。もっと見るを画像のように入れたいのですがどうすればいいですか？教えてくださいお願いしますすいませんおしえてください！ hot_coffee.png ice_caffee_au_lait.png ice_coffee.png 使う画像です↑ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>T.U.Cafe</title> <style> body { background-color: #A52A2A; /* 背景色を茶色に設定 */ color: white; font-family: 'Your Font', sans-serif; } .title { background: rgba(255, 255, 255, 0.5); /* 透明背景 */ color: white; font-size: 2em; text-align: center; padding: 10px; /* 追加：タイトルの余白 */ } .subtitle { color: white; /* 追加：サブタイトルの文字色 */ text-align: center; padding: 10px; /* 追加：サブタイトルの余白 */ } #div1 { border-left: solid 8px white; color: white; border-bottom: dotted 4px white; padding: 10px; /* 追加：店主のこだわりの余白 */ } .menu-item { background-color: white; color: #8B4513; padding: 10px; margin: 10px; } .menu-name { font-weight: bold; } .menu-price { font-weight: bold; } .menu-description { font-size: 0.8em; } .footer { color: #8B4513; font-size: smaller; text-align: center; padding: 10px; /* 追加：フッターの余白 */ } #wrap { width: 80vw; margin: 0 auto; display: flex; flex-wrap: wrap; } #wrap > div { width: 35vw; height: 35vw; margin: 2vw; border: 1px solid gray; text-align: center; font-size: 4vw; background-color: white; /* 追加：ボックスの背景色 */ } </style> </head> <body> <div class="title">T.U.Cafe</div> <div class="subtitle">こだわりの１杯をあなただけのために</div> <div id="div1">店主のこだわり </div> <div style="background-color: white; padding: 10px;"> ご来店ありがとうございます。<br> <span style="color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-size: larger; font-weight: bolder;">T.U.Cafe</span> はご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。<br> 楽しんでください。<br> </div> <div class="menu-item"> <div class="menu-name"></div> <img src="hot_coffee.png" alt="hot_coffee.png" /> <div class="menu-price">/5,000-</div> <p style="border-bottom: 1px dotted white;">下線ボーダー、ドット</p> <div class="menu-description">当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。</div> <span style="text-decoration: underline; color: red;">もっと見る</span> </div> <div id="wrap"> <div>ホ</div> <div>ア</div> <div>レ</div> </div> <div class="menu-item"> <div class="menu-name"></div> <img src="path_to_shaved_ice_image.jpg" alt="かき氷" /> <div class="menu-price">/8,000-</div> <div class="menu-description">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。</div> <span style="text-decoration: underline; color: red;">もっと見る</span> </div> <div class="menu-item"> <div class="menu-name">アイスカフェオレ</div> <img src="path_to_daikon_image.jpg" alt="大根" /> <div class="menu-price">/8,000-</div> <div class="menu-description">ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。</div> <span style="text-decoration: underline; color: red;">もっと見る</span> </div> <div class="menu-item"> <div class="menu-name">Copyright c T.U.Cafe. All Rights Reserved.</div> <div class="menu-price"></div> <div class="menu-description"></div> <span style="text-decoration: underline; color: red;"></span> </div> <div class="footer">Copyright c T.U.Cafe. All Rights Reserved. </div> </body> </html>

質問日時: 2023/12/25 16:07 質問者: Wohinfahrensie

ベストアンサー

3

0
48

HTMLですCSSです画像のように作りたいのですが以下のようにあってますか？間違ってる感じがしま

↓すいませんおしえてください！以下はHTMLかな？CSSとかも教えていただきたいですお直しできると助かります！！ header.png hot_coffee.png ice_caffee_au_lait.png ice_coffee.png 使う画像のやつ↑ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>T.U.Cafe</title> <style> header.png body { background-color: #A52A2A; /* 背景色を茶色に設定 */ color: white; font-family: 'Your Font', sans-serif; } .title { background: rgba(255, 255, 255, 0.5); /*header.png 透明背景 */ color: white; font-size: 2em; text-align: center; } .menu-item { background-color: white; color: #8B4513; /* 茶色の文字 */ padding: 10px; margin: 10px; } .menu-name { font-weight: bold; } .menu-price { font-weight: bold; } .menu-description { font-size: 0.8em; } .footer { color: #8B4513; /* 茶色の文字 */ font-size: smaller; text-align: center; } /* その他必要なスタイルを追加 */ </style> </head> <body> <div class="title">T.U.Cafe</div> <div class="subtitle">こだわりの１杯を　あなただけのために</div> </html> <html> <title>Online HTML Editor</title> <head> <style> body { /* 周りは茶色で */ background-color : brown; } #div1 { border-left : solid 8px white; /* 白い四角に */ color : white; /* 白い文字の店主のこだわり */ /* そして下は白点線をたくさん */ border-bottom : dotted 4px white; } </style> </head> <body> <div id="div1">店主のこだわり </div> <div style="background-color : white;"> 　ご来店ありがとうございます。<br> <span style=" /* T.U.Cafeの文字は */ /* 白い文字で */ color:white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; /* 大きめに */ font-size:larger; font-weight:bolder; ">T.U.Cafe</span>　ご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。　ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。　<br> 楽しんてください。<br> </div> </body> </html> <html> <title>Online HTML Editor</title> <head> <style> body { /* 周りは茶色で */ background-color : brown; } #div1 { border-left : solid 8px white; /* 白い四角に */color : white; /* 白い文字のトケイ */ /* そして下は白点線をたくさん */ border-bottom : dotted 4px white; } </style> </head> <body> <div id="div1">店主のこだわり</div> <div style="background-color : white;"> ご来店ありがとうございます。<br> <span style=" /* T.U.Cafeの文字は */ /* 白い文字で */ color:white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; /* 大きめに */ font-size:larger; font-weight:bolder; ">T.U.Cafe</span>はご注文を頂いてからコーヒーの実の収穫，果肉などの取り除き，豆の選別，焙煎，グラインドをして提供しています。　ご提供まで少々お時間を頂きますが，「あなただけの１杯」を淹れることにこだわりを持っています。<br> <br> </div> </body </html <div class="menu-item"> <div class="menu-name"></div> <img src="hot_coffee.png" alt="hot_coffee.png" /> <div class="menu-price">/5,000-</div> <p style="border-bottom: 1px dotted white;">下線ボーダー、ドット</p> <div class="menu-description">当店自慢のホットコーヒーです。「あなただけの１杯」をぜひお試しください。</div> <span style="text-decoration: underline; color: red;">もっと見る</span> </div> <style> #wrap { width: 80vw; margin: 0 auto; display: flex; flex-wrap: wrap; } #wrap > div { width: 35vw; height: 35vw; margin: 2vw; border: 1px solid gray; text-align: center; font-size: 4vw; }<p style="color: white;">・白背景</p> <p style="border-bottom: 1px dotted black;">下線ボーダー、ドット</p> </style> </head> <body> <div id="wrap"> <div>ホ</div <div>ア</div> <div>レ</div </div> </body> </html> <div class="menu-item"> <div class="menu-name"></div> <img src="path_to_shaved_ice_image.jpg" alt="かき氷" /> <div class="menu-price">/8,000-</div> <div class="menu-description">暑い夏にぴったりのアイスコーヒーです。ご注文を頂いてから氷出しで１滴１滴抽出します。</div> <span style="text-decoration: underline; color: red;">もっと見る</span> </div> <div class="menu-item"> <div class="menu-name">アイスカフェオレ</div> <img src="path_to_daikon_image.jpg" alt="大根" /> <div class="menu-price">/8,000-</div> <div class="menu-description">ご注文を頂いてから氷で抽出するアイスコーヒーと，搾りたての牛乳を絶妙なバランスで。</div> <span style="text-decoration: underline; color: red;">もっと見る</span> </div> <div class="menu-item"> <div class="menu-name">Copyright © T.U.Cafe. All Rights Reserved.</div> <div class="menu-price"></div> <div class="menu-description"></div> <span style="text-decoration: underline; color: red;"></span> </div> <div class="footer">Copyright © T.U.Cafe. All Rights Reserved. </div> </body> </html>

質問日時: 2023/12/24 16:15 質問者: Wohinfahrensie

ベストアンサー

3

0
49

すいませんHTMLです cssです教えてください！お願いします！↓ 画像のようにイを、左上にアを

すいませんHTMLです cssです教えてください！お願いします！↓ 画像のようにイを、左上にアを右下に画像をその下の左下に隣にすいません。をいれてその右下にけんさく赤文字で下線をお願いします四角は白で背景はできれば茶色でお願いします！使う画像は左上から以下の通りでお願いします hot_coffee.png ice_caffee_au_lait.png ice_coffee.png

質問日時: 2023/12/24 16:15 質問者: Wohinfahrensie

ベストアンサー

1

0
50

HTMLですブロック要素にするにはどうすれば良いですか？教えてくださいお願いします

HTMLですブロック要素にするにはどうすれば良いですか？教えてくださいお願いします

質問日時: 2023/12/23 21:59 質問者: Wohinfahrensie

ベストアンサー

1

0

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

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

質問する（無料）

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

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

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

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

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

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