BlackBeeBullets-黒蜂団

HTML講座カテゴリー記事の一覧です

HTML講座：canvas

メモ

個人用HTMLメモです。
スクロールジャンプする時に滑らかに移動するコード

■■■canvasのひながた■■■

html_canvas_2024_05_19.htmlをダウンロード

HTML講座：スムーズスクロール

メモ

個人用HTMLメモです。
スクロールジャンプする時に滑らかに移動するコード

スムーズスクロール

<script type="text/javascript">

  $('a[href^="#"]').click(function(){

    var speed = 500;

    var href= $(this).attr("href");

    var target = $(href == "#" || href == "" ? 'html' : href);

    var position = target.offset().top;

    $("html, body").animate({scrollTop:position}, speed, "swing");

    return false;

  });

</script>

HTML講座：中央寄せ

メモ

個人用HTMLメモです。
みつけた中央揃えのコード

中央寄せ

text-align: center;
padding: 15px;

中央寄せ：justify-content: center

display: flex;
justify-content: center;
align-items: center;

「position: absolute;」の場合もアウターの「position: relative;」がある場所に上記コードで中央寄せが可能。

中央寄せ：display: flex

固定ヘッダーの左上ロゴなどに使用する

display: flex;
height: 100%;
flex-flow: wrap;
position: absolute;
left: 20px;

中央寄せ：position: absolute