- ベストアンサー
テーブル内のセルに対するペースト方法について
- テーブル内のセルに対してコピーした値をペーストする方法を教えてください。
- ドラえもん、のび太、しずかちゃんという文字列をキテレツ、コロ助、みよちゃんに変更したいです。
- 現在、値をペーストするとセルのスタイルが失われてしまいますが、セルのスタイルを維持したまま値をペーストする方法を教えてください。
- chiku-san
- お礼率67% (51/76)
- ホームページ作成ソフト
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#1.2の回答者です。 要はエクセルデータをHTML（条件：各セルも設定＆IE6対応で）へ表示すればよいのですね？ ※ 簡単な質問「例」だと、簡単な回答しかできないですよ・・・ 質問をHTMLとCSSで切り分けた方が良かったかも。 --------------------- 大きかったり、複数のテーブルをHTMLに正しく変換するのは面倒ですね。 なので、ヒントとしては、 ・エクセルの癖を見つける（CSVなどや選択反転コピー時の区切りの事） ・セルに変数を埋め込む（セルで奇数か偶数に変数を埋め込む） つまり、 colspanの設定なら区切り数などを把握し、どう変換するかの問題。 奇数偶数ならエクセル設定時に別セルに何らかの変数（暗号）を埋め込んでおく。 （※ 自分はマクロは使わないので？ですが、マクロが早いらしい） 膨大な行でも最初に定義すれば、全行分を設定できるはずです。 ※ CSS3,隣接セレクタも利用できない「IE6」のセレクタは、 class="～～" で設定するしかありません。 （テーブル自体に２行分のセパレート色の背景を仕込んで疑似背景色をリピートするのも良いでしょう） エクセルデータの制作時に、変数（奇数か偶数のどちらかの変数）利用して class="～～" に設定するのが早いでしょう。 HTMLを再度エクセルに戻して、 セルにcolspanを埋め込んだり 奇数か偶数にマーキングする手動的な方法もありますけどね。 （将来的に毎度利用する定型なら全部自動化するプログラムとか） セルが定型な事と、 エクセルの癖と正規表現での置き換え方法がミソです。 最初のエクセルデータと最終型のHTML(CSS)を見比べ、 （セレクタとCSSの最適化が必要ですが） どうやったら変換できるか？ １項目ずつ考えましょう。 何回か変換してみると良いでしょうし、色々な変換方法が見つかるでしょう。 ・タグに変換 ・変数に変換 ・正規表現 ・手動/自動 ----------------------------- 蛇足ですが、 趣味サイトならIE6は切り捨てが妥当ですが、 商用で（商材によってはターゲットユーザーのシェアを調査する）なら残さないとならない場合がありますからね・・・ Yahoo JapanはIE6を2010年末に一旦切り捨てましたが、 数か月後に再サポート始めましたし（日本にはIE6が多いって事） 今回の強制DLでもIE6は生き残りますからね・・・ 地デジのように一掃できないから臨機応変にIE6切り捨ての方向で。
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞これなら要件定義のIE6対応も大丈夫ですかね。 IE6は隣接セレクタを理解しないから無理です。 IE6は、Microsoft自身が撲滅キャンペーンを展開しているほど、とても古いブラウザで、googleをはじめ、多くのベンダーがサポートを止めています。 →マイクロソフト、IE6 撲滅に向けた一大キャンペーン始める | スラッシュドット・ジャパン IT ( http://it.slashdot.jp/story/11/03/07/2037203/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E3%80%81IE6-%E6%92%B2%E6%BB%85%E3%81%AB%E5%90%91%E3%81%91%E3%81%9F%E4%B8%80%E5%A4%A7%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%9A%E3%83%BC%E3%83%B3%E5%A7%8B%E3%82%81%E3%82%8B ) 現在のシェアは、1.42％に過ぎない。そのために多大な労力を費やすのは無駄です。 →日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-version.html ) まあ、隣接セレクタを理解しなくても表としては表示されるので、それで良しとしましょう。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
:nth-child(n),nth-child(2n+1)とかも使えなければ、隣接セレクタを書き連ねるしかない。 ★タブは＿に置換してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- #typef{ border-collapse:separate; border-spacing:1px 2px; border:solid gray 2px; } #typef th{background-color:rgb(230,250,255);} #typef td{background-color:rgb(240,253,255);} #typef tfoot td{text-align:center;} #typef thead tr th+th, #typef thead tr th+th+th+th, #typef thead tr th+th+th+th+th+th{background-color:rgb(255,255,180);} #typef thead tr th+th+th, #typef thead tr th+th+th+th+th, #typef thead tr th+th+th+th+th+th+th {background-color:rgb(255,180,180);} #typef tbody tr td+td, #typef tbody tr td+td+td+td, #typef tbody tr td+td+td+td+td+td{background-color:rgb(180,200,225)} #typef tbody tr td+td+td, #typef tbody tr td+td+td+td+td, #typef tbody tr td+td+td+td+td+td+td{background-color:rgb(190,190,255);} #typef tbody tr+tr th{background-color:rgb(200,255,200);} #typef tbody tr+tr+tr th{background-color:rgb(230,250,255);} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table border="1" summary="藤子不二雄に学ぶキャラクター設定黄金パターンA" id="typef"> ＿＿<caption>藤子不二雄に学ぶキャラクター黄金設定パターンA</caption> ＿＿<thead> ＿＿＿<tr> ＿＿＿＿<th>設定</th> ＿＿＿＿<th>お助け・突っ込み</th> ＿＿＿＿<th>ボケキャラ</th> ＿＿＿＿<th>ヒロイン</th> ＿＿＿</tr> ＿＿</thead> ＿＿<tfoot> ＿＿＿<tr> ＿＿＿＿<td class="footer" colspan="4">藤子不二雄論</td> ＿＿＿</tr> ＿＿</tfoot> ＿＿<tbody> ＿＿＿<tr class="text3"> ＿＿＿＿<th class="text-a">ドラえもん</th> ＿＿＿＿<td>ドラえもん</td> ＿＿＿＿<td>のび太</td> ＿＿＿＿<td>しずかちゃん</td> ＿＿＿</tr> ＿＿＿<tr class="text6"> ＿＿＿＿<th class="text-a">キテレツ大百科</th> ＿＿＿＿<td>キテレツ</td> ＿＿＿＿<td>コロ助</td> ＿＿＿＿<td>みよちゃん</td> ＿＿＿</tr> ＿＿＿<tr class="text3"> ＿＿＿＿<th class="text-a">パーマン</th> ＿＿＿＿<td>コピーロボット</td> ＿＿＿＿<td>ミツ夫</td> ＿＿＿＿<td>みっちゃん？パー子？</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>
お礼
ありがとうございます！ 隣接セレクタですね、なるほど。 これなら要件定義のIE6対応も大丈夫ですかね。 ちょっと調べてみます！ ありがとうございました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私が、エクセルで作成した表をHTMLに変換するときは、まずCSVファイルを作成します。 CSVファイルは、実のところアプリケーション依存が多くて簡単な変換ではできません。たとえばセルの値に"を含んでいるときとか・・ そこで、定番のPerlスクリプトでいったん配列に収納して書き出すほうが良いことがあります。 ★CSV形式の行から値のリストを取り出す ( http://www.din.or.jp/~ohzaki/perl.htm#CSV2Values ) また、タブを含まなければ、CSVではなくTSV--タブ区切りで保存しても良いでしょう。 そしてテキストエディタで \n →(置換)→ </td>\n</tr>\n<tr>\n<td> \t →(置換)→ </td><td> とか・・最後に <table summary="テスト" class="test1"> <tbody> ・・ </tbody> </table> で括る。必要なら ^<(/?)tr> →(置換)→\t\t<\1tr> bgcolor="#E6FAFF"は、非推奨ですから決して書きません。 →15.1.1 背景色 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#adef-bgcolor ) width="911" border="0" cellspacing="1" cellpadding="2"もあまり指定したことはありません。スタイルシートで指定しましょう。 →17. 表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html ) また、意味のないclass="text3"も要らないでしょう。必要なら、excelで作成するときに一列入れておくと早いです。class="data"を上から下までドラッグしておき、そのままTSVにします。 \t(class=".+?")\t →(置換)→ </td><td \1> スタイルシートで table[summary="テスト"] td{background-color:red;} table.test1 td{background-color:red;} ですみます。 また２列目移行のセルの色を変えたければ table[summary="テスト"] td + td{background-color:aqua;} 3列目以降も変えたければ table[summary="テスト"] td + td + td{background-color:lime;} とか・・ CSS3ですが table[summary="テスト"] td:nth-chiled(4){background-color:silver;} と言う手もあります。 なお、すでに出来上がっているものの一部を入れ替えるのでしたら、直接HTMLを操作するほうが早いです。
お礼
ありがとうございます。 参考になりました！ 確かに正規表現で変えた方が、いろんな意味で効率的ですね。 bgcolor、class等の属性は、状況説明用に便宜的に入れたものですが、丁寧なご指導ありがとうございます。 サイトの要件定義の対応ブラウザの都合でCSS3が使えないので、nth-child(even)、nth-child(odd)等を使わずに奇数行のtr背景に色を指定したいのですが、 bgcolor、class属性を指定しないで、奇数行のtr背景に色をつけることはできましたか？ 上記に習って、もう少し具体的にするとこんな感じになります。 <table border="1" summary="藤子不二雄に学ぶキャラクター設定黄金パターンA" id="typef"> <caption>藤子不二雄に学ぶキャラクター黄金設定パターンA</caption> <thead> <tr> <th>設定</th> <th>お助け・突っ込み</th> <th>ボケキャラ</th> <th>ヒロイン</th> </tr> </thead> <tfoot> <tr> <td class="footer" colspan="4">藤子不二雄論</td> </tr> </tfoot> <tr class="text3"> <th class="text-a">ドラえもん</th> <td>ドラえもん</td> <td>のび太</td> <td>しずかちゃん</td> </tr> <tr class="text6"> <th class="text-a">キテレツ大百科</th> <td>キテレツ</td> <td>コロ助</td> <td>みよちゃん</td> </tr> <tr class="text3"> <th class="text-a">パーマン</th> <td>コピーロボット</td> <td>ミツ夫</td> <td>みっちゃん？パー子？</td> </tr> </table>
- naokita
- ベストアンサー率57% (1008/1745)
#1回答者です（お礼拝見済み） お礼への返信ですが、単純な自動置き換え変換プログラムです。 わざわざ「カンマ区切り」を削除するなら、タグに変換した方が楽です・・・ CSVを扱う場合には、区切り（タブやカンマ）（改行を tr で連結）を </td><td> などに一発変換するだけ。 追加で１行目と最終行に <table class="～～～"><tr> </tr></table> を付与。連結部分（閉じ）を上手く処理するためです。 すると、大きなCSVでもHTMLに一発変換できます。 （CSVを貼り付 → ボタン押下 → HTMLに変換される） これならDW自体もDWへのコピペも不要ですけどね・・・
お礼
なるほど、とても参考になります。 colspanもうまく処理できるといいのですが、 ちょっとやってみたいと思います。 ありがとうございました！
- naokita
- ベストアンサー率57% (1008/1745)
表は、プログラムで変換するから良く知らないが・・・ （ペーストスペシャルでやるのかな？？？） 自分なら、▼現状の結果▼のままにしておいて、CSSで対応しますね。 <table class="hoge1"> <tr> <td>キテレツ</td> <td>コロ助</td> <td>みよちゃん</td> </tr> </table> として、CSSに以下の２行を追加し、 table.hoge1{ width: 910px; background-color: #E6FAFF; border-collapse: collapse;} table.hoge1 td{ padding: 2px; border: 1px solid white;} ～～ .text3{～～～～～～} の部分を探し、 ～～ .text3,table.hoge1 td{～～～～～～} とすると多少スマートになるかな？ （～～の部分は不明なので単なる例だから、既存のソースを利用） ---------------------- 複数のテーブルがあるのなら、プログラム組んで一括変換とか、 選択部分の「置き換え」で、そのテーブルを選択反転させておいて、 <td> ↓ <td bgcolor="#E6FAFF" class="text3"> に置き換えるとか、 逆に、複数ページになるなら、 更に、フォルダ内を指定して置き換えで、 ▼現状の結果▼ を ▼理想の結果▼ に変換
お礼
ありがとうございます！ >選択部分の「置き換え」で、そのテーブルを選択反転させておいて、 ><td> >↓ ><td bgcolor="#E6FAFF" class="text3"> なるほど、その手がありましたか！ 上に記述したソースは単純なのですが、 実際は、もう少し複雑な構造になるので、ちょっと難しいです。 ペースト時にtdに加えたなんらかの値だけでも残ってくれれば、それでOKなんですがね…。 ちなみにnaokitaさんが、プログラム組んで一括変換するときには、どんな風な手順を踏まれますか？ 私の場合は、Excelのセルにソースを入れて、終わったらCSVで書き出して、余計なコンマと""をバッチで削除する感じでやっていますが、Excel書類を用意すること自体が結構な手間で上記のような質門をさせて頂きました。 たしか、adobe Golive時代は、td内の値だけペーストできていたような記憶があって…、DWなってから、このあたりの機能面は劣化したように感じていました。
お礼
IE6の利用率まで記載して頂き、本当にありがとうございました。 教えて頂いた方法で対応させて頂きます。 ありがとうございました！