• ベストアンサー

liタグのコピペ

下記コードのコピペがうまくいかない理由が分かりません。 <html> <body> <h1>test</h1> <ul> <li>aaa</li> </ul> </body> </html> 上記コードをブラウザで開き、<li>タグを描画させた状態でテキストエディタにコピペすると test # aaa となります。ちなみに<ul>を<ol>にしてあげると test 1. aaa としてくれます。 おそらく<ul>としたときの<li>の描画は、内部的に画像？にしており、結果的にコピペ処理の中で"# "に変換しているのではないかと予想しています。 ひとまず明らかにしたいのは 1．<li>は内部的に画像を表示しているのか？ 2．なぜコピペ処理の中で"# "に変換されたのか？（"# "以外に変換したりもするのか？） 以上です。宜しくお願い致します。

  • HTML
  • 回答数4
  • ありがとう数5

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

  • ベストアンサー
  • qualheart
  • ベストアンサー率41% (1451/3486)
回答No.3

１，２どちらもですが、ブラウザに寄ります。 例えばIEならliのマーク部分自体コピーしません。 単純に test aaa という状態でコピーします。 Firefoxだと test * aaa になってました。 １．については、画像ではないと思います。 Wingdingsというフォントを当てた文字を、ブラウザ上で表示しているのだと思います。 ２．については、ブラウザによってはわかりやすく何かの記号にしてコピーするようです。そのままliとして使用している文字をコピーしても、フォントが当てられない状態では意味不明なアルファベットが入るだけなので、あえて記号に変換してるものと思われます。 ただの推測ですけど・・・

holmon
質問者

お礼

推測だなんてとんでもない！非常に参考になりました！ なかなか難しい世界です＾＾；質問してよかったー。 皆様にもお礼させていただいておりますが、返事遅れて申し訳ありません。非常に助かりました！

その他の回答 (3)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

<li>はHTMLで言うところの、リストの項目を示すタグです。<li>・・・</li>が全体でHTML中における「リスト項目要素」でブロック要素です。 　それが<ol><ul>で囲まれると、それぞれ順位リストと順位のないリストとなります。 　それをどのように表示するかは、どのようにコピーするかを含めてブラウザのもつスタイルシートによるものです。 ≫おそらく<ul>としたときの<li>の描画は、内部的に画像？にしており、結果的にコピペ処理の中で"# "に変換しているのではないかと予想しています。 ではありません。 ≫1．<li>は内部的に画像を表示しているのか？ 　いいえ。 ≫2．なぜコピペ処理の中で"# "に変換されたのか？（"# "以外に変換したりもするのか？） 　これは試してみてください。 　スタイルシートで、リストをどのように表示するかは変更可能ですからね。 <style type="text/css"> <!-- ul li{list-style-type:disc;} /* これがデフォルト */ --> </style> discを、 circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-alpha lower-latin upper-alpha upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha 　などに・・・| 　

holmon
質問者

お礼

none、disc、circle、squareは*、あとは大体1,2,3でコピペされました（firefox3）。IEは少々事情により確かめられませんでした＾＾；結構ものによるものなんですねぇ。 お返事遅れまして申し訳ありません＾＾；非常に参考になりました！

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.2

1. 画像ではない。通称「なかぐろ」と言われる手合いの「記号」 詳しくはcssの「list-style-type」で調べてごらん。 2. これはブラウザによって挙動が変わるんじゃないかな。 一般的な(日本外での)項目表示は#が一般的だから#になるっていうオチだと思うよ。 物によっては「*」でコピーされるのもあるよ。

holmon
質問者

お礼

この辺見てみました。 http://hp.vector.co.jp/authors/VA022006/css/media.html http://w3g.jp/css/list/list-style-type おっしゃる通り、画像ではなく「記号」でした。しかしctrl＋Aで選択されないのはなんでだろ。 あ、今思いつきましたが、ブラウザがhtmlをparseなりした際、値しか選択されないのかな？<li>ってタグとしての解釈なのかなぁ。 重ねて、お返事遅れて申し訳ありません。助かりました！

holmon
質問者

補足

そういえば<ol>は選択できてますねｗ

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

