プロが教えるわが家の防犯対策術!

ある業務システムのページ(https://)に
業務で使用するCSVファイルダウンロードのリンクが20個ほど列挙されています。
(しかしURLは、・・・/abcd.csv ではなく、/スラッシュで終わってますが、クリックするとcsvが自動的にDLされる)

普段のルーチン作業で使うのは、この中のある6つのファイルだけなので、
選びやすく誤クリックを防ぐため、対象のリンクだけに絞ったHTMLをローカルに保存して使用しています。
そのやり方は、本物のサイトを「名前を付けてページを保存」でHTML(完全)でローカルに保存し、
HTMLを編集しました。

手順としては、一度本番サイトにログインをしておいてから、
デスクトップにおいてあるHTMLファイルを開き、6つのリンクを上から順番にクリックすると、
ダウロードフォルダにcsvが落ちてくる仕組みにしています。

この作業をもっと楽にするためにお知恵を貸してください。
・たとえば1ボタンをクリックするだけで6つともDLできるとか
・ログイン情報もHTMLに入れておいてログインも自動にするとか

このシステムはPassの保存ができなくなっているため、
一度入力したIDはプルダウンから選択できますが、Passは毎回手入力しなければいけません。
事前にログインしておかずにローカルHTMLからリンクをクリックすると、新しいタブにログイン画面が表示されるようになっています。

質問者からの補足コメント

  • HAPPY

    本件に関しては自己解決しました。
    参考までに方法を載せておきます。

    <a href="#" onClick="window.open('URL1');window.open('URL2');window.open('URL3');return false;">すべてダウンロード</a>

    上記の「URL」のところに指定しておけば、1回リンクをクリックするだけでいくつでもDLできました。
    恐らく最初ポップアップブロックされると思うので解除すれば次回からOKです。


    DLしたCSVは1つのエクセルの各シートに取り込む作業があるのですが、
    エクセル側で自動的に上記処理をさせるにはどうしたら良いかアドバイスいただけると助かります。

      補足日時:2018/11/21 11:42

A 回答 (11件中1~10件)

>No.10 回答者: amanojaku6



そのページがクライアント(自分のPCのHDD)にある場合、正常に動作しません。
そのページをサーバー上にアップして下さい。
    • good
    • 0

このスクリプトはポップアップしません。



ブラウザは必ずChromeにして下さい。
ファイルをダウンロード可能です(サーバーからMimeTypeを取得しているので、大抵のファイル拡張子なら問題でしょう)。
リンクをクリックする必要はありません。
ファイルの設定はDownloadFileList = ["images008.jpg", "images009.jpg", "images010.jpg"]です、この「"images008.jpg", "images009.jpg", "images010.jpg"」を変更して下さい。
一気に複数のファイルをダウンロードするので、ファイル・サイズが大きいと問題が発生するかもしれません。



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
<title>Sample</title>
</head>
<body>

<script type='text/javascript'>

// ブラウザは必ずChromeにして下さい。
// 一気に複数のファイルをダウンロードするので、ファイル・サイズが大きいと問題が発生するかもしれません。

DownloadFileList = ["images008.jpg", "images009.jpg", "images010.jpg"];

FileDownload = function(DownloadFile) {
this.DownloadFile = DownloadFile;
};
FileDownload.prototype.DownloadAnchorClick = function() {
this.DownloadAnchor.click();
};
FileDownload.prototype.CreateDownloadNoneTag = function() {
this.DownloadAnchor = document.createElement("a");
this.DownloadAnchor.style.display = 'none';
document.body.appendChild(this.DownloadAnchor);
this.DownloadAnchor.href = 'JavaScript:;';
this.DownloadAnchor.download = this.DownloadFile;
this.DownloadAnchor.onclick = this.FDownload();
};
FileDownload.prototype.FLoad = function(url) {
let content;
this.DownloadHttpReq = new XMLHttpRequest();
this.DownloadHttpReq.open( "GET", url, false );
this.DownloadHttpReq.overrideMimeType('text\/plain; charset=x-user-defined');
// MIME タイプを上書きしてブラウザーに強制的に、ユーザー定義の文字セットを使用したプレインテキストとして扱わせます。
// これにより、ブラウザーはこれを解釈せず、未処理のままバイト列を通します。
this.DownloadHttpReq.send(null);
content = this.DownloadHttpReq.responseText;
if( this.DownloadHttpReq.status==200 ) this.DownloadMimeType = this.DownloadHttpReq.getResponseHeader('content-type');
else content = null;
return content;
};
FileDownload.prototype.FDownload= function() {
let BinaryArray = StringToBinaryArray(this.FLoad(this.DownloadFile));
let blob = new Blob([BinaryArray], {type: this.DownloadMimeType});
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, this.DownloadFile);
// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
window.navigator.msSaveOrOpenBlob(blob, this.DownloadFile);
} else {
this.DownloadAnchor.href = window.URL.createObjectURL(blob);
}
}

FileDownloadObjList = new Array(DownloadFileList.length);
for( let i = 0; i<FileDownloadObjList.length; i++ ){
FileDownloadObjList[i] = new FileDownload(DownloadFileList[i]);
FileDownloadObjList[i].CreateDownloadNoneTag();
FileDownloadObjList[i].DownloadAnchorClick();
}

