お世話になっております。件名の通りなのですが ”#”で飛ぶ先を1,2文字分上にしたい。と思っております。理由はBootstrapで見栄えを「可変グリッドレイアウト」にするととび先が ```index.html メニュー：：：ここにとばしたいのですー ``` が ```html 【Bootstrapメニュー】とばしたいのですー ``` となってしまうのです…… ですので#で飛ばす先を1,2文字だけ上にしたいのですが良いやり方ございませんでしょうか？何か情報をお持ちな方は何か情報を頂けますと嬉しく思います。

img の上にジャンプさせたいのですかね。であれば - img と div を、さらに div で囲む - id="tobasu" は外側の div に指定する - 外側の div に padding-top を指定するで良さそうでしょうか。 ```html #tobasu { padding-top:2em; } ここにとばしたいのですー ``` こんな感じの構成にできますかね？（bootstrap だと入れ子が結構複雑になってしまったりしますけどどうですかね）

paddingでずらしてはどうでしょう？ ```css .hoge{height:1000px;padding-top:1em;} #hoge1{background-Color:yellow;} #hoge2{background-Color:lime;} #hoge3{background-Color:aqua;} ``` ```HTML 1 2 3 1 2 3 1 2 3 ``` # 追記もうちょっと突っ込んで、ようはheaderが固定でおいてあって本文が隠れるのがいやなんですよね? ```CSS body{padding:0px;margin:0px;} #wrap{position:relative;} #header{background-Color:gray;color:red;position:fixed;height:1.5em;width:100%;} .hoge{height:1000px;padding-top:1.5em;} #hoge1{background-Color:yellow;} #hoge2{background-Color:lime;} #hoge3{background-Color:aqua;} ``` ```HTML header 1 2 3 1 2 3 1 2 3 ```

お世話になっております。

件名の通りなのですが
”#”で飛ぶ先を1,2文字分上にしたい。
と思っております。

理由はBootstrapで見栄えを「可変グリッドレイアウト」にすると
とび先が

index.html
1<div id="menu">
2　<a href="index.html#tobasu">
3  メニュー
4  </a>
5</div>
6：
7：
8：
9<img src="img/big.png" >
10<div id="tobasu">
11ここに
12とばしたいの
13ですー
14</div>

が

html
1【Bootstrapメニュー】
2とばしたいの
3ですー

となってしまうのです……

ですので#で飛ばす先を1,2文字だけ上にしたいのですが
良いやり方ございませんでしょうか？

何か情報をお持ちな方は何か情報を頂けますと嬉しく思います。

m.ts10806

2018/01/15 02:06

質問には画像を添付できるので画面キャプチャーなどを貼っていただいた方が、文字だけの説明よりもイメージがわきやすいと思います。また、関係する現在のソースコードや、やってみたこと、調べたことがあればご提示ください。

sk_3122

2018/01/15 07:30

少なくとも現状のソースとかあると良いのですが。今は p タグに id を指定しているのでしょうか？現状ソースがあれば「ここをこう直すのです...」とか指定しやすい

moitaro

2018/01/15 07:56

皆様コメントありがとうございます。仰る通りですね……ですがBootstrapの所を全部貼るのは難儀なので少々手直ししました……わかりづらいでしょうか？

m.ts10806

2018/01/15 08:32

Bootstrapはバージョンともし自身で手を加えたところがあればそこを明記してもらえれば充分と思います。Bootstrapで使っている機能があればその名前とかイベントとかですね。実現するためにやってみたこと（未完で良いです。ヒントになりえます）があればその辺りがあれば、という感じですね。既に回答でている通り、Bootstrapの影響関係なくできそうには思います。

行動規範の内容に同意します

回答3件

paddingでずらしてはどうでしょう？

css
1.hoge{height:1000px;padding-top:1em;}
2#hoge1{background-Color:yellow;}
3#hoge2{background-Color:lime;}
4#hoge3{background-Color:aqua;}

HTML
1<div id="hoge1" class="hoge">
2<a href="#hoge1">1</a>
3<a href="#hoge2">2</a>
4<a href="#hoge3">3</a>
5</div>
6<div id="hoge2" class="hoge">
7<a href="#hoge1">1</a>
8<a href="#hoge2">2</a>
9<a href="#hoge3">3</a>
10</div>
11<div id="hoge3" class="hoge">
12<a href="#hoge1">1</a>
13<a href="#hoge2">2</a>
14<a href="#hoge3">3</a>
15</div>

追記

もうちょっと突っ込んで、ようはheaderが固定でおいてあって
本文が隠れるのがいやなんですよね?

CSS
1body{padding:0px;margin:0px;}
2#wrap{position:relative;}
3#header{background-Color:gray;color:red;position:fixed;height:1.5em;width:100%;}
4.hoge{height:1000px;padding-top:1.5em;}
5#hoge1{background-Color:yellow;}
6#hoge2{background-Color:lime;}
7#hoge3{background-Color:aqua;}

HTML
1<div id="wrap">
2<div id="header">header</div>
3<div id="hoge1" class="hoge">
4<a href="#hoge1">1</a>
5<a href="#hoge2">2</a>
6<a href="#hoge3">3</a>
7</div>
8<div id="hoge2" class="hoge">
9<a href="#hoge1">1</a>
10<a href="#hoge2">2</a>
11<a href="#hoge3">3</a>
12</div>
13<div id="hoge3" class="hoge">
14<a href="#hoge1">1</a>
15<a href="#hoge2">2</a>
16<a href="#hoge3">3</a>
17</div>
18</div>

投稿2018/01/15 08:04

編集2018/01/15 08:52

yambejp

総合スコア118268

moitaro

2018/01/15 09:20

コメントありがとうございます。仰る通りheaderで本文が隠れるのが嫌なので#で飛ぶ位置をズラしたいのです…… 上記のやり方は後程確認します…… コメントありがとうございました。

行動規範の内容に同意します

Bootstrapのサイト自体はこの記事にあるように::beforeに負のmargin-topをつけて対応しているようです。
http://yuheiy.hatenablog.com/entry/2017/08/16/184807

投稿2018/01/15 08:43

x_x

総合スコア13749

moitaro

2018/01/15 09:28

ありがとうございます。これが一番近そうです。ちょっと問のURLに埋め込むには読み解くのに時間が足りないので宿題とします。

行動規範の内容に同意します

img の上にジャンプさせたいのですかね。

であれば

img と div を、さらに div で囲む
id="tobasu" は外側の div に指定する
外側の div に padding-top を指定する

で良さそうでしょうか。

html
1<style>
2  #tobasu { padding-top:2em; }
3</style>
4
5<div id="tobasu">
6  <img src="img/big.png" >
7  <div>
8  ここに
9  とばしたいの
10  ですー
11  </div>
12</div>

こんな感じの構成にできますかね？
（bootstrap だと入れ子が結構複雑になってしまったりしますけどどうですかね）

投稿2018/01/15 08:32

sk_3122

総合スコア1126

moitaro

2018/01/15 09:13

コメントありがとうございます。こちらのやり方だと #tobasu { padding-top:2em; } で上部に空白か引き伸ばしが起こるので無理でした…… このような形で出来れば良いのですけど……

sk_3122

2018/01/15 09:20

引き伸ばしが起こるというのは、さらに外側に枠線や背景色などが指定されているということでしょうか。前のブロックと tobasu ブロックの間隔は空けたくない（ぴっちりくっつけたい）等？もしそうであれば javascript でスムーススクロールとかを仕込んだ方が良いかもしれませんねぇ･･･（javascript で飛ばすなら position - 20 とかすれば良さそうだし、せっかくならスムーススクロールにすればぬるっと動いて良さげですが）

行動規範の内容に同意します

あなたの回答