TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSにおけるスムーズスクロールの作成方法について現役エンジニアが解説【初心者向け】
icon
icon
CSS

CSSにおけるスムーズスクロールの作成方法について現役エンジニアが解説【初心者向け】

初心者向けにCSSにおけるスムーズスクロールの作成方法について解説しています。CSSでスムーズスクロールを実装するにはscroll-behaviorプロパティを使用します。基本の書き方と、画面上での見え方を確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSにおけるスムーズスクロールの作成方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

スムーズスクロールの作成方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

スムーズスクロールとは

アンカーリンクからの遷移時に、滑らかな動きでアンカー部分へ遷移することをいいます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

scroll-behaviorとは

scroll-behaviorとは、指定したブロック要素内のスクロールの仕方を指定できるプロパティです。
指定できる値は以下です。

・auto
遷移先へ瞬時にスクロールします。
scroll-behaviorの初期値です。

・smooth
遷移先へ滑らかにスクロールします。

※scroll-behaviorは記事執筆時点ではIEやSafariでは非対応のプロパティになります。
サイト閲覧時にユーザーが使用するブラウザがChromeやFirefoxなど、対応しているブラウザに限られる場合のみ使うことをおすすめします。

 

scroll-behaviorの使い方

scroll-behaviorの使い方は非常に簡単で、
スムーズスクロールをさせたいブロック要素に対して、以下のように指定をするだけで使うことができます。

html {
  scroll-behavior: smooth;
}

 

scroll-behaviorを利用してスムーズスクロールを実装してみよう

See the Pen
scroll-behavior by Pei (@Pei-Log)
on CodePen.

 

まとめ

scroll-behaviorは対応ブラウザ制限の影響がないサイトであれば、非常に簡単にスムーズスクロールを実装できます。

 

1時間でできる無料体験！

監修してくれたメンター

土田隼平（つちだしゅんぺい)

フリーのWebエンジニアです。
最近までは求人サービスや画像共有システム、ECサービスの開発・運用をやってました。

趣味はラジオ（特にオールナイトニッポンとJUNK）を聞くことや近所の散歩です。
今の最重要ミッションは「運動不足解消」です。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSクラス間の継承方法を現役エンジニアが解説【初心者向け】

CSSクラス間の継承方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   ...
CSS

CSSの疑似要素first-lineで要素をデザインする方法を現役エンジニアが解説【初心者向け】

CSSの疑似要素first-lineで要素の最初の行をデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
CSS

CSSで回転アニメーションを実現する方法を現役デザイナーが解説【初心者向け】

CSSで回転アニメーションを実現する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。いくつかの方...
CSS

画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説

今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自分で書けるようになっておくと見た目の調整がしやすいでしょう。 ...
CSS

表示をカスタマイズ！CSSのwhite-spaceの使い方【初心者向け】現役エンジニアが解説

CSSのwhite-spaceの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。  ...
CSS

CSSでfont-familyを使ってフォントを指定する方法【初心者向け】

CSS初心者向けに、font-familyを使ってフォントを指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先にお...
CSS

あわせてよく読まれている記事

CSSのスクロールバーを表示、非表示にする方法を現役デザイナーが解説【初心者向け】

