Hatena Blog Tags
はてなブログ トップ
scroll-behavior
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

scroll-behavior

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
荒川光のブログ•3年前

CSS の "scroll-behavior" プロパティを使って、なめらかなスクロールを演出したい

最近知った驚愕の事実についてお話しします。 ウェブサイトで「目次」の項目をクリックするとページ内の該当箇所に移動しますよね。 また「画面トップへ」というようなボタンを押すと、その画面の一番上に戻ることができます。 その時に目的の場所へ瞬時に移動するのではなく、指でスクロールさせたかのようにスルスルスルっとページが動いて到着する、というのを見たことがありませんか？ (adsbygoogle = window.adsbygoogle || []).push({}); 私は今まで特に気にしたこともなかったのですが、言われてみればそんなサイトもあるなということに思いいたります。 どうして気にしたことが…

#プログラミング#CSS#scroll-behavior

関連ブログ

index.php•6日前

HTMLとCSSのみでカルーセルを作る

はじめに n番煎じ感が否めない記事だけど、scroll-snap-type とかいう知らないプロパティくんがシゴデキっぽくて、わざわざ激重パッケージ用意する必要ないじゃんと思ったのでまとめておく コード <div class="container"> <div class="items"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> </div> :root { --width: 300px; } /* カルーセルのcontainerの領域…

エキサイト TechBlog.•20日前

scroll-behaviorでページ内遷移のスクロールを滑らかにする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介します。 実現したい挙動 既定の挙動 実現したい挙動 どうやって実現するか Tailwind CSSでの指定方法 さいごに 実現したい挙動 冒頭、ページ内遷移のスクロールについて、既定の挙動と実現したい挙動をお示しします。 Codepenに触れて体験の違いを感じてみてください。 既定の挙動 既定の挙動は以下の通りです。スクロールされるというよりかジャンプするに近い挙動です。 See the Pen ページ内遷移：既…

Web白描•22日前

課題サイトまとめ（１）

課題サイトまとめ（１） 完成例 メイン画像または背景色 画像は、適宜選択 PCサイズ（幅「100％」高さ「400px」） モバイルサイズ（幅「100％」高さ「240px」） トップページ記述例 ドロワーメニューの背景色は適宜変更する index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>課題サイト</title> <link rel="styles…

Web白描•23日前

ドロワーメニュー

ドロワーメニュー JavaScriptでイベント作成（jQueryを利用しない場合） ドロワーメニューの考え方 PCサイズで横並びのナビゲーションメニュー スマートフォンサイズでは、初期では「ハンバーガーメニュー」が見えていて、ナビゲーションメニューは非表示になっている 「ハンバーガーメニュー」がクリックされると、横からスライドしてナビゲーションメニューが表示される その時、「ハンバーガーメニュー」の形もわかりやすく変更される 作り方 1. ロゴ(h1)とnavの横並び 親要素に「display: flex;」 「h1」に「margin-right: auto;」 メディアクエリ内でナビゲーシ…

Web白描•1ヶ月前

課題13 BLOG

課題13 BLOG テキスト「Part3」の「2カラムレイアウト」を応用 テキスト例 Travel Blog - スペイン編 NEW COLUMN SERIES Q&A CONTACT スペイン観光に欠かせないのがアントニ・ガウディが残した建築物 READ MORE スペイン南部のアンダルシア地方にある「白い村（プエブロ・ブランコ）」 READ MORE アンダルシアのマラガにある「フリヒリアナ」坂道、階段が迷路のように曲がりくねっている READ MORE ヘレス・デ・ラ・フロンテーラ 2023/09/02 アンダルシア へレス・デ・ラ・フロンテーラは、ワイン、馬、フラメンコで有名であり、歴…

Web白描•1ヶ月前

課題12 IKECODE

課題12 IKECODE 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する 文字を読みやすくサイズ変更 画像の並びをスマートフォンに最適化する style.css @charset "UTF-8"; /* ---------------------------------------- reset ---------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; …

webサイト制作の勉強｜2024年5月クラス用ブログ•1ヶ月前

10月25日の作業データ(CG-BIM)

index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CG-BIM|トップページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigi…

Web白描•2ヶ月前

課題04 NEWS

課題04 NEWS 完成例 記述ポイント 横並びを縦並びに変更するために、メディアクエリ内で「display: block;」を指定する style.css @charset "UTF-8"; /* ------------------------------------------ reset ------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } a { co…

Web白描•2ヶ月前

課題 4 - NEWS

NEWSページ作成 キービジュアルは、ブラウザ幅100％ section幅は、960px（可変） h2（見出し）は、擬似要素で英語・日本語併記 ワイヤーフレーム 画像 unsplash.com テキスト The Code NEWS NEWS 2024.10.10 ホームページをリニューアルしました。 2024.10.10 ホームページをリニューアルしました。 2024.10.10 ホームページをリニューアルしました。 2024.10.10 ホームページをリニューアルしました。 Twitter © The Code NEWS Inc. 制作ポイント（要件定義） キービジュアルは、高さ「60vh」…

webサイト制作の勉強｜2024年5月クラス用ブログ•2ヶ月前

10月3日の作業データ

トップページ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jquery.clever-infinite-scroll.jsを使った無限スクロール</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <div id="container"> <div class…

webサイト制作の復習 --2024年5月--•2ヶ月前

10月3日の作業データ

トップページ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jquery.clever-infinite-scroll.jsを使った無限スクロール</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <div id="container"> <div class…

webサイト制作の復習 --2024年5月--•2ヶ月前

ポートフォリオデータ

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fa…