WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

ご相談はお気軽にどうぞ 03-5369-1878

○秘

ページ内リンクをちょうどいい場所でストップ!

カテゴリ:コーディングTips

2013年12月27日

このエントリーをはてなブックマークに追加
はてなブックマーク - ページ内リンクをちょうどいい場所でストップ!
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
ページ内リンクをちょうどいい場所でストップ!チーフコーダーのCoding Memo | Webcoding.jp

チーフコーダーのコーディングメモ、今年の更新も今回で最後です!!
そんなウェブコーディング.jpは12月28日〜1月5日までお休みを頂きます。

どうぞ、来年もよろしくお願い致します。


では早速やっていきましょう!
今回はページ内リンクについてです。

縦に長いサイトなどはページ内リンクを使用すると便利ですよね!
ちなみにページの一番下にいった時によく目にする「TOPに戻る」もページ内リンクの仲間です。


そんなページ内リンクですが、いざページ内リンクをクリックして、ページの天井にピッタリくっついて表示されてしまった!なんてことは一度は経験されているハズ・・・!

そんな時に、CSSをちょこっと書いてあげることで見やすくなります!
実際に再現してみましたので、下記よりお試し下さい。


※大きいディスプレイを使用している方は、ブラウザのウィンドウサイズを
小さくして閲覧して頂くとご確認頂けます。

また、表示を確認しやすくするために記事内に余白をとっております。



通常の表示:ここをクリック!

CSS追加後の表示:ここをクリック!











↑ ブラウザの天井にピッタリくっつきます。










↑ こちらには上部に余白をつけました!






















どのようになっているのかといいますと、
「リンク先に指定したID」に以下のCSSを付け加えてみましょう。


#link2 {
  padding-top: 20px;
  margin-top: -20px;
}



追加したpadding-top分をmargin-topで無くすことで、
リンクをクリックした時、上部に余白を持たせながら
レイアウトが崩れることなくページ内リンクのリンク先を調整することができます!


この方法でページ内リンクを使って、今までピタッとなっていた部分に余裕を持たせて上げることで、視認性も向上します!
小さなことでも見逃しません。

それがチーフです。

それでは来年も、、、
「チェェェーック!」

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2017年12月
« 1月    
 123
45678910
11121314151617
18192021222324
25262728293031

アーカイブ