function StringToBinaryArray(s) {
let buf = new ArrayBuffer(s.length);
let BinaryInterface = new Uint8Array(buf);
for (let i=0; i<s.length; i++) {
BinaryInterface[i] = s.charCodeAt(i);
}
return buf;
}

</script>

</body>
</html>
    • good
    • 0

> あとはダウンロードまでVBAで行えるかなのですが、


> DL.html を開いて、補足に記載している「すべてダウンロード」をクリックさせるのをVBAでで
> きないでしょうか?
> もちろん方法が変わっても構いません。

これは【基本的には】出来ないと考えてください。
なぜならこれは、ダウンロードに限ってのみVBAから操作しようとしているからです。

理由や対応方法は後述しますが、回答を書いている最中に状況を鑑みて、なんか出来そうな気がしてきました。
もしかして、ログインしていなくてもダウンロードできるほどザルなのでは?と思って。

試しにVBAで新規ブラウザを操作し、『すべてダウンロード』のページにナビゲーションさせ、DOM操作でリンククリックさせてみてください。
以下ページなどを参考に。
https://vba-code.net/ie/click-a-link/

正規ルートでログインしていても、ログインしていないとみなされてうまくいかないなら、後述する案1、案2などの方法を取らなければ実現することはできません。



以下、技術的な知見や対応案です。

ダウンロードの方法が今の方法でうまく言っているのは、恐らく『同じブラウザ内』で操作しているからです。
セッションという概念のもとに、同じアプリケーションからの一連のアクセスだと認識しているから実施可能となっています。
(まぁ、名前を付けて保存したようなローカルページからいじれるなんてのはセキュリティ的にはNGなシステムですが)

ローカルページを操作するタイミングで別なアプリケーション(VBA)から操作しようとすると、それは元のログインしたアプリケーションとは別セッション扱いになり、ログインしていないとみなされ、恐らく希望する動作を行うことができません。
(できるようだったらやってしまえばいいです!システムの穴を突く形になりますが)

そのため、VBAから制御するには【基本的には】以下の2パターンが考えられます。

【案1】
起動済みのブラウザの対象ページを捕捉し、DOM操作によってボタンを押させる。
以下を参考に。
https://www.vba-ie.net/ie/iefind.php#a9
https://vba-code.net/ie/

ただ、捕捉に関しては、ブラウザはタブという概念があります。
そのため、プロセス名『iexplorer.exe』、名前『Internet Explorer』というものは
複数存在する可能性がありますので、自力で走査しなければなりません。
または、求めているページが必ず表示されているとは限りません。

まずはIE自体を捕捉し、その後、ローカルページにナビゲーションさせて、DOM操作をする、という手順がいいかもしれません。
が、これも、VBAで制御中に、人間が、例えばIEを閉じたり、ページ遷移させたりすると正しく動作しませんので、それを理解した上での話になります。

この方法は、運用する手順の入口から出口までが一本化されていないので、複雑化する傾向が出ます。

【案2】
先に記したセッションの関係上、VBAでログインからダウンロードまですべてを行う。
VBAから新たにブラウザをバックグラウンドで起動させ、VBAで全部処理させる形です。
手抜きすることなく、VBAで全部頑張るということですね。
しかしこれも、VBAで制御中に、手動で、ブラウザのプロセスを終了させると正しく完了できませんので、それも理解した上での話になります。


何でもかんでも自動化を望み始めると、恐らくどれもハードルが高くなりますので、
やれるならやればいいですけど、どこかで妥協することも必要になるかもしれませんね。
    • good
    • 0
この回答へのお礼

ありがとうございます。
じっくり読みながら確認していきます。

お礼日時:2018/11/29 15:29

ブラウザ(JavaScript)で複数のファイルを一括ダウンロードさせる


https://symfoware.blog.fc2.com/blog-entry-1978.h …
    • good
    • 0
この回答へのお礼

補足に書いた方法で一括DLが実現したのですが、Javascriptでやる事の優位性を教えていただけると幸いです。

お礼日時:2018/11/26 11:01

> 「エクセル側で自動的に上記処理をさせるには」と申し上げております。


Excel側で操作することはヨシなわけですね。

であれば、
Sample.xlsx
Sample1.csv
Sample2.csv
Sample3.csv
というファイルをすべて同一ディレクトリ配下に設置するというルールを設け、
Sample.xlsxで、各CSVを取り込んでください。
データ → テキストファイル から取り込めます。

その後は、CSVファイルだけを差し替え、
データ → すべて更新
を押下すれば、勝手に同期します。

なお、
データ → すべて更新(▼部分をクリック) → 接続のプロパティ で
『更新時にファイル名を確認』というチェックを外せば、いちいちファイルの選択を求められません。
    • good
    • 0
この回答へのお礼

ありがとうございます。この方法で要望を満たせます。
VBAで「全て更新」の実行もできました。

あとはダウンロードまでVBAで行えるかなのですが、
DL.html を開いて、補足に記載している「すべてダウンロード」をクリックさせるのをVBAでできないでしょうか?
もちろん方法が変わっても構いません。

お礼日時:2018/11/26 11:04

> DLしたCSVは1つのエクセルの各シートに取り込む作業があるのですが、


> エクセル側で自動的に上記処理をさせるにはどうしたら良いかアドバイスいただけると助かります。

ブラウザからExcelは操作できません。
最終的なアウトプットがExcelならば、最初から全部VBAでやった方がいいかと思います。
    • good
    • 0
