HTML
- htmlで行数が増えた場合に自動的に範囲を広げる
現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。 表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか？ HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows"> <title>タイトル</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body bgcolor="#a9a9a9"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">注文名/オプション<br>注文先・個数</th> <th height="42" size=10>合計金額/合計個数</th> <th height="42" size=20><b>注文者/入力者</b></th> </tr> ーーーここでテーブルから複数行取得 <% for(var i in content) { %> <tr bgcolor="lightyellow"> <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名"> <input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無"> <input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先"> <input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価"> <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額"> <input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数"> </td> <td align="center" height="47" size=20> <input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者"> <input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者"> </td> </tr> <% } %> <div style="width : 468px;height : 16px;top : 486px;left : 441px; position : absolute; z-index : 2; " id="Layer7" align="right"> <input type="submit" value=" 結果 "> <input type="button" value=" キャンセル "> <input type="button" value=" 戻 り "> </div> </form> </div> </body> </html>
- 今日から一か月前の最初と最後の日付を表示させる方法
現在、javascriptを使用してホームページ上に一か月前の最初の日(=1日)と最終日を表示させようとしておりますが、なかなか見つかりません。 今日の日付は newDate()で取得することまではわかりましたが、 ここから一か月前の一日と最終日の表示方法がわかりましたらご教示願います。
- 不要なhtmlや画像ファイルの洗い出し
サイトのメンテナンスをしたいのですが 不要なhtmlや画像ファイルの洗い出しに時間がかかっています。 効率よくサーバー内の利用していないファイルを探す方法はありませんか？
- セキュリティ対策を特にせずにhtml、css、ja
セキュリティ対策を特にせずにhtml、css、javascriptのみで作ったサイトを公開すると、具体的に何か危険なことが起きてしまうのでしょうか？ 調べてみたのですが、初心者のためわからない用語ばかりで理解が難しかったです。読み取れたのは、書き方を気をつけないと危ないのかな ぐらいです。 初心者向けのHTMLなどの本の目次を見てみると、セキュリティの項目は特にないものばかりです。ということは、初心者はひとまず気にしなくても問題ないのでしょうか？ 詳しい方、お力を貸していただけると助かりますm(_ _)m
- htmlについて
このコードでスマホ画面の際、画像を右横に表示しテキストを画像の真横に表示させたいのですが、どうすればいいですか？ <div class="parent"> <div class="child"><img src="image/t1.png"><p class="text">あ</p></div> <div class="child">い</div> <div class="child">う</div> <div class="child">え</div> <div class="child">お</div> </div> 以下css div { font-size: 2rem; text-align: center; margin: 10px; padding: 10px; } .parent { background: lightblue; display: flex; } .child { background: lightgreen; width: 150px; } .child>img { width:100%; } @media screen and (max-width: 800px) { .parent { flex-wrap: wrap; } } @media screen and (max-width: 400px) { .parent { display: block; float:right; } }
- ホームページビルダー２２で公開できないわけ。
また質問させていただきます。 標記の件。 公開のボタンを押すと画像の様になります。 初期状態に戻せませんか？ ボクもやりましたがSPはボタンが少ないように感じます。 これは皆さん、ご存知じゃないでしょうね。 知っている方がいらっしゃれば、どうか、ご回答願います。
- main-back.pngが機能していない。
標記の件。 【夜の灯り】の様な模様がホームページに表示されるのです。 これがhtmlに設定しているにも関わらず、表示されません。 それと写真も表示されません。 どこが悪いのでしょうか・・・？？？ どうか、ご回答のほど、宜しくお願い申し上げます。
- htmlについて
すみません。HTMｌで質問です。 このコードに画像をつけて、画面の縮小に合わせ画像も縮小したいのですが、どうしたらいいですか ？ 内容のところに画像をつけたいです。 <div class="col_3"> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> </div> *, *:before, *:after { box-sizing: border-box; } .col_3{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_3 > div{ width: 33.33333%; padding: 10px; } @media screen and (max-width: 960px) { .col_3 > div{ width: 50%; } } @media screen and (max-width: 480px) { .col_3 > div{ width: 100%; } }
- HTML 構文
HTMLについての質問です。 勉強を始めたばかりですので、至らぬ点はご容赦いただければ幸いでございます。 以下が正解コードの一部です。 .xxx-image { float: left; height: 180px; } .xxx-text-headline { padding-bottom: 15px; } .xxx-text { float: left; padding: 30px 0 0 25px; } .xxx-date { display: inline-block; font-size: 12px; } ーーーーー以下が私が間違えたコードです。 .xxx-image { float: left; height: 180px; } .xxx-text-headline { padding-bottom: 15px; } .xxx-text { float: left; padding: 30px 0 0 25px; } .xxx-date { font-size: 12px; ←間違い箇所 display: inline-block; } ここの順番を間違えただけで、本来ならば画像と文字を一定間隔あけたかったものが、くっついてしましました。 各順番は大切ですか？ よろしくお願いいたいます。
- 締切済み
- daisuke987
- HTML
- 回答数1
- HTML のフォームでaction="" とは何
HTMLのFORMではたいがいaction= の部分はPHPなどのサーバースクリプトの名前が書かれているのですが、時々action="" というのを見かけます。 これはどういう意味なのでしょうか？ 例としては次のようなものです。 <form id="login-id" action="" method="post"> どうかよろしくお願いいたします。
- ベストアンサー
- papashiroSooke
- HTML
- 回答数1
- テキストをHTML、CSSに変換しています。
添付画像の[CONTENTS]、目次ページをHTMLとCSSで作成しなくてはならなくなりました。 文字の大きさ、色の調整、’line-height’、’marigin'などを使い凡そのレイアウトはうまくいきました。 （質問１） わからなかったのが、CONTENTSの右横にある赤の点線です。 これは<hr>を使って'dashed'などをかけてみたのですがうまくいきませんでした。 文字の横ではなく、文字の下側のラインに点線が出来てしまいます。 これは第１章の各項目でも同じことが言えます。文字の右横。文字の高さの中心と同じ高さに点線が作れません。 「 01 エクセルを起動・終了する ---------------------------------- 010」 うまく行く方法をご存知の方いらっしゃいましたら教えてください。 （質問２） リストの左揃えはタグ<dd>に’margin-left’をかけて揃えています。 リストのページ（数字）を右端で揃えるには同様に'margin-right'でうまくいきますか？点線の長さや、リストの文字数を勘案しても添付画像のようにキレイに右端で揃えるにはどうやったらよろしいでしょうか？ 慣れないHTML、CSSで苦労しています。 ご教授お願い致します。 ＊ちなみにこのリストは<dl><dt><dd>で作成しています。 ************************************************** CONTENST --------------------------------------------------------------------- 目次 【第一章】 これだけは知っておこう 01 エクセルを起動・終了する ---------------------------------- 010 02 ウィンドウの構成を知る ------------------------------------ 012 03 ワークシートの構成を知る ---------------------------------- 014 04 ファイル(ブック)を保存する -------------------------------- 016 05 保存した(ブック)を開く ------------------------------------- 018 06 Column 他のバージョンで開くには？------------------------- 020 ******************************************************
- 締切済み
- blueletter12345
- HTML
- 回答数1
- 別ウインドウで開くスマホ向けサイトをPCで見る方法
マクロミルアンケートでスマホ向けの質問が来てました。 パソコンで回答しようと思って、chromeのデベロッパーツールで回答できる状態になるような、選択できるボタンの状態にまでは出来たんですが、 ボタンを押して回答しようとすると、別にウインドウが立ち上がり、そこからは回答できませんでした。パソコンからは回答できないと。 そのウインドウにはデベロッパーツールを起動できる箇所がなく、スマホからアクセスしているように偽装できません。 ならばと思って、別のタブで開いてみたり、別のウインドウで開いてみたりしましたが、 about:blank#blocked というのもがアドレス欄に表示されるだけで、画面は真っ白のままでした。 これはスマホ向けだからブロックしたってことでしょうか？ スマホ向けサイトをパソコンから回答する方法はありませんか？ 素直にスマホから回答すればいい、というのは承知の上です。 出来る事が増えたらいいと思っての質問です。 専門家でもお手上げかもしれませんが・・・ 利用環境 Windows10 Home 1909 64bit chrome バージョン 80.0.3987.14 宜しくお願い致します。
- cssのanimationの設定の仕方
Animationの表示タイミングが合わないので教えてください。 今回初めてcssのanimationを使ってみました。 同時に、jQuery.BgSwitcher を使って背景画像５枚を５秒間づつ表示させてループさせています。（合計２５秒間）そして、cssのanimation でテキストA,B,Cの３枚を２５秒間表示させています。 表示タイミングは 【背景画像1を表示 テキストＡを表示 テキストＢを非表示 テキストＣを非表示】 【背景画像2を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像3を表示 テキストＡを非表示 テキストＢを表示 テキストＣを非表示】 【背景画像4を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像5を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを表示】 背景画像で使用しているjQuery.BgSwitcherの表示時間は1枚５秒です。５枚ですので２５秒でループです。animationが適応されているテキストＡ，Ｂ，Ｃの animation-duration: 25s; にしています。 テキスト画像Ａ，Ｂ，Ｃは表示されるタイミングではopacity:1 にしてそれ以外はopacity:0で非表示にして背景画像1,2,3とテキストA,B,Cとの表示タイミングが合わせたいです。 初めはタイミングよく背景画像とテキスト画像が表示されているのですが徐々に表示タイミングずれてしまい５分ぐらいするとanimationのテキストA,B,Cの表示タイミングが背景画像と大きくずれ、例えばテキストＡが背景画像5で表示されるようになってしまいます。 jQuery.BgSwitcherでの背景画像５枚の１ループの時間は２５秒。animationのテキストA,B,Cのanimation-duration: 25s; なのですが、徐々にずれてしまいます。 animation側の設定に問題があるかもしれませんので教えていただけないでしょうか？ 現在のテストサイトは下記です。 http://cm-creation.net/yoshida/text-anime-test/index13.html どうぞよろしくお願いいたします。Cssとhtml設定は下記です。 ■cssの設定 .bg-slider { width: 99.1vw; height: 100vh; background-position:center center; background-size: cover; display: flex; justify-content: center; position: relative; } .textA { position: absolute; top: 5%; left:20%; animation-name:animation1; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textB { position: absolute; top: 5%; right:20%; animation-name:animation2; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textC { position: absolute; top: 5%; animation-name:animation3; animation-duration: 25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } @keyframes animation1 { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 5% { opacity: 1; transform: translate3d(0, 0, 0); } 26% { opacity: 0; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation2 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 41% { opacity: 0; transform: translate3d(0, 30px, 0); } 45% { opacity: 1; transform: translate3d(0, 0, 0); } 66% { opacity: 0; transform: translate3d(0, 0px, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation3 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 81% { opacity: 0; transform: translate3d(0, 30px, 0); } 85% { opacity: 1; transform: translate3d(0, 0, 0); } 101% { opacity: 0; transform: translate3d(0, 0px, 0); } 102% { opacity: 0; transform: translate3d(0, 0, 0); } } ■html <script> jQuery(function($) { $('.bg-slider').bgSwitcher({ images: image/main10.jpg','image/main11.jpg','image/main12.jpg','image/main13.jpg','image/main14.jpg'], // 切り替える背景画像を指定 interval: 5000, // 背景画像を切り替える間隔を指定 5000=5秒 loop: true, // shuffle: false, // effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定 duration: 500, // エフェクトの時間を指定します。 easing: "swing" // エフェクトのイージングをlinear,swingから指定 }); }); </script> <div class="container-fluid px-0 bg-slider " > <div class="textA"><img src="image/item8.png" class="img-fluid" alt=""/></div> <div class="textB"><img src="image/item9.png" class="img-fluid" alt=""/></div> <div class="textC"><img src="image/item10.png" class="img-fluid" alt=""/></div> </div>
- FFFTPでの編集について
超初心者です。 HPのトップページに少々変更を加えることになったのですが、まず、FFFTPからHP全体のフォルダをPCにダウンロードするまではできました。 その中のindex.html(トップページに該当する部分)を編集しようと思うのですが、どう探してもその中にfooterがありません。 FFFTP内のindex.htmlにもfooterの記載はないのですが、HPでソースを表示するとfooterがあります。 この場合、index.htmlだけ編集後それだけアップロードすれば問題なくfooterが表示されるようになりますか？ また、FFFTPにあるファイルのサイズとダウンロード後のファイルのサイズが若干違うのですが(6498が6643になっています)これは問題ありませんか？ 助けてください、お願いします。
- ベストアンサー
- lawlawlaws
- HTML
- 回答数1
- アンカーテキストはなんでアンカーと呼ぶんですか？
プログラミングのhtmlでアンカーテキストaはなんでアンカーと呼ぶんですか？ a href anchorとは錨のことですか？