回答数
気になる
-
html select optionが左寄せにならない
selectのoptionを動的にするため、配列をv-forにて表示させているのですが、 左側に空白部分ができてしまいます。 理由と改善方法を教えてください。 ちなみにコードは次のとおりです。 ●javascript var vm = new Vue({ data:{ List:'' }, watch:{ selectken:function(kenCD){ (都道府県コードの値取得時に該当地区の配列を作成しています。) this.List=[]; myArray=[null,'AAA市','BBB市'];//このような配列を作成。 this.List=myArray; }); }, }, ●HTML <select v-model="SelectTiku"> <option v-for="option in List" v-bind:value="option"> {{option}}</option> <option >CCC市</option>///これはテスト用 </select> 画像のとおりの結果になってしまします。 テスト用にhtmlに直接書いた場合はきちんと左寄せに表示されてます。 よろしくお願いします。
質問日時: 2020/03/09 13:49 質問者: isa_1484
解決済
2
0
-
Sublime Text でhtmlの学習環境ができない
MacBook Pro13インチのパソコンを購入しました。 htmlを学習したいためです。 IT超初心者で、ダウンロードは出来たのですがhtmlを書く環境の手順が解りません。 デスクトップに○○を用意とか調べても解らないです。 ドットインストールというVSCODEは、その通りやれば半分位はできたのですがSublime Text でhtmlを書く環境はどうやってやればいいのですか? 本当に、初心者の質問で恐縮です。 解りやすく、手順ご教授頂きたいです。
質問日時: 2020/03/06 15:47 質問者: 八龍
解決済
1
0
-
HTMLの画像の張り方です
ご覧の通りです。JPG画像が上手く貼れません。 <img src="lion.jpg”>で入力間違えてないはずですがなにがいけないのでしょうか?ご指摘頂ければ助かります。
質問日時: 2020/03/06 04:14 質問者: だいだい0829
ベストアンサー
2
0
-
HTMLの画像の張り方です
こんにちは。プログラミング勉強中に困ったのでご質問させていただきます。画像通りプログラミングしたところ画像が小さい四角?しか出なく画像が上手く反映されません。全角とかのチェックは入 れました。なにが原因でしょうか?アドバイス頂ければ助かります。
質問日時: 2020/03/02 00:06 質問者: だいだいだい0829
解決済
5
0
-
Webサイトretinaディスプレイのcss
Webサイトを作るときにretinaについていまいちわかりません。 ネットで調べたのですがよくわかりませんでした。以下の確認と質問があります。 確認1 通常のディスプレイに比べて細かく表示できる、だから幅が300pxの画像を表示しようとすると、600pxに引き伸ばされるため300pxの画像を綺麗に表示させるために600pxの画像を用意しないといけない。 確認2 「デザインはiphoneXの場合375px の2倍の750pxでデザインする」とサイトに書かれていました。750pxでデザインを作成する意図は画像の解像度に合わせるという認識であってますか? もしそうだとしたらコーディングををするときデザインからフォントサイズや要素の幅や高さを自分で計算しないといけない。 質問1 Retinaの対応としては画像だけでいいのでしょうか?フォントなどは綺麗に表示されるだけで、大きさは変わらないということであっていますか? よろしくお願いいたします。
質問日時: 2020/02/25 11:51 質問者: ookey
ベストアンサー
1
0
-
この記述の左上の画像を右にずらしたい時は、どういった記述をすれば右に寄せれますか? 分かる方お願いし
この記述の左上の画像を右にずらしたい時は、どういった記述をすれば右に寄せれますか? 分かる方お願いします。 <body> <div style="background-color: #dcdcdc;"> <hr color="red" size="3"> <img style="float: left" src=" http://gameapp-5ap.com/wp-content/uploads/2020/02/dedede.png" width="100" height="100"> </body></html> <font size="3"> <strong> 14文字までのタイトル </font> <font size="3"> <strong> 14文字以降のタイトル </strong> </font> </font> <font size="1"> 基本無料 </font> <font size="1"> 17文字までのジャンル </font> <h6> <font size="4"> <span> <font color=#ff0000> <strong> 見出し </strong> </font> </h6> <div align="center"> <div class="movie-wrap"> <video width="280" height="250" playsinline="" autoplay="" muted="" loop=""> <source src=" http://gameapp-5ap.com/wp-content/uploads/2020/02/dedede.mp4 "> </video> </div> </div> </div> </div> </span>
質問日時: 2020/02/20 07:23 質問者: -こういち-
解決済
2
0
-
Androidでfirefoxだと動くのにChromeだと動きません
iframeでセレクトボックスからどのローカルHTMLに飛ぶかをwindow.openで書き換える方法で作ろうと思ったのですが、WindowsのChromeやAndroidのFirefoxでは動いたのですがAndroidのChromeでは動きません。 <html> <head> <form name="f1"> <p> <select name="Select" onChange="HTML()"> <option value="nullPage.html">選択してください</option> <option value="ASelect.html">A</option> <option value="BSelect.html">B</option> <option value="CSelect.html">C</option> </select> </p> </form> <iframe name="ifrm1" src="nullPage.html" width="1250" height="6000"scrolling="no" style="border:none;" frameborder="0"></iframe> <script> function HTML(){ window.open(document.f1.Select.value,"ifrm1"); } </script> </html> AndroidのChromeで動作させるにはどのようになおすとよいのでしょうか?
質問日時: 2020/02/14 14:21 質問者: ハルノブ
ベストアンサー
2
0
-
解決済
2
0
-
プログラミングの勉強について。
WEBデザイナーを目指している過程で、HTML/CSSを学習し終えて今、javascriptの勉強をしています。 ドットインストールなどを見て手を動かしてみますが、正直言ってとてもこなせる気配がしません。 基礎を抑えてもいざ、アウトプットするとなるとどこに何を書いたら良いのかわからず結局すぐに答えを見てしまいます。 また、教材などを見ていてもプログラムが長くなりすぎると途中から、もはや何をやっているのかがわからなくなります。 皆学び始めは無知の状態からスタートするのは至極当然のことだとは思いますが、正直言ってかなり難しいです。 そつなくこなせるようになるにはやはり日々、コードに触れて意味を理解するのが無難なのでしょうか? おすすめの勉強法などがあれば、教えていただけると幸いです。
質問日時: 2020/02/12 19:03 質問者: wakuwaku_gorori3
解決済
1
0
-
CSSアニメーションの文字について
画像の様な文字を透明にして背景に画像を挿入する方法の他に、グラデーションなどの、web制作で使えそうな文字を動かしたりするCSSを教えてください。
質問日時: 2020/02/12 09:44 質問者: 松田琉希
ベストアンサー
1
0
-
今の文字を4センチぐらい下げるには?
よくわからないのですが! 問題のプログラムは以下ですが! HTMLとCSSと伝導させています。 それで、やっと文字のサイズをCSS側で変更ができました。 あと少しですが、 今度はその文字を4センチぐらいさげるには、どんなプログラム 組めばいいのでしょうか? #index p { font-size: 50px;/*私の○○作品集を皆様に、お見せすることができ、とても光栄です。*/ color: #ffffff; } 以上宜しくお願い致します。
質問日時: 2020/02/10 07:04 質問者: Campus2
ベストアンサー
5
1
-
HTML CSS 文字化け
Mac ProとGoogle ChromeとSublimeTextで HTML-CSSホームページを作成しています。 自宅のMac Proのパソコンだとしっかり作動し 問題ないのですが、 IO-DATAとインターネットエクスプローラを使い 表示しようとすると文字化けが起こります。 下記に添付している1枚目の画面は UTF-8でIOの方でも問題無く表示されるのですが 2枚目(2〜4枚目までほぼ同等の作り)は UTF-8で文字化けしてしまいます。 文字コードを消して、エンコードから日本語自動選択にすると表示されるのですが、何が起こっているのでしょうか?ご回答いただけると幸いです。どうぞよろしくお願いします。 以下にタグページ1、2枚目を添付します。 文章やタイトルは省略させた形にしています 1枚目html <!DOCTYPE html> <html> <head> <title>題名 </title> <meta charset="UTF-8"> <link rel="stylesheet" href="untitledEX.css"> <style type="text/css"> #photo { width: 1440px; height: 900px; margin: 0 auto; text-align: left; overflow: hidden; position: absolute; top: 0px;left:0px } #photo img { top: 0; left: 0; position: absolute; } </style> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#photo'; var fadeSpeed = 1600; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head> <body> <div id="photo"> <img src="img_2404.jpg" width="1440" height="800" alt=""> <img src="img_2575.jpg" width="1440" height="800" alt=""> <img src="img_2321.jpg" width="1440" height="800" alt=""> <img src="img_2592.jpg" width="1440" height="800" alt=""> <img src="img_4167.jpg" width="1440" height="800" alt=""> </div> <br> <h1></h1> <h2> 副題<br> 副題 </h2> <div style="background-color: black;width: 1px;height: 830px; position:absolute; top: 800px;left:650px; "></div> <div style="background-color:black;width:860px;height:1px; position:absolute;top: 1545px;left:580px;"></div> <div class="pho"><img src="img_4176.png" width="320"height="550"></div> <div class="p1"> 文章 </div> <a href="index2.html"><p style="position:relative; "><div class="photo2"><img src="img_2611.jpg" width="350" height="200"></div><br/> <span style="position:absolute;top:1760px;left:205px;width:145px "> <div class="pp1"> リンク1</div></span></p></a> <a href="index3.html"><p style="position:relative; "><div class="photo3"><img src="img_2455 3.jpg" width="350" height="200"></div><br/> <span style="position:absolute;top:1760px;left:650px;width:145px "> <div class="pp2">リンク2</div></span></p></a> <a href="index4.html"><p style="position:relative; "><div class="photo4"><img src="img_2811.jpg" width="350" height="200"></div><br/> <span style="position:absolute;top:1750px;right:300px;width:145px "> <div class="pp3">リンク3</div></span></p></a> <div class="top">大タイトル</div><div class="top2">大タイトル</div> </body> </html> __________________________ 2枚目html <!DOCTYPE html> <html> <head> <title>題名 </title> <meta charset="UTF-8"> <link rel="stylesheet" href="untitled2.css"> <body> <h1>大タイトル</h1> <h2>中タイトル</h2> <div class="p1">前置き</div><br><br> <h3>小タイトル</h3> <img src="img_2321.jpg" width="700" height="600"> <div class="p2"> 文章 </div> <div class="box1">文章</div> <br><br><br><br><br><br> <h4>小タイトル</h4> <div align="right"><img src="img_2645.jpg" width="700" height="600"></div> <div class="p3"> 文章 </div><br><br><br><br><br> <h5>小タイトル</h5> <img src="img_2477.jpg" width="700" height="600"> <div class="p4"> 文章 </div> <div class="box3"> 文章 </div><br><br><br><br><br> <div class="container"> <a href="indexEX.html" class="btn-animation-02"><span>ホームに戻る<span></a> </div> </body> </html>
質問日時: 2020/02/06 21:57 質問者: pippi_
ベストアンサー
3
0
-
行間隔の調整
全体の行間隔と見出しh4をcssで次のように作っています。 body {line-height:1.7;} h4 { color:#007733; font-weight:900; } これを次のように使っています。 <h4> 1. 概要 </h4> この「1. 概要」の行とその次の行との行間隔が広すぎるので狭くしたいのですが、どうすればいいでしょうか。
質問日時: 2020/02/06 16:10 質問者: marilyn98
ベストアンサー
2
0
-
フォントのサイズが変わりません、何でしょうか?
プログラムは以下です。 宜しくお願い致します。 <div id="wrap"> <div class="content"> <p><font color="#00ff00"><FONT size="7"私の○○絵作品集を皆様に、お見せすることができ、とても光栄です。></FONT></p> </div> </div>
質問日時: 2020/02/06 07:09 質問者: Campus2
ベストアンサー
3
0
-
スマホの画面表示でdlタグの文字が小さく表示される
<dl>でリストを作りました。スマホの画面だとなんでか文字が小さく表示されます 質問ですが、<dl>が小さく表示されるのでしょうか? それともほかの要素すべてが拡大して表示されているのでしょうか? 二つ目の質問です。解決するためにはCSSでどのように書けばいいでしょうか?
質問日時: 2020/01/28 15:29 質問者: hidari88
ベストアンサー
2
0
-
htmlホームページ作成について質問です
ほんと序盤で躓いてしまったんですけど、最背面に画像を表示するために <div style="background: url(backgrounds_001.jpg);"> これを使ったのですが実行しても表示されないのでなんでかなあと考えておりました。パスの指定の仕方がおかしいのですかね? わかる方よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <title>PAGE1</title> </head> <body> <div style="background: url(backgrounds_001.jpg);"> <p> </p> </div> <center><h1>My Web Page</h1></center> </body> <html>
質問日時: 2020/01/25 17:12 質問者: yossyssoy
ベストアンサー
4
0
-
ProgateのHTMLとCSSのコースを一通り学習したぐらいで模写できるWebページないでしょうか
ProgateのHTMLとCSSのコースを一通り学習終わったのですが、これだけ勉強終わって、今から超簡単なWebサイトから模写していこうと思いますが、HTML&CSSコースだけ終了していて、 模写できるサイトあるでしょうか? やはりprogateのHTML&CSSコースだけでは、模写できるサイトないでしょうか? Javascript」やJのHTMLとCSSのコースを一通り学習終わったのですが、これだけ勉強終わって、今から超簡単なWebサイトから模写していこうと思いますが、HTML&CSSコースだけ終了していて、模写できるサイトあるでしょうか? やはりprogateのHTML&CSSコースだけでは、模写できるサイトないでしょうか? Javascript」やJQueryなども学ばないと、模写するのは難しいでしょうか? ProgateのHTML&CSSコースだけ終了した者が模写できるサイトあれば、教えて欲しいです。 アドバイスよろしくお願いします。
質問日時: 2020/01/24 15:51 質問者: aozora50
解決済
1
0
-
[HTML]プルダウンメニューの横幅固定について
HTMLで、プルダウンメニューの横幅が広がらないように固定したいです。 OPTIONタグに1つでも長い文字列が入っていると、 最大文字数に合わせてプルダウンメニューが広がってしまいます。 SELECTやOPTIONに「width: XXpx;」とサイズ指定すると、 プルダウン項目の横幅は固定できても プルダウンをクリックした際に出てくるプルダウンメニューの横幅は伸びたままでした。 JQueryのプラグイン等に頼らず、 通常のCSSやJSで対処したいのですが可能でしょうか?
質問日時: 2020/01/23 10:42 質問者: Dr.SE
ベストアンサー
2
0
-
CSSを使用して段落?リスト?を調整したい
質問させて頂きます。 件面うまく思いつかず申し訳ありません… HTMLとCSSを用いて下記のように表示させたいと考えているのですがうまいやり方が分からず困っています。 ご存じの方いらっしゃいましたら教えて頂けると幸いです。 --------------------------------------- 名 前:たかし 年 齢:19歳 出身地:東京 趣 味:食べ歩き 特に○○が好き 特 技:料理 バスケット --------------------------------------- 上記のように項目(左側)と実際の内容(右側)の幅をきれいに揃えて表示したいと考えています。 なにより、同じ項目で二行目以降も同じ位置から文字が始まるようにしたいです。 よろしくお願いいたいます。
質問日時: 2020/01/22 13:03 質問者: non05410
ベストアンサー
2
0
-
スマホ対応ウェブサイトの横幅の大きさ
主にスマホで見られるウェブサイトを作っています。 いろいろ調べたのですが、現在手元にあるP20liteでテストしています P20liteの画面サイズは2280×1080ピクセルです しかしp20liteからグーグルクロームでwebサイトを見た場合、横幅320ピクセルのようです それで今主流のi-phoneだと横幅375ピクセルにするとよい、とウェブデザインのサイトに書いてありました。 私のp20liteはピクセルだと画面が小さすぎるような気がするし、 i-phoneのブラウザ画面が横幅が375ピクセルもあるのが信じられません 横幅320だとかなり古い機種のスマホだと書いてあるのですが、 なぜ私のp20liteはブラウザ表示横幅320ピクセルなのかわかりません。 320ピクセルであっているんでしょうか?教えてください
質問日時: 2020/01/20 20:50 質問者: hidari88
ベストアンサー
2
0
-
HPのgoogleフォントサービスですが日本語フォント
https://fonts.google.com/ 日本語はありますか!? 宜しくお願い致します。
質問日時: 2020/01/19 19:10 質問者: Campus2
ベストアンサー
2
0
-
Webページ作成ソフトを使わず、共通部分の効率的な管理方法はありますか?
Webページの共通部分の管理で、サーバー上のファイルを直接置換できますか? ご覧いただきありがとうございます。 Webページの広告やメニューバーなどの共通部分の変更を 置換ソフトで対応しようと思っています。 (SSIやPHPなどの言語を使用しないことにこだわりたい からです。) 自分のパソコン(ローカル)上で、例えば1000ファイルを 置換するとなると、自分のPCなので、割合早く置換が完了 するのはわかります。 しかしWebページはレンタルサーバーへ転送する必要があり ます。 ローカル上で1000ファイルを置換して、それをサーバーへ 転送、上書き保存されるという流れなのかと思います。 が、いかんせん手間がかかるので、サーバー上の1000ファイ ルを直接置換する方法というのもあるのでしょうか? それでも手間がかかるのは変わらないと思いますが・・・ DreamweaverやExpression Web4などは、テンプレート機能 やダイナミックテンプレート機能などがありますが、それら は各ページの共通部分を変更したら、変更した箇所だけの必 要最低減の手間で1000ファイルを更新してくれるのでしょう か? Webページ作成ソフトのその辺りの仕組みがわからないもので ・・・ しかし1000ファイル=1000ページとなると、使いものになら ないくらいebページ作成ソフトの動作が重くなるとも聞きます。 Webページ作成ソフトを使わないで置換ソフトで共通部分を変 更する方法ですと、いちいち全部のサーバー上のファイルを全 上書きする必要があるということですよね? 1000ファイル全てが同じカテゴリーではないので、このカテゴ リーは60ページ、このカテゴリーは40ページと、ある程度は小 分けになります。 それでも1000ファイルを置換することには違いありませんが、 小分けすることによって、今日は200ページ、明日は300ページ というようなことはできると思います。 Webページ作成ソフトは、とあるページの1箇所を変更した場合、 いちいち1箇所を変更したページのファイルを全上書きしている わけではないのですよね? ですので、1000ページのファイル管理は、実質的にFTPソフトが 担当ということになります。 もっと効率的なページ管理方法はありますでしょうか? それですと、どうしてもSSIやPHP、javaに頼るしかないでしょう か? どうかいい案を授けてくださいまし。 よろしくお願いいたします。
質問日時: 2020/01/15 19:55 質問者: tomoaki75
解決済
3
0
-
Webサイト作成の勉強をしていますが、作りたいものが思い浮かばず、アウトプットの勉強ができません
今私は、Webサイト作成やプログラミングを勉強しようと、progateのHTMLとCSSから勉強始めて、そちらは一応学習終わったのですが、アウトプットのためになにかホームページなど作りたいと思いますが、どんなもの作りたいとかアイデアもなく、ここから先に進めていません。 インプットの勉強ばかりせず、自分で作ってみるなどのアウトプットの勉強が大事だと皆さん言われますが、自分で作るとなるとどうしたらいいか悩んでし待ってます。 情けないです。 皆さんWebサイト作成とか勉強したとき、初めて自分で作ってみる時などどのようにされていましたか? やはりWebサイトの勉強始める前から、こんなもの作ってみたいとか何かある程度あって、勉強始められたのでしょうか? 初歩的なこと質問して申し訳ございません。 教えていただけないでしょうか? よろしくお願いします。
質問日時: 2020/01/15 17:41 質問者: aozora50
解決済
1
0
-
他のサイトのホームページのccsのコードなのですが、htmlの用紙にこのソースコードを貼り付けても、
他のサイトのホームページのccsのコードなのですが、htmlの用紙にこのソースコードを貼り付けても、ccsの効果が適用されないのですが、どうしたら良いでしょうか?初心者です。 @media screen and (max-width: 901px) .font25 { font-size: 20px; } .mw470 { max-width: 470px; } .blue { color: #32AAD2; } .w85 { width: 85%; } .font25 { font-size: 25px; font-size: 1.563em; } .cm { margin-left: auto; margin-right: auto; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } user agent stylesheet div { display: block; } body { overflow: hidden; font-size: 1em; font-size: 16px; line-height: 1.5; font-family: メイリオ, Meiryo, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', Arial, Verdana, sans-serif; } user agent stylesheet html { color: -internal-root-color; }
質問日時: 2020/01/09 17:56 質問者: hayosato
解決済
1
0
-
ホームページ初心者です。入力ホーム作りたくて、人のwebサイトのソースコードをコピーして、自分のホー
ホームページ初心者です。入力ホーム作りたくて、人のwebサイトのソースコードをコピーして、自分のホームページ作成ソフトに貼り付けたのですが、 下の画像のように左側のような白黒の入力ホームになってしまいます。右側のようにしたいのですが、どうしたら良いでしょうか。 12行目のソースコードには<div class="mw470 w85 cm essential blue font25">と書いてあるのですが適用されていないのはなぜでしょうか?また適用するにはどうしたら良いでしょうか? 以外コピーしたソースコードです。 </html> <div class="contents"> <form action="./cart/check.php" method="get" accept-charset="utf-8" autocomplete="off"> <input type="hidden" name="c" value="wa001"> <input type="hidden" name="uc" value="zqv0832"> <input type="hidden" name="site_id" value="sumaren_info_sttoken98"> <div class="mw470 w85 cm essential blue font25"> <div> <div class="b lh1_2">名前</div> <input type="text" name="name" id="name" value=""> <div class="err_msg"></div> </div> <div> <div class="b lh1_2">フリガナ</div> <input type="text" name="name2" id="name2" value=""> <div class="err_msg"></div> </div> <div> <div class="b lh1_2">電話番号</div> <input type="text" name="tel" id="tel" value=""> <div class="err_msg"></div> </div> <div> <div class="b lh1_2">メールアドレス</div> <input type="text" name="email" id="email" value=""> <div class="err_msg"></div> </div> <script> $(window).on('load', function(){ // セレクトボックス初期値 $('#pay').val(""); }); </script> <div> <div class="b lh1_2">決済方法</div> <div class="wrap"> <select name="pay" id="pay"> <option value=""></option> <option value="クレジットカード">クレジットカード</option> <option value="銀行振り込み">銀行振り込み</option> </select> </div> <div class="err_msg" id="pay_err"></div> </div> </div>
質問日時: 2020/01/09 16:02 質問者: hayosato
解決済
3
0
-
ホームページの2つの画像の縦のすき間を無くしたいです。初心者です。 やり方を調べてコードを入力しても
ホームページの2つの画像の縦のすき間を無くしたいです。初心者です。 やり方を調べてコードを入力してもすき間がなくなりません。以外コードです。詳しい方コードを書いていただけないでしょうか? <body> <p> <img alt="a" height="907" src="file:///C:/Users/hayao%20sato/Pictures/hp0000/ビジネス01.png" width="1516" /> <img alt="b" height="949" src="file:///C:/Users/hayao%20sato/Pictures/hp0000/ビジネス02.png" width="1516" /> </body>
質問日時: 2020/01/09 12:36 質問者: hayosato
ベストアンサー
5
1
-
サーバー上のHTMLファイルをダウンロード
初めまして。 以前仕事で参考にしていたサイトがあるのですが、サイトリニューアルによって以前の記事へのリンクがなくなり、記事を見ることができなくなってしまいました。 サーバー上に過去記事のHTMLファイルが残っていればダウンロードすることで過去記事を見ることができると思うのですが、そのやり方がわかりません。サーバー上の一括HTMLダウンロード、もしくは過去記事を見る別の方法があればご教授いただければと思います。
質問日時: 2020/01/07 17:53 質問者: なかなかなかじ
ベストアンサー
3
0
-
HTML 箇条書きに、左余白
DWのCCを使っています。箇条書きをしてみると、明らかに左端に余白ができています。 インスペクトモードでは、何も現れません。が、確実に見逃せないほどの余白ができています。 段落などでは、左余白はなく、詰めて表示されています。 テンプレートや該当HTMLについて、CSSなどの記述を見ても、箇条書きやその他の関わる領域に左余白の記述はありません。 何か原因が考えられるでしょうか。
質問日時: 2019/12/31 22:20 質問者: reachedduty
ベストアンサー
1
0
-
webサイト1ページ仕上げるのに、どれくらい時間がかかりますか?
どれだけシンプルか、凝っているかにもよるかとは思いますが、webサイトの1ページを作成するのに、皆さんどれくらい時間がかかりますか? HTMLやCSS初心者の私が、会社のホームページの更新に携わることになりました。 年末年始の休暇を使って、参考書片手に勉強しています。 以前、プログラミングの学校に行った際、講師の方より「既存のサイトを模写すると身につく」と聞きました。 なので、これから会社のホームページの画像や文章、構成などを模写してみようと思います。 ただ、一つネックなのが、会社ホームページにはCMSが使われています。 初心者の私は、CMS=プラモデルのキットや麻婆豆腐の素のように、必要な材料を集めてくれたものだと理解しており、付属の説明書通りに作業すれば、簡単に完成できるツールだと思っています。 ※もし間違っていたらご指摘ください。 会社のホームページには、当然他部署のページも複数あります。 ページの最上部に商品名、その次に画像、その次に説明文など、ある程度共通した構成となっており、この辺が恐らくCMSで決められている部分なんだと思います。 「商品を買う」ボタンにしても、ボタンのデザインや色、サイズなどがCMSで決められていて、下手に操作すれば、他部署とは違うデザインになってしまうと思います。 要は、<h1>や<p>を使えば、私のように参考書でちょっと勉強したレベルの人にも、ある程度は作れてしまうと思うのですが、それから先のCMSなど細かな取り決めが理解できておらず、苦戦しそうです。 以前、仕事中に更新作業を行っていた際に、単に文章を追加したいだけだったのに、なぜか他のページの構成が崩れてしまう事があり、なぜそうなってしまうのかの原因がわかるところまで行きついていません。 単にテキスト入力をするだけなら、そんなに時間もかからないと思いますが、普通はその後画像を入れたり、色を変えたり、アコーディオンやタグを追加するなどあると思うので、意外と時間がかかるのではと思います。 皆さんどうですか?
質問日時: 2019/12/30 12:18 質問者: jamfruits
解決済
3
0
-
html 画像表示と同時にmp3を自動再生したい
お世話になっております。 表題の内容を実現したいとおもいますが、 最新のchromeで、<audio>タグなどいろいろためしましたが、自動再生させることができません。 どんなやり方でも、難しいのでしょうか。 ご教授いただけましたら、幸いです。
質問日時: 2019/12/28 12:45 質問者: coral_japan
ベストアンサー
2
0
-
HTMLの解説お願いします
<p class="お正月"><c:out value="${お正月}" /></p> classとvalueと$の意味がわかりません。
質問日時: 2019/12/28 09:31 質問者: lfanjlarbenlf
解決済
2
0
-
スライドショウ画像に絶対配置で文字を配置しているのですが、スマホなどで文字が消えてしまう。
Bootstrap のUIキットを利用してWEBサイトを制作しています。 TOPページのスライドショウ画像に文字を乗せているのですが、 スマホや画面の小さいデバイスの際に、文字が消えてしまいます。 絶対配置で配置しているのですが、数値を調整しても文字が表示されません。 <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> </ol> <div class="carousel-inner shadow-sm rounded"> <div class="carousel-item active"> <img class="d-block w-100" src="assets/img/type.png" alt="First slide"> <div id="carousel-caption-1st" class="carousel-caption d-none d-md-block"> <h1 class="text-right"><strong>これは</strong><br /> <strong>スライド画像1枚目です。</strong></h1> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="assets/img/park.png" alt="Second slide"> <div id="carousel-caption-2nd" class="carousel-caption d-none d-md-block"> <h1 class="text-right"><strong>これは</strong><br /> <strong>スライド画像2枚目です。</strong></h1> </div> </div> </div> </div> CSSはこんな感じです。 数値を調整をしながら表示を試みています。 /*スマホのたての時(表示されない) */ #carousel-caption-1st { position: absolute; right: 5%; top: 20px; left: 5%; z-index: 10; padding-top: 10px; padding-bottom: 5px; color: #FFF; text-align: right; } #carousel-caption-2nd { position: absolute; right: 5%; top: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #FFF; text-align: right; } /*576pxスマホ横(表示されない)*/ @media (min-width: 576px) { #carousel-caption-1st { position: absolute; right: 5%; top: 10px; left: 15%; z-index: 10; color: #FFF; text-align: right; } #carousel-caption-2nd { position: absolute; right: 5%; top: 10px; left: 15%; z-index: 10; padding-top: 5px; padding-bottom: 5px; color: #FFF; text-align: right; } } /*768px以上タブレット横(表示されます)*/ @media (min-width: 768px) { #carousel-caption-1st { position: absolute; right: 5%; top: 250px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #FFF; text-align: right; } #carousel-caption-2nd { position: absolute; right: 5%; top: 80px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #FFF; text-align: right; } } /*992x以上PC小型(表示されます)*/ @media (min-width: 992px) { #carousel-caption-1st { position: absolute; right: 5%; top: 350px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #FFF; text-align: right; } #carousel-caption-2nd { position: absolute; right: 5%; top: 120px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #FFF; text-align: right; } } /*1200px以上大型スクリーン(表示されます)*/ @media (min-width: 1200px) { #carousel-caption-1st { position: absolute; right: 5%; top: 350px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #FFF; text-align: right; } #carousel-caption-2nd { position: absolute; right: 5%; top: 120px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #FFF; text-align: right; } } Topの部分を調整すれば表示されるとは思っていたのですが、そうもいかず悩んでいます。 宜しくお願いいたします。
質問日時: 2019/12/20 23:38 質問者: eccschool
ベストアンサー
1
0
-
CSS要素の場所が安定しません。
CSS要素の場所が安定しません。 サイトに文字の表記をして、以下のCSSで配置をしたのですが、場所が安定しません。 ブラウザをある程度まで、狭めると、下に移動しだしたり、 @media などで、スマホサイズを指定しても Googlechromeの検証で、色々なサイズのスマホで見てみると場所が移動してしまいます。 CSSはこんなかんじです。 .ta { position: absolute; top: 300px; left: 300px; max-width: 100%; display: inline-block; min-width: 400px; height: 80px; color: #3333333; text-align: center; font-weight: bold; font-size: 14px; color: #c650de; background: #dede50; } これからどうすればこの状態にとどまってくれるのでしょうか? ちなみにCSSが .t{ padding: 10px 20px 30px;} } となっている文字の隣にずっと表示したい注意書きです。 どうかよろしくお願いします。
質問日時: 2019/12/19 21:34 質問者: rakiduta1
解決済
2
0
-
cssで作るプルダウンメニューについて
よろしくお願いいたします。 cssのみを使って下記の挙動のプルダウンメニューを作っています。ソースは後に記します。 1.「開くボタン」をクリックする →プルダウンメニューが開く 2.メニューから選んでクリックする →リンク先に飛ぶ 3.メニュー選択クリックか、「キャンセルボタン」クリックか、メニュー外の画面をクリック →プルダウンメニューが閉じる プルダウンメニューを消しておくために、opacityプロパティを利用したところ、一見良いのですが、見えていないだけで「開くボタン」の下の白紙の部分にカーソルをもっていくとリンクが存在していて、クリックするとリンク先が開いてしまいます。 そこで、opacityプロパティに併用してvisibilityプロパティを設定したところ、見えないリンクはなくなったものの、プルダウンメニューを開いてもリンクが存在していません。 ソースはその状態です。助けてください。 【html】 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>gooへの質問です</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <link rel="stylesheet" href="./css/test.css"> </head> <body> <div id="all"> <div id="container"> <header itemscope itemtype="http://schema.org/WPHeader"> <h1>プルダウンメニューについて</h1> <nav class="nav-menu-area"> <div class="menu-product-area"> <label id="menu_label_open" tabindex="0"><img src="開くボタン" width="252" height="60" alt="開くボタン"></label> <label id="menu_label_close"><img src="閉じるボタン" width="252" height="60" alt="閉じるボタン"></label> <ul id="menu-products-top"> <li><a itemprop="url" href="商品AページのURL" title="商品A"><img src="商品Aボタン" width="252" height="28" alt="商品Aボタン"></a></li> <li><a itemprop="url" href="商品BページのURL" title="商品B"><img src="商品Bボタン" width="252" height="28" alt="商品Bボタン"></a></li> <li><a itemprop="url" href="商品CページのURL" title="商品C"><img src="商品Cボタン" width="252" height="28" alt="商品Cボタン"></a></li> <li><a itemprop="url" href="商品DページのURL" title="商品D"><img src="商品Dボタン" width="252" height="28" alt="商品Dボタン"></a></li> <li><span><img src="キャンセルボタン" width="252" height="28" alt="キャンセル"></span></li> </ul> </div> <ul class="menu"> <li><a itemprop="url" href="ページEのURL" title="ページE"><img src="ページEボタン" width="152" height="60" alt="ページE"></a></li> <li><a itemprop="url" href="ページFのURL" title="ページF"><img src="ページFボタン" width="176" height="60" alt="ページF"></a></li> <li><a itemprop="url" href="ページGのURL" title="ページG"><img src="ページGボタン" width="148" height="60" alt="ページG"></a></li> </ul> </nav> </header> <article itemscope itemtype="http://schema.org/Article" id="catch"> <p>よろしくお願いいたします。</p> </article> </div> </div> </body> </html> 【test.css】 * {margin:0;padding:0;border:0px;background-color:transparent;font-size:14px;-webkit-text-size-adjust:100%;letter-spacing:0.1em;line-height:18px;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;list-style:none;} img {vertical-align:bottom;} body {font-family:"メイリオ","Hiragino Kaku Gothic Pro","sans-serif";} div#all {margin-left:auto;margin-right:auto;text-align:center;} /*コンテンツ区切り */ article {clear:both;} /*大きさは含まれる最終要素まで */ article:after, section:after, header:after {content:"";display:block;clear:both;} /*オンカーソル時文字光る */ a:hover, a span:hover, a p:hover, p#contacttel span span:hover {color:#b3b2b1;} /*共通 */ h1 {margin-top:20px;color:#aaaaaa;} h2 {margin-top:20px;} article#catch {clear:both;margin-top:250px;} /*プルダウンメニューレイアウト */ nav.nav-menu-area {width:1280px;margin-top:100px;margin-left:auto;margin-right:auto;} div.menu-product-area {float:left;width:252px;height:90px;margin-left:200px;} ul.menu {float:left;} ul.menu li {float:left;width:252px;margin-left:20px;} /*プルダウンメニュー */ label {cursor:pointer;} ul#menu-products-top {position:relative;margin-top:-6px;visibility:hidden;opacity:0;cursor:pointer;} label#menu_label_open:focus ~ ul#menu-products-top {margin-top:6px;visibility:visible;opacity:1;transition: .3s ease-in-out;-webkit-transition-delay: .1s;transition-delay: .1s;} label#menu_label_open:focus ~ label#menu_label_close {display:block;} label#menu_label_open:focus {position:fixed;top:-100%;} label#menu_label_close {display:none;} ul#menu-products-top li span, ul#menu-products-top li a {display:block;width:100%;}
質問日時: 2019/12/19 14:35 質問者: suzukasuzuka
ベストアンサー
1
0
-
外部CSSの一部のクラスをremoveClassで削除しようとしています。 しかし消したい特定のもの
外部CSSの一部のクラスをremoveClassで削除しようとしています。 しかし消したい特定のものが消せません。 以下のbuttun:hoverのみを消したい場合どうすればいいのでしょうか? .buttun{color:black} .buttun:hover{color:red}
質問日時: 2019/12/17 12:41 質問者: オールドファッション0822
ベストアンサー
1
0
-
テーブル(table)に角丸(radius)を設定する方法
現状のCSSでは角丸(radius)が設定できません。 調べてみると.「border-collapse: collapse;」のままでは反映されないとのこと。 「separate」に変更して試行錯誤してみたのですが、デザインが今と異なってしまうテーブルになってしまいました。 デザインは今とまったく同じで、角丸を実現したいのですが、どのように変更すればよいでしょうか? ご存知の方いらっしゃいましたら、ご教示ください。 よろしくお願いします。 simple_t{ width: 90%; border-collapse: collapse; color:#3f3f3f; font-size: 15px; margin:20px auto; } .simple_t th { border: #e3e3e3 1px solid; background: #454545; color: #ffffff; height:45px; padding: 0 5px; } .simple_t td { border: #e3e3e3 1px solid; text-align: right; padding: 7px; padding-left: 10px; background: #f5f5f5; }
質問日時: 2019/12/17 07:33 質問者: kazuking115
ベストアンサー
3
0
-
CSS側で一括管理できないでしょうか?
初心者ですが、「HTML&CSS」関連の著書をもとに現在、作品集 のWebサイを作成中です。現在そのマークアップ言語が10ファ イルありますが、その全部に以下の言語を設定して動いています。 以下のシステムの目的ですが、[Leaf][Disney's][Flower]をクリッ クすれば、そのページの作品集にジャンプし、閲覧がでる仕様にしま した。しかし、まったく同じプログラムを10ファイルに設定すと 他に色々なシステムがあり、管理上が面倒です。 これをCSS側で一括管理できないでしょうか? 馬鹿質問ばかりしていますが、よろしくお願いいたします。 <nav> <ul class="global-nav"> <li><a href="portfolio.html">Leaf</a></li> <li><a href="portfolio-Dis.html">Disney's</a></li> <li><a href="portfolio-Flo.html">Flower</a></li> </ul> </nav> 共感した 0
質問日時: 2019/12/17 06:45 質問者: Campus2
ベストアンサー
1
0
-
submitの処理の後別の画面を表示させる
入力欄に入力をした後その内容を確認し、ボタンを押したら ありがとうございました。と表示するようにしたいのですが 最初の入力画面に戻ってしまいます。 submitで正しく送信することはできていますが その後の処理がうまくいっていないみたいです。 どなたか教えていただけませんでしょうか <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>show and hide</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(function(){ $('#ok').click(function(){ $("#home").hide(); $("#confilm").show(); $("#thank").hide(); var num = $('#num').val()+"<br>"; var info = $('#info').val()+"<br>"; var name = $('#name').val()+"<br>"; var age = $('#age').val()+"<br>"; var sex = $('#sex').val()+"<br>"; $("#confilm").after(sex); $("#confilm").after("性別:"); $("#confilm").after(age); $("#confilm").after("年齢:"); $("#confilm").after(name); $("#confilm").after("名前:"); $("#confilm").after(info); $("#confilm").after("住所:"); $("#confilm").after(num); $("#confilm").after("郵便番号:"); }); $('#send').click(function(){ $("#form01").submit(); $("#home").hide(); $("#confilm").hide(); $("#thank").show(); }); $('#back').click(function(){ $("#confilm").hide(); $("#thank").hide(); $("#home").show(); }); $('#cl').click(function(){ $('#num').val(''); $('#info').val(''); $('#name').val(''); $('#age').val(''); $('#sex').val(''); }); $("#confilm").hide(); $("#thank").hide(); }); </script> </head> <body> <div id="home"> <h1>個人情報入力フォーム</h1> 入力して下さい <form id='form01'> <p> 郵便番号:<input id='num' name='num' type='text'/></p> 住所:<input id='info'name='address' type='text'/> <p> 名前:<input id='name'name='name' type='text'/></p> <p> 年齢:<input id='age' name='age' type='text'/></p> <p> 性別:<input id='sex' name='sex' type='text'/></p> <input type='button' name='OK' id='ok' value='送る'/> <input type='button' name='cl' id='cl' value='消す'/> </form> </div> <div id="confilm"> <h1>確認</h1> <input type="button" id="send" name="se" value="send"/> <input type="button" id="back" name="cl" value="back"/> </div> <div id="thank"> <h1>ありがとうございました。</h1> </body> </html>
質問日時: 2019/12/16 17:28 質問者: syandera
解決済
1
0
-
検索結果に りんご と入力したら アップル の文字も検索結果に表示させたいです。
現在検索結果のサイトを持っています。 「質問」 検索結果に りんご と入力したら アップル の文字も検索結果に表示させたいです。 画像を見てください A は現在の検索結果です。 りんご と検索したらりんごのサイトが表示されています B を見てください。りんご と検索したら アップルのサイトが表示されます。 Bのりんごと検索してもアップルが検索結果表示される検索結果を作成したいのですが方法が分かりません。 Cは同グループをまとめて、この枠内のキーワードが1つ検索されると同じグループ内のキーワードも 検索結果に表示される図を示しています。 このようなシステムの構築の方法は何と言いますか? おねがいします
質問日時: 2019/12/15 09:04 質問者: godhappy
解決済
1
0
-
製品比較のウェブサイト制作について
ウェブサイト制作について質問です。 下記のURLのサイトでは、比較したい製品を選んでその製品を比較することが可能です。 https://www.wilson.co.jp/tennis/rackets_tennis/ 画像は二つ製品を選んでいる状態ですが、左の製品比較ページをクリックすると選択している 二つの製品を比較することができます。 このようなサイトを制作する場合は、HTMLやCSS以外に他のプログラム言語が必要になるのでしょうか? 無知で申し訳ありませんが、よろしくお願い致します。
質問日時: 2019/12/14 23:23 質問者: suichan2019
解決済
2
0
-
原型は参考書から引っ張り出してきたものです。
下手の横好きで、趣味の知り合いの作品を紹介するため、私も趣味で作成中です。 だから、期限なんかありません。 以下のマークアップ言語ですが!今のところなんとか動いてい見たいです。 私はバカなんですが(笑い)以下の組み合わせでおかしいところっ てありますか?<header><div><nav>組み合わせなどです。 よろしくお願いいたします。 <body id="Leaf"> <header> <div class="logo"> <a href="index.html"><img src="images/top.png" alt="TOP" style="width:8%; position:absolute; top:-7px; left:-20px;" ></a> </div> <nav> <ul class="global-nav"> <li><a href="portfolio.html">Leaf</a></li> <li><a href="portfolio.html">Disney's</a></li> <li><a href="about.html">Flower</a></li> </ul> </nav> </header>
質問日時: 2019/12/11 07:22 質問者: nattukamu2
ベストアンサー
1
1
-
<li>の中の<h>だから!ルール違反でしょうか?
以下のマークアップ言語で、<li>の中に<h>があります。 ブラウザのChromeとIEで実際に表示させると、以下のプロ グラムの[中文字]は [小文字]対して大きく表示されます。 ルール違反行為でも、 「少々のエラーはブラウザが自動修正してくれているから?」 よくわかりませんが!なぜルール違反だけど、ちゃんと機能してい るのでしょうか?よろしくお願いいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <li><a href="hover.html"><h2 style="display:inline;">中文字</h2>小文字</a></li> </body> </html>
質問日時: 2019/12/09 14:11 質問者: Campus2
ベストアンサー
1
0
-
<input type="text">と<input type="password">に文字入力
お世話になります。 WebBrowserで表示している画面の<input type="text">と<input type="password">にVB.netのコードで文字を入力する方法が判りません。どなたか詳しい方いらっしゃいましたら教えて頂けないでしょうか? Htmlの抜粋を載せます。 <table height="50" border="0" cellpadding="0" cellspacing="0" align="left"> <tr> <td class="each_table8" align="center" style="letter-spacing:2px" nowrap> <b>ログインID:</b></td> <td> </td> <td><input type="text" name="aa_accdcd" value="" style="height:25px;width:140px" autocomplete="on" maxlength="9"></td> </tr> <tr> <td class="each_table8" align="center" style="letter-spacing:3px" nowrap><b>パスワード:</b></td> <td> </td> <td><input type="password" name="lg_pw" style="height:25px;width:140px" autocomplete="on" maxlength="14"></td> </tr> </table> html内に、 <input type="text">は一つだけ、<input type="password">は二つありますが、用途は同じです。 宜しくお願い致します。
質問日時: 2019/12/09 10:47 質問者: minarai_database
解決済
1
0
-
a:link で指定した色にならない
1つのhtmlに、PC用 タブレット用 スマホ用それぞれのcssを使ってサイトを運営しています。 PC用、タブレット用は問題ないのですが、スマホ用のみ、a:link が反映されません。 記述は、 a:link{ color:#fff; } a:visited{ color:#fff; } a:hover{ color:#FC3; } としています。 a:hoverは、オレンジ色に、a:visitedも白色になってくれますが、a:linkはデフォルトの青色のままです。 背景色が紺色なので、全く文字が見えず、困っています。 お知恵をお貸し下さい。よろしくお願いいたします。
質問日時: 2019/12/06 10:39 質問者: kyouko
解決済
2
0
-
HTMLでtableが真ん中揃えになってくれません
問題のtableは <table width="650" border="0" cellpadding="0" cellspacing="10" bgcolor="#F2F2F2" style="font-size:10px;line-height: 160%;" align="center"> です。 同じHTML内の他のtableはちゃんと真ん中揃えになります。 <table width="650" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto"> です。 両方とも同じ<html><body>の中に入っています。 問題の方のtableの中身はtrとtdを使って文字列を3×3で入れています。 うまくできている方はtrとtdを使って画像を入れています。 文字サイズと背景灰色を使いたいので、うまくいってるほうに変えるのはできればしたくないです。 真ん中にならないのは何が原因でしょうか? CSSは使えない環境ですので、それでこの部分を真ん中揃えにするにはどうしたらいいでしょうか?
質問日時: 2019/12/02 18:15 質問者: gjmayu
ベストアンサー
1
0
-
css 画像を縦横比率で指定する方法について
サイズの決まっている画像をブラウザ表示させる際、元サイズとは関係なく画像の縦横比率でサイズ指定したいと思っています。例えば縦:横(3:4)という具合です。 横はブラウザの幅いっぱいになればよく、ですのでwidth:100%;でいいのかなとおもっているのですが、それに対して例えば上記比率で縦サイズを指定したい場合、どのように指定したらよいのでしょうか? 縦横比を維持するように指定したいので、PX指定ではなく%指定かと思っているのですが、どのように指定したらよいか教えて頂けますでしょうか。 どうぞよろしくお願いいたします。
質問日時: 2019/12/01 12:00 質問者: some375
ベストアンサー
1
0
-
ラジオボタンの装飾(色の違う2重の枠線)方法について
ラジオボタンをチェックした時に、円の周りに色の違う二本の枠線を付けたいです。 例えば、18×18pxの正円の周りに2pxの白線とさらにその周りに1pxの青線をつけるという装飾がしたいのですが、どうしたらいいのか教えて頂けないでしょうか。 どうぞよろしくお願いいたします。
質問日時: 2019/12/01 11:31 質問者: some375
ベストアンサー
4
0
-
マウスオーバーで画像を拡大する。
htmlとcssを使いマウスオーバーで画像を拡大したくて、 https://www.jungleocean.com/programming/190208mouseoverimg#outline__2 以上のサイトのプログラムを、試したところ!まったく画面に変化なしで 失敗です。 初心者ですが、何でも初めて事なので、最初からうまくいく わけがないのですが、どうしたら、マウスオーバーで画像がの拡大ができ ますか? よろしくお願いいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> li{ display:inline-block;} .img-contain img { width: 20vw; height: 33.3vh; margin: 3.15vw 0 3.15vw 3.15vw; object-fit: contain; } </style> </head> <body> <header> <div class="logo"> <a href="index.html"><img src="images/top.png" alt="TOP" style="width:10%; position:absolute; top:-1px; left:-10px;" ></a> </div> <center> <ul class="global-nav" style="font-size:40px;"> <li><a href="portfolio.html">Leaf</a></li> <li><a href="about.html">Flower</a></li> <li><a href="">Disney's</a></li> </center> </nav> </header> <div class='img-contain' > <div class="moimg1"> <img src="images/Dis/14371.jpg"> <img src="images/Dis/14372.jpg"> <img src="images/Dis/14373.jpg"> <img src="images/Dis/14374.jpg"> <img src="images/Dis/14375.jpg"> <img src="images/Dis/14376.jpg"> <img src="images/Dis/14377.jpg"> <img src="images/Dis/14378.jpg"> <img src="images/Dis/14379.jpg"> <img src="images/Dis/14380.jpg"> </div> </div> </body> </html> Cssに以下を組み込みました。 .moimg1 { overflow: hidden; width: 350px; height: 240px; } .moimg1 img { width: 350px; display: block; transition: 0.5s; } .moimg1 img:hover { transform: scale(1.1, 1.1); .moimg1 { overflow: hidden; width: 350px; height: 240px; } .moimg1 img { width: 350px; display: block; transition: 0.5s; } .moimg1 img:hover { transform: scale(1.1, 1.1); }
質問日時: 2019/11/23 06:01 質問者: Campus2
ベストアンサー
2
1
-
【至急!!⠀】HTMLを打っているのですが、<p>など打つ時タブキーを押すと一瞬で<p></p>とな
【至急!!⠀】HTMLを打っているのですが、<p>など打つ時タブキーを押すと一瞬で<p></p>となると思うのですが、何故かタブキー(→|)が反応しなくなりました、どうしたらいいでしょうか?ひろ
質問日時: 2019/11/21 22:01 質問者: ひよ0929
解決済
3
0
-
HTMLのclassやidの名前のを決めるときってどうやっているんですか?
HTMLとCSSを勉強中の初心者です。 自分でホームページ作成とか模写を始めていこうかと考えてます。 一度簡単なホームページを作成しようとしたところ、これ以外にもまだまだ分からないとこ多いですが、classやidの名前を決める時どういう基準で決めていますか? classなどをつけてCSSでデザインするときの機能や付ける場所とか関連する名前を英語の単語で半角英数だけで考えてつけることくらいは理解してますが、他の人が見ても理解できる名前つけるにはどうしたらいいか悩みます。 初めは人のサイトのコードを参考にしてまねして使ったり、classの名前を決めている人の一覧とかを利用して作っていった方がいいのでしょうか? 皆さんどのように名前決めてるか教えてほしいです。 宜しくお願いします。
質問日時: 2019/11/21 18:16 質問者: aozora50
解決済
1
0
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
【HTML・CSS】に関するコラム/記事
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページのサイトでhtmlの...
-
htmlの文字が縦書きになる
-
HTMLでクロス抽出したい
-
iPhoneで HTMLファイルを閲覧
-
レスポンシブで困っています・・
-
ホームページを作っていたらhtmlとh...
-
HTML&CSS メディアクエリについて。
-
HTML/CSSを使って写真のようなレイ...
-
YouTubeの動画を自分のホームページ...
-
htmlの<input type=”file”>でアップ...
-
excelをhtmlに変換した途端、一部フ...
-
サイトにコンテンツを並べる際の CS...
-
テーブルのセルデータを自動改行さ...
-
HTMLで画像をポップアップで表示す...
-
プログラムの関連性を教えて下さい。
-
画像が分割されて切り替わる、ルー...
-
CSSでの文字位置の上下センタリング
-
ホームページの制作について教えて...
-
GoogleSearchControlにホームページ...
-
Dreamweverは今も主流なんですか? ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
ホームページのサイトでhtmlの...
-
テーブルの行を折りたたみたいので...
-
ホームページを作っていたらhtmlとh...
-
iPhoneで HTMLファイルを閲覧
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
HTML/CSSを使って写真のようなレイ...
-
ホームページの制作について教えて...
-
スマホ(android)のタッチパネル、...
-
GoogleSearchControlにホームページ...
-
css初心者 フレックスボックスの適...
-
メモ帳の段落の揃え方
-
静止画画像をクリックすると音楽が...
-
htmlの<input type=”file”>でアップ...
-
、URL化させるにはどうしたらいいで...
-
WEBページを強制的に横画面で見るよ...
-
HTMLで画像をポップアップで表示す...
-
角丸画像の背景色を透明にしたいです
-
<input>のstep属性に違反する入力を...
おすすめ情報