この回答へのお礼

ブラウザからExcelの操作はできない事は承知の上での質問です。
「エクセル側で自動的に上記処理をさせるには」と申し上げております。

お礼日時:2018/11/22 16:10

No4です



>試そうとしましたが、URLを貼るとログイン画面になってしまい
No4にも記しましたが、URL指定だけで取得できない場合は単純にはいかないですね。
サイトの仕組みにもよるので、成功している方法で行うのが宜しいかと。

もしも、DL後にVBAで読み込むのであれば、No3の方法で連続して処理するようにしてしまえば、方法はともかく、直接読み込んでいるような感じに見えるのではないでしょうか?
    • good
    • 0

No3です



>DLしたCSVは1つのエクセルの各シートに取り込む作業があるのですが、
URL指定だけで読み取れるようなものでしたら、エクセルのWEBクエリを利用すれば、いちいちCSVファイル経由でなんてことを意識しなくても良くなりそうな気がしますが?
    • good
    • 0
この回答へのお礼

すみません。
言ってる意味が理解できませんでした。

実際にWEBクエリで試そうとしましたが、URLを貼るとログイン画面になってしまい、
ログインすると、ファイルを開くか保存するかというダイアログが出るので何をしたら良いか分かりませんでした。

お礼日時:2018/11/21 13:05

こんにちは



通常のHTMLやスクリプトの仕組みではちょっと無理っぽいので、別の角度からの回答です。
要は、『手間を省きたい』という主旨のようですので、操作をそのまま自動化するという考え方でのアプローチです。

対象サイトの構造や処理の仕組みによってはうまくいかない場合もありますが、基本的な操作の自動化に関しては以下の辺りを組み合せれることで実現可能と思いますのでご参考までに。

なお、以下のサイトの内容は吟味していません。あくまで参考としての列挙です。
検索すれば数多くの説明サイトが見つかると思いますので他のサイトもご覧ください。
ヒットしたものの内容がVBAのものが多いですが、別にVBAにこだわる必要もなく、VBその他でもよろしいかと思います。

<ログイン>
https://tonari-it.com/vba-ie-login/
https://qiita.com/salmonosushi/items/9ce79759de6 …

<クリック>
http://www.fastclassinfo.com/entry/vba_ie_links_ …
https://vba-code.net/ie/click-a-button/
    • good
    • 0

ctrl+a 右クリック保存

    • good
    • 0

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qチェックボックスで指定したものをダウンロード

JavaScriptの初心者です。
画像一枚毎にチェックボックスを作って、チェックした画像がダウンロードボタンをクリックすると保存されるようなHPを作りたいのですが、いろいろ調べているのですがどのようにすればよいのか見当がつきません。どうかご存じの方よろしくお願いします。

イメージは、フォトギャラリーのサムネイル画像の下にチェックボックスがあってチェックした画像のみダウンロードするという感じです。

CGIを使わずにできるかどうかも合わせてご教示いただけたらと思います。


<FORM NAME="form1">
<INPUT TYPE="checkbox" VALUE="1"> 画像(1)
<INPUT TYPE="checkbox" VALUE="2"> 画像(2)
<INPUT TYPE="checkbox" VALUE="3"> 画像(3)
<INPUT TYPE="checkbox" VALUE="4"> 画像(4)
<INPUT TYPE="checkbox" VALUE="5"> 画像(5)<BR>
<INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="ダウンロード">
</FORM>

JavaScriptの初心者です。
画像一枚毎にチェックボックスを作って、チェックした画像がダウンロードボタンをクリックすると保存されるようなHPを作りたいのですが、いろいろ調べているのですがどのようにすればよいのか見当がつきません。どうかご存じの方よろしくお願いします。

イメージは、フォトギャラリーのサムネイル画像の下にチェックボックスがあってチェックした画像のみダウンロードするという感じです。

CGIを使わずにできるかどうかも合わせてご教示いただけたらと思います。


<FORM NAME="f...続きを読む

Aベストアンサー

>画像ファイルを一枚一枚zip形式にして

なるほど、でしたら以下でいけるかも。
ただ、ブラウザやユーザーの環境によっては誤動作の可能性があるので
ユーザーには注意を喚起してください
(ユーザビリティのためlabelを設定してありますがなくてもよいです)

<script>
function download(f){
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" && f[i].checked){
var n=window.open(f[i].value);
}
}
}
</script>
<form>
<input type="checkbox" value="1.zip" id="img_1"><label for="img_1"><img src="1.jpg"></label>
<input type="checkbox" value="2.zip" id="img_2"><label for="img_2"><img src="2.jpg"></label>
<input type="checkbox" value="3.zip" id="img_3"><label for="img_3"><img src="3.jpg"></label>
<input type="button" value="download" onclick="download(this.form)">
</form>

>画像ファイルを一枚一枚zip形式にして

なるほど、でしたら以下でいけるかも。
ただ、ブラウザやユーザーの環境によっては誤動作の可能性があるので
ユーザーには注意を喚起してください
(ユーザビリティのためlabelを設定してありますがなくてもよいです)

<script>
function download(f){
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" && f[i].checked){
var n=window.open(f[i].value);
}
}
}
</script>
<form>
<input type="checkbox" value="1.zip" id="img_1"><label for="img_1"...続きを読む

Q[html]ラジオボタンを使った診断の作成アドバイスをお願いいたします。

