複数のWEBページから特定の文字を抜き出したいです

このQ&Aのポイント
  • アロマオンラインショップ生活の木で販売されている商品をEC-CUBEで販売するためのデータを効率的に抜き出したいです。
  • 現在は一品ずつ手作業でデータをアップしているため、時間がかかり間違いも多くなってしまっています。
  • ショップに問い合わせたところ、データ提供はしていないため、ネットからコピーするしか方法がありません。どのように効率的にデータを抜き出す方法があるでしょうか?
回答を見る
  • ベストアンサー

複数のWEBページから特定の文字を抜き出したいです

カテゴリー違いでしたらすみません。 詳しく説明しますと、アロマオンラインショップ生活の木で販売されている商品を EC-CUBEで販売する事になったのですが。 商品数が多すぎて困っています。 下の希望の物が全部出来なくても少しでも効率よく出来れば幸いです。 どうかお力をお貸しください。よろしくお願い致しますm(__)m http://onlineshop.treeoflife.co.jp/goods/?g=084493010 でいうと、 「アニスシード精油」 「古代エジプトではミイラの保存用に防腐剤として使用された。スターアニスとは異なる科に属する。家庭用スパイスとして有名。」 「商品番号08-449-3010 (区分:2)JANコード4954753 037997原産国エジプト学名Pimpinella anisum抽出部位種子抽出方法水蒸気蒸留法開封後の使用目安品質保持期限:商品に記載 開封後1年サイズ箱:30×30×65mm ボトル:φ20×37mm」 「3ml」 「945円」 HTML形式で抜き出せるととても良いのですが・・・ ============= <dl id="ItemDetailDl" class="detailTable clearfix"> <dt id="ItemCodeDt" class="tLine">商品番号</dt> <dd id="ItemCodeDd" class="tLine">08-449-3010 (区分:2)</dd> <dt id="JanCodeDt" class="tLine">JANコード</dt> <dd id="JanCodeDd" class="tLine">4954753 037997</dd> <dt id="OriginCountryDt" class="tLine">原産国</dt> <dd id="OriginCountryDD" class="tLine">エジプト</dd> <dt id="ScientificNameDt" class="tLine">学名</dt> <dd id="ScientificNameDd" class="tLine">Pimpinella anisum</dd> <dt id="ExtractionPartDt" class="tLine">抽出部位</dt> <dd id="ExtractionPartDd" class="tLine">種子</dd> <dt id="ExtractionMethodDt" class="tLine">抽出方法</dt> <dd id="ExtractionMethodDd" class="tLine">水蒸気蒸留法</dd> ================ などの項目を抜き出したいです、現在は一品づつ手作業で商品アップしていますが、 数が多すぎて・・・また間違いも多くなってしまっているので。 ちなみに、ショップに問い合わせたのですが、商品のデータ提供はしていなくて、 紙媒体ならあるのですが、あとはネットからコピーしか方法がありません。 どうにかなりませんでしょうか? ちなみに、今作業している環境は win7 ドリームウィーバー などのコレクションCS4 オフィス2007 サイト全体の抜き出しは「Website Explorer」を使っています。 ほかに必要な情報はありますか? 保存したHTMLから固定のHTMLtaguを抜き出す方法などあれば教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • ki073
  • ベストアンサー率77% (491/634)
回答No.5

大量のファイルを処理するものを書いてみました。inというフォルダの中の拡張子htmlのファイル全部を切り出して、outというフォルダに入れるプログラムです。最初に両方のフォルダを作っておく必要があります。UNIXの書き方でフォルダを指定しているのですが、多分Windowsとの差を吸収してくれると思いますが未確認です。これは ruby -Ku program.rb で動くはずです。(-Kuが必要でしたかMacとは違うみたいですね) >最終的には「oil2.html」のファイルの文字をcsvの商品説明の項目1行目にいれて、 >さらに2行3行「oil3.html/oil4.html・・・・」と続けて入力「oil2000.html」 >くらいあるのですが・・・ ちょっと理解が出来ないのですが、ファイルリストがあるとか、それともファイルリストを作りたいとかでしょうか? 文字を追加したり改変したりも簡単ですので、書き込んでください。 >今日は一日ずっと勉強してるのですが、すごくむずかしいです(;_;) >でも頑張って、効率よくデータを抽出したいです。ご教授頂けると嬉しいです。 すごくいい心がけです。人の書いたプログラムを見て理解するのが早道のように思います。 ちょっと解説 html[%r(<div class="detailArea">.+<!--.detailArea--></div>)m] は中の%r(...)mが正規表現です。普通は/と/で囲みのですが中に/devと/が出てきますので、余り使われない%r(....)のようにしています。こっちの方が見やすいかなと思っただけです。 html[...]はhtmlの中の文字列から正規表現の部分を取り出すというものです。 # やっと6行ですね、あまりプログラムらしくないかな?? Dir.glob("in/*.html"){|fn| html=File.read(fn) open("out/"+File.basename(fn), "w"){|fo| fo.puts html[%r(<div class="detailArea">.+<!--.detailArea--></div>)m] } }

