HTML・CSS(13ページ目)

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

回答数

気になる

マウスオーバーの設定(応用)

高校生です。学校の課題でウェブサイトの作成をしているのですが、 https://kaela-web.com/ この木村カエラさんのウェブサイトのようにAの画像をマウスオーバーすると、Bの画像がCの画像に変わるようにしたいです。自分で調べたりしたのですが見つかりません。どのようなコードを打ち込めばよいでしょうか？

質問日時: 2021/02/22 21:49 質問者: とても眠い

ベストアンサー

1

0
商品一覧をtableタグで表示する

商品一覧（画像、商品名、価格）をtableタグを使って表で表示するときに、1列に3個ずつ横に並べて、4個目は2列目の左端にくるようにしたいです。どのように修正すればいいですか? 1個目・2個目・3個目 4個目・5個目・6個目・・・のような感じです。 tableタグ以外は省略しています。 <table> <?php foreach ($rows as $item) { ?> <tr> <td><img src="./product_picture/<?php echo $item['img']; ?>" width=300 height=300></td> </tr> <tr> <td><?php echo $item['name']; ?></td> </tr> <tr> <td><?php echo $item['price']; ?> <?php if ($item['stock'] > 0) { ?> <form method="post" action="index_add_cart.php"> <input type="submit" value="カートに追加"> <input type="hidden" name="item_id" value="<?php print($item['id']) ?>"> </form> <?php } else { ?> <p class="soldout">申し訳ございません。現在、売り切れです。</p> <br><input type="radio" name="item_id" value="<?php echo $item['id']; ?>"> </td> <?php } ?> </tr> <?php } ?> </table>

質問日時: 2021/02/22 11:36 質問者: オバケイ

解決済

1

0
DIVは横幅の調整しかできない？？

DIV AからFまであって DIV Cに文字を書き込んだんですが横の幅は DIV Cの幅にそろうのですが縦の行数がこえるとレイアウトが崩れてしまいます。縦幅を変えるしか方法ってないですよねそれと自動的にレイアウトが崩れないで縦がのびてくれるといいのですが body { width:980px; margin:0 auto; overflow: auto; } #A { height:150px; background-color:#009b9f; } #B { margin-top:10px; height:150px; background-color:#009b9f; } #C { width:250px; min-height:500px; height:auto; background-color:#009b9f; float:left; margin-top:10px; } #D { width:250px; min-height:500px; height:auto; background-color:#009b9f; float:right; margin-top:10px; } #E { margin-left:260px; width:460px; min-height:500px; height:auto; background-color:#009b9f; margin-top:10px; } #F { margin-top:10px; height:500px; background-color:#009b9f; }

質問日時: 2021/02/20 05:39 質問者: 39OK

解決済

2

1
html5の表の行をくっつけたい。

<!DOCTYPE HTML 4.01> <html lang="ja"> <head> 省略 </head> <body BGCOLOR="#ffffff" class="main"> <table border="0" cellspacing="0" cellpadding="0"><tr > <td align="center"><img src="tmp1x/br32_64.png" width="32" height="64"></td> <td align="center"><img src="tmp1x/br32_64.png" width="25" height="50"></td> <td align="center"><img src="tmp1x/or32_64.png" width="32" height="64"></td> <td align="center"><img src="tmp1x/or32_64.png" width="32" height="64"></td> </tr><tr valign="center"> <td align="center"><img src="tmp1x/gr32_64.png" width="32" height="64"></td> <td align="center"><img src="tmp1x/gr32_64.png" width="32" height="64"></td> <td align="center"><font color=#0ff>あ</font></td> <td align="center"><img src="tmp1x/ra32_64.png" width="32" height="64"></td> </tr> </table> </body> </html> を html5 でスタイルをまとめたいのですが、<!DOCTYPE HTML>で行くと<table border="0" cellspacing="0" cellpadding="0">が使えなくなるのを5基準にする方法を教えてください。よろしくお願いいたします。

質問日時: 2021/02/19 00:50 質問者: たっちゃん023

ベストアンサー

1

0
ホームページブラウザ自動更新

ホームページを作成しています更新した際に　閲覧者は　最新の状態で見ることが出来ないというめんどくさい状況が発生していますリロードをかけてもらえば良いのですが、全ページそれをやるのか？というハナシになり　対処法を探していますキャッシュの問題である事はわかっていますが・・ HTMLコードやJavaScriptなどで対処できないものでしょうか？キャッシュを残させない　という方法もあるようですがいまいち理解できませんでしたホームページは　汎用性を高めるため　あえてWordで作っています Wordで対応しないコードは　VsCODEで書き足ししています