ラジオボタンを使った診断を作成したく、アドバイスを頂けますでしょうか。
html,cssで簡単なサイト作成ができる程度の知識しかなく、煮詰まっています。
html、javascript、jQuery…理想の形が作れれば形式は問いません。

ーーーーーーーーーーー
▼作成したい内容
・20問程度の設問
・設問に対して回答は3~5つ(ラジオボタン)
・診断結果は4種類(性格診断)→〇、△、□、×

ラジオボタンを使った診断系でよくみられるのが
「value」を使い、0,1,2…と数字を入れていく方法だと思うのですが、
ひとつの回答にひとつの点数ではなく、複数の別々の点数を当てはめたく困っています。

例)ーーーーーーーーーーー
【設問1】怒りを感じた時にあなたのとる行動は?
回答A:ふて寝        (点数→ 〇0点、△1点、□2点、×3点)
回答B:相手に怒りをぶつける (点数→ 〇1点、△2点、□0点、×3点)
回答C:第三者に愚痴を言う  (点数→ 〇2点、△0点、□1点、×3点)

【設問2】悲しいと感じた時にあなたのとる行動は?
回答A:引きこもる      (点数→ 〇3点、△0点、□0点、×1点)
回答B:泣き叫ぶ       (点数→ 〇0点、△1点、□2点、×4点)
回答C:誰かに共感を求める  (点数→ 〇4点、△3点、□1点、×0点)
回答D:楽しいことをする   (点数→ 〇2点、△4点、□3点、×2点)

↓↓↓
【診断結果】
〇:合計20点、△:合計18点、□:合計30点、×:合計9点
→一番特典の高い「□」タイプだと診断
ーーーーーーーーーーーーーー

このように、複数の点数を使い結果を表示したいのです。
なお、画像等は使わず、テキストだけのできるだけシンプルなページにしたいと考えています。

浅学でそもそもこの形式が可能かどうかもわかっていないのですが、、アドバイスを頂けますと幸いです。何卒宜しくお願いいたします。

ラジオボタンを使った診断を作成したく、アドバイスを頂けますでしょうか。
html,cssで簡単なサイト作成ができる程度の知識しかなく、煮詰まっています。
html、javascript、jQuery…理想の形が作れれば形式は問いません。

ーーーーーーーーーーー
▼作成したい内容
・20問程度の設問
・設問に対して回答は3~5つ(ラジオボタン)
・診断結果は4種類(性格診断)→〇、△、□、×

ラジオボタンを使った診断系でよくみられるのが
「value」を使い、0,1,2…と数字を入れていく方法だと思うのですが、
ひとつ...続きを読む

Aベストアンサー

こんにちは

一般的な解決法とは言えませんが、value属性を利用して簡便に値を設定する方法の一例です。
点数が0~9と考えて、例えば value="0123" の各桁を〇△□×に対応させるという考え方です。
ですので、数が増えたり点数の桁が増えたりするとそのままでは使えません。
ただし、そういった限定しているために処理はかなり簡単になります。

>浅学でそもそもこの形式が可能かどうかもわかっていないのですが
論理的に記述できる処理であれば、大抵の計算は可能だと思います。
以下は、「可能」ということの一例ですので、一般的な考え方ではありません。

ひとまず、判定をするだけの簡単なものにしてあります。
※ご質問文に無いので、未入力のチェックはしていません。
※IEはアロー記法に対応していないようなので、無視しています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#QA, #QA * { margin:0; padding:0; }
#QA { list-style-type:none; counter-reset:qnum; }
#QA li { margin-bottom:1em; counter-increment:qnum 1; }
#QA li p { display:inline-block; }
#QA label { display:block; margin-left:6.5em; }
#QA li::before { content:"【設問 " counter(qnum) " 】"; }

#diagnosis { margin:1em; padding:0.5em 1.5em; }
</style>

<script type="text/javascript">
document.addEventListener("click", (e)=>{
if(e.target.id != "diagnosis") return;

let result = [0,0,0,0], max = 0, idx;
document.querySelectorAll("#QA>li").forEach((elm)=>{
let inp = elm.querySelector('input[type="radio"]:checked');
if(inp){ inp.value.split("").forEach((v, i)=>{ result[i] += +v; }); }
});

result.forEach((v, i)=>{
if(v>max){ max = v; idx = i; }
});
alert("結果は " + "〇△□×".substr(idx, 1) + " です");
});
</script>
</head>

<body>
<ul id="QA">
<li><p>怒りを感じた時にあなたのとる行動は?</p>
<label><input name="Q1" type="radio" value="0123" />ふて寝</label>
<label><input name="Q1" type="radio" value="1203" />相手に怒りをぶつける</label>
<label><input name="Q1" type="radio" value="2013" />第三者に愚痴を言う</label>
</li>

<li><p>悲しいと感じた時にあなたのとる行動は?</p>
<label><input name="Q2" type="radio" value="3001" />引きこもる</label>
<label><input name="Q2" type="radio" value="0124" />泣き叫ぶ</label>
<label><input name="Q2" type="radio" value="4310" />誰かに共感を求める</label>
<label><input name="Q2" type="radio" value="2432" />楽しいことをする</label>
</li>
</ul>
<hr />
<input id="diagnosis" type="button" value="診 断" />
</body>
</html>

こんにちは

