アンカーリンク 高さ調整

アンカーリンクさせる時に、ヘッダーがfixedで高さを持っている場合に高さをずらす必要がある。

$(window).on(‘load resize’, function () {
var w = $(window).width();
var x = 768;
var headerHightSP = 10; //ヘッダの高さ
var headerHightPC = 180; //ヘッダの高さ
var hash = $(location).attr(‘hash’);

// スムーズスクロールの処理
var position2;
if (hash) {
if (w < x) {
//画面サイズが768px未満のときの処理
position2 = $(hash).offset().top – headerHightSP;
} else {
/*ページ外#リンク*/
position2 = $(hash).offset().top – headerHightPC;
}
}
$(“html, body”).animate({ scrollTop: position2 }, 50, “swing”);
});

ポイントは、リンククリックをトリガーにする処理ではなく、遷移先がロードされた時の処理という点。
考えてみればそうなんだけど、遷移してしまったらリンククリックをトリガーにしたアクションは実行されない。

ふたつめのポイントは、attr(‘hash’)でURLに含まれるアンカーリンクを取得できるというところ。実にシンプルに取得することができる。(#aaaの部分)
attr(‘hash’)で取得した文字列はセレクターにもなるというところも素晴らしい。

サイズの違う下線を引く

main h2 {
    font-size: 16px;
    text-align: center;
    padding: 10px;
    margin-bottom: 35px;
    font-weight: bold;}
main h2::after {
    content:””;
    border-bottom: 1px solid #000;
    width: 20px;
    padding-top: 10px;
    display: block;}

afterの前に::
contentとdisplay:block;を忘れないように。

FlexBox

親要素に、display:flex;
子要素に、flex:(数字);

(数字)は、幅のpxなどを指定するのではなく、比率を指定する。
子要素が3つある場合、flex:1;flex:2;flex:1; と指定すると、真ん中の要素は両脇の要素の2倍の幅になる。

IE10,11で子要素から中身がはみ出す時 「-ms-flex: 0 1 auto;」