階層表示 / ウィキペディア(Wikipedia)方式

CSS

階層単位で左余白を空けたい

 状態:-  閲覧数:1,401  投稿日:2017-12-31  更新日:2017-12-31
案1.一般兄弟セレクタ
案2.マイナスmargin

全ての対象行がタグで囲われている場合


「案1.一般兄弟セレクタ」を使用
指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい

全ての対象行がタグで囲われていない場合は、「案2.マイナスmargin」を使用

 閲覧数:501 投稿日:2017-12-31 更新日:2017-12-31

全ての対象行がタグで囲われていない場合


例えば下記のようなケース
<div>
 <h3></h3>
 <b><b>
 ・この行(文字列)単位でのタグは適用されていない
</div>


案2.マイナスmargin


1.全体で左余白を空ける
div {
 margin-left: 3rem;
}


2.階層単位で余白を空けたい要素にマイナスmarginを適用
div h3 {
 margin-left: -2rem;
}
div b {
 margin-left: -1rem;
}


何やってるの?


逆転の発想
・「・この行(文字列)単位でのタグは適用されていない」だけにmargin適用できないため、全体を移動し基準となる位置自体を変更している

直接の子要素に限定していた方が無難かも


HTML
<main>
 <h3></h3>
 <b><b>
 ・この行(文字列)単位でのタグは適用されていない
</main>

CSS

main {
margin-left: 3rem;
}
main > h3 {
 margin-left: -2rem;
}
main > b {
 margin-left: -1rem;
}



display:flexのorderプロパティを使用すると、「:first-child」「:last-child」「隣接兄弟結合子」の効果は上書きされる

100/7%ではなく100%/7。(100/7)%ではなく(100%/7)



週間人気ページランキング / 7-10 → 7-16
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 18
2 RGB ⇔ Lab | 色変換(色) 17
3 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 16
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 14
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 14
5 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 13
6 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 9
7 鉄道会社毎のカラーコード | カラーコード(色) 8
8 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 7
9 RGBの種類 / ビットカラー | RGB(色) 6
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
10 カラーコード / 色コード | カラーコード(色) 4
10 色モデルイメージ図 | 色変換(色) 4
10 G'MIC | GIMP 系(ソフトウェア) 4
10 ログイン 4
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 4
10 16進数カラーコード / 2進数 4
11 「油彩画」画像フィルタ実行例 | 画像フィルタ(画像) 3
11 utf-8ではなく、UTF-8 | HTML 3
11 デザイン変更 | Webデザイン(デザイン) 3
2025/7/17 1:01 更新