一般的な解決法とは言えませんが、value属性を利用して簡便に値を設定する方法の一例です。
点数が0~9と考えて、例えば value="0123" の各桁を〇△□×に対応させるという考え方です。
ですので、数が増えたり点数の桁が増えたりするとそのままでは使えません。
ただし、そういった限定しているために処理はかなり簡単になります。

>浅学でそもそもこの形式が可能かどうかもわかっていないのですが
論理的に記述できる処理であれば、大抵の計算は可能だと思います。
以下は、「可能」ということの一例...続きを読む

QHTMLについての質問です。

今ホームページを自作しています。

HTMLでidやclass属性を使ってローカルフォルダ内のトップページから同じフォルダ内にある
別のページの特定の部分へ飛ぶように組み込もうと思っていて
ある本では<a href="htmlファイルのパス#+id属性値">と書いてありました。
もしclass属性を用いる場合も記述の仕方は変わらないのでしょうか?

上の質問とは関係ありませんが
cssの方でid属性を指定する場合は#〇〇,class属性を指定する場合はh2.〇〇みたいに書く
というのを少し前に知ったのでこんがらがってしまっています。

アドバイス宜しくお願い致します。

Aベストアンサー

classはユニークな属性ではないので、class指定をしてリンク先にすることはできません
飛び先に指定したいなら個別にユニークなidを振って下さい

Qsplitで複数のキーワードで分割する正規表現の書き方

URLクエリに日付フィールドの検索条件を渡すjavascriptをカスタマイズしているのですが、
「like」or「<=」or「>=」で文字を分割し、配列に格納する部分で、splitの正規表現の書き方を以下のようにしているのですが上手くいってないようです。