質問日時: 2021/02/18 11:16 質問者: ppp2122

ベストアンサー

3

1
position のcss

htmlで質問です。 underを一番したに固定したまま中央寄せする方法を教えてください。 html <div class="under"> <a href=><image><\a><div> css position:fixed; bottom:0;

質問日時: 2021/02/17 18:34 質問者: 9うい9p

ベストアンサー

1

0
cssで、わからないコードについて、教えてください。

.catt { flex:1 0 calc(50% - 180px); } これは、どういう意味でしょうか？

質問日時: 2021/02/16 21:06 質問者: finaltida108070809

解決済

1

0
bootstrapで、snsのアイコンの作り方

webの説明では、bootstrapのcdnの宣言をheadないにかき、 </body>手前に、３行くらいのコードを入れ、<i class="fab fa-facebook-f"></i> をhtmlに入れたのですが、何も表示されません。何が合っていませんでしょうか。

質問日時: 2021/02/16 19:55 質問者: finaltida108070809

ベストアンサー

1

1
スマホキーボードのアイコン

HTML,CSSでコーディングをしているのですが、画像の様なスマホのキーボード絵文字やインターネットの様なマークは、どうやって作成したり取得できるのか教えて頂きたくお願い致します。下記4つを知りたいです。・×ボタン・絵文字・インターネット(地球儀) ・マイク

質問日時: 2021/02/16 09:43 質問者: 零礼

ベストアンサー

2

0
cssの見栄えをタブで整えないのは何故？

こんばんは、スタイルシートの記載についての質問（疑問）ですスクリプトでは、ifやfor内の記載等々について、インデントを入れ見栄えを整えますまた、HTMLであれば、内包する要素について、同様にインデントをいれて見栄えを整えますしかし、スタイルシートについてインデントを整える慣習は見受けられませんが、何故でしょうか？スタイルシートの場合、タグやクラスにまとめて値を指定するため、あまり意味がないからでしょうか？ <body> 【インデント】<div class="hoge"> 【インデント】【インデント】<p></p> 【インデント】</div> </body> 例えば上記のようなHTMLにて、divタグと内包するpタグに対して、それぞれ別のスタイルシートの値を設定する場合、下記のほうが、ぱっとみた時に、親と子の関係が分かりやすいと思いませんか？ .hoge｛｝【インデント】.hoge p｛【インデント】｝

質問日時: 2021/02/15 20:10 質問者: Hypnomatic

解決済

3

0
ウェブ訪問者にわざわざ再読み込み操作をさせずに、自動的に最新ページを閲覧させたい

ウェブ訪問者がわざわざ再読み込み操作をせずとも、自動的に最新ページを表示するようにできますか。例えば、1週間に1～2回更新するウェブサイトを運営していて、更新した際には、別途運用しているブログにて、更新しました→http://www.～のようにリンクを表示して、毎回ブログからサイトに誘導するような作りにした場合に、たいていの読者はキャッシュの効果により、前回訪問時と全く同じ内容が表示され、「何も変わってねえじゃねえか！」と怒って帰ってしまうと思うのですが、これを防止するために、読者がわざわざF5キー等を押さなくても、自動的に最新版を表示することはできますか。

質問日時: 2021/02/14 20:24 質問者: zyousuke

ベストアンサー

1

1
cssでこ要素を親要素の外側に移動させるプロパティ

<div class="parent"> <div class="child"></div> </di> .child { 謎のプロパティ } 謎のプロパティを指定することによってソースコード上のhtmlは上記のままだけど実際に表示されるのは以下のように外側に移動するのような比較的新しいプロパティがあったような気がするのですが思い出せません. <div class="child"></div> <div class="parent"> </di>

質問日時: 2021/02/13 01:33 質問者: ookey

解決済

1

0
bootstrapでよく使わるワードについて

bootstrap初心者です。下記の認識で正しいかどうかお伺いです。 bootstarapを検索すると下記用語が散見されます。 cssフレームワーク（<div class="row">等）、コーポネント(<div class="jumbotron">等) cssフレームワークとは定義されたcssをパーツとして最初から用意されている物コンポーネントとは用途別に用意された少し大きなパーツ群という認識であってますか？