mamez31
質問者

お礼

昨日急な用事で出かけてしまって作業ができなくて、遅くなりすみません。内容だけは見ていたので、早くテストしてみたくてしょうがなかったです(*^_^*) すごいです!出来ました(*^_^*) 私のやりたかった事です!これで作業も格段に速くなります!!! しかも、本当に見やすくて、初心者の私にも見やすく分かりやすいプログラムだし、スマートでかっこいいです! 本当にありがとうございます。なんとお礼を言っていいのやら、感謝感激雨霰です(*^_^*)

その他の回答 (5)

  • ki073
  • ベストアンサー率77% (491/634)
回答No.6

No.3の補足欄を見逃していました。(失礼しました) まともなプログラムですよ。確かめていませんが、意図したような動きするような感じですね。 ちょっと補足をしておきます。 $KCODE='u' はUTF-8を指定するのですが、実はバージョン1.9以降は効果が無くなっています。あっても害はないはずです。 プログラムの一行目に # coding: utf-8 と入れておくとUTF-8になります。2.0からは指定しないときにUTF-8に指定されたと見なされるようになったはずですが、 -Kuと指定しないとうまく行かない様ですので、# coding: utf-8を入れておけば-Kuがなくても良いかもしれません。 http://doc.ruby-lang.org/ja/1.9.3/doc/spec=2fm17n.html のmagic commentを参考に それと、プログラムを書くときに動作を確認するのに irb が便利です。一行ずつキーボードから入力して実行できるものです(検索すると使い方は出てくると思います) それとプログラムを実行するときに ruby -rdebug program.rb とすると、デバッガーが立ち上がり、途中の経過を確かめることができます。 これも検索すれば使い方がでてきます。 私自身はこのデバッガーを使いながらプログラムを書くことが多いです。 helpでコマンドが表示され、後はnとbとcの使い方を覚えれば結構使えます。 式を入力して確かめられますし、代入もできますので、非常に便利です。

mamez31
質問者

お礼

お礼が遅くなりすみません、いろいろ理解してからお礼を と思っておりましたが、時間がかかりそうなので、まだまだ 勉強不足であまり理解できていませんが、先にお礼をさせてください。 今回ルビーがすごく使える!と実感しました。 今後いろいろ出来そうです(*^_^*) ki073様 ありがとうございました、 なぜ、ここまで丁寧に親切に教えてくれるのでしょうか? 一銭の得にもならないのに、こんな初心者の私に教えてくださり、本当に感謝しております。 今後、がんばって勉強していこうと思います。 お顔の見えないサイト上でのやり取りでしたが、とても人柄がうかがえ、良い方に出会えたなと思いました本当にありがとうございましたm(_ _)m

mamez31
質問者

補足

>$KCODE='u' >はUTF-8を指定するのですが、実はバージョン1.9以降は効果>が無くなっています。あっても害はないはずです。 なるほど!実は初めてRUBYをした時に、文字化けするはずなのにしなくて、戸惑いました。 とりあえず、文字化けしないので、無視して進めたのですが、これで納得しました。 でも、それならエラーにならないはずなのになぜでしょうか?これは、今のところ害にならないのでほっておきます。 ちなみに、 # coding: utf-8 これでもだめでした。 irbとruby -rdebug program.rb とても便利ですね! 知っているのと知らないのでは効率が全然違います。 親切ですね(*^_^*)ありがとうございます!

  • ki073
  • ベストアンサー率77% (491/634)
回答No.4