＞描画は、内部的に画像？にしており 若干異なります。 クリップボードへのコピーペーストは、いろんな情報がコピーされます。 その中で、コピーするときにテキストデータとしてそのブラウザが 勝手に# aaaというデータをコピーしているだけです。 クリップボードの使い方はブラウザごとに独自に解釈して処理を するので、たまたまお使いのブラウザがそういう処理なのだと いうだけです。

holmon
質問者

お礼

javaのappletではありますが、クリップボード少し調べてみました。 確かにアプリケーション毎に実装する感じですね。 しかしctrl+Aで選択できないってのも納得いきません＾＾；これもアプリケーション毎なのかなぁ？（たぶん違うと思うけど） 返事が遅れて申し訳ありませんが、素早い回答で非常に助かりました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • css の float:left; を li 適用

    css の float:left; を li に適用すると <ul> 　　<li>AAA</li> 　　<li>BBB</li> 　　<li>CCC</li> </ul> ●AAA●BBB●CCC のような横並びにできます <ul> 　　<li>AAA</li> 　　<li>BBB 　　　　<ul> 　　　　　　<li>aaa</li> 　　　　　　<li>bbb</li> 　　　　</ul> 　　</li> 　　<li>CCC</li> </ul> このように入れ子の場合 ●AAA●BBB　　　　　●CCC 　　　　　□aaa□bbb のように表示されます これを ●AAA●BBB●CCC 　　　　　□aaa□bbb のように、一段目に間を空けないで表示する CSS の設定を教えてください よろしく、お願いします

  • liにスタイルシートが上手くいかない

    こんにちは。 次のコードが上手く表示されず困っています。 <ul> <li style="border:1px solid red">aaa</li> <ul> <li>bbb</li> </ul> </ul> この場合aaaにのみ赤い罫線がひかれると思うのですが、bbbまでくくった形で罫線がひかれます。 liはhtmlで省略可能なためこのようになるのでしょうか。それとも書き方を間違っているのでしょうか。

    • ベストアンサー
    • HTML
  • CSSのliタグで画像との間に空白ができてしまいます。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>CSS</title> <style type="text/css"> <!-- li { margin:0px; padding:0px; list-style-type:none; } --> </style> </head> <body> <ul> <li><img src="aaa.gif"></li> <li><img src="bbb.gif"></li> <li><img src="ccc.gif"></li> </ul> </body> </html> こんな感じのソースですけど、画像と画像の間に空白（2pxくらい）が できてしまいます。 画像と画像をくっつけたいのですがどうすればいいでしょうか？ 教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • liタグの中に<p>タグやら<dl>を入れるのはあり？

    それともなしでしょうか？ たとえば、作品実績みたいなのを羅列するとき 「画像」 「タイトル」 「簡単な説明」 を乗せたいときはどうしますか？ <ul> <li> <p>画像</p> <dl> <dt>タイトル</dt> <dd>説明</dd> </dl> </li> </ul> こんな感じを考えたのですが・・・ <li>（作品）ごとにボーダーボトムで区切りたいかなと考えております。 <li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか？ </ul>

    • ベストアンサー
    • HTML
  • CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。

    .ul { width: 120px; height: auto; float: left; font: 12; line-height: 150%; padding: 0; list-style-image: url(img/side-tab.gif); } .li { font-size: 12px; margin-left: 1.5em; } <ul class="○○○"> <li>１１１１１</li> <li>２２２２２</li> <li>３３３３３</li> <li>４４４４４</li> <li>５５５５５</li> <li>６６６６６</li> </ul> このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。 横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。 唯一firefoxだけが思うように表示できました。 IE６と７でも違う表示になりました（IE6だとかなり右寄り） operaに関しては画像とテキストの縦位置がずれてしまっていました。 CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・ これを一つのCSSできれいに表示することは不可能でしょうか？ どうかよろしくお願致します。

    • ベストアンサー
    • HTML
  • floatでカラム落ちを防ぎたい

    少し長いですがお付き合いよろしくお願いいたします。 <style type="text/css"><!-- body { text-align:center; } #all { width:730px; margin-left:auto; margin-right:auto;; text-align:left; background-color:#33ffcc} #left{width:50%; float:left;} #right{width:50%; float:left;} --></style> </head> <body> <div id="all"> <h1>見出し1</h1> <div id="left"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> <div id="right"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>DDD</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>EEE</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> </div> このように記述するとFirefoxではallで指定した背景色がh1にしか反映されず、left、rightの高さのずれている部分には反映されません。 この記述から、スタイルシートのrightに何も指定しないようにすると、allに指定した背景色はきちんと反映されるんですが、今度はleftよりrightのコンテンツが多いためカラム落ちしてしまいます。 どのように、記述すれば背景色がうまく反映され、カラム落ちを起こさずに済むのでしょうか？ 条件はFirefox,Opera,IE6でほぼ同じレイアウトが表現でき、tableやoverflowは使わない事です。

    • ベストアンサー
    • CSS
  • HTMLのulタグで表示される「・」を消したい

    ネットで調べて下記二通りを試しましたが消せませんでした。 １．HTMLで<ul class="doterase">とし、CSSで .doterase li { list-style: none; } とした。HTMLでClass="doterase"としているのにCSSで.doteraseと先頭に「.」を追加した理由は 判りません。 ２．HTMLでulタグに <ul style="list-style: none;">としても同じでした。 HTML,CSSのコードは下記のとおりです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本の将来る</title> <meta name="discriptio" content="八十路の提言"> <link rel="stylesheet" href="homestyle.css"> </head> <body> <h1><center>日本の将来</center></h1> <h2><center>八十路の提言</center></h2> </body> <ul > <li> <a href="https://google.co.jp">aaaa</a> </li> <li> <a href="https://google.co.jp">bbbb</a> </li> <li> <a href="https://google.co.jp">cccc</a> </li> </ul> <div style="border: 3px none;"> 枠線を実線で装飾１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１ </div> </html> CSS @charset "UTF-8" ; body { background-color : #adcc33; font-size: 40px; width: 200; height:200; position: relative; /* 日本の将来に期待する */ top: 10px; /* 上から10px */ p { font-size: 40px; } <style> .doterase li { list-style: none; } </style> <ul class="doterase"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> li { color: #000000; font-size:30px } 参考書を理解しないままコピペでつくっています。HTML/CSSは最近始めたばかりなので超初心者です。よろしくお願いいたします。Windows11なのでHTML,CSS.共最新バージョンだと思います。 なお、これと同じ内容で他のQ&Aサイトに投稿しましたが質問の仕方が拙かったようで内容の訂正でなく取り消し後再質問したら回答がなくなったためこちらに質問しています。

    • ベストアンサー
    • HTML
  • ulとliで囲った文字の一部を変える方法

    よろしくお願いします。ulで囲んだliの中の一部の文字色を 変えたいのですが、どのようにすれば変えられますでしょうか？ ulの中では<p>や<span>は使えないそうで、どうして良いのか方法が分かりません。 ご指導の程よろしくお願いします。 下記のホゲホゲと、パソコンの文字色を赤色で太字にしたいと考えております。 よろしくお願いします。 <ul class="ultest"> <li>テストテスト<br />ホゲホゲ</li> <li>インターネット</li> <li>パソコン</li> <li>リンク</li> </ul>

    • ベストアンサー
    • HTML
  • html <li>の中の文字一部に色を付けたい

    html内でリストを使っています。 一覧の中で一部にだけ文字色を変えたいので、以下のように書いてみました。 <ul> <font color=red><li>AAA</li></font> <li>BBB</li> <li>CCC</li> </ul> ですが、反映されませんでした。 以前、リストの中はタグがあまり使えないと教えていただいたのですが、色も染められないのでしょうか？ 変えたい場合は、どのようにすればよいでしょう。 方法をご存じの方は、是非お教えください。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • スタイルシート　

    さっそく質問させていただきます。 <table border> <tr> <td rowspan="3"> <h3>AAA</h3> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </td> <td> <h3>BBB</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> <tr> <td> <h3>CCC</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> <tr> <td> <h3>DDD</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> </table> このタグを記述すると左に右の三つのセルをまたがったセルが表示されると思うのですが、これと同じレイアウトをスタイルシートで表現するにはどのように記述すればよいのでしょうか？ 左側に一つのボックスを置いて、その直ぐ隣に三つのボックスを置きたいのです。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する