質問日時: 2021/02/09 09:58 質問者: j1111111

解決済

1

0
htmlについて

input type=fileで初期文の「選択されていません」の表示を変える方法はありますか？

質問日時: 2021/02/06 17:08 質問者: 9うい9p

ベストアンサー

1

0
ランディングページの数え方がわかりません。

ランディングページをデザインして、コーディングを依頼するときに何ページあるかと聞かれた場合、1ページの長さがどのくらい（何ピクセルとか？）を基準とするのかがわかりません。何を基準にするのでしょうか？

質問日時: 2021/02/04 20:18 質問者: アナジャミーラ

ベストアンサー

3

0
php値の受け渡しで旧情報に上書きされないようにするには？

PHPで、顧客検索、顧客検索結果、顧客情報修正確認と三つのプログラムを作りました。それぞれ顧客検索ー＞顧客検索結果、顧客検索結果ー＞顧客情報修正確認と遷移することができます。反対に前の画面に戻ることもできます。顧客情報修正確認から前の画面(顧客検索検索)に戻るとき、どうしても前の画面(顧客検索検索)で入力した情報が反映されず、顧客検索で調べた情報(旧情報)に上書きされてしまうのですがどのようにプログラミングするとよいのでしょうか？下記のプログラムは顧客検索結果の該当する部分だけ切り取ったものです。 <div class="control"> <label for="C_name">顧客名(全角文字のみ入力可)</label> <input id="C_name" type="text" name="C_name" 　　　　　　　　　value="<?php print($get_C_nam[0]); ?>" "> </div>

質問日時: 2021/02/02 21:37 質問者: 鎌やろう

ベストアンサー

3

0
HTML headerのcenterについて

はじめましてvbaなどではご利用しておりますが htmlでははじめましてです。教えてほしいこと下記のコードをセンターにしたいのですがこれをどこに書き加えたらいいのかおしえてくれませんでしょうか <div style="text-align:center">できるだけスタイルシートを使用してください。</div> --------------------------- <header> <h1><a href="http://www.htmq.com/blog/">○○のブログ</a></h1> </header>

質問日時: 2021/02/02 14:15 質問者: ぶどうと

ベストアンサー

3

1
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う

HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使うといいんですか？

質問日時: 2021/02/01 09:50 質問者: 鎌やろう

ベストアンサー

2

0
HTMLで全角文字のみ入力するにはどんな文を書けば良いんですか？半角英数字が入らないようにした方が

HTMLで全角文字のみ入力するにはどんな文を書けば良いんですか？半角英数字が入らないようにした方がいいというのは分かったのですが、それでは全角数字が入ってしまって何が何やらでわからなくなりました。どういう文だったらいいのか教えてください。よろしくお願いします。

質問日時: 2021/01/31 14:32 質問者: 鎌やろう

ベストアンサー

3

0
excel vba で ulタグのなかのselect方法

excel vba での次の操作をどう書けばよいのか教えてください。下記htmlでは「予想まとめ」が選ばれているが、「枠・馬番順」をselect状態にしたいです。：： <ul class="localTab"> <li id="oddsPositionTab"><a href="#">枠・馬番順</a></li> <li id="oddsRankTab"><a href="#">人気高配当順</a></li> <li id="oddsViewerTab"> <a href="https://keiba.rakuten.co.jp/odds/compare/RACEID/202101300304220401#headline">オッズ比較ツール</a> </li> <li id="matomeTab"><span class="selected">予想まとめ</span></li> </ul> ：：

質問日時: 2021/01/30 15:25 質問者: gonzoQQ

ベストアンサー

2

0
WEBフォームプルダウンリスト表示項目を接続ユーザによって変えることはできるか

注文フォームを作ろうとしています。接続元ユーザに合わせて、プルダウンリスト項目（選択肢）表示を変えることは可能でしょうか。 ■目的：他ユーザにとって意味のない不要な項目はフルダウンリストに表示したくない ■前提・接続元は不特定多数ではなく特定されている・WEBサーバのバーチャルホストで社別単位でWEBページを設置せず１つのページ上でコントロールしたい ■表示イメージ A社ユーザ　でログイン認証　＞　注文フォームで　項目１　項目２　をプルダウン選択させたい B社ユーザ　でログイン認証　＞　注文フォームで　項目３　項目４　をプルダウン選択させたい C社ユーザ　でログイン認証　＞　注文フォームで　項目５　項目６　をプルダウン選択させたい．．．これを可能とするやり方はあるでしょうか。