CSSのスクロールバーを表示、非表示にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 スクロールバーを表示、非表示にする方法について詳しく説明していくね！ 大石ゆかり お願いします！   overflowプロパティとは overflowプロパティは、ボックスの中に収まらない要素をどのように表示するかを設定します。 overflowプロパティの値一覧 visible / ボックスからはみ出ている要素を表示する(初期値) hidden  / ボックスからはみ出ている要素は表示しない scroll / ボックスに収まらない内容はスクロールして表示できるようにする   スクロールバーを表示する方法 スクロールバーを表示するには、overflow: scroll; を適用します。 X軸方向のスクロールバーを表示したい場合は overflow-x: scroll; Y軸方向のスクロールバーだけを表示する場合は overflow-y: scroll; とします。   [PR] Webデザインで副業する学習方法を動画で公開中スクロールバーを非表示にする方法 スクロールバーを非表示にするには、はみ出ている要素を表示しない overflow: hidden; を適用します。   実際に書いてみよう X軸方向、Y軸方向ともにスクロールバーを表示する場合、X軸方向のスクロールバーを表示する場合、Y軸方向のスクロールバーを表示する場合の3つのボックスを作ってみます。 HTML： <div class="box scroll">   <p>overflowプロパティでスクロールバーを表示してみる</p>   <p>overflowプロパティでスクロールバーを表示してみる</p>   <p>overflowプロパティでスクロールバーを表示してみる</p>   <p>overflowプロパティでスクロールバーを表示してみる</p>   <p>overflowプロパティでスクロールバーを表示してみる</p>   <p>overflowプロパティでスクロールバーを表示してみる</p> </div> <div class="box scrollx">   <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでX軸方向のスクロールバーだけを表示してみる</p> </div> <div class="box scrolly">   <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p>   <p>overflowプロパティでY軸方向のスクロールバーだけを表示してみる</p> </div> CSS： .box{   width:150px;   height:100px;   padding:30px;   margin:10px;   background:#ddd; } .scroll{   overflow:scroll; } .scrollx{   overflow:hidden;   overflow-x:scroll; } .scrolly{   overflow:hidden;   overflow-y:scroll; } p{  white-space:nowrap; } See the Pen yLyvNXL
CSS

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、UXデザイナーのNick Babich氏によって投稿されました。   縦長で無限にスクロールするWebサイトが最近一般的になってきています。ロングスクロールを使うと、ユーザーはページをスクロールするだけで大量のコンテンツを閲覧することができるようになります。 無限スクロールはFacebook・Twitterなどのフィードで見られる、エンドレスなスクロールの手法です。 ロングスクロールには次のような利点があります。 ユーザーをより引き込むことができます。スクロールを利用することで、目的のために必要な操作を最小限に抑えることができます。「次へ」をクリックする必要がないというメリットによって、ユーザーは次のページに移動する変化を気にすることなくコンテンツに没頭することができます。 モバイルデバイスにうまく変換されます。ロングスクロール技術の普及の背景には、モバイル画面がよく使われるようになったということが大きく関わっています。画面が小さいほどスクロールの頻度は増えます。モバイルデバイスのジェスチャーコントロールによって、スクロールは直感的で楽しいものになります。 しかし、このやり方には欠点がないわけではありません。デザイナーはコンテンツとナビゲーションにしっかりと注意を払う必要があります。 この記事ではロングスクロールにおいてのいくつかの利点、考慮すべき点、それと簡単なヒントについて解説します。   どのようなときにロングスクロールを利用するか ロングスクロールはすべてのWebサイトに使われるわけではありません。次のような場合にふさわしいでしょう。 ストーリーテリング(ストーリーテラーのために線型構造を作り出す) 長い記事や複数のステップによるチュートリアルなど、連続した長いコンテンツ(複数のページに分割するよりもユーザーエクスペリエンスが向上する) コンテンツを別々のパーツに分割できず、全体として提示する必要がある場合(インフォグラフィックなど) 製品の機能・品質・特質を物語形式で見せたいとき   どのようにロングスクロールを実装するか 次の10のルールが、ロングスクロールによいユーザーエクスペリエンスをもたらすのに役立ちます。 1. ユーザーにスクロールを促す ページが表示されるとすぐにユーザーはスクロールを開始しますが、サイト上部のコンテンツは依然として重要です。 訪問者の最初の印象と品質に関する予想は、ページ上部の内容で決まります。ユーザーがページをスクロールするのは、サイトの上部に表示されているのが期待できるものである場合だけです。なので、最も魅力的なコンテンツを置きましょう。 良い導入部・前書きを提示しましょう。(コンテンツの状況をはっきりさせて、ユーザーに「このページがどういうものであるか」ということを分かってもらうことができます) 魅力的な画像を使いましょう。(そのサイトに関連する情報を含む画像は、ユーザーの注意を引きつけます)   2. ナビゲーションオプションを常に保持する ロングスクロールのWebサイトを作成する場合、ユーザーは現在の位置とナビゲーションを把握したいと思っていることを忘れないでください。ロングスクロールではナビゲーションに関する問題が起こることがあります。 ページをスクロールしたときにナビゲーションバーが表示されなくなった場合、下の方までスクロールしていたのに一番上まで戻らなければいけなくなったりします。 こういう問題に対しての解決策として、常に一貫した場所に表示され続けるメニューがあります。 モバイルデバイスの場合：モバイル画面は他のデバイスよりも小さいため、ナビゲーションバーが画面の大部分を占めることがあります。ユーザーがコンテンツを見るためにスクロールしているときはナビゲーションバーを隠して、トップに戻るために画面を引き下げたときに表示させるとよいでしょう。 ヒント：追加のナビゲーションを使用して、ページ内の各セクションの間をジャンプさせることもできます。 以下のアニメーションの場合、ユーザーは自分の進行状況を確認することができると同時に特定のセクションへのショートカットとしてこれを利用することができます。   3.「戻る」ボタンが適切に動作することを確認する ロングスクロールのサイトでは、ユーザーが自分のページ上の位置を見失うことがよくあります。ロングスクロールのリストからクリックして該当のページに行ったあと「戻る」ボタンを押したとき、元いた場所でなくページの一番上に戻ってしまうというような形です。 そうすると、一度見たコンテンツをまたスクロールしなければいけなくなります。適切な場所に戻れないことで、当然ユーザーは不満を感じるでしょう。 フィード内の要素をアクティブにしたあと、元いたところにきちんと戻れるようにしておく必要があります。Flickrの「戻る」ボタンはこのような機能についての良い例です。スクロール位置が記憶されており、「戻る」ボタンを押すと元の場所に戻ることができます。   4. スクロール位置に基づいてURLを変更する ロングスクロールの一般的な問題のひとつとして、ページ上の特定の場所へのURLによる共有ができないという点があります。スクロール位置はURLに反映されず、そのページの先頭に繋がります。 URLが現在の位置を捉えないので、ユーザーは画面を簡単に切り替えることができなくなり苛立つことになります。 HTML5からは、history.pushState()関数を使うことで、ページをリロードすることなくブラウザに表示されるURLを変更することが可能になっています。   5. ページ内ジャンプ機能を使用する ロングスクロールのもうひとつの共通の問題は、方向感覚がなくなることです。ユーザーは前に見たものを探すときに苦労します。長いチュートリアルなど、コンテンツが複数の重要なセクションに分かれている場合に特に深刻な問題になります。 「セクションへジャンプ」オプションをつけることでこの現象を解決することができます。 例えばTumblrでは、ページ内で迷子になったときのためにページの下や上にジャンプすることができるようになっています。ページ上のコンテンツはいくつかのはっきりしたブロックに分けられており、大きなインジケーターのドットが画面の左に固定されています。 ヒント：「セクションへジャンプ」機能では、インジケーターのドットを使いやすくする必要があります。 ドットがクリックやタップがしにくい状態だとユーザーを苛立たせることになります。そのため、ドットの大きさが適切であるかどうか確認してください。   6. コンテンツを読み込むときに、視覚的なフィードバックを表示する ヤコブ・ニールセンのユーザビリティ10原則のひとつによると、システム状態の視認性はUIデザインにおいて重要な原理です。ユーザーはシステム上の現在の状態をいつでも知りたいと思っており、Webサイトは閲覧者を不安にさせてはいけません。 適切な視覚的フィードバックを通して、ユーザーに今何が起きているのかを伝える必要があります。Webサイトがコンテンツを動的に読み込む場合は、ローディングが行われていることをはっきりと示さなければいけません。 進行状況を示すインジケーターを使用して、新しいコンテンツが読み込まれていることを表現しましょう。 読み込み時間は2秒～10秒の短い時間であるはずですので、システムが動作していることをループアニメーションで表すことができます。   7. スクロールハイジャックを行わない スクロールハイジャックのWebサイトでは、スクロールが制御され基本的なWebブラウザの機能を無効にされてしまいます。ユーザーがページをコントロールできない上に動作の予測ができなくなってしまうため、スクロールハイジャックは好ましくありません。 この問題はAppleのMac Proのページで見ることができます。ユーザーがどれだけ早くスクロールしても、レイアウトはあらかじめ決められた速度で移動します。 このページの全てのコンテンツはスクロールに関連付けられているため、訪問者はページを遅い速度でブラウズすることを強いられてしまいます。   8. ページの読み込み時間を最適化する ロングスクロールのページでは、読み込みの長さの問題も発生します。これはWebサイトにおいて致命的な問題です。 実際に、ユーザーの47％が2秒以内のWebページの読み込みを求めています。ページが3秒以内に読み込まれない場合、57％のユーザーが去ってしまいます。 ロングスクロールの読み込み時間の問題は解決することができます。レイジーローディングなどの読み込み技術を利用し、ページの読み込み時間を最適化することで基本的なコンテンツにすぐにアクセスできるようにします。   9. リソース消費を考慮する ロングスクロールを使用する場合は、ページが消費するリソース(CPUとメモリ)を常に考慮に入れてください。 ページをリロードせずに複数のページの写真・アニメーションGIF・動画をスクロールすると、システムリソースが大幅に浪費される可能性があります。リソースが限られているデバイス(iPhoneなど)では大量のアセットの読み込みによる遅延が起きる可能性があります。 そのため、さまざまなデバイスでWebサイトをテストし、該当の場所を通り過ぎたときにはアニメーションや動画を一時停止するなどの手法を利用します。   10. ユーザーの行動を考える ロングスクロールがどう効果的であるかを判断するために、ユーザーがどのように操作しているかを調査してください。アナリティクスデータが有効です。 例えば、Googleアナリティクスではページ解析によって何人のユーザーが折りたたまれた部分の下をクリックしているか確認することができます。そのデータに応じてデザインを調整することが可能です。   [PR] Webデザインで副業する学習方法を動画で公開中ECサイトでのロングスクロール ECサイトではロングスクロールは頻繁に使用されます。ユーザーは製品のリストや検索結果を、中断することなくスクロールして閲覧し続けることができます。 ただしユーザー満足度を向上させるためには、いくつかの一般的な問題に対処する必要があります。 ナビゲーションとフィルタをスティッキーに フィルタリングが適切に行われていると、ユーザーは何千ものWebサイト内の選択肢をニーズに合った数少ない項目に絞り込むことができます。ナビゲーションメニューとフィルタオプションを持続的に表示することで、ユーザーがコンテンツをうまく管理することができます。   それぞれのアイテムをブックマークできるようにする 後々参照できるように気になったアイテムを簡単にブックマークしておける機能は、ユーザーにとって強力なツールです。   条件に一致したアイテムの数を表示する 利用できるアイテムの数を表示することで、ユーザーはフィルタリングによる結果内容のスクロールにかかる時間を判断することができます。   フッターにアクセスできるようにする ユーザーはフッターの概念を理解しており、そこにWebサイトの大事な情報があると思っています。 しかし、ロングスクロールではフッターの閲覧が困難なことがあります。ページの下に行くと新しいアイテムが継続的に読み込まれ、フッターは見えないところに押し込まれます。この問題は深刻なもののように思われますが、「もっと見る」ボタンを利用することで解決できます。 この手法では、コンテンツはオンデマンドで読み込まれることになります。新しいコンテンツは、ユーザーが「もっと見る」ボタンをクリックするまでは自動でロードされません。これによってフッターに簡単にアクセスできるようになります。   ロングスクロールと視差効果 インタラクションデザインはロングスクロールを使ったWebサイトの基礎であり、アニメーションはその中でも欠かせない部分です。 Web上でのユーザーの注目のスパンが約8秒であることを考えると、楽しいスクロールは注意を引きつける時間を引き伸ばすことができると言えます。閲覧者を喜ばせるアニメーションのひとつに視差効果があります。 視差スクロールでは背景画像は手前のコンテンツよりもゆっくりと動き、深みと没頭の錯覚を作り出します。この効果によって画面の立体感が増します。   パララックススクロールをどんなときに使うか 視差は大きな印象を与え、訪問者がもっとスクロールしたくなるなる面白い視覚効果です。ユーザーをあっと言わせたいときに便利な手法になります。 パララックススクロールは、ガイド付きの物語形式で効果を発揮します。 ストーリーをスムーズに直線的に伝えたい場合、視差効果とロングスクロールを組み合わせることによってユーザーは閲覧を実体験のように夢中になって楽しむことができます。 The Boatでは、画面がスクロールされると次のコンテンツのパスを作成しながらアニメーションによって閲覧者を次の場面に導きます。スクロールの動作はより楽しいものになり、ユーザーは「次はどうなるんだろう？」とワクワクするでしょう。   パララックススクロールを使うべきではないケース 多くのユーザーがはっきりしたタスク(製品の購入など)を目的としている場合は、パララックススクロールは使用しないでください。もし製品を購入するたびに視差効果を見せられるAmazonがあったら、どれだけフラストレーションがたまるか想像してみましょう。   パララックスとページパフォーマンス 視差効果を使用するWebサイトの多くは、スクロールのパフォーマンスに苦しんでいます。iPhoneのような高画素のデバイスでは特に害のあることです。 すべてのパフォーマンスの問題を完全に解決することはできませんが、簡単な手法でスクロールのパフォーマンスを向上させることができます。 ブラウザのアニメーションにはtranslate3d・scale・rotation・opacityといった手軽なプロパティのみを使用してください。 大量の画像をアニメートしたり、劇的にサイズを変更させたりしてはいけません。ブラウザに画像(特に巨大なもの)をリサイズさせると、コストがかかる可能性があります。 一度にたくさんのものをアニメートしないようにしましょう。   パララックスとアクセシビリティ 前庭機能障害を持つユーザーが、そのWebサイトを使用したとき視覚的にどのようになるかを考慮しましょう。アニメーションによって目まいが起きる可能性があります。 Val Headはより安全なアニメーションをデザインする方法として、もしWebサイトに大量の動きがある場合はモーションをオフにするオプションをつけることを推奨しています。 ボタンあるいはトグルスイッチを使用して、Webサイト上のアニメーションを減らしたり消したりできるようにします。このアイデアの研究のために、Nat TarnoffはどのWebサイトでも使用できるトグルスイッチのプロトタイプを開発しました。   最後に ロングスクロールによって、没入感のあるブラウジングを生み出すことができます。 ユーザーが直感的なUIが好きであれば、スクロールの長さは気にならないでしょう。閲覧者の目的が達成され、かつ便利だと感じさせるものにしてください。   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。 独学に限界を感じている場合はご検討ください。
Webデザイン

JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでscrollTopプロパティを使うと、スクロール量をピクセル単位で設定や取得できます。 実務でもscrollTopプロパティによって画面スクロール処理を行うので、ぜひ学習してみてください。 目次スムーズスクロールとはscroll-behaviorとはscroll-behaviorの使い方scroll-behaviorを利用してスムーズスクロールを実装してみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   scrollTopプロパティとは scrollTopは、要素のプロパティです。 要素とはHTMLを構成する部品の塊を意味します。 JavaScriptでscrollTopプロパティを利用することで、要素の一番上からのスクロール量をピクセル単位で設定や取得できます。   scrollTopプロパティの使い方 あらかじめ、HTMLのスクロールが発生している要素を取得しておきます。 取得したタグの要素に.scrollTopと続けて記述することで、scrollTopプロパティを使うことができます。 要素.scrollTop;   [PR] Webデザインで副業する学習方法を動画で公開中要素のスクロールされるピクセル数を取得する方法 HTMLのソースでスクロールが発生しているタグを取得し、.scrollTopとすることでその時のスクロールしている量を取得できます。 サンプルコード function count(){ var main = document.getElementById('main'); var scrollTop = main.scrollTop; console.log(scrollTop); } 実行結果 See the Pen getscrollTop by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 function count(){では、スクロール数を計測するcount()関数を宣言しています。 var main = document.getElementById(‘要素’);では、HTML内で「main」というidを持つ要素が存在しているという仮定で、要素を取得して、変数mainに代入しています。 var scrollTop = main.scrollTop;では、mainという要素に対して、scrollTopメソッドを適用して、スクロール数を取得して、変数scrollTopに代入しています。 console.log(scrollTop);では、変数scrollTopをコンソールに表示しています。 }では、function count(){を終了しています。 要素に指定したidを正しく指定することで、スクロール数を取得することが可能です。   要素のスクロールされるピクセル数を設定する方法 HTMLのソースでスクロールが発生しているタグを取得し、そのプロパティである.scrollTopに値を代入することで設定ができます。 サンプルコード function set(){ var main = document.getElementById('main'); main.scrollTop = 50; } 実行結果 See the Pen setscrollTop by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 function set(){では、スクロール数を指定するset()関数を宣言しています。 var main = document.getElementById(‘要素’);では、HTML内で「main」というidを持つ要素が存在しているという仮定で、要素を取得して、変数mainに代入しています。 main.scrollTop = 50;では、50pxの位置にスクロールする処理をしています。 }では、function set(){を終了しています。 要素に指定したidを正しく指定することで、指定した50pxスクロールした位置に移動します。   実際に書いてみよう ここでは、scrollTopを実際に書いてみましょう。 HTMLサンプルコード <div class="outer"
JavaScript

CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】現役Webデザイナーが解説

今回は、CSSのoverflowではみ出た表示の指定をする方法を説明します。 文章が長くなり、外枠からはみ出てしまう時、手動で改行などしなくてもCSSで調整することができるので覚えておくと良いでしょう。   目次 overflowを使う時の値の種類 実際に書いてみよう そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！CSSで枠からはみ出た文章の折り返しをしたいんですけど・・・ 田島悠介 そういう時はoverflowっていうプロパティを使うと便利だよ！ 大石ゆかり 例えば、枠内でスクロールして見ることもできますか？ 田島悠介 全然できるよ！種類もいくつかあるから1個ずつ見ていこうか！ 大石ゆかり わかりました〜！ overflowを使う時の値の種類 テキストを囲むボックスに、「overflowプロパティ」を設定すると、テキストがボックスからはみ出す場合、どういう風に表示するか、あらかじめ設定する事ができます。 「overflowプロパティ」は4種類の値を持ちます。 visible：初期値。はみ出して表示されます。 scroll：スクロール表示されます。 hidden：表示されません。 auto：ブラウザに依存します。（一般的にはスクロールと同じ状態になる） それぞれ詳しく見ていきましょう。   「visible」 テキストがボックス内に収まらない場合、テキストはボックスからはみ出して表示されます。 これが初期値になっています。 初期値というのはoverflowを設定しない場合、「overflow: visible;」が設定されていると見なされます。 「Internet Explorer」では内容がはみ出すのではなく、ボックスが内容に合わせて拡張されます。 「chrome」や「Firefox」や「Edge]では領域をはみ出して表示します。   「scroll」 テキストがボックス内に収まらない場合、ボックスにスクロールが表示され、ボックスからはみ出したテキストはスクロールすることで見られます。 スクロールバーは自動的に表示されるので、スクロールバーを実装してテキストを見せたい時にも使えます。 ただし、「Internet Explorer」では常時スクロールバーが表示されるため、デザインの際注意が必要です。   「hidden」 テキストがボックス内に収まらない場合、はみ出たテキストは表示されず、HTMLにないものとして処理されます。   「auto」 ブラウザに依存して自動で決まります。 一般的にはスクロールして見られるようになり、どのブラウザでもだいたい同じものになると思います。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう 実際にコードを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS overflow</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <div class="hid"> <p> The European languages are members of the same
CSS

jQueryでスムーススクロールを実装する方法【初心者向け】現役エンジニアが解説

JavaScriptのライブラリであるjQueryでスムーススクロールを実装する方法を紹介します。 ボタンを押したら特定の場所にスクロールさせるといった機能を簡単に実装できるので、ぜひ参考にしてみてください。 目次 スムーススクロールとは スムーススクロールの書き方 実際に書いてみよう   スムーススクロールとは スムーススクロールとは、ページ内をスクロールする挙動を指します。 Webページでよく、「Topに戻る」などのボタンを見ることが多いと思います。 それが、スムーススクロールという機能を使っているものです。 Webを閲覧している人を上手にWebページ内に誘導できるので、設置しておいた方が良いでしょう。   大石ゆかり 田島メンター！Topに戻るボタンだったり、ページ内の目次をクリックすると、ゆっくりとスクロールするサイトがあったのですが、jQueryを使用しているのでしょうか？ 田島悠介 animateメソッドを工夫して使用しているんだ。 大石ゆかり でも、位置とかどうやって取得しているんでしょうか？ 田島悠介 位置を取得する書き方っていうのがあるので大丈夫だよ。さっそくスムーススクロールを実現してみよう！   [PR] Webデザインで副業する学習方法を動画で公開中スムーススクロールの書き方 スムーススクロールの書き方について紹介していきます。 JavaScriptのコード $(function(){ $('a[href^="#"]').click(function(){ let speed = 500; let href= $(this).attr("href"); let target = $(href == "#" || href == "" ? 'html' : href); let position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); });   解説 1行目の、$(function(){では、jQueryの無名関数を宣言しています。 ※無名関数についてはこちらの記事を参考にしていただくと良いですよ。 JavaScriptの無名関数について現役エンジニアが解説【初心者向け】
JavaScript

表で見やすくしたい！HTMLでテーブルを表示する方法【初心者向け】現役Webデザイナーが解説

この記事ではHTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介します。 HTMLでテーブルを表示する方法を学習していただくことで、HTMLを利用してエクセルのような表を作れるようになります。 表を利用できるようになると、今まで文章だけで記載していたコンテンツを、わかりやすく一覧できるコンテンツにすることが可能です。 一覧で、コンテンツの要点だけを伝えたい場合や、数字を扱うコンテンツの場合に、表を使ってわかりやすい表示を作ってみましょう。 目次 テーブル（表とは） HTMLでテーブルを表示するために使うタグ テーブルを実際に作ってみよう 応用編：テーブルの構造をまとめる テーブルのデザインを変更する方法 表をスマホ対応で表示する方法   テーブル（表とは） まずはテーブル（表）の基礎を知っておきましょう。 HTMLでも表をつくることができます。 表はテーブルと呼ばれます。   横一列のデータのことを「行（レコード）」といい、ひとつのデータの塊を意味します。 縦一列のデータを「列（カラム）」、ひとつひとつのマスのことを「セル」と呼び、セルの中に各データの値を入れていきます。 「行（レコード）・列（カラム）・セル」は、Excelやデータベースでデータを管理するSQLでも共通している概念ですのでぜひ覚えておきましょう。   [PR] Webデザインで副業する学習方法を動画で公開中HTMLでテーブルを表示するために使うタグ HTMLでは以下のタグを使ってテーブルを表示します。   表（テーブル）を作る <table>表（テーブル）</table> 表（テーブル）をつくるタグです。   見出しを作る <th>見出し</th> セルの要素であり、表の見出しを意味します。   データをいれるセルを作る <td>データ</td> セルの要素であり、表の値(データ)を意味します。   横方向のセルをまとめる <tr>tdやthなどの要素</tr> 表でつくられる横一列のセルをまとめます。       テーブルを実際に作ってみよう <table>タグに「border=”1″」を加えると枠が表示されます。 <table>タグのなかに<tr>タグで各データの行を指定し、そのなかに<td>タグでデータを入力します。 <th>タグではデータの見出しをつけましょう。   HTML <table border="1"> <tr> <th>日本語</th> <th>英語</th> </tr> <tr> <td>東京</td> <td>Tokyo</td> </tr> <tr> <td>大阪</td> <td>Osaka</td> </tr> </table>   解説 <table border=”1″>でテーブルを作成することを意味しています。 borderは枠線の太さを指定していますが、html5では1しか指定できません。 枠線の表示に関してはcssで指定することが実務でも一般的です。 cssでテーブルのデザインを変える方法については次の記事を参考にしてみてください。 サンプル有り！CSSで書くテーブル（table）の作り方 | TechAcademyマガジン   ２行目の <tr>では、横方向の<th>をまとめています。 つまり、 <th>日本語</th> <th>英語</th> が横に並ぶように<tr>で囲んでいます。   ３行目と４行目の<th>では、表の見出しを作っています。 見出しがあると、見出しだけ別の色にしたりすることで、表が非常にわかりやすくなります。   ６行目の <tr>では、具体的なデータである横方向の<td>をまとめています。 <td>東京</td> <td>Tokyo</td> の部分が該当し、thで指定した日本語と英語に対応するように、東京とTokyoというデータが表示されます。   １０行目の <tr>では、具体的なデータである横方向の<td>をまとめています。 <td>大阪</td> <td>Osaka</td> の部分が該当し、thで指定した日本語と英語に対応するように、大阪とOsakaというデータが表示されます。   表示結果 ブラウザで確認するとこのように表示されました。 テーブルが表示され、<th>タグで囲った部分が太字になりました。 <tr>タグは横一列のデータを「行」としてまとめ、その行をつくる値が<td>で表示されます。   動作確認 See the Pen table-html by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   応用編：テーブルの構造をまとめる テーブルは<thead><tbody><tfoot>のタグを使って表の構造をまとめることができます。 表の構造をまとめるということは、これまでtheadで表題だけ、tbodyでデータ部分だけ、tfootでフッターだけをそれぞれひとまとめのグループとして考えることが可能です。 例えばtheadだけグループにすることで、縦方向に長い表であったとしても、theadで囲まれた部分だけ固定して表示することが可能になります。 表の構造をまとめることで、ユーザーがより理解しやすいコンテンツを、よりわかりやすく一覧できるようになります。   タグの意味まとめ それぞれのタグは下記の意味です。   table headをグループ化する <thead>〜</thead> （<table>タグ内で）テーブルのヘッダー部分を意味します。   table bodyをグループ化する <tbody>〜</tbody> テーブルのボディ部分を意味します。   table
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSにおけるスムーズスクロールの作成方法について現役エンジニアが解説【初心者向け】