回答数
気になる
-
html,cssの勉強をしている者です。 どうしても理解できなかったことがあるので詳しい方に教えて頂
html,cssの勉強をしている者です。 どうしても理解できなかったことがあるので詳しい方に教えて頂きたいです。また、勉強を始めたばかりなのでわかりにくい箇所があるかと思いますがお手柔らかにお願い致します。。 完成header部は、ロゴとメニューが両端に横並びに配置されているような状態です。 htmlは、 <header> <div class=クラス名> <h1><img src=ロゴ画像></h1> <nav><ul> <li><img src=メニュー画像1></li> <li><img src=メニュー画像2></li> <li><img src=メニュー画像3></li> <li><img src=メニュー画像4></li> </ul></nav> </div></header> cssは、 header{background-color:#fff padding:10px 0;} header.クラス名{width:900px; margin:auto; display:flex; justify-content:space-between;} nav ul{display:flex;} nav ul li{width:100px; height:50px;} nav ul li{display:block; width:100% height:100% color:transparent; line-height:0;} ①上記記述でなぜdivクラス名が必要なのか? cssでheader全体とクラス名と別れて記述されていますが、私の理解では大きいタグとその中で加工を別にしたいものにクラス名をつけてcssでわけて記述すると思っていたのですが、そもそもこのhtmlではクラス名をつける必要はありますか? ②cssの記述で、nav ul liの記述が2つありますが、これは1つにまとめても問題はありませんか?(どちらにもwidthやhightが違う値で記述あるのも不明で) vs Codeで検証してみてるのですが上手くできずご教授頂きたいです。 宜しくお願い致します!
質問日時: 2021/07/24 22:32 質問者: mmuuuuu
ベストアンサー
1
0
-
htmlでキャラクター画像を、サイト画面の右下と左下に固定したいです。 position:fixed
htmlでキャラクター画像を、サイト画面の右下と左下に固定したいです。 position:fixed; を指定すると、z-index:10; としても、画像だけが消えた状態に成ります。 原因は何が考えられますか?
質問日時: 2021/07/17 09:38 質問者: お兄さんですか
ベストアンサー
1
0
-
htmlで、texpareaの横に、textを配置すると、textが少し上からの位置が下がってしまい
htmlで、texpareaの横に、textを配置すると、textが少し上からの位置が下がってしまいます。なんでなんでしょうか?
質問日時: 2021/07/16 21:32 質問者: お兄さんですか
ベストアンサー
1
0
-
リンク文字のスタイルを変更したいです。リンク文字「お申し込み内容を変更する」 のリンクの文字の大きさ
リンク文字のスタイルを変更したいです。リンク文字「お申し込み内容を変更する」 のリンクの文字の大きさを大きくして、さらに中央配置にしたいのでですが 、上手くいきません。リンクの文字に色を付ける、下線を消すところまでは 出来たのですが、付属画像のようにリンクの文字の大きさが変わらず大きくして、中央配置にも なりません。aタグ どうしたらよいでしょうか? コードは以下です。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>入力確認画面</title> <link rel="stylesheet" href="senden2screen.css"> <style type="text/css"> </style> </head> <body> <form action ="〇〇〇.php" method ="post" name="doui_form" onsubmit="return false"> <div class="auto-style5"> <p><a href="〇◇〇.php?action=edit"> ◀お申し込み内容を変更する</a></p> </div> </form> </body> </html> ◎◎◎cssのコード /* お申し込み内容を変更する */ a { text-decoration-line:none;/* リンクの下線を消す */ font-size: 39px;/* 文字の大きさ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; transform: scale( 1 , 1.1 );/*文字の大きさ調節*/ margin-top: 40px;/* 上の余白 */ }
質問日時: 2021/07/14 13:43 質問者: pjdmgam
ベストアンサー
1
0
-
WordPressやHTML含め。
webサイト制作案件はどのジャンルや職種が多いと思いますか? 病院? アパレルのECサイト? LPサイト?
質問日時: 2021/07/13 23:30 質問者: rakiduta1
ベストアンサー
3
0
-
HTMLについて質問です。 下記、アコーディオンメニューの中(商品概要のテキストが入る部分)に、テー
HTMLについて質問です。 下記、アコーディオンメニューの中(商品概要のテキストが入る部分)に、テーブルを入れ込みたいのですが、うまく表として反映されません。 正しいHTMLを教えてください。 下記、画像の様なテーブルを入れたいです。 宜しくお願い致します。 【アコーディオンメニュー】 <div class="cp_actab"><input id="tab-one"type="checkbox"name="tabs"><label for="tab-one">商品概要</label><div class="cp_actab-content"><p>テキスト</p></div></div><div class="cp_actab"><input id="tab-two"type="checkbox"name="tabs"><label for="tab-two">仕様</label><div class="cp_actab-content"><p>テキスト</p></div></div><div class="cp_actab"><input id="tab-three"type="checkbox"name="tabs"><label for="tab-three">送料・お届け</label><div class="cp_actab-content"><p>テキスト</p></div></div><div class="cp_actab"><input id="tab-three"type="checkbox"name="tabs"><label for="tab-three">返品・交換</label><div class="cp_actab-content"><p>テキスト</p></div></div>
質問日時: 2021/07/12 11:51 質問者: erina_812
ベストアンサー
1
0
-
HTMLとCSSのテストは、どんな感じで勉強したら点数取れますか? 要素の意味や使い方を覚えればいい
HTMLとCSSのテストは、どんな感じで勉強したら点数取れますか? 要素の意味や使い方を覚えればいいですか?
質問日時: 2021/07/11 21:19 質問者: きょもきょも
解決済
3
0
-
cssでheight: auto;を指定してもスマホで画像が縦長になる。
スマホで、以下のWebページで写真をアップロードすると右側の写真だけ縦長になります。 https://ok2nd.sakura.ne.jp/tool/camanjs/upload.html CSSで、以下を指定しています。JavaScriptで設定しても効果ありません。 max-width: 100%; height: auto; 解決方法はありますか?
質問日時: 2021/07/08 12:34 質問者: ok_2nd
ベストアンサー
1
0
-
HTML/CSS初心者です。 レスポンシブをしようとしてるのですが・・・ メディアクエリが効かないよ
HTML/CSS初心者です。 レスポンシブをしようとしてるのですが・・・ メディアクエリが効かないようです。 【HTML】 <div class="obi"> <div class="moji"> <h1 class="logo"> <ul> <li>◯◯◯◯</li> <li>◯◯◯◯</li> <li>◯◯◯◯</li> </ul> </div> </div> これの「obi」というところは、ウェブサイト上の帯なんですが、これをパソコンの画面幅に合わせて下に伸ばしたいのですが、CSSでこのように指示しても・・・ 【CSS】 @media screen and (max-width: 1205px) { .obi { height: 500px; } } 何も変わりませんでした・・・ viewpointは入れてあります。 とにかく初心者です。 調べても出てきませんでした…
質問日時: 2021/07/08 09:27 質問者: ---TATSUKI---
解決済
4
0
-
下記のような、HTMLコードを作ったのですが、4つほど問題があり詰まってます! 1つ目は、占いボタン
下記のような、HTMLコードを作ったのですが、4つほど問題があり詰まってます! 1つ目は、占いボタンをおしても画像だけ変わり、文字かひょうじされないこと 2つ目は、削除ボタンを押しても変化がないこと 3つ目は、花言葉が改行できないこと 4つ目は、各花ごとに、CSSを適用したいのですがやり方が分かりません <!DOCTYPE html> <html lang="ja"> <head> <title>花占い</title> <meta charset="UTF-8"> <link rel="stylesheet"href="d.css"> </head> <body> <h1>今日の占い</h1> <input type="button"value="占う"onclick="uranai()"> <input type="button"value="削除"onclick="del()"/> <img id="image"src="r.jpg"/> <div id="kekka"></div> <script> function uranai() { let num = Math.ceil(Math.random() * 12); let books = document.getElementById("kekka"); let y = document.getElementById("are"); let elm = document.createElement("p"); let tha = document.createElement("p"); let txt; let led; let x = document.getElementById("image"); if(num === 1) { txt = document.createTextNode("シンビジウム"); led = document.createTextNode("花言葉 『飾らない心』『素朴』『壮麗』『華やかな恋』『高貴な美人』『誠実な愛情』『深窓の麗人』"); x.setAttribute("src","1.jpg"); } else if(num === 2) { txt = document.createTextNode("フリージア"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","2.jpg"); } else if(num === 3) { txt = document.createTextNode("チューリップ"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","3.jpg"); } else if(num === 4) { txt = document.createTextNode("桜"); led = document.createTextNode("シンビジウム"); x.setAttribute("src", "4.jpg"); } else if(num === 5) { txt = document.createTextNode("すずらん"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","5.jpg"); } else if(num === 6) { txt = document.createTextNode("バラ"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","6.jpg"); } else if(num === 7) { txt = document.createTextNode("百合"); led = document.createTextNode("シンビジウム"); x.setAttribute("src", "7.jpg"); } else if(num === 8) { txt = document.createTextNode("ひまわり"); led = document.createTextNode("シンビジウム"); x.setAttribute("src ","8.jpg"); } else if(num === 9) { txt = document.createTextNode("ダリア"); led = document.createTextNode("シンビジウム"); x.setAttribute("src ","9.jpg"); } else if(num === 10) { txt = document.createTextNode("ガーベラ"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","10.jpg"); } else if(num === 11) { txt = document.createTextNode("シクラメン"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","11.jpg"); } else { txt = document.createTextNode("ポインセチア"); led = document.createTextNode("シンビジウム"); x.setAttribute("src","12.jpg"); } tha.appendChild(led); y.appendChild(tha); elm.appendChild(txt); books.appendChild(elm); function del() { let kakka = document.getElementById("kakka"); if(kakka.lastChild !== null){ kakka.removeChild(kakka.lastChild); } } } </script> </body> </html>
質問日時: 2021/07/08 01:37 質問者: タカイヌ
解決済
2
0
-
CSS:animation開始位置の設定
画面いっぱいに横長の写真を左にスライドさせるアニメーションを作っています。 現在以下のようにCSSで設定し、読み込み時5秒待ってから写真を左にスライドさせるアニメーションが表示されています。ただ、5秒まってからアニメーション開始の際、開始する写真の位置が移動してから動き始めています。 .banner { background: url(../images/banner.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; position: relative; background-repeat: repeat-x; animation: slideleft 20000s 5s infinite linear; -webkit-animation: slideleft 20000s 5s infinite linear; z-index: 0; } これを読み込み時の写真の位置から自然にアニメーションを開始させたいのですが、どのように設定したらよいでしょうか。
質問日時: 2021/07/06 15:07 質問者: apricot1101
解決済
2
0
-
遊明朝のプロポーショナルフォントってありますか?
ホームページのタグ内に、下記を入れ込んだのですが、なんだか文字間が広い感じがして、詰めたいのですが、そもそも遊明朝のプロポーショナルフォントってあるのでしょうか?あるとしたら以下はどのように記述すればよいでしょうか? <style type="text/css"> <!-- body{ line-height: 170%; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; color: #1c1c1c; } --> </style>
質問日時: 2021/07/04 21:47 質問者: shukronajon
解決済
1
0
-
html キャプチャ
htmlで「算用数字+漢数字」であっていたら送信できるというシステムを作りたいのですが、 コードがわかりません。どなたか教えていただけると幸いです。
質問日時: 2021/07/03 13:53 質問者: mintadesign
解決済
1
0
-
ホームページビルダーでサイト作っていますが、文字間詰めたいです
ゴシックが嫌で明朝を指定しています。最近のは遊明朝がいいのかなとその表示ができましたが、なんだか文字間隔が広いような… ①プロポーショナルになるにはどうしたらいいですか。 いろいろとググってCSS入れ込んでみましたがうまくいきません。letter-spacingをマイナス値にしたり、font-feature-settings: "palt"入れてみたのですが、無反応でした。 ②遊明朝にするとEdgeは問題ないのですがIEだと上半分ずれて表記され下に余白が出来てしまいます。文字にマーカーのような背景いれるとずれているのがわかります。どうしたらよいでしょうか。 <!DOCTYPE html> <HTML lang="ja"> <HEAD> <meta charset="UTF-8"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 21.0.1.0 for Windows"> <TITLE>テスト</TITLE> <style type="text/css"> <!-- body{ line-height: 170%; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; color: #1c1c1c; } --> </style> </HEAD> <BODY>
質問日時: 2021/07/03 13:29 質問者: shukronajon
解決済
1
0
-
HTML文書を上書き保存してもブラウザ上で反映されない
HTML文書に変更を加えて上書き保存をし、その後ブラウザから開いても変更が反映されていません。 どうしたらよいのでしょうか? ご存じの方、ご回答お待ちしております。
質問日時: 2021/06/30 16:42 質問者: uubond
ベストアンサー
4
0
-
HTML文書 画像が正しく表示されません。
大学の授業で、HTMLとCSSによる簡単なWebページ制作を行っています。 HTML文書に画像を入れる段階で行き詰っています。大学の指示書にある通りに文書を打っているつもりなのですが、ブラウザに画像が表示されません。 以下に、①大学からの指示書に書かれた例と、②自分の打った文書を書きましたので、どこが間違っているか、どのように直すべきかをご教示いただきたいです。 ①大学からの指示書の例 <img src="画像が格納されているフォルダの名前"/画像の名前" alt="画像の説明"> ②自分の打った文書 <img src="webpage"/logo1"alt="イベントのロゴ"> まず、ネットで検索して出てきた画像を「名前を付けて保存」しました。その際、「logo1」という名前をつけたため、指示書の例の「"画像の名前"」にあたる部分を「"logo1"」としました。 また、この画像を「webpage」というフォルダ内に保存したので、「"画像が格納されているフォルダの名前"」にあたる部分に「"webpage"」と打ち込みました。 「"画像の説明"」については「"イベントのロゴ"」と打ち込んだものがブラウザに正常に表示されました。(ここは問題なくできたということです) 分かりにくい説明で申し訳ございません。お時間のある方からのご回答お待ちしております。 よろしくお願いいたします。
質問日時: 2021/06/30 11:19 質問者: uubond
ベストアンサー
1
0
-
HTML文書 画像の保存の仕方
HTML文書に画像を入れるためのテンプレまでは理解しているのですが、それ以前に画像の保存の仕方が分かりません。 具体的にいうと、Webページ上で使いたい画像をどこのファイルにいれるか、どのような名前を付けて保存すればいいか、圧縮はするかなどの手順を知りたいです。 ちなみに、学校から指定されているテンプレは以下の通りです。 <img src="画像が格納されているフォルダの名前/画像の名前" alt="画像の説明"> 初心者のため、調べてたりその通りに試してみたりしても、ブラウザに画像が表示されず困っています。 非常にあいまいな質問で申し訳ございません。お時間のある方からのご回答お待ちしております。
質問日時: 2021/06/30 11:05 質問者: uubond
ベストアンサー
4
0
-
HTML文書 画像の入れ方が分かりません。
大学の授業でウェブページ制作を行っています。超初級レベルです。 HTML文書で画像の入れ方が分かりません。 一応大学から指示書が出ているのでその通りにやりたいのですが、書いてあることがいまいち理解できません。何か具体的な例や分かりやすい説明をしていただきたいです。特に「画像の名前」とは何なのかが分かりません。 指示書に記載されていた説明↓ <img src="画像が格納されているフォルダの名前/画像の名前" alt="画像の説明"> <img src="figure"/tokyo university.png" alt="東京大学"> 非常にあいまいな質問で申し訳ないのですが、お時間のある方からのご回答お待ちしております。 当方、こちらの質問ツールを使うのが初めてなので、不躾なところがございましたら申し訳ございません。よろしくお願いいたします。
質問日時: 2021/06/30 00:15 質問者: uubond
ベストアンサー
1
0
-
ベストアンサー
1
0
-
HTMLのプログラムが動かない理由は、なんでしょうか <!DOCTYPE html> <html l
HTMLのプログラムが動かない理由は、なんでしょうか <!DOCTYPE html> <html lang="ja"> <head> <title>サンプル</title> <meta charset="UTF-8"> </head> <body> <h1>今日の占い</h1> <input type="button" value="占う" onclick="uranai()" /> <div id="kekka"></div> <script> function uranai() { let num = Math.celi(Math.random() * 10); let books = document.getElementById("kekka"); let elm = document.createElement("p"); let txt; if(num>5){ txt = document.createTextNode("今日の運勢は Good!"); } else if (num > 1) { txt = document.createTextNode("今日の運勢はまあまあです。"); } else { txt = document.createTextNode("今日の運勢は Bad"); } elm.appendChild(txt); books.appendChild(elm); } </script> </body> </html>
質問日時: 2021/06/28 11:06 質問者: タカイヌ
ベストアンサー
1
0
-
コードを書く表
htmlでこのようなコードのサンプルをかけるような表にするにはどうすればいいですか?ライブラリとかありますか? (デザインも含めて)
質問日時: 2021/06/27 22:08 質問者: 9うい9p
ベストアンサー
1
0
-
入力フォームとセレクトボックスが真ん中に行きません。付属画像のように左に寄ったままです。cssリセッ
入力フォームとセレクトボックスが真ん中に行きません。付属画像のように左に寄ったままです。cssリセットしたら、フォームが横に並んだので、縦にしようと、 display: block;で縦にはできましたが、フォームを中央に寄せたいのですが、できません。.auto-style1と2に { text-align: center; }適応しても効果なし。form{ text-align: center; }効果なし、 input.name{ text-align: center; }効果なし、 途方にくれています。 どうしたらよいでしょうか?回答よろしくお願いいたします。 CSSの入力フォームのスタイルのところ#bangouよりしたの#のところカットしてます。#bangouと全く同じCSSになります。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*リットcss*/ html, body, div, span, object, iframe, dl, dt, dd, ol, ul, li,span,address, form, label, legend, table, { margin:0; padding:0;} /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; } </style> </head> <body> <div class="title5">※お申し込みフォーム</div> <form action="form1.php" method="post"> <div class="auto-style2"> <span class="selectbox"> <select id="plan" class="plan" name="plan"> <option value="">選択</option> </select> </span> </div> <div class="auto-style1"> <input type="text" class="bangou" name="bangou" id="bangou" value="" /> <input type="text" class="name" name="name" id="name" value=">" /> <input type="text" class="lineid" name="lineid" id="lineid" value="" /> </div> </form> </body> </html> ◎◎cssのコード /* セレクトボックスのデザイン1 */ #plan{ vertical-align: middle; border: 3px solid #63e02d; /* 枠線 */ width: 27.1em; height: 53px; line-height: 1.2; /* 行の高さ */ } /* 入力フォームのスタイル */ #bangou { border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ width: 25.5em; height: 30px; line-height: 1.2;/* 行の高さ */ } } #name { } #lineid{ } /* フォームの位置の調節 */ form{margin-top: 70px; text-align: center; } select.plan{ display: block; } input.bangou{ display: block; } input.name{ display: block; } input.lineid{ display: block; } /* フォーム間の上下の余白, */ input.bangou{margin:21px 0px;} input.name{margin:21px 0px;} input.lineid{margin:21px 0px;}
質問日時: 2021/06/26 11:34 質問者: pjdmgam
ベストアンサー
2
0
-
iframe
すみません。 iframeでレスポンシブかつ中央寄せにする方法を教えてください。 <div class="sns"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsanch.gondo%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe></div> .sns{ position:relative; width:100%; height:0; padding-top:75%; } .sns iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
質問日時: 2021/06/26 09:48 質問者: 9うい9p
ベストアンサー
1
0
-
独学でweb制作の勉強の勉強してますが、挫折しました。
独学やprogateやN予備校などで、HTMLやCSSなど勉強していましたが、挫折してしまいました。 webサイト模写とかもしてましたが、すごい簡単なページでも、同じように作るの難しかったですし、レスポンシブデザインには対応させるまでは全くできませんでした。 元々勉強苦手で頭が悪い中頑張っていましたが、難しいこと多い感じでした。 やはりweb作成の勉強は難しいですか? 適正とかもあるんでしょうか? 挫折しましたが、また勉強しなおしてみようかと思っていますが、web制作の勉強は、頭悪い人でもどのように勉強していけばできるようになるでしょうか? やはり向いてる人向いてない人いますでしょうか? 分からないこと多くても、逃げずに勉強続けていたら、ホームページ作れるようになるでしょうか?
質問日時: 2021/06/25 18:14 質問者: aozora50
解決済
2
0
-
{margin: 0;}を追加したら、入力フォームの位置が縦に配置していた入力フォームの縦の位置がず
{margin: 0;}を追加したら、入力フォームの位置が縦に配置していた入力フォームの縦の位置がずれたので、 フォームの上にある「名前」などの文字を消したら、付属画像のようにフォームが、なぜか横に並ぶのですが、これを縦に並べたいのですが、どうしたらよいでしょうか? 困っています。cssの #bangouの下にある♯の所も、字数制限のため、文字カットしています。 #bangouと全く同じCSSです。 回答よろしくお願いいたします。 コードは以下です。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> *{margin: 0;} /* 画像と文字の背景色の設定 */ .wrap{ width: 100%; margin:0 auto; } /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; } </style> </head> <body> <div class="wrap"><!--画像と文字の背景色の設定--> <div class="flex"><!--画像の横に文字--> <div><p><img src="senden2.png" alt="[写真]" class="example3"> </p></div> <div class="title3"> <p>様々なものがります。</p> <div class="title5">※お申し込みフォーム</div> <form action="form1.php" method="post"> <div class="auto-style2"> <span class="selectbox"> <select id="plan" class="plan" name="plan"> <option value="">選択</option> </select> </span> </div> <div class="auto-style1"> <input type="text" class="bangou" name="bangou" id="bangou" value=""/> <input type="text" class="name" name="name" id="name" value=""/> <input type="text" class="gurigana" name="furigana" id="furigana" value="" /> <input type="text" class="tel" name="tel" id="tel" value="" /> </form> </body> </html> ◎◎◎cssのコード /* 画像の横に文字を配置する */ .flex{ display: flex; padding: 10px; } .flex div{ width: 50%; } /* セレクトボックスのデザイン1 */ #plan{ vertical-align: middle; box-sizing: border-box; border: 3px solid #63e02d; /* 枠線 */ width: 27.1em; height: 53px; line-height: 1.2; /* 行の高さ */ } /* 入力フォームのスタイル */ #bangou { border: 3px solid #63e02d; padding: 0.5em;/* 内側の余白量 */ width: 25.5em; height: 30px; line-height: 1.2;/* 行の高さ */ } #name { } #furigana { } #tel { } #email { } form{margin-top: 110px; }
質問日時: 2021/06/25 07:36 質問者: pjdmgam
ベストアンサー
1
0
-
HTML&CSS言語を使ってWebページを作成したいんですけど、自分で1からプログラミングして作成で
HTML&CSS言語を使ってWebページを作成したいんですけど、自分で1からプログラミングして作成できる無料のアプリかなんかありませんか?
質問日時: 2021/06/24 23:30 質問者: tunjkwww
解決済
4
0
-
ホームページの一番下に配置した画像の下の隙間を無くしたいです。付属画像のように青い画像を配置したので
ホームページの一番下に配置した画像の下の隙間を無くしたいです。付属画像のように青い画像を配置したのですが、どうしても下に隙間が少し空いてしまいます。この隙間を無くしたいです。 img.example11{ vertical-align: bottom;や margin-bottom: 0%;を追加したも治りません。 困っています。回答よろしくお願いいたします。。 コードは以下です。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /* 送信ボタンの大きさ、スタイル */ .auto-style4 { margin-top:74px ;/* 画像の上の余白 */ height: 230px; width: 830px; padding: 0; } /* 画像中央配置 */ .center{ text-align: center; } /* ボタン代替え画像の大きさ調節 */ img.example8 { width: 100%;/* ボタン枠に収める */ height: 100%;/* ボタン枠に収める */ } /* HPの一番下に配置する画像のスタイル調節 */ img.example11{ width: 100%; height: 106px; margin-top: 700px; vertical-align: bottom; } </style> </head> <body> <div class="enter"> <button type="submit" name ="submit" class="auto-style4" > <img src="senden15.png" alt="確認画面へ" class="example8"/></button> </div> <!--画像調節可能にするためimg内にclassを作る--> <div class="center"><!--画像中央寄せのためdivで囲む--> <p><img src="senden30.png" alt="[写真]" class="example11"> </p> </div> </body> </html>
質問日時: 2021/06/24 12:39 質問者: pjdmgam
ベストアンサー
2
0
-
入力されたデータを送信するための「送信ボタン」を画像付きのボタンのコードを書いているのですが、付属画
入力されたデータを送信するための「送信ボタン」を画像付きのボタンのコードを書いているのですが、付属画像のように、 ボタンの大きさが横一杯に広がって灰色のようになって、しまうのですが、ボタンの大きさの縦幅と横幅の大きさを調節しても、適応されず困っています。 ボタンの画像自体の大きさは適応できています。 困っています。 コードは以下にあります。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" href="senden.css"> <style type="text/css"> /* 送信ボタンの位置 */ .auto-style3 { text-align: center;/* 送信ボタンを中央に配置 */ } /* 送信ボタンの代替画像位置 */ .auto-style4 { text-align: center;/* 画像を中央に配置 */ margin-top:87px ;/* 画像の上の余白 */ } /* 画像の大きさ調節 */ img.example8 { width: 50%; height: 100px; </style> </head> <body> <form action="form1.php" method="post"> <div class="enter"> <button type="submit" name ="submit" class="auto-style4" height="70px" width="40px"> <img src="senden15.png" alt="確認画面へ" class="example8"/></button> </div> </form> </body> </html>
質問日時: 2021/06/23 15:58 質問者: pjdmgam
ベストアンサー
1
0
-
付属画像の緑の背景の文字(お申し込みフォーム)という文字を横一杯に背景を保ったまま文字を上げたいので
付属画像の緑の背景の文字(お申し込みフォーム)という文字を横一杯に背景を保ったまま文字を上げたいのですが上手くいきません。 spanタグを使うと文字は上げられるのですが、背景が横一杯になりません。 横一杯の背景を保った状態のまま背景の文字を上げたいです。px等で自由に高さを調節する方法が知りたいです。 コードは以下にあります。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" href="senden.css"> <style type="text/css"> </style> </head> <body> <div class="title4"> ※注意事項をお読みいただきお申し込み下さい。 </div> <div class="box_css"> <p>・下記にある申し込みフォームより情報を入力して、お申し込み下さい。</p> <p>・申し込み後は、弊社より担当パイオニア、エンジニアより、ライン又はメール宛に連絡があります。</p> </div> <div class="title5">※お申し込みフォーム</div> </body> </html> ◎◎◎cssのコード(senden css) /* 下のタイトル */ .title4 { font-size: 37px; background-color:#f87902; color:rgb(248, 245, 245); text-align: center; font-weight: 700; } /* お申し込みフォームのタイトル */ .title5 { font-size: 37px; background-color:#63e02d; color:rgb(248, 245, 245); text-align: center; font-weight: 700; vertical-align: 90px; } /* 申し込みの注意事項ボックスのデザイン, */ .box_css{ width:395px; margin: 5em auto;/* ブロックレベルの中央寄せのためautoを用いる,text-align: center効かない */ border: solid 3px #f87902; background-color: rgb(255, 255, 255); padding-left: 14px;/* ボックス内左の余白 */ padding-right: 15px;/*ボックス内 右の余白 */ }
質問日時: 2021/06/22 11:01 質問者: pjdmgam
ベストアンサー
2
0
-
HTML 動画再生のサイズ設定
動画を再生するにあたり下記にて実現していますが、 画面ぴったりの大きさにならず(自分の環境下では画面よりも 少し大きい感じ) 画面内に表示される 最大化(?)の表示をクリックすると 動画アプリで再生が始まります これは視聴者の面倒に繋がるので ハイパーリンクをクリックしたと同時に、適切な大きさになるように したいのですが・・・ それと 自動で再生させたいです 現段階では自動では再生しません よろしくお願いします。 <html> <title>動画</title> <body oncontextmenu="return false;"> <video controls controlsList="nodownload" oncontextmenu="return false;"> <source src="動画のパス.mp4"></video> </body> </html>
質問日時: 2021/06/22 08:15 質問者: ppp2122
解決済
2
0
-
qooqでダークテーマ
bloggerのqooqでダークテーマを実装したいです。 https://phoodev.blogspot.com/2020/02/bloggerqooqqooq.html このようなサイトは見つけたのですが、切り替えのしかたがわかりませんでした。 切り替えをつけて色味は上のサイトのようにしたいです。
質問日時: 2021/06/21 19:45 質問者: mintadesign
解決済
1
1
-
html しおり
サイトにcookieを使用した「しおり」機能をつけたいのですが、 どうすればいいですか? できれば埋め込むだけで。
質問日時: 2021/06/20 08:40 質問者: mintadesign
解決済
1
0
-
html css phpが実行可能なツールを教えてください! 今私が使っているのがMAPSとVSCの
html css phpが実行可能なツールを教えてください! 今私が使っているのがMAPSとVSCの拡張子である。Live serverを使っているのですが、 MAPSを使い実行するとhtml phpは動作するが、cssが動作せず、Live serverを使うと、html css は動作しますが、phpが動作しません。 html css phpが実行可能なツールがあれば教えてください。(無さそうならサーバー借ります)
質問日時: 2021/06/19 22:38 質問者: フワフワニワトリ
ベストアンサー
3
2
-
html css 行ごと背景色の指定
表の背景色を1行ごと 1列ごとに設定したいのですが 先の設定の影響を受け、希望通りになりません table.tb_menu td:nth-of-type(1){width:170px;background-color: seagreen;} table.tb_menu td:nth-of-type(2){width:20px} table.tb_menu td:nth-of-type(3){width:170px;background-color: seagreen;} table.tb_menu tr:nth-child(1){height: 30px;} table.tb_menu tr:nth-child(2){height: 10px;background-color: white;} table.tb_menu tr:nth-child(3){height: 30px;} 2行目を白背景にしたいのですが 緑になってしまいます
質問日時: 2021/06/14 16:24 質問者: ppp2122
ベストアンサー
3
0
-
初めてhtmlを使ってHPを作ったのですが、上手くいきません。
スライドショーを表示させる仕組みを作りたいのですが、ウェブサイトに表示が何回に一回、下の画像のような結果になり、表示されません。(スライドショーは動いてます)全てコードは借り物なので、あまり理解できてないですが、レスポンスが悪いのか・・構造上問題なのか、以前は下に空白が出来ていて、それは解決はしたのですが、今回の問題が出て悩んいます。スライドはフェードに変えてます。 【CSS】↓headの所です↓--------------------------------------------------------------------------- <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slider').bxSlider({ auto: true, mode: 'fade', pause: 5000, }); }); </script> 【html】↓bodyの所です↓--------------------------------------------------------------------------- <div style="text-align:center;"> <div class="slider"> <img src="images/1gaszou.jpg"" alt="画像"> <img src="images/2gazou.jpg"" alt="画像"> <img src="images/3gazou.jpg"" alt="画像"> <img src="images/4gazou.jpg"" alt="画像"> <img src="images/5gazou.jpg"" alt="画像"> </div> </div> あと、これをjsフォルダーに入れてます→(jquery1.4.4.min) 画像1枚のサイズは500KB前後です、大きさは1200×820程度です サイト全てのサイズは100MBです、htmlだけなら8.10KBです。
質問日時: 2021/06/14 14:13 質問者: yunnyunn2
解決済
3
0
-
webデザイナー・エンジニアの方に質問です。 下記写真の様な、タブ切り替えの中に、無限スワイプを加え
webデザイナー・エンジニアの方に質問です。 下記写真の様な、タブ切り替えの中に、無限スワイプを加えたものを作りたいのですが、 この形式のHTML・CSS・JavaScriptを教えてください。 因みに、ピーチジョンのサイトを検証モードで見ましたが、HTMLは見つけらましたが、JavaScriptと CSSは見つけれませんでした。 宜しくお願い致します。 ※ピーチジョンのサイトURL https://www.peachjohn.co.jp/?bid=gsem_shimei_shamei_sp&gclid=EAIaIQobChMIzO7Tu_-S8QIVVKWWCh2i6QnjEAAYASAAEgIg3vD_BwE
質問日時: 2021/06/13 08:29 質問者: erina_812
ベストアンサー
1
0
-
html
backgroun:url ()の後に続く英文字の意味を教えてください。 background: url('') top center / cover no-repeat;
質問日時: 2021/06/12 08:50 質問者: 9うい9p
ベストアンサー
1
0
-
学校で学んだHTMLでホームページのソースコードを作成してるんですけど、デスクトップに保存したデータ
学校で学んだHTMLでホームページのソースコードを作成してるんですけど、デスクトップに保存したデータを開いたら写真は表示されますが、デスクトップで作成したフォルダの中に保存したデータを開いたら写真が表示されません。 こういう時、確認することは何ですか?
質問日時: 2021/06/11 12:44 質問者: オオチャン
解決済
4
0
-
解決済
3
0
-
HTML&CSSについて質問です。 Htmlで <div class="imag_test"></d
HTML&CSSについて質問です。 Htmlで <div class="imag_test"></div> とbodyに記述し、 cssで"imag_test"を呼び出して使う方法を教えてください。 開発環境はvscです
質問日時: 2021/06/06 19:17 質問者: フワフワニワトリ
解決済
2
0
-
HTML
HTMLのタグについての質問です ・空白の行を挿入するために<p></p>タグと<br>タグを記述して見比べてみたのですが、空白の間隔に差がありました。これは何故ですか? ・箇条書きを書くときにデフォルトだと各項目を1つ書くたび、自動的に改行がされますがこれはなぜですか? 以上2点についての回答をいただけると幸いです。
質問日時: 2021/06/05 13:45 質問者: dai学生
ベストアンサー
2
0
-
HTML CSS
HTMLでwebページを作っています。 箇条書きについての質問なのですが、 デフォルトの表示である ・〇〇 ・〇〇 ではなく, ・〇〇 ・〇〇 ・〇〇 ・〇〇 ・〇〇 ・〇〇 上記のように一行に複数の箇条書きを表示するやり方を教えていただきたいです。
質問日時: 2021/06/03 15:11 質問者: dai学生
ベストアンサー
1
0
-
付属画像の1794×400の画像の下の1794 ×200の高さを200pxにして表示させたいのですが
付属画像の1794×400の画像の下の1794 ×200の高さを200pxにして表示させたいのですが、高さを200pxに変更しても上の画像の高さが適応されてしまいます。上の画像 1794×400高さと幅はそのままで、下の画像の高さのみ変更するにはどうしたらよいでしょうか?.kodai2{ height: 200px;反映されません。 コード以下にあります。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title></title> <style> * { margin : 0; padding : 0; -webkit-box-sizing : border-box; box-sizing : border-box; } .box { height : 56px; width : 100%; background-color : #0fd; } .wrap{ width : 100%; display : -webkit-box; display : -ms-flexbox; display : flex; -ms-flex-wrap : nowrap; flex-wrap : nowrap; padding-bottom : 30px; } .wrap .wrap_inner_left { width : 300px; } .wrap .wrap_inner_left ul { width : 300px; } .wrap .wrap_inner_left ul li { color : #444; list-style-type : none; width : 300px; height : 30px; line-height : 30px; padding-left : 20px; border-bottom : solid 1px #53535352; background-color : #f6f4f4; } .wrap .wrap_inner_left ul li:first-child { border-top : solid 1px #53535352; } .wrap .wrap_inner_right { width : 100%; } /* トップの画像のスタイル */ .wrap .wrap_inner_right img { width : 100%; height: 400px; } .kodai2{ height: 200px; } /* 画像の下の右の太文字タイトル */ .mozi1{ font-size: 36px;/* 文字の大きさ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; margin-top: 19px;/* 上の余白 */ } </style> </head> <body> <div class="box">正方形</div> <div class="wrap"> <div class="wrap_inner_left"> <ul> <li>使い方・マニュアル</li> <li></li> <li></li> <li>翻訳機能</li> <li>英語</li> <li>中国語</li> <li>スペイン語</li> <li>フランス語</li> <li>ロシア語</li> <li>アラビア語</li> <li>a</li> <li>a</li> <li>ヘルプ</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>w</li> <li>s</li> <li>mmmm</li> <li>ログアウト</li> </ul> </div> <div class="wrap_inner_right"> <img src="https://placehold.jp/1794x400.png"> <div class="kodai2"> <img src="https://placehold.jp/1794x200.png"> </div > </div> </div> </body> </html>
質問日時: 2021/06/03 08:14 質問者: pjdmgam
解決済
2
0
-
鍵につけとけば亡くしたとき便利かな?
https://www.wish.com/jp/product/gps-tracker-car-real-time-vehicle-gps-trackers-tracking-device-gps-locator-for-children-kids-pet-dog-for-iphone-ipad-use-5eb4ef1da273d6257c76785e の商品ですが、鍵につけたいのですが、 どうやってスマホで確認が可能でしょうか? 宜しくお願い致します。
質問日時: 2021/06/02 20:30 質問者: nattukamu2
ベストアンサー
1
0
-
付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように 灰色のリストの右側の真ん中に3
付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように 灰色のリストの右側の真ん中に3行ほど文字を入れたいです。 コードは以下でです。 回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title></title> <style> * { margin : 0; padding : 0; -webkit-box-sizing : border-box; box-sizing : border-box; } .box { height : 56px; width : 100%; background-color : #0fd; } .wrap{ width : 100%; display : -webkit-box; display : -ms-flexbox; display : flex; -ms-flex-wrap : nowrap; flex-wrap : nowrap; padding-bottom : 30px; } .wrap .wrap_inner_left { width : 300px; } .wrap .wrap_inner_left ul { width : 300px; } .wrap .wrap_inner_left ul li { color : #444; list-style-type : none; width : 300px; height : 30px; line-height : 30px; padding-left : 20px; border-bottom : solid 1px #53535352; background-color : #f6f4f4; } .wrap .wrap_inner_left ul li:first-child { border-top : solid 1px #53535352; } .wrap .wrap_inner_right { width : 100%; } .wrap .wrap_inner_right img { width : 100%; } </style> </head> <body> <div class="box">正方形</div> <div class="wrap"> <div class="wrap_inner_left"> <ul> <li>使い方・マニュアル</li> <li></li> <li></li> <li>翻訳機能</li> <li>英語</li> <li>中国語</li> <li>スペイン語</li> <li>フランス語</li> <li>ロシア語</li> <li>アラビア語</li> <li>a</li> <li>a</li> <li>ヘルプ</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>w</li> <li>s</li> <li>mmmm</li> <li>ログアウト</li> </ul> </div> <div class="wrap_inner_right"> <img src="https://placehold.jp/1794x400.png"> </div> </div> </body> </html>
質問日時: 2021/06/02 11:29 質問者: pjdmgam
ベストアンサー
2
0
-
付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように 灰色のリストの左側の真ん中に3
付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように 灰色のリストの左側の真ん中に3行ほど文字を入れたいです。 コードは以下でです。 回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title></title> <style> * { margin : 0; padding : 0; -webkit-box-sizing : border-box; box-sizing : border-box; } .box { height : 56px; width : 100%; background-color : #0fd; } .wrap{ width : 100%; display : -webkit-box; display : -ms-flexbox; display : flex; -ms-flex-wrap : nowrap; flex-wrap : nowrap; padding-bottom : 30px; } .wrap .wrap_inner_left { width : 300px; } .wrap .wrap_inner_left ul { width : 300px; } .wrap .wrap_inner_left ul li { color : #444; list-style-type : none; width : 300px; height : 30px; line-height : 30px; padding-left : 20px; border-bottom : solid 1px #53535352; background-color : #f6f4f4; } .wrap .wrap_inner_left ul li:first-child { border-top : solid 1px #53535352; } .wrap .wrap_inner_right { width : 100%; } .wrap .wrap_inner_right img { width : 100%; } </style> </head> <body> <div class="box">正方形</div> <div class="wrap"> <div class="wrap_inner_left"> <ul> <li>使い方・マニュアル</li> <li></li> <li></li> <li>翻訳機能</li> <li>英語</li> <li>中国語</li> <li>スペイン語</li> <li>フランス語</li> <li>ロシア語</li> <li>アラビア語</li> <li>a</li> <li>a</li> <li>ヘルプ</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>w</li> <li>s</li> <li>mmmm</li> <li>ログアウト</li> </ul> </div> <div class="wrap_inner_right"> <img src="https://placehold.jp/1794x400.png"> </div> </div> </body> </html>
質問日時: 2021/06/02 08:06 質問者: pjdmgam
ベストアンサー
1
0
-
付属画像の右側のような配置にしたいのですが、上手くいきません。 ◎◎ 付属画像の左側が現在のコードの
付属画像の右側のような配置にしたいのですが、上手くいきません。 ◎◎ 付属画像の左側が現在のコードのwebでの表示画面なのですが、テーブル(灰色)の位置が上に行かず中途半端な位置になってしまいます。これをテーブルの幅や大きさを変えずに上げてたいです。 ◎◎ 画像が大きいせいか、画像がテーブル(灰色)にかぶさっています。これをテーブル(灰色)の大きさを一切変えずに、付属画像のように適切な位置に配置したいです。元の画像のサイズは幅1794、高さ1024の大きさです。 困っています。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" href="seo.css"> </head> <body> <div class="box">正方形 </div> <div class="mainlyrics1"> <img src="apurilyrics1.png"> </div> <table> <tr><td class="td-css1">使い方・マニュアル</td></tr> <tr><td class="td-css2"></td></tr> <tr><td class="td-css2"></td></tr> <tr><td class="td-css2">・・高度翻訳機能・・</td></tr> <tr><td class="td-css2">英語</td></tr> <tr><td class="td-css2">中国語</td></tr> <tr><td class="td-css2">スペイン語</td></tr> <tr><td class="td-css2">フランス語</td></tr> <tr><td class="td-css2">ロシア語</td></tr> <tr><td class="td-css2">アラビア語</td></tr> <tr><td class="td-css2">a</td></tr> <tr><td class="td-css2">a</td></tr> <tr><td class="td-css2">ヘルプ</td></tr> <tr><td class="td-css2">b</td></tr> <tr><td class="td-css2">c</td></tr> <tr><td class="td-css2">d</td></tr> <tr><td class="td-css2">e</td></tr> <tr><td class="td-css2">f</td></tr> <tr><td class="td-css2">g</td></tr> <tr><td class="td-css2">h</td></tr> <tr><td class="td-css2">w</td></tr> <tr><td class="td-css2">s</td></tr> <tr><td class="td-css2">mmmm</td></tr> <tr><td class="td-css2">ログアウト</td></tr> </table> </body></html> ◎◎◎cssのコード(seo css) /* 余白を無くすコード一番うえに記載で適応 */ body{ margin: 0px; } /* ヘッダボックスのデザイン */ .box{ height:56px; width:100%; background-color: rgb(0, 255, 221); } table { border-collapse: collapse; background-color:hsl(0, 9%, 96%); } .td-css1 { color: rgb(68, 68, 68); } .td-css2{ border-left-style:none; margin-left: 0%; color: rgb(68, 68, 68); } /* 線のデザイン */ table td { border: solid 1px #53535352; width: 300px; height: 30px; } /* 画像のデザイン */ .mainlyrics1{ height: 300px; width: 100px; margin-right: 100%; margin-left: 200px; margin-bottom: 0px; }
質問日時: 2021/05/29 09:04 質問者: pjdmgam
ベストアンサー
1
0
-
青緑色の一番上にあるボックスとテーブルの表の左側に少し余白が空いてしまうのですが、この余白を完全にな
青緑色の一番上にあるボックスとテーブルの表の左側に少し余白が空いてしまうのですが、この余白を完全になくしたいです。 青緑のボックス左側、上側、右側の余白width100%でも少し空きます。margin-left: 0%; padding-left: 0%; も記載しても変化ありません。 また、テーブルの左側の余白もなくしたいです。 付属画像の下の画像のように余白が無い状態にしたいです。 コードは以下です。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>お問い合わせ</title> <link rel="stylesheet" href="seo.css"> </head> <body> <div class="box">正方形 </div> <table> <tr><td class="td-css1">使い方・マニュアル</td></tr> <tr><td class="td-css2">・・高度翻訳機能・・</td></tr> <tr><td class="td-css2">(英語)</td></tr> <tr><td class="td-css2">(中国語)</td></tr> </table> </body></html> ◎◎cssのコード(seo css) /* ヘッダボックスのデザイン */ .box{ height:56px; width:100%; margin-left: 0%; padding-left: 0%; background-color: rgb(0, 255, 221); } /* 線と線の隙間をなくす */ table { border-collapse: collapse; background-color:rgba(237, 241, 240, 0.856); } /* 上部の線と左の線のみ非表示。 */ .td-css1 { border-top-style:none; border-left-style:none; } /* 左の線のみ非表示。 */ .td-css2{ border-left-style:none; margin-left: 0%; } /* 線のデザイン */ table td { border: solid 1px black; width: 300px; /*実線 1px 黒*/ text-align: center;/* 文字を中央に配置 */ }
質問日時: 2021/05/28 07:55 質問者: pjdmgam
解決済
1
0
-
クリッカブルMAP領域が分かる様にする設定は?
1枚の画像の上に、クリッカブルマップで複数のリンク個所を定義しているのですが、いまいち定義した箇所が分かりにくいので、何か定義した領域が分かる様に設定できないでしょうか? もし可能であれば、CSSなどで、マウスオーバー時などにopacityなどでうっすら色がついたり、borderでリンクの領域が分かる様にでいないでしょうか?色々とCSSを試すのですが、全く画像に何も反映されない状態で困っております。 できれば、Google Chromeのデベロッパーツールのスマホ表示の際にも、領域が確認できればと思いますが、スマホはマウスオーバーが無いので難しいでしょうか? アドバイスをお願いいたします。
質問日時: 2021/05/27 12:21 質問者: yuyukina
ベストアンサー
3
0
-
htmlでセルの値を取得して計算する方法が知りたいです。
HTML超初心者です。 宜しくお願いします。 <td><input name="始業時間" value="8:30" type="time"> </td> <td> <input name="終了時間" value="17:15" type="time"> </td> <td> <form onsubmit="return false" id="就労時間" oninput="result.value = time(終了時間.value) - time(始業時間.value);"> </form> <output name="result" form="就労時間">0</output></td> <td><br> 上記は勤怠の始業時間と終了時間の入力値から、就労時間を計算して表示する様に私が書いたのですが、うまく行きません。 就労時間は7.5(時間)の様に時間で出したいです。 どうすれば始業時間と終了時間の入力値から、就労時間を計算して時間表示出来るようになるか、 どなたかご教授頂けないでしょうか? 宜しくお願いします。
質問日時: 2021/05/27 10:51 質問者: ce-k氏
ベストアンサー
1
0
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
最新のコラム/記事
-
マッチングアプリで出会ったカップルは成婚率が高い!?結婚カウンセラーに聞いてみた
パートナーとの出会いの場として、もはや主流となったネット婚活やマッチングアプリ。中でも手軽に登録できるマッチングアプリは、10代から50代と幅広い年代が利用している。一方で、“相手の目的が投資関係の詐欺や...
-
メダロット:第250話「Vol.250※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
メダロット:第249話「Vol.249※期間限定公開」
天才メダロッター六葉カガミの戦いを描く「メダロット再~リローデッド~」(漫画:伯林、監修:イマジニア)、20周年を迎えた『メダロット』が新たなストリーでココに再起動!!★全話無料で読める、週刊メダロット通信...
-
日本古来の伝統工芸「金継ぎ」で修復した食器は前と同じように使えるの?
大切にしている食器が割れてしまったら、きっと誰もが「元に戻したい」と願うだろう。「教えて!goo」にも「割ってしまったお気に入りの食器を復活できる?」という質問があり、最適な方法について様々な意見が寄せら...
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
HTMLです。画像をHTMLで表したいで...
-
HTML ul li で横並びにナビゲーショ...
-
テーブルの行を折りたたみたいので...
-
テーブルのセルデータを自動改行さ...
-
css初心者 フレックスボックスの適...
-
角丸画像の背景色を透明にしたいです
-
HTMLでこの画像を表示したいです 教...
-
静止画画像をクリックすると音楽が...
-
疑似要素で背景画像に指定したSVG画...
-
メモ帳の段落の揃え方
-
WEBページを強制的に横画面で見るよ...
-
HTMLのdlとul どちらが正しいと思い...
-
HPに文章で改行はすべてBRタグとか...
-
列のどこをクリックしてもソートで...
-
スマホ(android)のタッチパネル、...
-
コードを書いて下さい( ; ; )写真...
-
CSSで謎の現象
-
テーブルタグのセルの幅の一部だけ...
-
ウェブサイトにアップされているPDF...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたいので...
-
WEBサイトの作成で、imgタグには現...
-
webデザインの勉強で、HTML/CSSから...
-
私、Paiza Cloudやっているのだけど...
-
静止画画像をクリックすると音楽が...
-
css初心者 フレックスボックスの適...
-
角丸画像の背景色を透明にしたいです
-
WEBページを強制的に横画面で見るよ...
-
メモ帳の段落の揃え方
-
テーブルタグのセルの幅の一部だけ...
-
iPhoneで HTMLファイルを閲覧
-
先日ウェブデザイン技能検定三級を...
-
指定した演算を実施の結果を表示さ...
-
テーブルのセルデータを自動改行さ...
-
HTMLタグのあるCSVファイルを利用す...
-
スマホで、左右にスワイプしてウェ...
-
指定した演算を実施の結果を表示さ...
-
CSSファイルの日本語コメントが文字...
-
HTMLで特定の文字だけ色を変えたい...
おすすめ情報