Ryo Blog

〜WEB制作をスキルに〜

Category

ALL コーディング プレゼント 営業

Tag

#CSS #JavaScript #keyframes #position #swiper #お問い合わせ #アコーディオン #グラデーション #スクロール #スクロールヒント #セルフブラック #ハンバーガー #ブラウザ #ヘッダー #ホバー #ポートフォリオ #モーダル #ロードマップ #営業 #感謝

横スクロール可にしてスクロールヒントを 表示させよう！

2023.11.09

こんなことを説明しています！

  • overflow: scroll-xを使って外側の要素を固定し、内側の要素をスクロールできるようにする
  • スクロールヒントを表示させる

解説動画

コードの解説

HTMLの記述

<div class="inner">
    <h2 class="title">横スクロール可にして<br>スクロールヒントを入れよう</h2>
    <div class="img-wrap js-scrollable">
        <img src='./img/img1.jpg' alt='' width='1200' height='600' loading='lazy'>
    </div>
</div>

ポイント

  • スクロールさせたい要素をwrapなどで囲む
  • その親要素にscroll-hintを入れるためのclass[js-scrollable]を記述

CSSの記述

// ====================
// レイアウトを整えるcss
// ====================
.inner {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 0 40px;
}
.title {
    font-size: 40px;
    font-weight: 700;
    margin: 80px 0;
    text-align: center;
}
// ====================
// 今回のテーマ
// ====================
.img-wrap {
    width: 100%;
    overflow-x: scroll;
    border: 8px solid blue;
    padding-bottom: 20px;
}
img {
    width: 1200px;
    height: 600px;
    object-fit: cover;
}

ポイント

  • 親要素：表示させたい幅を指定
  • 親要素：overflow-x:scroll; で要素内の横スクロールを許可
  • 子要素：中身の実際の幅を指定

JavaScriptの記述

// デフォルトのままで良い場合
// new ScrollHint('.js-scrollable');

//カスタマイズしたい場合
new ScrollHint('.js-scrollable', {
    scrollHintIconAppendClass: 'scroll-hint-icon-white',//背景を白に
    i18n: {
        scrollable: 'スクロールできます' //表示されるテキストを変更
    }
});

ポイント

  • 使えるようにするためにはscroll-hint.cssとscroll-hint.min.jsを入れる。
    (下記参照)
  • カスタマイズをする必要がない場合は、上の部分の１行だけでOK
  • [js-scrollable] の部分はhtmlで記述したものに合わせる
  • 日本語にしたり、背景を白にしたい場合は２行目以降のように関数にして記述

CDN読み込みの場合

以下のタグをhead内に読み込む

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>

ダウンロードする場合

ScrollHintの公式ページの「Download」ボタンをクリックすると、ファイル一式をダウンロードできます。

記事一覧へ

Category

ALL コーディング プレゼント 営業

Tag

#CSS #JavaScript #keyframes #position #swiper #お問い合わせ #アコーディオン #グラデーション #スクロール #スクロールヒント #セルフブラック #ハンバーガー #ブラウザ #ヘッダー #ホバー #ポートフォリオ #モーダル #ロードマップ #営業 #感謝

X

Youtube

About

りょー｜29歳 フリーランス｜LPコーディング、WordPressサイト構築、ディレクション、Shopify (Liquid編集) を中心に活動しております！

完全未経験からWEB業界に入り
デイトラで3ヶ月間学習
営業開始後4日→ゼロイチ達成
開業3ヶ月後→月収50万達成
その後平均月収50万 (最高月収120万円)

WEBで独立したい！未経験からでもフリーランスになりたい！そんな方々のためになるような情報をこのブログを通して発信します！

コンサルのお申し込みはこちら Ryo's Portfolio

私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓

Products

Coming Soon

HP制作のご依頼

現在エンドクライアント様向けの事業サイトを作成中です。

WEB制作業務委託
のご依頼

LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。

コンテンツ

Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。

© Ryo Blog