HTML編集の<pre><code>…</code></pre>のブロックにラベルを付ける方法?

はてなdiary を書いています。HTML編集の<pre><code>…</code></pre>でプログラムのコードを書いているのですが、これにラベルを付ける方法をお尋ねします。後からそれを指定するときにラベルを必要とします。また、貼付けたイメージのラベルの付け方もお尋ねします。LaTeX の場合のlabel のようなものです。よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/11/03 00:17:28
  • 終了:2013/11/10 00:20:04
id:MMAys

質問者から

MMAys2013/11/03 11:36:58

LaTeX の \label は誤りで、 \caption のようなものです。例えばコード1 あるいは図1 などです。

回答(0件)

回答はまだありません

  • id:rouge_2008
    リンク先の特定の場所(※今回の質問の場合は「<pre id="code***"><code>…</code></pre>」)に名前を付けてリンクします。
    あるいはコードに見出しタイトルをつけて「<h3 id="code***"><pre><code>…</code></pre></h3>」のようにしてもいいと思います。(※画像の場合も同じように「<img src="~" id="image***">」とするか、画像に見出しタイトルをつけてリンクさせるといいです。後述するキャプションとして用意したHTMLタグに名前をつけてリンクさせてもいいと思います。)
    ※id名はページ内で重複しないようにつけます。
    ※古いブラウザにはnameのみに対応している場合もありますが、現在使われているブラウザのほとんどはidで大丈夫だと思います。

    ・ハイパーリンクを提供する
    http://www.kanzaki.com/docs/html/htminfo12.html

    ・ホームページ作成 アンカーとラベルの違い
    http://okwave.jp/qa/q7080808.html

    ・a要素 : リンク(アンカー)
    http://tagland.net/html401/a.html

    ・<a> - リンクする
    http://www.tohoho-web.com/html/a.htm

    ・id属性
    https://w3g.jp/xhtml/dic/id


    HTMLでは、画像にキャプションをつける方法は特に決まっていません。
    spanやpタグにキャプションの文字列を入れて、CSSで見た目を装飾するケースが多いです。

    ・キャプション付き画像を横向きに並べて配置する方法(※2ページ目)
    http://allabout.co.jp/gm/gc/23923/2/

    ・CSSを使ってイメージキャプションを入れる
    http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css-%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8-%E3%82%AD%E3%83%A3%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3/

    最近はCSS3を使って表示させるケースが増えているようです。(※CSS3を使うと様々な動きをつける事が可能です。)

    ・[CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート
    http://coliss.com/articles/build-websites/operation/css/slide-in-image-captions-by-css-tricks.html

    ・CSS3だけでスライドしながら現れる画像内キャプション
    http://dothtml5.com/archives/20110407_slide_in_image_captions.html


    ※tableにはcaptionが用意されていますので、表の場合はcaptionを利用するといいです。

    ・キャプションの正しい付け方教えてください。
    http://okwave.jp/qa/q1530453.html

    ・caption要素 : 表のキャプション(タイトル)
    http://tagland.net/html401/caption.html
  • id:MMAys
    大変詳しい説明ありがとうございます。参考にさせていただきます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません