List)のtype属性には※のスタイルがないため、やむを得ず<p>タグで囲んだ段落の先頭に※文字をつけたりすることはないだろうか?実はスタイルシートで一工夫するだけで※文字を表示することができる。<ol>タグや<ul>タグで使用可能だ。今回は注釈表示をきれいに見せるためのスタイルシートのテクニックについて触れようと思う。目次スタイルシートで注釈を表現する方法<ul>タグで折り返しを揃えない<ul>タグで折り返しを揃える<ol>タグで折り返しを揃えない<ol>タグで折り返しを揃えた風1<ol>タグで折り返しを揃えた風2まとめスタイルシートで注釈を表現する方法<ol>タグや<ul>タグのtype属性には※のスタイルがないことは先にも触れたが、これらのタグを使いつつ、注釈を表現するにはマーカーの指定を無しにして「before」疑似要素を使うことで解決する。"※";}とりあえずこれだけでも要件は満たすものの、できればもう少し見た目を整えたいところだ。<ul>タグでは表現できるが、<ol>タグではむずかしいものがある。それが、注釈を折り返しで揃えることだ。実際にどのようになるか、見ていただきたい。加えることで注釈文字を外に出したような状態にしている。することで文字列が折り返した場合でもきれいに揃って見えるようになる。このサンプルでは番号付き注釈を表現している。加算された値を注釈文字とあわせて表示している。加えて注釈文字を外に出したような状態にしているが、全角と半角が混在しているせいか、折り返しが揃わない。text-indentの値を調整すれば揃ったような感じになるかもしれないが、閲覧環境に左右されるため100%の状態にはならないと考えた方が良いだろう。サンプル「<ol>タグで折り返しを揃えた風1」とは異なる手法で番号付き注釈を表現している。することで番号を表示し、注釈文字を番号より前の位置に表示するよう調整したものだ。この方法だとブラウザ(使用されるフォント)によってはきれいに揃っているように見える場合があるが、揃わないこともあるため注意が必要だ。"}まとめ<ol>タグで折り返しを揃えた風1と2のサンプルは、どうにかして数字付き注釈を折り返して綺麗に表示できないものかと試行錯誤したものだが、結局のところ私の知識では納得できる状態には出来なかった。<li>タグの中身をさらにブロック要素などで囲んだうえでスタイルシートの定義で無理やり折り返さないようにすることは出来ると思うのだが、見た目を優先するために余計なタグを埋め込むのはマークアップとしては適切ではないと思われるため、私の方針としては取り組まないことにした。見た目を優先するなら折り返しが揃った方が良い感じだが、数字付きの注釈の場合はそれが困難なため、無理に揃えなくても良いのではないだろうか、というのが私個人の意見だ。ここにあげたサンプルが注釈表示の参考になれば幸いである。縦ぽん!!関連記事HowTo・Tips自宅にRTX1200を導入して安全なVPN環境を手に入れようYAMAHAのルーターは無償でDDNS(ネットボランチDNSサービス)を利用できる。これを利用すると固定IPの契約なしにVPN接続が可能となる。Packetを送信するカスタムGUIを利用できるモデル...HowTo・Tips【QNAP】UPSをつないでNASを安全に運用するNASはUPSとセットで運用すると停電時のトラブルにも安全に対応できます。NASの大事なデータを失わないため、UPSの導入を検討しましょう。PC」を使っていると、時々利用を終了した本がいつまでもライブラリに残ってしまうことがあります。残っていても大きな問題にはなりませんが、ちょっとした操作で解決できます。HowTo・TipsMarkdownの簡単URL記述方法ブログの原稿をMarkdown形式で書く時に、URLの書き方を違う記述にすることでちょっとだけ下書きするのが楽になるかもしれないので紹介します。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。ホームHowTo・Tips肉じゃがの旦那しがないアラフィフSE。近頃はPHPの仕事ばかりやってます。在宅勤務万歳!!コンピュータ関係の話題を中心に記事を書きつつ、密かにブログでの不労所得化を目指しています。縦ぽん!!.メニューホームHowTo・Tipsレビュー・コラム過去記事ホーム検索トップサイドバータイトルとURLをコピーしました。