質問日時: 2021/01/29 15:08 質問者: lunarosa

解決済

5

0
HTML

HTMLをエスケープ処理したものをソースコードとして表示したいのですがgoo blog では最初は表示できますが二度目にはHTMLとして認識されてしまうのか普通の文書、表になってしまいます。ソースコードの表示は画像で貼り付けてしかできない仕様なのでしょうか。

質問日時: 2021/01/29 14:02 質問者: あやしいおじさん

解決済

1

0
楽天のHTMLを使った店舗ページの作成について

楽天の店舗ページの作成をしたいのですが、現状HTMLのタグをある程度覚えた程度です。レスポンシブデザインで作成したいのでbootstrapで作成しようと思っています。お伺いなのですが、HTMLを使ったHPでセキュリティに関する記述というかそういった類の物はないのでしょうか？勉強用に一冊本を購入したのですが、セキュリティに関する記述等は何も載っていませんでした。基本的にはセキュリティは楽天側の”サーバー”がするという認識であってますか？

質問日時: 2021/01/27 09:05 質問者: j1111111

解決済

4

0
HTMLの記述<form method="get" action="http・・・について

ホームページを改変している、初心者なのですが、<form method="get" action="http....... の記載の後に<input type="text" name="sitem"等の記載があり</form>で閉じられているのですがこれが検索ボックスに対する記述というのは分かったのですが、<form method="get" action="http.......とは何を表してますか？出来れば初心者でも分かりやすく説明頂けると助かります。

質問日時: 2021/01/26 10:09 質問者: j1111111

解決済

1

0
htmlとCSSを使いSelect class で選んだlistの数字を掛け算したいです。

https://bebor.jp/?lp=cbdmax_logly_mint こちらのサイトのたばこ計算ツールを自分でも作りたいのですがどのようにやれば良いか分からず困っております。プログラミングが全くの初心者のため今勉強中なのですが、八方塞がりのため教えていただきたいです。下記自分がやったところになります。（なおWPを使用しています）結果を確認するとした時にクリックされましたという文字のところを下記の合計値を表示したいです。 (age)-(t_age)*tbox*365=合計値何卒よろしくお願いいたします。〜CSS〜 .tabacco_box_center { padding: 1em 1.5em; margin: auto; background: linear-gradient(to bottom, #ffffff, #eeeeee);/*背景色*/ background: -webkit-linear-gradient(top, #fffff, #eeeeee);/*背景色*/ border: 1px solid #eeeeee;/*枠線*/ border-top: 4px solid #00008b;/*上の線*/ box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset; color:#000000;/*文字色*/ text-align: center; } .tabacco_box_center p { margin: 0; padding: 0; } .tabacco_list_a { color:#dc143c; font-weight: bold; } .tabacco_box_button{ } .center { text-align: center; } .tabacco_list{ margin: auto; box-shadow: 10px 5px 5px red; width:50%; } /** ボタン **/ .disp-box label { display: inline-block; color: #ffffff; /* ボタンの文字色 */ background-color: #000000; /* ボタンの背景色 */ font-weight: bold; /* 文字の太さ */ padding: 0.5em 1em; /* ボタン内側の余白 */ /*border-bottom: solid 4px #000000; ボタンの影部分 */ border-radius: 3px; /* 角丸 */ cursor: pointer; /* ボタンにカーソルを合わせた時に指アイコンを表示 */ } /** ボタンクリック時のボタンを押し込む動作 **/ .disp-box label:active { -webkit-transform: translateY(4px); /* Chrome、Safari用 */ -moz-transform: translateY(4px); /* Firefox用 */ -ms-transform: translateY(4px); /* IE用 */ transform: translateY(4px); border-bottom: none; } /** チェックボックス **/ .disp-box input { display: none; /* 非表示 */ } /** 表示・非表示を切り替えるテキスト（「クリックされました！」の部分） **/ .disp-box .text { color: #ff0000; /* 文字色 */ font-weight: bold; /* 文字の太さ */ font-size: 24px; overflow: hidden; opacity: 0; /* 文字を非表示 */ transition: 0.2s; /* 文字が表示・非表示される時のスピード */ } /** チェックボックスにチェックが入った時の、テキストの処理 **/ .disp-box input:checked ~ .text { height: auto; opacity: 1; /* 文字を表示 */ } 〜html〜 <div class="tabacco_box_center"> <p class="tabaco_title b"><i class="fa fa-calculator"></i> たばこ計算ツール</p> <form id="form" action="" method="post"> <p class="center"><span class="tabacco_list_a">STEP1</span> 現在の年齢は？</p> <select class="tabacco_list" name="age" size="1"> <option value="">選択して下さい</option> <option value="70">70歳</option> <option value="71">71歳</option> <option value="72">72歳</option> <option value="73">73歳</option> <option value="74">74歳</option> <option value="75">75歳</option> <option value="76">76歳</option> <option value="77">77歳</option> <option value="78">78歳</option> <option value="79">79歳</option> <option value="80">80歳</option> </select> <p class="center"><span class="tabacco_list_a">STEP2</span> 吸い始めた年齢は？</p> <select class="tabacco_list" name="t_age" size="1"> <option value="">選択して下さい</option> <option value="20">20歳</option> <option value="21">21歳</option> <option value="22">22歳</option> <option value="23">23歳</option> <option value="24">24歳</option> <option value="25">25歳</option> <option value="26">26歳</option> <option value="27">27歳</option> <option value="28">28歳</option> <option value="29">29歳</option> <option value="30">30歳</option> <option value="31">31歳</option> </select> <p class="center"><span class="tabacco_list_a">STEP3</span> 1日に吸う量は？</p> <select class="tabacco_list" name="tbox" size="1"> <option value="">選択して下さい</option> <option value="250">半箱</option> <option value="500">1箱</option> <option value="1000">2箱</option> </select> あなたが今まで<br class="sp_image" />たばこに使ってきた金額は… <div class="disp-box"><label for="disp-btn">結果を確認する</label> <input id="disp-btn" type="checkbox" /> <p class="text">クリックされました！</p> <span class="small_font60 gray no-top">※1箱500円と計算した場合</span> </div> </form></div>