とりあえずは何も考えずに、<div class="detailArea">から<!--.detailArea--></div>までを抜き出すプログラムを書いておきます。 program.rbの名前で保存し、入力ファイルがoil.html, 出力がoil2.htmlとしたときに ruby program.rb <oil.html >oil2.html で切り出しができます。 Macで開発しておりますので、Windowsとちょっと違うところがあるかも知れませんが、多分大丈夫だと思います。 細かい抽出はnokigiriというライブラリを使えば簡単にできるのですが、Windowsに入れるのが結構難しいので、使わなくても良い範囲で作りました。と言ってもたった2行のプログラムですが。 # 以下の2行がプログラム html=gets(nil) puts html[%r(<div class="detailArea">.+<!--.detailArea--></div>)m]

mamez31
質問者

お礼

四苦八苦していました!これで抜き出しが出来るようになりました。本当に感謝感謝です(*^_^*) 最初はそのままだとエラーがでたので、-Ku を追加して実行しました。 ruby -Ku program.rb <oil.html >oil2.html

mamez31
質問者

補足

さらによくを言えば大量にあるファイルをすべて抜き出したいのですが可能でしょうか? 最終的には「oil2.html」のファイルの文字をcsvの商品説明の項目1行目にいれて、さらに2行3行「oil3.html/oil4.html・・・・」と続けて入力「oil2000.html」くらいあるのですが・・・ 今日は一日ずっと勉強してるのですが、すごくむずかしいです(;_;) でも頑張って、効率よくデータを抽出したいです。ご教授頂けると嬉しいです。

  • ki073
  • ベストアンサー率77% (491/634)
回答No.3

No.1です。 インストールできましたか。まずダウンロード済みのHTMLファイルから取り出すことを考えてみましょう。 質問欄でリンクしている部分をもとに、実際に出力したいHTLMを書き込んでください。 取り出す部分が数カ所以内で、取り出した部分の加工がほとんど無いのなら正規表現使う方法が考えられますが、 大幅に書き換えたいのなら専用のライブラリを使うことになります。

mamez31
質問者

お礼

何度もありがとうございます、 頑張って勉強しています。ある程度になったらお礼を・・・ と思っていたのですが、かなり難しく四苦八苦しております。 難しいですが、面白いですね。 今だけでなく、今後も勉強していきたいと思います。 とりあえずは、今したいことができるようになりたいと思いますので、よろしければお付き合い頂けると嬉しいです。 お手数をおかけして申し訳ないです。

mamez31
質問者

補足

