htmlのぶら下げインデントのやり方/スタイルシート/styleシート/整形/見出し
見出しなどを綺麗に整形するには?
htmlのぶら下げインデントのやり方
1.htmlのぶら下げインデントのやり方/スタイルシート/styleシート/整形/見出し
@きっかけ
記事を書いている時、見出しをつけたり、頭に★の付いたリンクを貼りたい時がありました。
その時、
★パソコンのハードディスクをSATA→IDEに変換した時の速度低下対策/ssd/hdd/xp
のように2行に渡る長いリンクですと、2行めが★と同じ位置から始まってしまい、ダサい(笑)ですし、見にくくなってしまいます。
こういう時2行目も★分右にずらすテクニックが、ぶら下げインデントです。
Aぶら下げインデントの方法
CSS(スタイルシート)を使って、全体を一文字分右に動かし、その後一行目だけ左に一文字分動かすことによって実現します。
★パソコンのハードディスクをSATA→IDEに変換した時の速度低下対策/ssd/hdd/xp
でしたら
のようになります。
HTMLソース
<div class="b">★<a href="udma2byo.html">パソコンのハードディスクをSATA→IDEに変換した時の速度低下対策/ssd/hdd/xp</a></div>
CSSソース
div.b {
margin-left: 1.0em; /* ブロック全体を 1em(1文字)分右に */
text-indent: -1.0em; /* 先頭の1行のみ 1em(1文字)分左に */
}
全体を二文字分ずらすと
のようになりますので、レイアウトに合わせて調整出来ます。
HTMLソース
<div class="b2">★<a href="udma2byo.html">パソコンのハードディスクをSATA→IDEに変換した時の速度低下対策/ssd/hdd/xp</a></div>
CSSソース
div.b2 {
margin-left: 2.0em; /* ブロック全体を 2em(2文字)分右に */
text-indent: -1.0em; /* 先頭の1行のみ 1em(1文字)分左に */
}
参考リンク
【CSS】CSSで簡単にぶら下げインデントをする方法 | バシャログ。
CSSで1行目の見出し項目をぶら下げインデントする|web bibo
この記事を読んで下さった方はこんな記事も読んでいます
現実世界と目に見えない世界の真実 社会の真実 うつ対策 映画評 幸せに生きるには?
- 自分に対する期待を下げる
- 罪悪感と許し
- 初めてやることが不安な人へ
- 諦めの効用・諦め人生
- 豊かさは、時間・お金・エネルギーの総和で考える
- コンプガチャもメンコも恋愛もギャンブルもビッ◯リマンシールもド◯ドキ学園もFXもギャンブルも全部中毒性・依存性がある
次のカテゴリー 社会の真実へ
おすすめ記事
〜簿記2級・3級:通信講座徹底比較!〜
トップページへ 管理人の独り言へ