質問日時: 2021/01/25 22:47 質問者: ffnic

ベストアンサー

3

0
メディアDiv ってなんですか

タイトルの通りです。メディアDiv　ってなんでしょうか(´;ω;｀)

質問日時: 2021/01/20 15:56 質問者: 秋田000009

解決済

2

0
background-sizeでcontainすると縮小で余白サイズが変わってしまいます…。

行いたいことは、とあるDIVなどに background-size:contain; を用いて画像を常に全体を表示させる設定を行っています。 <div id="contain_box">背景画像指定</div> <p>次のコンテンツ</p> しかしながら、この指定ですとレスポンシブの際、画面を拡大縮小するたびに、その下にある次のコンテンツとの隙間も大きくなったり小さくなったりしてしまいます。画像全体を表示したいので、coverの指定はできません、試したところ画像の一部が切れてしまいます。この隙間部分を、どの画面でも統一して決まった高さを持たせることはできないものでしょうか？お詳しい方いらっしゃいましたらアドバイス頂けないでしょうか。宜しくお願いいたします。

質問日時: 2021/01/19 13:58 質問者: oneday77

ベストアンサー

3

0
cssが触ってないのに崩れていました。最後に触ったときはちゃんと表示されていたのですがphpをやっ

cssが触ってないのに崩れていました。最後に触ったときはちゃんと表示されていたのですがphpをやって今またブラウザで表示してみるとpc用の画面ではできているのですがスマホ用の画面にしたときにヘッダーが横にずれて文字が画面からはみ出ていたり、borderが指定した要素の半分で切れていたりしています。私のcssの指定方法がおかしいのでしょうかそれともよくあることなのでしょうか？

質問日時: 2021/01/15 08:46 質問者: gtwapwja

ベストアンサー

3

0
【CSS】imgタグを、親要素の幅に収めるには？

半日かけてネットや本で調べてもわからなかったので教えてください。幅が500pxの画像2枚を、800pxの親要素の中で横並びにしたいです。この場合、画像2枚を合わせると1000pxになるので、親要素より多い200pxがはみ出してしまいます。そうではなくて、親要素の幅に応じて画像の大きさを変える(縦横比を保ったまま）には、どうしたらいいのでしょうか。下記が私が考えたソースなのですが、何か足りないものなどご指摘をいただけないでしょうか。【HTML】ケーキとプリンの画像を横並びにするべく、「oyatsu」という親要素を作りました。 ※画像＋名前にしたかったので、<ｐ＞タグを追加しています。 <div class="oyatsu"> <div class="foods"> <img src="cake.jpg" alt="ケーキ"> <p>ケーキ</p> </div> <div class="foods"> <img src="pudding.jpg" alt="プリン"> <p>プリン</p> </div> </div> 【CSS】 ①親要素のoyatsuクラスにdisplay:flex;を指定し、横並びにしました。　また、幅を800pxに指定しました。 .oyatsu{display:flex; width: 800px;} ②ネットなどで調べて、いろんなセレクタを指定して試行錯誤しましたが、　最終的にはこうなりました。 .foods img{max-width: 800px; 　　justify-content: space-between; ｝　 ③文字の位置を中央揃えにしました。 .foods p{text-align: center;} 画像の横並びには成功しました。しかし、とにかく何をしても、画像の大きさが変わりません。 imgタグは、たとえdivで親要素の中に含まれているものだとしても、従順にその中に納まることなく、自由奔放に、画像本来のサイズとなってしまうのでしょうか。私はてっきり、親要素の幅に合わせて、子要素である画像の方が大きくなったり小さくなったりするものだと思っていました。試しに親要素（oyatsu）の幅を色々変えてみましたが、画像の大きさが変わることはありませんでした。苦肉の策で、justify-contentを指定すれば、親要素の幅の中でやりくりしてくれるかと思いきや、変わりませんでした。今日有給をとったのに、ほぼこの部分で時間を費やしてしまいました… ご教示願います。

質問日時: 2021/01/13 21:27 質問者: jamfruits

ベストアンサー

1

0
css 全体設定について、PCとスマホの設定を変えたい

いつもありがとうございます。表題の件で質問です。全体のフォントサイズを、PC画面とスマホ画面で分けて設定したいのですができません。 ---css---- body { font-family: "MS Pゴシック", sans-serif; font-size: 1.4rem; } @media only screen and (max-width:500px){ body { font-size: 1.2rem; line-height: 24px; } } と記載したのですが、上の設定がスマホでも優先され、@media only screen and (max-width:500px)で記載したフォントサイズが適用されません。アドバイスいただければ幸いです。

質問日時: 2021/01/13 06:20 質問者: ハコ2222

解決済

2

0
Webデザイナー

HTML、CSS、JavaScript、SQL、Node.js辺りを習得すればWebデザイナーになれますか？また、プログラマーとWebデザイナーどちらが敷居高いですか？

質問日時: 2021/01/08 15:10 質問者: ぽらん千秋

ベストアンサー

5

1
cssの指示が効かない

いつもお世話になっております。 cssのことで質問です。画像の通り、ulに対して .intro-ul{ font-size: 2.0rem; line-height: 40px; margin-left: auto; margin-right: auto; width: 50em; } という記載をしたのですが、下3つの margin-left: auto; margin-right: auto; width: 50em; の指示のみ効きません。検証を見てみると、この3つが薄字になっています。そしてその上にuser agent stylesheet という記載していない指示が表示されているのですが、この指示が優先されてしまっているということですよね。この指示をなくして、自分で記載したcssの指示を効かせるにはどうしたらいいでしょうか？リセットcssなど、いろいろと調べましたがよくわかりません。よろしくお願いいたします。

質問日時: 2021/01/08 10:13 質問者: ハコ2222

ベストアンサー

4

0
webサービスでレスポンシブ対応をしたいのですができません。画像のようにはみ出してしまいます。 v

webサービスでレスポンシブ対応をしたいのですができません。画像のようにはみ出してしまいます。 viewportは指定してbox-sizeingをborder-boxにしたりwidthを100%にしましたがはみ出たままです。　なぜでしょうか？

質問日時: 2021/01/06 21:47 質問者: gtwapwja

ベストアンサー

1

0
ホームページでスクロースするごとに画像が動くサイトの作成方法について…。

以前より気になっていたのですが、動的な見た目のサイトを目にすることが多くなりどうやって作成するのかが大変興味あります。参考サイトが今は見つからなかったのですが、最近のサイトでは、スクロールしてある所に到達すると、画像が左右から現れて真ん中で合体したり、矢印が右から左に流れたり、ボックスのborderがくるっと回って描画されたり、テキストにアンダーラインが引かれたり…などなど、スクロールであるところに到達すると動きのある見せ方をされるサイトが多く見受けられるのですが、これらはどういった仕組み？でしょうか？基本的にはjavascriptやJqueryを利用しているのは理解できるのですが、動きの発火点は何になるのでしょうか？スクロールの到達点をポイントにしているのでしょうか？また、こういったものを簡単に実現するためのフレームワークというのでしょうか？ありましたら教えて頂けないでしょうか？ちなみにこういった技法を何というのでしょうか？わかりにくい質問ですみません、こういった方法でサイトの作成を試してみたいので、技法名など含め色々と詳細をアドバイス頂けますと大変助かります。宜しくお願いいたします。

質問日時: 2021/01/06 20:38 質問者: yuyukina

解決済

1

0
もしホームページを作るとしたら……

たまにホームページを作りたいとか思った事があります。完全無料でホームページを出せるところはそもそもありますか？また、お金がかかるとしたら基本どれだけかかるのですか？さらに、自分で全く新しいアドレスを作ったらどれだけの費用、手間が掛かりますか？（興味本位で聞いています）自分は、HTML CSS javascript が使えます

質問日時: 2021/01/04 18:14 質問者: niku-zanmai

ベストアンサー

2

0
htmlで顧客検索システムを作っているのですが、プログラムでどう書いたらいいのか分からないところがあ

htmlで顧客検索システムを作っているのですが、プログラムでどう書いたらいいのか分からないところがあります。それは検索ボタンをクリックしたらあらかじめ入力してある名前、番号を元にデータベースから電話番号、住所が出てくるようしたいのですが、どう書けば良いのか分かりません。何を書けば良いのか教えて頂きますか？

質問日時: 2021/01/03 16:55 質問者: 釜野郎

ベストアンサー

2

1
htmlだけで背景色を分ける方法

HTMLだけを使って背景色を分割する方法を教えてください。 CSSわかんない

質問日時: 2021/01/02 21:58 質問者: F-4EJ改Phantomll

ベストアンサー

2

0
Webサイト作成プログレスバー HTML・CSS・JS

こんばんは。表題の件、教えて欲しいです。電子教材を作っているのですが、進捗がわかるプログレスバーを現在作っているサイトに組み込みたいです。具体的には、ページ内に「理解できた」ボタンを５つ作成し、一つ目の「理解できた」ボタンが押されるとページ上部に作られたプログレスバーの進捗が２０％まで、２つ目が押されると４０％まで、、、、、５つ押されると１００％まで進捗するというバーを作りたいです。簡単にHTML・CSS・JSのコードを教えていただけないでしょうか。もしくは参考になるサイトがあればご紹介いただけないでしょうか。よろしくお願い致します。

質問日時: 2021/01/01 00:28 質問者: jun123.

ベストアンサー

3

0
このようなサイトで入力を押すと入力する画面になって一覧を押すと一覧が表示されるのは入力と一覧で別のブ

このようなサイトで入力を押すと入力する画面になって一覧を押すと一覧が表示されるのは入力と一覧で別のブラウザを使って入力用の画面と一覧用の画面を作って後から合わせるのですか？仕組みが分からないのでコメントお願いします。

質問日時: 2020/12/31 11:11 質問者: gtwapwja

ベストアンサー

3

0
HP上にあるグラフの再現

https://kabuyoho.ifis.co.jp/index.php?action=tp1&sa=report_ts&bcode=2802 上記のHPで、【株価とリスクオン　相対指数の推移】の部分にグラフがあります。質問① グラフの上にマウスを持っていくと、日付ごとの値が表示されます。この機能を自分で作ったHP上で実現するには、どのような機能を勉強する必要がありますか？質問② 日付ごとの値を表示する機能を除いて、単なるグラフとして(.netのChart)表示するには、どの様にすればいいのか？教えてください。多分、該当部分のHtmlは、 <g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0" transform="translate(56,10) scale(1 1)" clip-path="url(#highcharts-1)"><path fill="none" d="M 1.0785123966942 87.38629842180774 L 3.2355371900826 93.96090387374461 L 5.3925619834711 89.76434720229554 L 7.5495867768595 93.47130559540888 L 9.7066115702479 87.80595408895265 L 11.863636363636 86.75681492109038 L 14.020661157025 86.61692969870873 L 16.177685950413 85.91750358680056 L 18.334710743802 85.28802008608321・・・・・・だと思うのですが、どの部分がデータなのか？分かりません詳し方いらっしゃいましたら教えてください。

質問日時: 2020/12/31 08:37 質問者: minarai_database

ベストアンサー

1

0
webツールを作っているのですが、スマホ用の画面にサイトを合わせるとpc用サイトの画面の横幅が小さく

webツールを作っているのですが、スマホ用の画面にサイトを合わせるとpc用サイトの画面の横幅が小さくなります。 pcの画面に合わせるとスマホ用サイトが横をはみ出してしまいます。 viewportは書きました。

質問日時: 2020/12/30 17:58 質問者: gtwapwja

解決済

1

0
select name が反映されません。なぜでしょうか？

select name が反映されません。なぜでしょうか？

質問日時: 2020/12/30 15:50 質問者: gtwapwja

解決済

1

0
このように種類を選択すると何個かの選択肢がでてその中のひとつを選択すると右のようになるようにするには

このように種類を選択すると何個かの選択肢がでてその中のひとつを選択すると右のようになるようにするにはなんのコードを使えばいいですか？ vs codeを使用しています、 cssとhtmlだけで作れますか？調べても出てこないのでお願いします。

質問日時: 2020/12/30 03:46 質問者: gtwapwja

ベストアンサー

1

0
css3のjustify-contentで、各々違う余白を設定する

例えば、 <section> <div class="a"><img src="a.html></div> <div class="b"><img src="b.html><div> </section> とあります。これら、aクラスとbクラスをそれぞれ、横並びにして、aのマージンレフトを30px,bのマージンレフトを50pxとします。このように、各々違うマージンをmargin-leftを使用せずに、justify-contentで、設定するには、どうすれば、良いでしょうか。

質問日時: 2020/12/30 00:15 質問者: finaltida108070809

解決済

1

1
CSSという文字をspanで色を変えたいのですが波線が出て出来ません。なぜでしょうか？

CSSという文字をspanで色を変えたいのですが波線が出て出来ません。なぜでしょうか？

質問日時: 2020/12/25 16:12 質問者: gtwapwja

ベストアンサー

2

0
width: のところ何故波線つくのですか？何か間違ってるでしょうか？

width: のところ何故波線つくのですか？何か間違ってるでしょうか？

質問日時: 2020/12/25 04:11 質問者: gtwapwja

ベストアンサー

1

0
cssがこのようになってしまうのですがなぜでしょうか？

cssがこのようになってしまうのですがなぜでしょうか？

質問日時: 2020/12/24 19:16 質問者: gtwapwja

解決済

2

0
VS codeでファイルに保存してChromeに貼り付けても上手くいかずVS codeで書いてあるま

VS codeでファイルに保存してChromeに貼り付けても上手くいかずVS codeで書いてあるまま書かれます。なぜでしょうか？

質問日時: 2020/12/23 17:30 質問者: gtwapwja

解決済

1

0
プログラミング初心者です。 HTMLで今、電話予約の日時をカレンダーで指定するためのコードを書いてい

プログラミング初心者です。 HTMLで今、電話予約の日時をカレンダーで指定するためのコードを書いているのですが、下のコードはその１部を抜き取ったものです。付属の画像の赤い丸で囲んでいる部分のコードですが、 " placeholder="___年__月__日"のコードの部分なのですが、「XHTML１０Transitionlでは、＜input＞属性で " placeholderを使用することができません」という表示がでてコードが発動しませんどうしたらよいでしょうか？以下コード　付属写真の赤く囲ってある部分です。 <input type="text" id="input_date1" class="cal lt_004 hasDatepicker" name="time_Ldata01[]" placeholder="___年__月__日" readonly="readonly" value=""> 困っています。回答よろしくお願いします。

質問日時: 2020/12/20 22:14 質問者: pjdmgam

解決済

2

0
料理紹介ページ

プログラミング初心者です。HTMLとCSSで画像のような料理紹介のページを制作するとき、まずどこから手をつければいいですか？

質問日時: 2020/12/20 19:18 質問者: オバケイ

解決済

2

1

←前の結果
1
...
8
9
10
11
12
13
14
15
16
17
18
19
20
次の結果→

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

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

質問する（無料）

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

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

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

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

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

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