for( var i = 0; i < parameters.length; i++ ){
var k = /like|<=|>=/; //分割するキー
var element = parameters[ i ].split(k);
var paramName = decodeURIComponent( element[ 0 ] );
var paramValue = decodeURIComponent( element[ 1 ] );

// スペースと""をtrimして、文字列だけにしてから、配列に格納
result[ paramName.replace(/^\s+|\s+$/g, "") ] = paramValue.replace(/^[\s|\"]+|[\s|\"]+$/g, "");
}

どのようにしたら正しく分割されますでしょうか?

URLクエリに日付フィールドの検索条件を渡すjavascriptをカスタマイズしているのですが、
「like」or「<=」or「>=」で文字を分割し、配列に格納する部分で、splitの正規表現の書き方を以下のようにしているのですが上手くいってないようです。


for( var i = 0; i < parameters.length; i++ ){
var k = /like|<=|>=/; //分割するキー
var element = parameters[ i ].split(k);
var paramName = decodeURIComponent( element[ 0 ] );
var paramValue = decodeURIComponent( element[ 1 ] );

// スペー...続きを読む

Aベストアンサー

こんにちは

>var k = /like|<=|>=/;
は、正規表現リテラルとなるはずなので、ご提示の記述で問題は無いと思います。(文字列ではない)
具体的にどのような内容を解釈しようとするとうまくいかないのでしょうか?

ご提示のスクリプトから勝手に想像すると・・・
得られた{ key, value }値で、valueがundefinedなどになっているものがあるかも。
元のparametersが指定のセパレータを含んでいない場合は、element[ 1 ]は未定義になりますが、スクリプトではそのまま使っているので・・・
あるいは、元のparametersが複数のセパレータを含んでいる可能性はないのでしょうか?
この場合は全て分割されるので、仮にelement[ 2 ]以降が存在したとしても無視されることになります。

Qweb・レスポンシブデザインについて

コーディング初心者です。

画像の右側にテキストが入るようなコーディングをしました。(※画像参照)
PC表示では成功したのですが、スマホ表示がうまくいきません。

スマホ表示では画像を非表示にしてテキストだけ流したいのですが、
まず画像をdisplay:none;にしたところ、
画像は非表示になったのですが、テキストボックス?が左に寄ってしまって、
右側に変な空間が出来てしまいます。(※画像参照)

タグはこんな感じです。タグの書き方を紹介しているサイト様のものを参考にしました。

【HTML】
<div class="box">
<img src="画像.jpg" width="400px">
<div class="right">
<p>この文章はダミーです~</p>
</div></div>


【CSS @media screenの部分】※max-width:1000px

.box {
margin: 10px 0;
float: left;
background: #CEECF5 ;
}
.box img {
max-width: 30%;
float: left;
}
.box p {
margin: 0;
padding: 10px;
text-align: left;
font-size: 1.2em;
line-height: 1.6em;
}
.right {
width: 70%;
float: left;
}


%指定しているwidthの部分を無効にすれば治るのでは?と思っているのですが、
どうやったら解除されるのか、わかりません。
floatをnoneにしてみたり、widthを100%にしてみたりしているのですが、
見当違いなことをしているのか、クラス名の指定場所を間違えているのか、全く変わりません。

いったい何が邪魔をしているのでしょうか…
そもそもこういう方法自体が古かったりしますか?

これだけでは判断できないかもしれませんが、
お詳しい方、教えていただけると嬉しいです。

よろしくお願いします。

コーディング初心者です。

画像の右側にテキストが入るようなコーディングをしました。(※画像参照)
PC表示では成功したのですが、スマホ表示がうまくいきません。

スマホ表示では画像を非表示にしてテキストだけ流したいのですが、
まず画像をdisplay:none;にしたところ、
画像は非表示になったのですが、テキストボックス?が左に寄ってしまって、
右側に変な空間が出来てしまいます。(※画像参照)

タグはこんな感じです。タグの書き方を紹介しているサイト様のものを参考にしました。

【HTML...続きを読む

Aベストアンサー

古い方法でも今のブラウザは、全てサポートされていますので大丈夫です。
#1さんのように、CSS3のFLEXでも良いでしょうが、
もっとも単純なのは、画像に回り込み(float)させるだけです。

で、「←こうしたい」のご希望ですが、
右側に約半分もの空白スペースがあるのは、おかしくないですか??


<div class="box">
<img src="画像.jpg" alt="***">
<p>この文章はダミーです~</p>
</div>


.box {
width:100%; overflow: hidden;
margin: 10px 0;
float: left; /* ←これ不要なのでは? */
background: #CEECF5 ;
}
.box img {
max-width: 30%; /* ←minも加えると良い */
float: left;
margin-right:10px;
}
.box p {
margin: 0;
padding: 10px;
text-align: left;
font-size: 1.2em;
line-height: 1.6em;
}

/* 480px以下 */
@media only screen and (max-width: 480px){
.box img { display: none;}
} /* //480px以下 */



CSSは、最初に両方を設定せずに、
PC用か、スマホ用か、どちらかだけを基本に書いて、
その後から、@mediaクエリでどちらか一方を編集するだけです。

その他、

<p>の中に画像を入れても構いませんし、その場合には、<div>すら不要になり、もっとも簡素化出来ます。

背景画像にして、背景分のpadding-leftでも可能です。

古い方法でも今のブラウザは、全てサポートされていますので大丈夫です。
#1さんのように、CSS3のFLEXでも良いでしょうが、
もっとも単純なのは、画像に回り込み(float)させるだけです。

で、「←こうしたい」のご希望ですが、
右側に約半分もの空白スペースがあるのは、おかしくないですか??


<div class="box">
<img src="画像.jpg" alt="***">
<p>この文章はダミーです~</p>
</div>


.box {
width:100%; overflow: hidden;
margin: 10px 0;
float: left; /* ←これ不要なのでは? */
background: #CEECF5...続きを読む

Q多次元配列の出力のところがわかりません。

ここの多次元配列の出力するやり方が分かりません。

/** 部署データ(定数) */
★public static final String[][] QUATERDATA = {
{"総務部","業務部","システム部"},
{"5","10","35"},
};
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

package practice13.common;

/**
* ユーザ情報を保持するクラスです
* @author rhizome
*
*/
public class Person {
/** 基準値 */
public static final int BASE_NO = 1000;

/** ユーザID */
public int userId;
/** ユーザ名 */
public String userNm;
/** メールアドレス */
public String mail;
/** パスワード */
public String password;
/**
* ユーザIDを取得します
* @return ユーザID
*/
public int getUserId() {
return userId;
}
/**
* ユーザIDを設定します
* @param userId 設定したいユーザID
*/
public void setUserId(int userId) {
this.userId = userId;
}
/**
* ユーザ名を取得します
* @return ユーザ名
*/
public String getUserNm() {
return userNm;
}
/**
* ユーザ名を設定します
* @param userNm 設定したいユーザ名
*/
public void setUserNm(String userNm) {
this.userNm = userNm;
}
/**
* メールアドレスを取得します
* @return メールアドレス
*/
public String getMail() {
return mail;
}
/**
* メールアドレスを設定します
* @param mail 設定したいメールアドレス
*/
public void setMail(String mail) {
this.mail = mail;
}
/**
* パスワードを取得します
* @return パスワード
*/
public String getPassword() {
return password;
}
/**
* パスワードを設定します
* @param password 設定したいパスワード
*/
public void setPassword(String password) {
this.password = password;
}

}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
package practice13.common;

public class Employee extends Person {

private String departmentNm;
private int departmentCnt;

public String getDepartmentNm() {
return departmentNm;
}
public void setDepartmentNm(String departmentNm) {
this.departmentNm = departmentNm;
}
public int getDepartmentCnt() {
return departmentCnt;
}
public void setDepartmentCnt(int departmentCnt) {
this.departmentCnt = departmentCnt;
}
}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
package practice13.ptra13;

import practice13.common.Employee;

public class PTra13_09 {



/** 名前データ(定数) */
public static final String[] NAMEDATA = {"山田", "佐藤", "小林"};

/** メールデータ(定数) */
public static final String[] MAILDATA = {"yamada@hoge.com","satou@hoge.com","kobayashi@hoge.com"};

/** パスワードデータ(定数) */
public static final String[] PASSDATA = {"rezo0001","rezo0002","rezo0003"};

/** 部署データ(定数) */
★public static final String[][] QUATERDATA = {
{"総務部","業務部","システム部"},
{"5","10","35"},
};

public static void main(String[] args) {

// ★ 定数で定義されている各データを使用して、Employeeインスタンスを3つ作成してください
Employee employee=new Employee();
for(int i=0;i<NAMEDATA.length;i++) {
employee.setUserNm(NAMEDATA[i]);
System.out.println(employee.getUserNm());


}for(int k=0;k<MAILDATA.length;k++) {
employee.setMail(MAILDATA[k]);
System.out.println(employee.getMail());


}for(int b=0;b<PASSDATA.length;b++) {
employee.setPassword(PASSDATA[b]);
System.out.println(employee.getPassword());


}






System.out.println(employee.getDepartmentCnt());

System.out.println(employee.getDepartmentNm());
}}

ここの多次元配列の出力するやり方が分かりません。

/** 部署データ(定数) */
★public static final String[][] QUATERDATA = {
{"総務部","業務部","システム部"},
{"5","10","35"},
};
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

package practice13.common;

/**
* ユーザ情報を保持するクラスです
* @author rhizome
*
*/
public class Person {
/** 基準値 */
public static final int BASE_NO = 1000;

/** ユーザID */
public int...続きを読む

Aベストアンサー

public class PTra13_09 {

/** 名前データ(定数) */
public static final String[] NAMEDATA = {"山田", "佐藤", "小林"};

/** メールデータ(定数) */
public static final String[] MAILDATA = {"yamada@hoge.com","satou@hoge.com","kobayashi@hoge.com"};

/** パスワードデータ(定数) */
public static final String[] PASSDATA = {"rezo0001","rezo0002","rezo0003"};

/** 部署データ(定数) */
public static final String[][] QUATERDATA = {
{"総務部","業務部","システム部"},
{"5","10","35"},
};

public static void main(String[] args) {
// ★ 定数で定義されている各データを使用して、Employeeインスタンスを3つ作成してください
Employee[] employee = new Employee[3];
// ↑employee配列の作成

for(int i=0; i<employee.length; i++) {
System.out.println("i="+i);
employee[i] = new Employee();
// ↑Employeeインスタンスの生成
employee[i].setUserNm(NAMEDATA[i]);
System.out.println(employee[i].getUserNm());
employee[i].setMail(MAILDATA[i]);
System.out.println(employee[i].getMail());
employee[i].setPassword(PASSDATA[i]);
System.out.println(employee[i].getPassword());
employee[i].setDepartmentCnt(Integer.valueOf(QUATERDATA[1][i]).intValue());
System.out.println(employee[i].getDepartmentCnt());
employee[i].setDepartmentNm(QUATERDATA[0][i]);
System.out.println(employee[i].getDepartmentNm());
System.out.println();
}
}
}

【実行結果】

>i=0
>山田
>yamada@hoge.com
>rezo0001
>5
>総務部
>
>i=1
>佐藤
>satou@hoge.com
>rezo0002
>10
>業務部
>
>i=2
>小林
>kobayashi@hoge.com
>rezo0003
>35
>システム部

public class PTra13_09 {

/** 名前データ(定数) */
public static final String[] NAMEDATA = {"山田", "佐藤", "小林"};

/** メールデータ(定数) */
public static final String[] MAILDATA = {"yamada@hoge.com","satou@hoge.com","kobayashi@hoge.com"};

/** パスワードデータ(定数) */
public static final String[] PASSDATA = {"rezo0001","rezo0002","rezo0003"};

/** 部署データ(定数) */
public static final String[][] QUATERDATA = {
{"総...続きを読む

Qif文の判定について

こんにちは。
IF文の判定についておしえてください。

Checkboxにチェックが入っていればTRUE チェックがなければfalseと判定するプログラムです。

実行されたとき、ウオッチリストでみると ctrl.valueの値は「false」となってます。

パターン1では、d1=falseが実行され
パターン2では、d=tureが実行されます。

パターン1はわかりますが、なぜパターン2ではd=trureが実行されるのでしょうか?
よろしくおねがいいたします。

(提示した二つ以上の条件のどれかが成立すれば、実行される理解なのですが・・)


パターン1

For Each ctrl In TargetForm.Controls

If ctrl.Value <> False Then
d = True
Else
d1 = False
End If

Next
パターン2

For Each ctrl In TargetForm.Controls

If ctrl.Value <> False Or ctrl.Value <> "" Then
d = True
Else
d1 = False
End If

Next

こんにちは。
IF文の判定についておしえてください。

Checkboxにチェックが入っていればTRUE チェックがなければfalseと判定するプログラムです。

実行されたとき、ウオッチリストでみると ctrl.valueの値は「false」となってます。

パターン1では、d1=falseが実行され
パターン2では、d=tureが実行されます。

パターン1はわかりますが、なぜパターン2ではd=trureが実行されるのでしょうか?
よろしくおねがいいたします。

(提示した二つ以上の条件のどれかが成立すれば、実行される...続きを読む

Aベストアンサー

TRUE <> "" だから。


ところで、なぜこんなコードになっているの?
予想ではチェックボックスは1つしか無いのに、for each *** in *** の構文を使うなんて。

QHTMLタグ(JAVAスクリプト?)に詳しい方教えて下さい。

添付画像のようなページを作りたいです。
【フレーム1】でクリックした文字が【フレーム2】のテキストエリアに入力されるにはどうしたら良いでしょうか。

https://oshiete.goo.ne.jp/qa/5668279.html
↑の回答が希望に近いのですが、
・フレーム外のテキストボックスに入力されるようにしたい
・添付画像のようにクリックした回数分、文字が続けて表示されるようにしたい
です。

やり方がわかる方がいらっしゃいましたら教えて頂けたら嬉しいです。
よろしくお願いします。

Aベストアンサー

全画面を横に分割するフレームの様な画面設計ならば

<script>
window.addEventListener('DOMContentLoaded', function(){
var x = document.querySelector('#input-triggers');
x.addEventListener('click',function(ev){
var t = ev.target;
if (t.name && t.name == 'input-text') {
document.querySelector('#output-target').value += t.textContent;
ev.preventDefault();
}
}, false);
}, false);
</script>

<style>
html,body { margin:0; width:100%; height:100%; }
#container { display:grid; grid-template-columns:16em 1fr; grid-template-rows:1fr; }
#container > * { padding:1ex; overflow:auto; border:thin solid black; }
</style>

<body id="container">
<section id=input-triggers>
<p><a name="input-text" href="#">触ってください</a>
<p><button name="input-text" type=button>押してください</button>
</section>
<section>
<textarea id="output-target">初期入力</textarea>
</section>
</body>

当の昔に廃れていて、ただ過去との互換性のために残っている <frame> 要素を使わなければならない、なんらかの特別な理由がある場合ならば

<frameset cols="300,*">
<frame src="a.html" name=a>
<frame src="b.html" name=b>
</frameset>

<!-- a.html -->
<script>
window.addEventListener('DOMContentLoaded', function(){
var x = document.querySelector('#input-triggers');
x.addEventListener('click',function(ev){
var t = ev.target;
if (t.name && t.name == 'input-text') {
var w = window.top.frames['b'];
if (w) w.document.querySelector('#output-target').value += t.textContent;
ev.preventDefault();
}
}, false);
}, false);
</script>
<section>
<div id=input-triggers>
<p><a name="input-text" href="#">触ってください</a>
<p><button name="input-text" type=button>押してください</button>
</div>
</section>

<!-- b.html -->
<section>
<textarea id="output-target">初期入力</textarea>
</section>

全画面を横に分割するフレームの様な画面設計ならば

<script>
window.addEventListener('DOMContentLoaded', function(){
var x = document.querySelector('#input-triggers');
x.addEventListener('click',function(ev){
var t = ev.target;
if (t.name && t.name == 'input-text') {
document.querySelector('#output-target').value += t.textContent;
ev.preventDefault();
}
}, false);
}, false);
</script>

<style>
html,body { margin:0; width:100%; height:100%; }
#container { displ...続きを読む

Qドキュメントルートより上の階層にあるcssファイルが反映されない

環境:UbuntuServer18.04LST,Apache2
ドキュメントルートより以下の階層に置いた場合は問題ない。
ドキュメントルートと同じ階層なら
<link rel="stylesheet" href="style.css">
一つ下のcssなら
<link rel="stylesheet" href="css/style.css">
そこで、一つ上の階層のcssに置き
<link rel="stylesheet" href="../css/style.css">
とすると、反映されません。ただし、この場合に下の階層に置いたcssディレクトリを
そのまにしておくと、見かけ上は反映されます。
つまり、../と相対パスで上の階層を指定しても、下にあるcssを見てしまっています。
事実、下の階層のcssディレクトリを削除するか名前を変更すると反映されません。
パーミッション等は問題ないと思いますが、試しにドキュメントルートより上の階層の
単純なテキストの読み書きができるか相対パスが通るかどうか試しましたが、問題ありませんでした。
何か見落としている点があるのでしょうか。
よろしくお願いします。

環境:UbuntuServer18.04LST,Apache2
ドキュメントルートより以下の階層に置いた場合は問題ない。
ドキュメントルートと同じ階層なら
<link rel="stylesheet" href="style.css">
一つ下のcssなら
<link rel="stylesheet" href="css/style.css">
そこで、一つ上の階層のcssに置き
<link rel="stylesheet" href="../css/style.css">
とすると、反映されません。ただし、この場合に下の階層に置いたcssディレクトリを
そのまにしておくと、見かけ上は反映されます。
つまり、../と相対パスで上の階層を指定...続きを読む

Aベストアンサー

>count.txtをドキュメントルート以下に置くと、urlをたたくと中身が見えてしまいます。
>したがって、ドキュメントルートより上の階層に置くほうが良いのでは・・・。
>それと同じ発想で、cssのurlを叩いて中身が見られないようにするには上の階層に置くべきかと
>思ったのですが、../ではだめなのです。

それだけ理解されているならもうおわかりと思いますが。。。

count.txtのようなブラウザから「見えてはいけない」ファイルをドキュメントルートの上の階層に置くのは正しい認識です。cgiから読めれば良いわけです。

で、cssは「見えてはいけない」のではなく「見えなければいけない」ファイルなんです。
ブラウザから見えなければ(アクセスできなければ)そのファイルはNotFoundとなり、スタイルシートが反映されないのが自然の流れです。

Qウエブサイトに掲げる綺麗な画像が欲しいけど、自分はデザインのツールなどの使い方は知らない、どうしたら

ウエブサイトに掲げる綺麗な画像が欲しいけど、自分はデザインのツールなどの使い方は知らない、どうしたらいいですか?ただの画像でもウエブサイト作成の会社に依頼する必要なのか?フリーランスの方のほうがもっとよいかと思ってて、どうやってそのような方と連絡取れるでしょうか?もしかしたら他いい方法があれば教えていただければ助かります。

Aベストアンサー

とりあえず フリー素材 を利用することを考えましょう。
https://creive.me/archives/10744/

かなり高度な画像編集ができるフリーソフトもあるようです。
この機会に少しいじれるようになってみるのも良いのではないでしょうか。
https://forest.watch.impress.co.jp/library/nav/genre/pic/piccam_picedit.html


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング