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


















デル株式会社


この記事を読んで下さった方はこんな記事も読んでいます
現実世界と目に見えない世界の真実 社会の真実 うつ対策 映画評 幸せに生きるには? 簿記2級・3級合格のコツ 管理人の独り言

次のカテゴリー 社会の真実へ


おすすめ記事
簿記2級・3級:通信講座徹底比較!


トップページへ  管理人の独り言へ

MENU

社会の真実お金・仕事の真実幸せに生きるには?映画評うつ対策 現実世界と 目に見えない世界の真実簿記2級・3級合格のコツ管理人の独り言
IDEをSATAに変換した時の速度低下対策
(IDEにしか対応していないパソコンでSATAのハードディスクをSATA−IDE変換アダプタを付けて繋いだ方へ)

htmlのぶら下げインデントのやり方/スタイルシート/styleシート/整形/見出し
(html文書の見出しなどを綺麗に整形するには?)

鎌倉紫陽花記/長谷寺/明月院/あじさい【写真有】
(鎌倉に紫陽花を見に行ってきました。)