実ははじめの方で、すでにつまづいているんですが・・・ いろいろ見てみて、こんな方法で抜き出しができましたが、 私のしたいことではありませんでした。 初心者で間違いがあるだろうし、なんだかカッコ悪いんですが、今の所はこんな感じです(´Д` ) 【html抜き出し】 $KCODE='u' fpath = 'c:\Users\mame\testo.html' File.open(fpath).each_line do |bun| #空行以外だけを出力する puts bun unless bun =~ /^\s+$/ end 【画像リンク抜き出し】 $KCODE='u' fpath = 'c:\Users\mame\testo.html' #img srcに続き、空白までの文字列を取得(srcが最後だとうまくパースできないかも。。。) File.open(fpath).read.scan(/tLine([^\s]+)/) do |iii| bun.gsub!(/<[^>]+>/,"") #scanの結果は配列で返って来るので、文字列化した上で"を置換で除去 puts iii.to_s.gsub('"','') end

  • pa_cotta
  • ベストアンサー率43% (25/58)
回答No.2

このようなことを「スクレイピング」というのですが、どうしてもある程度のプログラム知識が必要となってしまいます。 秀丸のマクロでもなんとかなりそうな気もしますが、やはり知識のない方には難しいかもしれません。 有料ならいくつか候補があったのですが、無料だとライブラリ形式のものしかなく、やはり実装にプログラムの知識が必要なようです。 こちら有料なものはgoogleで調べればいくつかありましたので、よろしければ調べてみて下さい。

mamez31
質問者

お礼

「スクレイピング」というのですね! この作業の名前がわからずgoogleで調べてもちんぷんかんぷんでした。「スクレイピング」で調べると結構出てくるので、嬉しいです(^-^) ありがとうございます!

  • ki073
  • ベストアンサー率77% (491/634)
回答No.1

そんなに複雑な構造をしているわけではないのですが、RubyやPerlなどの正規表現を使えるスクリプト言語を使って取り出すのが楽だと思います。 Ruby(できればバージョン2.0.0)をインストールできるのでしたら多少のアドバイスはできますが。

mamez31
質問者

お礼

お礼入力もれしてましたー(+_+) いまさらですが、いろいろありがとうございました☆ 2000件あった商品の出品が終わりました! 手作業なら1時間20品が限界だったので、 本来なら100時間かかる所を、質問の時間を入れても20時間で完了出来ました!すばらしい(*^_^*)

mamez31
質問者

補足

http://www.rubylife.jp/install/ ここを参考に Ruby(バージョン2.0.0)をインストール後、サンプルプログラムの実行も成功しましたので、これを使って作業できれば嬉しいです(*^_^*) お手数をおかけします、すごくありがたいです。 よろしくお願いいたします。

関連するQ&A

  • 複数のhtmlファイルをエクセルのセルに入れたい

    こちらの「http://q.hatena.ne.jp/1256199663」ような質問なのですが、 商品ページのUPをcsvファイルで一括アップロードしたいと考えています。 その際、たとえば001~010という品番の商品を登録するのであれば、それぞれの説明文などをHTMLで作成します。 (001.html,002.html~010.htmlという感じで10個のHTMLファイルを作成) その後一つ一つ開いてエクセルのセルを選択しコピペしていくのですが、この手間をうまく省けないかと思っております。 1つのエクセルファイル上で対象のセルに外部テキストファイルなどを一気に呼び込む方法などはあるのでしょうか? ちなみにRUBYの使い方は今勉強中です。 htmlはRUBYにより取得しました。 「http://okwave.jp/qa/q8084243.html」 htmlの内容はこちら↓ ======================== <dl id="ItemDetailDl" class="detailTable clearfix"> <dt id="ItemCodeDt" class="tLine">商品番号</dt> <dd id="ItemCodeDd" class="tLine">08-449-3680 (区分:2)</dd> <dt id="JanCodeDt" class="tLine">JANコード</dt> <dd id="JanCodeDd" class="tLine">4954753 032923</dd> <dt id="OriginCountryDt" class="tLine">原産国</dt> <dd id="OriginCountryDD" class="tLine">イタリア</dd> <dt id="ScientificNameDt" class="tLine">学名</dt> <dd id="ScientificNameDd" class="tLine">Citrus reticulata</dd> <dt id="ExtractionPartDt" class="tLine">抽出部位</dt> <dd id="ExtractionPartDd" class="tLine">果皮</dd> <dt id="ExtractionMethodDt" class="tLine">抽出方法</dt> <dd id="ExtractionMethodDd" class="tLine">圧搾法</dd> <dt id="UsePeriodDt" class="tLine">開封後の使用目安</dt> <dd id="UsePeriodDd" class="tLine">品質保持期限:商品に記載 開封後6ヶ月</dd> <dt id="SizeDt" class="tLine">サイズ</dt> <dd id="SizeDd" class="tLine">箱:30×30×65mm ボトル:φ22×55mm</dd> </dl> ========================

  • 特定部分のテキストを取得したい

    あるテンプレートに添って作られたページからテキストを取得するブックマークレットを作りたいのですが、 下記のような構造のページから りんご、みかん、ぶどう、部分のテキストだけ抜き出して取得するにはどうすればいいでしょうか? <h1 id="hoge">りんご</h1> ~ <span class="fuga"> <a href="test.html">みかん</a> </span> ~ <div class="piyo"> <dl class="foo"> <dt>xxx</dt><dd>ぶどう</dd> <dt>xxx</dt><dd>xxx</dd> <dt>xxx</dt><dd>xxx</dd> </dl> </div>

  • <li>の画像およびテキストリンクのランダム複数表示

    javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul>  <li>   <dl>   <dt>商品1</dt>   <dd>商品画像</dd>   <dd>商品コメント</dd>   </dl>  </li>  <li>   <dl>   <dt>商品2</dt>   <dd>商品画像</dd>   <dd>商品コメント</dd>   </dl>  </li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>~~</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。

  • 複数の<option>と一致するものを表示するには

    サンプルで作ったコードは、 <select name="select1">の<option>、 <select name="select2">の<option>、 <select name="select3">の<option>で選び、その下にあるボタンを押すと、 <div class="sample_in">の<dd>タグ内と上記3つの項目に一致するにものだけを表示させたい と考え下記コードを作りました。しかし、select1とselect2は処理が行われません。 select3のみが処理されてしまいます。例えば・・・ 「1組,男子,おとなしい」を選んだ場合、サンプルでは一致するものは1つしかないので その親である<div class="sample_in">のみを表示させたいですが、 2組、女子でも表示の対象になり、一致するものが2つになってしまいます。 解決に役立つ様なプロパティやメソッドはないでしょうか。ヒントだけでもお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>サンプル</title> <style type="text/css"> #mainBox { width: 300px; border: 3px solid black; padding: 10px; } .sample_in { width: 250px; border: 1px solid SteelBlue; padding: 10px; margin: 20px; } .sample_in dt { color: Magenta; } </style> </head> <body> <form name="myForm" action="#"> <select name="select1"> <option value="指定なし" selected="selected">指定なし</option> <option value="1組">1組</option> <option value="2組">2組</option> <option value="3組">3組</option> </select> <select name="select2"> <option value="指定なし" selected="selected">指定なし</option> <option value="男子">男子</option> <option value="女子">女子</option> </select> <select name="select3"> <option value="指定なし" selected="selected">指定なし</option> <option value="おとなしい">おとなしい</option> <option value="活発">活発</option> <option value="普通">普通</option> </select> <input type="button" value="OK" onclick="test0()"> </form> <div id="sample"> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>おとなしい</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>女子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>2組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>活発</dd></dl> </div> <div class="sample_in"> <dl><dt>組名</dt><dd>1組</dd></dl> <dl><dt>性別</dt><dd>男子</dd></dl> <dl><dt>性格</dt><dd>普通</dd></dl> </div> </div> <script type="text/javascript"> function test0() { var div1 = document.getElementById('sample'); var div2 = div1.children; var index1 = document.myForm.select1.selectedIndex; var index2 = document.myForm.select2.selectedIndex; var index3 = document.myForm.select3.selectedIndex; var str1 = document.myForm.select1.options[index1].text; var str2 = document.myForm.select2.options[index2].text; var str3 = document.myForm.select3.options[index3].text; var ary = [str1, str2, str3]; for(m=0; m<ary.length; m++){ for(i=0, len1=div2.length; i<len1; i++){ var dd = div2[i].getElementsByTagName("dd"); for(j=0, len2=dd.length; j<len2; j++){ var ddText = dd[j].textContent; if( ary[m] == ddText ){ dd[j].parentNode.parentNode.style.display = ''; break; }else{ dd[j].parentNode.parentNode.style.display = 'none'; } } } } alert("エラーなし"); //動作確認用 } </script></body></html>

  • 画像の様なテーブルレイアウトにするには?

    画像の様なテーブルレイアウトにするにはどうすればいいのでしょうか IE9なら正しく表示されます。 何処を修正したかも教えて下さい **************index.html*********** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ(商品リスト)--> <div id="main"> <ul id="products-list"> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格:&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格:&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格:&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格:&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格:&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> </ul> <!-- /#main--></div> <!--メインコンテンツ(商品リスト)--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> *************base.css**************** /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ width:840px; height:380px; margin:10px; padding-left:0; background:#690; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ list-style-type:none; float:left; width:130px; margin:10px 0px 0px 10px; padding:0px; height:170px; background:#F3F59C } .product-img{ margin:0px; padding:0px; width:50px; height:50px; text-align:center; border:none; } #products-list{ margin:0px; padding:0px; }

    • 締切済み
    • CSS
  • フォームデータの内容が確認画面で反映されません。

    フォームデータの内容が確認画面で反映されません。当方素人ですので優しくお答えいただけますと幸いです。 まず入力画面がこちら。 <dt>御社名 <span class="must">&#8251;必須</span></dt> <dd><input type="text" class="inputs" name="company_name" placeholder="例)wash life" value="<?php echo form_field["company_name"]; ?>"></dd> <dt>住所 <span class="must">&#8251;必須</span></dt> <dd><input type="text" class="inputs" name="aaa" placeholder="例)大阪市中央区" value="<?php echo $form_field["aaa"]; ?>"></dd> <dt>購入代理店名又は担当者名<span class="must">&#8251;必須</span></dt> <dd id="_field_your_name"><input type="text" class="inputs" name="your_name" value="<?php echo $form_field["your_name"]; ?>" placeholder="例)田中太郎"></dd> <dt>お名前<span class="must">&#8251;必須</span></dt> <dd id="_field_user_name"><input type="text" class="inputs" name="user_name" value="<?php echo $form_field["user_name"]; ?>" placeholder="例)山田太郎" value=""></dd> そして確認画面がこちら。 <dt>御社名</dt> <dd><?php echo h($form_field['company_name']);?></dd> <dt>住所</dt> <dd><?php echo h($form_field['aaa']);?></dd> <dt>購入代理店名又は担当者名</dt> <dd><?php echo h($form_field['your_name']);?></dd> <dt>お名前</dt> <dd><?php echo h($form_field['user_name']);?></dd> 御社名とお名前は入力した文字が確認画面で反映されるのですが、他の2つは反映されません。 どなたかよろしくお願いいたします。

    • 締切済み
    • PHP
  • htmlとcssについて

    input typeのテキストと文字を左揃えで表示したいのですが、cssをどのようにすればいいのでしょう?? 普通の状態だと、 ID    「文字入力欄」 のように入力欄の左横に空白ができてしまいます。 <dt>ID</dt> <dd> <input type="text" name="id" size="35" maxlength="50" class="style_1" /> </dd>

    • ベストアンサー
    • HTML
  • ジャンプ先を開く方法

    こんにちは、 折りたたみ機能を使っている <dt id="top">トップ</dt>に 別ページから http://localhost/asel/#top で飛んできた場合、自動的に開くようにしたいのですが、 どのようにすればよいのでしょうか? html------------------- <dl class="accordion"> <dt id="top">トップ</dt> <dd> <h4>カテゴリ1</h4> <ul> <li>攻略編</li> </ul> </dd> </dl> 折りたたみコード-------------------- $(function(){ $('dl.accordion>dd').hide(); $('dl.accordion>dt.opened').nextUntil('dl.accordion>dt').show('slow'); $('dl.accordion>dt').click(function(e) { $(this).toggleClass('opened'); $(this).nextUntil('dl.accordion>dt').toggle('slow'); }); });

  • 角丸教えてください。

    HTMLを勉強しています。 下記にソースに丸みを帯びたセルをつけたいのですが わかりません。 わかりやすくおしえていだけないでしょうか? よろしくお願いいたします。 HTML <div class="item-group"> <h3><img src="URL" alt="商品別検索" /><p> </p><td height="400" bgcolor="#c0c0c0"> </h3> <dl> <dt>▼test</dt> <dd><a href="http://URL">・てすと</a></dd> <dd><a href="http://">・★★★</a></dd> <dt>▼test</dt> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dt>▼作成中</dt> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dt>▼作成中</dt> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><p><a href="http://★★★/">商品一覧</a></p></dd> </dl> </div> になります

    • ベストアンサー
    • HTML
  • wordpress 検索フォームと結果を同ページで

    wordpressで検索フォームと検索結果を作成しています。 検索フォームは <form action="<?php echo home_url(); ?>" method="get"> <dl> <dt> お部屋のタイプ</dt> <dd> <?php wp_dropdown_categories(array( 'show_option_all' => '全てのタイプ' )); ?></dd> <dt> こだわり検索</dt> <dd> <?php $terms = get_terms('good'); foreach ($terms as $term): ?> <label> <input type="radio" name="good" value="<?php echo esc_attr($term->slug); ?>"> <?php echo esc_html($term->name); ?></label> <?php endforeach; ?> </select> </dd> <dt> キーワード</dt> <dd> <input type="text" value="" name="s" /> </dd> </dl> <input type="submit" value="この内容で検索!" /> </form> としています。 検索結果は「search.php」を作り <div id="wrapper"> <h4 class="h4_search">★検索結果</h4> <div id="content"> <section> <?php if (is_search()) : ?> <?php endif; ?> <?php if (have_posts()) :?> <div class="postWrap"> <?php while (have_posts()) : the_post(); ?> <article id="post-<?php the_ID(); ?>"> <div class="search"> <header> <h5><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><span><?php the_title(); ?></span></a></h5> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail(); ?></a> <?php echo mb_substr(get_the_excerpt(),0, 50);?> <a href="<?php the_permalink();?>">&emsp;…&nbsp;続きを読む</a> </header> </div> <?php endwhile; ?> </div> <?php endif; ?> としています。 このままでは、検索フォームのあるページから別のページ(search.php)に飛んで検索結果が出ます。 ここで、検索結果を検索フォームのあるページ内で表示したいと思っております。 検索フォームに入力し、submitボタンを押すと、そのすぐ下に検索結果がずらりと表示できるようにしたいです。 このようなことは可能でしょうか? できればプラグインを使わずに実現したいので、コードを教えていただければ有難いです。 何卒よろしくお願いします。

    • ベストアンサー
    • PHP

専門家に質問してみよう